Search completed in 1.55 seconds.
BudgetService.getBudget() - Web APIs
the
getbud
get() property of the bud
getservice interface returns a promise that resolves to an array of bud
getstate objects indicating the expected state of the bud
get at times in the future.
... syntax var apromise = bud
getservice.
getbud
get(); apromise.then(function(bud
getstate[]){ ...
... returns a promise that resolves to an instance of bud
getstate.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet
getbud
get experimentaldeprecatednon-standardchrome full support 55edge full support ≤79firefox ?
JS_GetPropertyAttrsGetterAndSetter
retrieve the attributes,
getter, and setter of a specified property.
... syntax jsbool js_
getpropertyattrs
getterandsetter(jscontext *cx, jsobject *obj, const char *name, unsigned int *attrsp, jsbool *foundp, jspropertyop *
getterp, jspropertyop *setterp); jsbool js_
getucpropertyattrs
getterandsetter(jscontext *cx, jsobject *obj, const jschar *name, size_t namelen, unsigned int *attrsp, jsbool *foundp, jspropertyop *
getterp, jspropertyop *setterp); jsbool js_
getpropertyattrs
getterandsetterbyid(jscontext *cx, jsobject *obj, jsid id, unsigned int *attrsp, jsbool *foundp, jspropertyop *
getterp, jspropertyop *setterp); // added in spidermonkey 1.8.1 name type description cx jscontext * the context in which to perform the property lookup.
... namelen size_t (only in js_
getucpropertyattrs
getterandsetter) the length of name in characters; or (size_t) -1 to indicate that name is null-terminated.
...And 8 more matches
InputEvent.getTargetRanges() - Web APIs
the
gettar
getranges() property of the inputevent interface returns an array of static ranges that will be affected by a change to the dom if the input event is not canceled.
... syntax var staticranges[] = inputevent.
gettar
getranges() parameters none.
... specifications specification status comment input events level 2the definition of '
gettar
getranges()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet
gettar
getranges experimentalchrome full support 60edge full support 79firefox no support noie no support noopera full support 47safari full support ...
BudgetService.getCost() - Web APIs
the
getcost() property of the bud
getservice interface returns a promise that resolves to a double indicating the worst-case background operation cost of the provided background operation.
... syntax var apromise = bud
getservice.
getcost(operation); apromise.then(function(somedouble){ ...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet
getcost experimentaldeprecatednon-standardchrome full support 55edge full support ≤79firefox ?
BudgetState.budgetAt - Web APIs
the bud
getat read-only property of the bud
getstate interface returns the anticipated processing bud
get at the specified time.
... syntax var bud
get = bud
getstate.bud
getat value a double.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbud
getat experimentaldeprecatednon-standardchrome full support 60edge full support ≤79firefox ?
GetTarget
this content is now available at nsiaccessiblerelation.
gettar
get().
GetTargets
this content is now available at nsiaccessiblerelation.
gettar
gets().
widget - Archive of obsolete content
the wid
get api is deprecated from firefox 29 onwards.
...in particular, for a simple button, try the action button or toggle button apis, and for a more complex wid
get try the toolbar or sidebar apis.
... usage "wid
gets" are small pieces of content that live in the firefox 4 add-on bar.
...And 105 more matches
EventTarget.addEventListener() - Web APIs
the eventtar
get method addeventlistener() sets up a function that will be called whenever the specified event is delivered to the tar
get.
... common tar
gets are element, document, and window, but the tar
get may be any object that supports events (such as xmlhttprequest).
... addeventlistener() works by adding a function or an object that implements eventlistener to the list of event listeners for the specified event type on the eventtar
get on which it's called.
...And 34 more matches
MediaDevices.getUserMedia() - Web APIs
the mediadevices.
getusermedia() method prompts the user for permission to use a media input which produces a mediastream with tracks containing the requested types of media.
... generally, you will access the mediadevices singleton object using navigator.mediadevices, like this: async function
getmedia(constraints) { let stream = null; try { stream = await navigator.mediadevices.
getusermedia(constraints); /* use the stream */ } catch(err) { /* handle the error */ } } similarly, using the raw promises directly, the code looks like this: navigator.mediadevices.
getusermedia(constraints) .then(function(stream) { /* use the stream */ }) .catch(function(err) { /* hand...
...le the error */ }); note: if the current document isn't loaded securely, navigator.mediadevices will be undefined, and you cannot use
getusermedia().
...And 30 more matches
Getting Started Guide
don't worry; the
getting started guide is short.
...it is a template class that acts, syntactically, just like an ordinary pointer in c or c++, i.e., you can apply * or -> to it to "
get to" what it points at.
...don box
gets into more of the details, traps, and pitfalls of com in effective com.
...And 27 more matches
gettext
plurals
gettext lets you define and use singular and plural forms of a string.
...different
gettext function name) for string which are supposed to support plurals.
... for instance, in php the default keyword for regular messages is
gettext() and _().
...And 25 more matches
An overview of accessible web applications and widgets - Accessibility
most javascript libraries offer a library of client-side wid
gets that mimic the behavior of familiar desktop interfaces.
...since the html4 specification doesn't provide built-in tags that semantically describe these kinds of wid
gets, developers typically resort to using generic elements such as <div> and <span>.
... while this results in a wid
get that looks like its desktop counterpart, there usually isn't enough semantic information in the markup to be usable by an assistive technology.
...And 21 more matches
getter - JavaScript
the
get syntax binds an object property to a function that will be called when that property is looked up.
... syntax {
get prop() { ...
... } } {
get [expression]() { ...
...And 20 more matches
NPN_GetURL - Archive of obsolete content
syntax #include <npapi.h> nperror npn_
geturl(npp instance, const char* url, const char* tar
get); parameters the function has the following parameters: instance pointer to the current plug-in instance.
... tar
get name of the tar
get window or frame, or one of the following special tar
get names.
...safest tar
get, even though, when used with a mailto or news url, this creates an extra blank the browser instance.
...And 18 more matches
Implementing the widget - Archive of obsolete content
warning: this tutorial relies on the since-removed wid
get api and no longer works with firefox.
... the wid
get api is deprecated from firefox 29 onwards.
...in particular, for a simple button, try the action button or toggle button apis, and for a more complex wid
get try the toolbar or sidebar apis.
...And 14 more matches
Creating Event Targets - Archive of obsolete content
the guide to event-driven programming with the sdk describes how to consume events: that is, how to listen to events generated by event tar
gets.
... with the sdk, it's also simple to implement your own event tar
gets.
...if you use the sdk's event framework for your event tar
gets, users of your module can listen for events using the sdk's standard event api.
...And 14 more matches
Getting started with CSS - Learn web development
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>
getting started with css</title> </head> <body> <h1>i am a level one heading</h1> <p>this is a paragraph of text.
... styling html elements by making our heading red we have already demonstrated that we can tar
get and style an html element.
... we do this by tar
geting an element selector — this is a selector that directly matches an html element name.
...And 14 more matches
API-provided widgets
to create a wid
get, you should pass a specification object with its desired properties.
... properties property description id the id of the wid
get (required).
... type a string indicating the type of wid
get.
...And 14 more matches
Comparison of Event Targets - Web APIs
event tar
gets it's easy to
get confused about which tar
get to examine when writing an event handler.
... this article should clarify the use of the tar
get properties.
... there are five tar
gets to consider: property defined in purpose event.tar
get dom event interface the dom element on the lefthand side of the call that triggered this event, eg: element.dispatchevent(event) event.currenttar
get dom event interface the eventtar
get whose eventlisteners are currently being processed.
...And 14 more matches
XRInputSource.targetRaySpace - Web APIs
the read-only xrinputsource property tar
getrayspace returns an xrspace (typically an xrreferencespace) representing the position and orientation of the tar
get ray in the virtual space.
... its native origin tracks the position of the origin point of the tar
get ray, and its orientation indicates the orientation of the controller device itself.
... these values, interpreted in the context of the input source's tar
getraymode, can be used both to fully interpret the device as an input source.
...And 13 more matches
XRTargetRayMode - Web APIs
the webxr device api enumerated type xrtar
getraymode describes the method by an input controller's tar
geting ray is being produced.
... tar
geting may be done by looking at the tar
get using a gaze-tracking system, pointing at the tar
get with a hand controller, glove, or motion-tracking system, or by tapping or clicking on the tar
get using a finger on a screen or with a mouse.
... typically a tar
get ray is drawn from the source of the tar
geting system along the tar
get ray in the direction in which the user is looking or pointing.
...And 13 more matches
Date.prototype.getYear() - JavaScript
the
getyear() method returns the year in the specified date according to local time.
... because
getyear() does not return full years ("year 2000 problem"), it is no longer used and has been replaced by the
getfullyear() method.
... syntax dateobj.
getyear() return value a number representing the year of the given date, according to local time, minus 1900.
...And 13 more matches
event/target - Archive of obsolete content
this module provides an exemplar eventtar
get object, that implements an interface for adding and removing event listeners of a specific type.
... eventtar
get is the base class for all objects in sdk on which events are emitted.
... also see the tutorial on implementing event tar
gets to
get started with this api.
...And 12 more matches
JS_GetProperty
syntax bool js_
getproperty(jscontext *cx, js::handleobject obj, const char *name, js::mutablehandlevalue vp); bool js_
getucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, js::mutablehandlevalue vp); bool js_
getpropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandlevalue vp); // added in spidermonkey 1.8.1 name type description cx jscontext * a context.
... namelen size_t (in js_
getucproperty only) the length of name, in characters; or -1 to indicate that name is null-terminated.
... description js_
getproperty examines a specified js object obj and its prototype chain for a property with the specified name.
...And 12 more matches
Window.getComputedStyle() - Web APIs
the window.
getcomputedstyle() method returns an object containing the values of all css properties of an element, after applying active stylesheets and resolving any basic computation those values may contain.
... syntax var style = window.
getcomputedstyle(element [, pseudoelt]); element the element for which to
get the computed style.
... examples in this example we style a <p> element, then retrieve those styles using
getcomputedstyle(), and print them into the text content of the <p>.
...And 12 more matches
Keyboard-navigable JavaScript widgets - Accessibility
overview web applications often use javascript to mimic desktop wid
gets such as menus, tree views, rich text fields, and tab panels.
... these wid
gets are typically composed of <div> and <span> elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do.
... this document describes techniques to make javascript wid
gets accessible with the keyboard.
...And 12 more matches
Tree Widget Changes - Archive of obsolete content
there are no changes to xul tree tags, however the id attribute is no longer required on treecol elements just to
get them to work.
...you can
get the columns object which implements the nsitreecolumns interface for a tree using the tree's columns property.
... from there you can
get specific columns, the current sort column, and position and size info about the columns.
...And 11 more matches
Document.getElementById() - Web APIs
the document method
getelementbyid() returns an element object representing the element whose id property matches the specified string.
... since element ids are required to be unique if specified, they're a useful way to
get access to a specific element quickly.
... if you need to
get access to an element which doesn't have an id, you can use queryselector() to find the element using any selector.
...And 11 more matches
handler.getOwnPropertyDescriptor() - JavaScript
the handler.
getownpropertydescriptor() method is a trap for object.
getownpropertydescriptor().
... syntax const p = new proxy(tar
get, {
getownpropertydescriptor: function(tar
get, prop) { } }); parameters the following parameters are passed to the
getownpropertydescriptor() method.
... tar
get the tar
get object.
...And 11 more matches
Performance budgets - Web Performance
a performance bud
get is a limit to prevent regressions.
... why do i need a performance bud
get?
... a bud
get exists to reflect your reachable goals.
...And 11 more matches
Getting started with HTML - Learn web development
to
get you started, this article defines elements, attributes, and all the other important terms you may have heard.
...if you
get really stuck, press the show solution button to see the answer.
...v class="controls"> <input id="reset" type="button" value="reset" /> <input id="solution" type="button" value="show solution" /> </div> html { font-family: 'open sans light',helvetica,arial,sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.
getelementbyid('code'); var reset = document.
getelementbyid('reset'); var solution = document.
getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutio...
...And 10 more matches
MediaDevices.getDisplayMedia() - Web APIs
the mediadevices interface's
getdisplaymedia() method prompts the user to select and grant permission to capture the contents of a display or portion thereof (such as a window) as a mediastream.
... syntax var promise = navigator.mediadevices.
getdisplaymedia(constraints); parameters constraints optional an optional mediastreamconstraints object specifying requirements for the returned mediastream.
... since
getdisplaymedia() requires a video track, the returned stream will have one even if no video track is expressly requested by the constraints object.
...And 10 more matches
NPN_GetURLNotify - Archive of obsolete content
« gecko plugin api reference « browser side plug-in api summary requests creation of a new stream with the contents of the specified url;
gets notification of the result.
... syntax #include <npapi.h> nperror npn_
geturlnotify(npp instance, const char* url, const char* tar
get, void* notifydata); parameters the function has the following parameters: instance pointer to the current plug-in instance.
... tar
get name of the tar
get window or frame, or one of several special tar
get names.
...And 9 more matches
GetObject - Archive of obsolete content
the
getobject function returns a reference to an automation object from a file.
... syntax
getobject([pathname] [, class]) parameters pathname full path and name of the file containing the object to retrieve.
... remarks the
getobject function is not supported in internet explorer 9 standards mode, internet explorer 10 standards mode, internet explorer 11 standards mode, and windows store apps or later.
...And 9 more matches
AudioParam.setTargetAtTime() - Web APIs
the settar
getattime() method of the audioparam interface schedules the start of a gradual change to the audioparam value.
... syntax var paramref = param.settar
getattime(tar
get, starttime, timeconstant); parameters tar
get the value the parameter will start to transition towards at the given start time.
... timeconstant the time-constant value, given in seconds, of an exponential approach to the tar
get value.
...And 9 more matches
EventTarget - Web APIs
eventtar
get is a dom interface implemented by objects that can receive events and may have listeners for them.
... element, document, and window are the most common event tar
gets, but other objects can be event tar
gets, too.
... many event tar
gets (including elements, documents, and windows) also support setting event handlers via onevent properties and attributes.
...And 9 more matches
XRInputSource.targetRayMode - Web APIs
the read-only xrinputsource property tar
getraymode indicates the method by which the tar
get ray for the input source should be generated and how it should be presented to the user.
... syntax let raymode = xrinputsource.tar
getraymode; value a domstring taken from the xrtar
getraymode enumerated type, indicating which method to use when generating and presenting the tar
get ray to the user.
...the tar
get ray will be drawn originating at the viewer's eyes and will follow the direction in which they're looking.
...And 9 more matches
Getting started with Svelte - Learn web development
also see the following for more information: "what is npm" on nodejs.org "introducing npx" on the npm blog "the easiest way to
get started with svelte" on the svelte blog creating your first svelte app the easiest way to create a starter app template is to just download the starter template application.
... making a couple of changes now that we have a general idea of how it all fits to
gether, we can start making a few changes.
...this file is the entry point for our app, and it initially looks like this: import app from './app.svelte'; const app = new app({ tar
get: document.body, props: { name: 'world' } }); export default app; main.js starts by importing the svelte component that we are going to use.
...And 8 more matches
Widget Wrappers
wid
get wrappers are objects that provide information about a wid
get.
... there are 'group' wrappers which provide information about the wid
get across all windows, and 'single' wrappers which provide information about a specific instance in a specific window.
... group wrapper methods forwindow() a method to obtain a single window wrapper for a wid
get, in the window awindow passed as the only argument.
...And 8 more matches
Document.getElementsByTagName() - Web APIs
the
getelementsbytagname method of document interface returns an htmlcollection of elements with the given tag name.
...the returned htmlcollection is live, meaning that it updates itself automatically to stay in sync with the dom tree without having to call document.
getelementsbytagname() again.
... syntax var elements = document.
getelementsbytagname(name); elements is a live htmlcollection (but see the note below) of found elements in the order they appear in the tree.
...And 8 more matches
FileSystemDirectoryEntry.getDirectory() - Web APIs
the filesystemdirectoryentry interface's method
getdirectory() returns a filesystemdirectoryentry object corresponding to a directory contained somewhere within the directory subtree rooted at the directory on which it's called.
... syntax filesystemdirectoryentry.
getdirectory([path][, options][, successcallback][, errorcallback]); parameters path optional a usvstring representing an absolute path or a path relative to the directory on which the method is called, describing which directory entry to return.
... errors if an error occurs and an errorcallback was specified, it
gets called with a single parameter: a fileerror object describing the error.
...And 8 more matches
FileSystemDirectoryEntry.getFile() - Web APIs
} the filesystemdirectoryentry interface's method
getfile() returns a filesystemfileentry object corresponding to a file contained somewhere within the directory subtree rooted at the directory on which it's called.
... syntax filesystemdirectoryentry.
getfile([path][, options][, successcallback][, errorcallback]); parameters path optional a usvstring specifying the path, relative to the directory on which the method is called, describing which file's entry to return.
... errors if an error occurs and an errorcallback was specified, it
gets called with a single parameter: a fileerror object describing the error.
...And 8 more matches
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
the xrreferencespace interface's
getoffsetreferencespace() method returns a new reference space object which describes the relative difference in position between the object on which the method is called and a given point in 3d space.
... the object returned by
getoffsetreferencespace() is an xrreferencespace if called on an xrreferencespace, or an xrboundedreferencespace if called on an object of that type.
... in other words, when you have an object in 3d space and need to position another object relative to that one, you can call
getoffsetreferencespace(), passing into it the position and orientation you want the second object to have relative to the position and orientation of the object on which you call
getoffsetreferencespace().
...And 8 more matches
handler.get() - JavaScript
the handler.
get() method is a trap for
getting a property value.
... syntax const p = new proxy(tar
get, {
get: function(tar
get, property, receiver) { } }); parameters the following parameters are passed to the
get() method.
... tar
get the tar
get object.
...And 8 more matches
Getting the page URL in NPAPI plugin - Archive of obsolete content
so, how do we
get at that page url, i.e.
...there are at least 3 solutions (quoting newsgroup posts): via window location from robert platt: //
get the dom window object.
... npn_
getvalue( m_pnpinstance, npnvwindownpobject, &swindowobj ); // create a "location" identifier.
...And 7 more matches
Element.getAttributeNS() - Web APIs
the
getattributens() method of the element interface returns the string value of the attribute with the specified namespace and name.
... syntax attrval = element.
getattributens(namespace, name) parameters namespace the namespace in which to look for the specified attribute.
... <svg xmlns="http://www.w3.org/2000/svg" xmlns:test="http://www.example.com/2014/test" width="40" height="40"> <circle id="tar
get" cx="12" cy="12" r="10" stroke="#444" stroke-width="2" fill="none" test:foo="hello namespaced attribute!"/> <script type="text/javascript"> var ns = 'http://www.example.com/2014/test'; var circle = document.
getelementbyid( 'tar
get' ); console.log( 'attribute test:foo: "' + circle.
getattributens( ns, 'foo' ) + '"' ); </script> </svg> in an html5 document the attribute has...
...And 7 more matches
Element.getElementsByTagName() - Web APIs
the element.
getelementsbytagname() method returns a live htmlcollection of elements with the given tag name.
...therefore, there is no need to call element.
getelementsbytagname() with the same element and arguments repeatedly if the dom changes in between calls.
... when called on an html element in an html document,
getelementsbytagname lower-cases the argument before searching for it.
...And 7 more matches
Event.currentTarget - Web APIs
the currenttar
get read-only property of the event interface identifies the current tar
get for the event, as the event traverses the dom.
... it always refers to the element to which the event handler has been attached, as opposed to event.tar
get, which identifies the element on which the event occurred and which may be its descendant.
... syntax var currenteventtar
get = event.currenttar
get; value eventtar
get examples event.currenttar
get is interesting to use when attaching the same event handler to several elements.
...And 7 more matches
EventTarget.removeEventListener() - Web APIs
the eventtar
get.removeeventlistener() method removes from the eventtar
get an event listener previously registered with eventtar
get.addeventlistener().
... the event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see matching event listeners for removal syntax tar
get.removeeventlistener(type, listener[, options]); tar
get.removeeventlistener(type, listener[, usecapture]); parameters type a string which specifies the type of event for which to remove an event listener.
... listener the eventlistener function of the event handler to remove from the event tar
get.
...And 7 more matches
KeyboardEvent.getModifierState() - Web APIs
the keyboardevent.
getmodifierstate() method returns the current state of the specified modifier key: true if the modifier is active (that is the modifier key is pressed or locked), otherwise, false.
... syntax var active = event.
getmodifierstate(keyarg); returns a boolean parameters keyarg a modifier key value.
... modifier keys on gecko when
getmodifierstate() returns true on gecko?
...And 7 more matches
WebGLRenderingContext.getUniformLocation() - Web APIs
part of the webgl api, the webglrenderingcontext method
getuniformlocation() returns the location of a specific uniform variable which is part of a given webglprogram.
... once you have the uniform's location, you can access the uniform itself using one of the other uniform access methods, passing in the uniform location as one of the inputs:
getuniform() returns the value of the uniform at the given location.
... syntax webgluniformlocation = webglrenderingcontext.
getuniformlocation(program, name); parameters program the webglprogram in which to locate the specified uniform variable.
...And 7 more matches
XRWebGLLayer.getNativeFramebufferScaleFactor() static method - Web APIs
the static method xrwebgllayer.
getnativeframebufferscalefactor() returns a floating-point scaling factor by which one can multiply the specified xrsession's resolution to
get the native resolution of the webxr device's frame buffer.
... syntax let nativescaling = xrwebgllayer.
getnativeframebufferscalefactor(session); parameters session the xrsession for which to return the native framebuffer scaling factor.
...in this case, the value returned by xrwebgllayer.
getnativeframebufferscalefactor() will be 2.0.
...And 7 more matches
:target - CSS: Cascading Style Sheets
the :tar
get css pseudo-class represents a unique element (the tar
get element) with an id matching the url's fragment.
... /* selects an element with an id matching the current url's fragment */ :tar
get { border: 2px solid black; } for example, the following url has a fragment (denoted by the # sign) that points to an element called section2: http://www.example.com/index.html#section2 the following element would be selected by a :tar
get selector when the current url is equal to the above: <section id="section2">example</section> syntax :tar
get examples a table of contents the :tar
get pseudo-class can be used to highlight the portion of a page that has been linked to from a table of contents.
... html <h3>table of contents</h3> <ol> <li><a href="#p1">jump to the first paragraph!</a></li> <li><a href="#p2">jump to the second paragraph!</a></li> <li><a href="#nowhere">this link goes nowhere, because the tar
get doesn't exist.</a></li> </ol> <h3>my fun article</h3> <p id="p1">you can tar
get <i>this paragraph</i> using a url fragment.
...And 7 more matches
Using the :target pseudo-class in selectors - CSS: Cascading Style Sheets
find out how you can use some simple css to draw attention to the tar
get of a url and improve the user's experience.
... picking a tar
get the pseudo-class :tar
get is used to style the tar
get element of a url containing a fragment identifier.
... for example, the url http://developer.mozilla.org/en/docs/using_the_:tar
get_selector#example contains the fragment identifier #example.
...And 7 more matches
Getting Started - Developer guides
this article guides you through the ajax basics and gives you some simple hands-on examples to
get you started.
...}; next, after declaring what happens when you receive the response, you need to actually make the request, by calling the open() and send() methods of the http request object, like this: httprequest.open('
get', 'http://www.example.org/some.file', true); httprequest.send(); the first parameter of the call to open() is the http request method –
get, post, head, or another method supported by your server.
...be sure to use the exact domain name on all of your pages or you will
get a "permission denied" error when you call open().
...And 7 more matches
Date.prototype.getTime() - JavaScript
the
gettime() method returns the number of milliseconds* since the unix epoch.
...
gettime() always uses utc for time representation.
... for example, a client browser in one timezone,
gettime() will be the same as a client browser in any other timezone.
...And 7 more matches
Object.prototype.__lookupGetter__() - JavaScript
the __lookup
getter__ method returns the function bound as a
getter to the specified property.
... syntax obj.__lookup
getter__(sprop) parameters sprop a string containing the name of the property whose
getter should be returned.
... return value the function bound as a
getter to the specified property.
...And 7 more matches
Reflect.getOwnPropertyDescriptor() - JavaScript
the static reflect.
getownpropertydescriptor() method is similar to object.
getownpropertydescriptor().
... syntax reflect.
getownpropertydescriptor(tar
get, propertykey) parameters tar
get the tar
get object in which to look for the property.
... propertykey the name of the property to
get an own property descriptor for.
...And 7 more matches
new.target - JavaScript
the new.tar
get pseudo-property lets you detect whether a function or constructor was called using the new operator.
... in constructors and functions invoked using the new operator, new.tar
get returns a reference to the constructor or function.
... in normal function calls, new.tar
get is undefined.
...And 7 more matches
Getting started with React - Learn web development
these components can be composed to
gether to create a full ui, and react abstracts away much of the rendering work, leaving you to concentrate on the ui design.
... </p> <a classname="app-link" href="https://reactjs.org" tar
get="_blank" rel="noopener noreferrer" > learn react </a> </header> </div> ); } export default app; the app.js file consists of three main parts: some import statements at the top, the app component in the middle, and an export statement at the bottom.
...this particular import syntax is not native to javascript module syntax — it comes from webpack, the tool create-react-app uses to bundle all our javascript files to
gether and serve them to the browser.
...And 6 more matches
JS_GET_CLASS
this macro was removed in spidermonkey 1.8.8 when the signature of js_
getclass() was changed to take only an object pointer.
... syntax #ifdef js_threadsafe #define js_
get_class(cx,obj) js_
getclass(cx, obj) #else #define js_
get_class(cx,obj) js_
getclass(obj) #endif parameter type description cx jscontext * any context associated with the runtime in which obj exists.
... obj jsobject * object to
get the class from.
...And 6 more matches
JS_GetScopeChain
js_
getscopechain has been removed in spidermonkey 1.8.7 with no identical replacement.
... when you only used this function to retrieve the scope chain's global, then you can use the function js_
getglobalforscopechain.
... syntax jsobject * js_
getscopechain(jscontext *cx); name type description cx jscontext * the context to query.
...And 6 more matches
Document.getElementsByClassName() - Web APIs
the
getelementsbyclassname method of document interface returns an array-like object of all child elements which have all of the given class name(s).
...you may also call
getelementsbyclassname() on any element; it will return only elements which are descendants of the specified root element with the given class name(s).
... syntax var elements = document.
getelementsbyclassname(names); // or: var elements = rootelement.
getelementsbyclassname(names); elements is a live htmlcollection of found elements.
...And 6 more matches
Document.getElementsByName() - Web APIs
the
getelementsbyname() method of the document object returns a nodelist collection of elements with a given name in the document.
... syntax var elements = document.
getelementsbyname(name); elements is a live nodelist collection, meaning it automatically updates as new elements with the same name are added to/removed from the document.
... example <!doctype html> <html lang="en"> <title>example: using document.
getelementsbyname</title> <input type="hidden" name="up"> <input type="hidden" name="down"> <script> var up_names = document.
getelementsbyname("up"); console.log(up_names[0].tagname); // displays "input" </script> </html> notes the name attribute can only be applied in (x)html documents.
...And 6 more matches
HTMLCanvasElement.getContext() - Web APIs
the htmlcanvaselement.
getcontext() method returns a drawing context on the canvas, or null if the context identifier is not supported.
...to
get a different drawing context object you need to pass a different contexttype or call the method on a different canvas element.
... syntax var ctx = canvas.
getcontext(contexttype); var ctx = canvas.
getcontext(contexttype, contextattributes); parameters contexttype is a domstring containing the context identifier defining the drawing context associated to the canvas.
...And 6 more matches
IDBIndex.getKey() - Web APIs
the
getkey() method of the idbindex interface returns an idbrequest object, and, in a separate thread, finds either the primary key that corresponds to the given key in this index or the first corresponding primary key, if key is set to an idbkeyrange.
...note that this doesn't return the whole record as idbindex.
get does.
... syntax var request = myindex.
getkey(key); parameters key optional a key or idbkeyrange that identifies a record to be retrieved.
...And 6 more matches
MouseEvent.relatedTarget - Web APIs
the mouseevent.relatedtar
get read-only property is the secondary tar
get for the mouse event, if there is one.
... that is: event name tar
get relatedtar
get mouseenter the eventtar
get the pointing device entered to the eventtar
get the pointing device exited from mouseleave the eventtar
get the pointing device exited from the eventtar
get the pointing device entered to mouseout the eventtar
get the pointing device exited from the eventtar
get the pointing device entered to mouseover the eventtar
get the pointing device entered to the eventtar
get the pointing device exited from dragenter the eventtar
get the pointing device entered to the eventtar
get the pointing device exited from dragexit the eventtar
get the pointing device exited from the eventtar
get the pointing device entered to for events with no...
... secondary tar
get, relatedtar
get returns null.
...And 6 more matches
RTCPeerConnection.getStats() - Web APIs
the rtcpeerconnection method
getstats() returns a promise which resolves with data providing statistics about either the overall connection or about the specified mediastreamtrack.
... syntax promise = rtcpeerconnection.
getstats(selector) parameters selector optional a mediastreamtrack for which to gather statistics.
... obsolete syntax previously,
getstats() used success and failure callbacks to report the results to you, instead of using a promise.
...And 6 more matches
Touch.target - Web APIs
summary returns the element (eventtar
get) on which the touch contact started when it was first placed on the surface, even if the touch point has since moved outside the interactive area of that element or even been removed from the document.
... note that if the tar
get element is removed from the document, events will still be tar
geted at it, and hence won't necessarily bubble up to the window or document anymore.
... if there is any risk of an element being removed while it is being touched, the best practice is to attach the touch listeners directly to the tar
get.
...And 6 more matches
XMLHttpRequestEventTarget - Web APIs
xmlhttprequesteventtar
get is the interface that describes the event handlers you can implement in an object that will handle events for an xmlhttprequest.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlh...
...ttprequesteventtar
get" tar
get="_top"><rect x="151" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtar
get</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties xmlhttprequesteventtar
get.onabort contains the function to call when a request is aborted and the abort event is received by this object.
...And 6 more matches
handler.getPrototypeOf() - JavaScript
the handler.
getprototypeof() method is a trap for the [[
getprototypeof]] internal method.
... syntax const p = new proxy(obj, {
getprototypeof(tar
get) { ...
... } }); parameters the following parameter is passed to the
getprototypeof() method.
...And 6 more matches
Getting started with Ember - Learn web development
previous overview: client-side javascript frameworks next in our first ember article we will look at how ember works and what it's useful for, install the ember toolchain locally, create a sample app, and then do some initial setup to
get it ready for development.
... ember has clear conventions that are useful for enforcing consistency and helping team members
get up to speed quickly.
...
getting started the rest of the ember material you'll find here consists of a multi-part tutorial, in which we'll make a version of the classic todomvc sample app, teaching you how to use the essentials of the ember framework along the way.
...And 5 more matches
FC_GetInfo
name fc_
getinfo - return general information about the pkcs #11 library.
... syntax ck_rv fc_
getinfo(ck_info_ptr pinfo); parameters fc_
getinfo has one parameter: pinfo points to a ck_info structure description fc_
getinfo returns general information about the pkcs #11 library.
... a user may call fc_
getinfo without logging into the token (to assume the nss user role).
...And 5 more matches
Getting SpiderMonkey source code
you can
get the spidermonkey source code in gzipped form or directly from the mercurial repository.
... downloading gzipped spidermonkey source code you can download gzipped spidermonkey source code from the following urls: http://ftp.mozilla.org/pub/spidermonkey/releases/ http://ftp.mozilla.org/pub/spidermonkey/prereleases/ here is a command-line example of downloading and unzipping spidermonkey source code version 59.0: mkdir mozilla cd mozilla w
get http://ftp.mozilla.org/pub/spidermonkey/prereleases/59/pre1/mozjs-59.0a1.0.tar.bz2 tar xvf mozjs-59.0a1.0.tar.bz2 these commands should work on most platforms including windows, as long as on windows you are using the mozillabuild bash shell.
...
getting the latest spidermonkey source code from mercurial the mercurial repository at https://hg.mozilla.org/mozilla-central/ hosts the latest spidermonkey sources.
...And 5 more matches
JS_GetStringBytes
syntax char * js_
getstringbytes(jsstring *str); const char * js_
getstringbytesz(jscontext *cx, jsstring *str); // added in jsapi 1.8.2 name type description cx jscontext * (js_
getstringbytesz and js_encodestring only) a context.
... description js_
getstringbytes and js_
getstringbytesz convert the specified javascript string, str, to a c string (an array of 8-bit chars).
...on failure, js_
getstringbytes returns a pointer to a null-terminated empty string; js_
getstringbytesz returns null.
...And 5 more matches
nsIEventTarget
xpcom/threads/nsieventtar
get.idlscriptable a tar
get for events.
... events may be sent to this tar
get from any thread by calling the dispatch method.
... methods dispatch() dispatches an event to this event tar
get.
...And 5 more matches
DataTransferItem.webkitGetAsEntry() - Web APIs
if the item described by the datatransferitem is a file, webkit
getasentry() returns a filesystemfileentry or filesystemdirectoryentry representing it.
... this function is implemented as webkit
getasentry() in non-webkit browsers including firefox at this time; it may be renamed to simply
getasentry() in the future, so you should code defensively, looking for both.
... syntax datatransferitem.webkit
getasentry(); parameters none.
...And 5 more matches
Document.getElementsByTagNameNS() - Web APIs
syntax elements = document.
getelementsbytagnamens(namespace, name) elements is a live nodelist (but see the note below) of found elements in the order they appear in the tree.
...see the note in browser compatibility section in element.
getelementsbytagnamens for details.
... example in the following example
getelementsbytagnamens starts from a particular parent element, and searches topdown recursively through the dom from that parent element, looking for child elements matching the tag name parameter.
...And 5 more matches
Element.getAttribute() - Web APIs
the
getattribute() method of the element interface returns the value of a specified attribute on the element.
... syntax let attribute = element.
getattribute(attributename); where attribute is a string containing the value of attributename.
... attributename is the name of the attribute whose value you want to
get.
...And 5 more matches
TouchEvent.targetTouches - Web APIs
the tar
gettouches read-only property is a touchlist listing all the touch objects for touch points that are still in contact with the touch surface and whose touchstart event occurred inside the same tar
get element as the current tar
get element.
... syntax var touches = touchevent.tar
gettouches; return value touches a touchlist listing all the touch objects for touch points that are still in contact with the touch surface and whose touchstart event occurred inside the same tar
get element as the current tar
get element.
... example this example illustrates the touchevent object's touchevent.tar
gettouches property.
...And 5 more matches
WebGLRenderingContext.getActiveUniform() - Web APIs
the webglrenderingcontext.
getactiveuniform() method of the webgl api returns a webglactiveinfo object containing size, type, and name of a uniform attribute.
... syntax webglactiveinfo webglrenderingcontext.
getactiveuniform(program, index); parameters program a webglprogram specifying the webgl shader program from which to obtain the uniform variable's information.
... index a gluint specifying the index of the uniform attribute to
get.
...And 5 more matches
Object.getOwnPropertyNames() - JavaScript
the object.
getownpropertynames() method returns an array of all properties (including non-enumerable properties except for those which use symbol) found directly in a given object.
... syntax object.
getownpropertynames(obj) parameters obj the object whose enumerable and non-enumerable properties are to be returned.
... description object.
getownpropertynames() returns an array whose elements are strings corresponding to the enumerable and non-enumerable properties found directly in a given object obj.
...And 5 more matches
Reflect.get() - JavaScript
the static reflect.
get() method works like
getting a property from an object (tar
get[propertykey]) as a function.
... syntax reflect.
get(tar
get, propertykey[, receiver]) parameters tar
get the tar
get object on which to
get the property.
... propertykey the name of the property to
get.
...And 5 more matches
NPN_GetValue - Archive of obsolete content
syntax #include <npapi.h> nperror npn_
getvalue(npp instance, npnvariable variable, void *value); parameters this function has the following parameters: instance pointer to the current plug-in instance.
... variable information the call
gets.
... values for npnvariable: npnvxdisplay =1: unix only: returns the current display npnvxtappcontext: unix only: returns the application's xtappcontext npnvnetscapewindow: ms windows and unix/x11 only: ms windows:
gets the native window on which plug-in drawing occurs; returns hwnd unix/x11:
gets the browser toplevel window in which the plug-in is displayed; returns window npnvjavascriptenabledbool: tells whether javascript is enabled; true=javascript enabled, false=not enabled npnvasdenabledbool: tells whether smartupdate (former name: asd) is enabled; true=smartupdate enabled, false=not enabled npnvisofflinebool: tells whether offline mode is enabled; true=offline mode enabled, false=not enabled npnvtoolkit: npnvsupportsxembedbool: npnvwind...
...And 4 more matches
JS_GetClass
syntax const jsclass * js_
getclass(jsobject *obj); name type description cx jscontext * any context associated with the runtime in which obj exists.
... obj jsobject * object to
get the class from.
... in spidermonkey versions prior to spidermonkey 1.8.8, js_
getclass took both a jscontext* and a jsobject* as arguments in thread-safe builds, and in non-thread-safe builds it took only a jsobject*.
...And 4 more matches
JS_GetFunctionId
get a function's name as a jsstring.
... syntax jsstring * js_
getfunctionid(jsfunction *fun); jsstring * js_
getfunctiondisplayid(jsfunction *fun); // added in spidermonkey 17 name type description fun jsfunction * a javascript function.
... description js_
getfunctionid returns the name of a function, fun, as a jsstring, or null if fun is unnamed.
...And 4 more matches
JS_GetGCParameter
syntax uint32_t js_
getgcparameter(jsruntime *rt, jsgcparamkey key); void js_setgcparameter(jsruntime *rt, jsgcparamkey key, uint32_t value); uint32_t js_
getgcparameterforthread(jscontext *cx, jsgcparamkey key); // added in spidermonkeysidebar 17 void js_setgcparameterforthread(jscontext *cx, jsgcparamkey key, uint32_t value); // added in spidermonkeysidebar 17 name type description rt jsruntime * the runtime to configure.
... key jsgcparamkey specifies which garbage collection parameter to
get or set.
... typedef enum jsgcparamkey { jsgc_max_bytes, jsgc_max_malloc_bytes, jsgc_max_nursery_bytes, jsgc_bytes, jsgc_number, jsgc_mode, jsgc_unused_chunks, jsgc_total_chunks, jsgc_slice_time_bud
get, jsgc_mark_stack_limit, jsgc_high_frequency_time_limit, jsgc_high_frequency_low_limit, jsgc_high_frequency_high_limit, jsgc_high_frequency_heap_growth_max, jsgc_high_frequency_heap_growth_min, jsgc_low_frequency_heap_growth, jsgc_dynamic_heap_growth, jsgc_dynamic_mark_slice, jsgc_allocation_threshold, jsgc_min_empty_chunk_count, jsgc_max_empty_chunk_count, jsgc_compaction_enabled, jsgc_allocation_threshold_factor, ...
...And 4 more matches
JS_GetParent
get the parent object of a given object.
... syntax jsobject * js_
getparent(jsobject *obj); name type description obj jsobject * object for which to retrieve the parent.
... description js_
getparent retrieves the parent object of obj, or null if obj does not have a parent.
...And 4 more matches
JS_GetPrivate
syntax void * js_
getprivate(jsobject *obj); name type description obj jsobject * an object whose jsclass has the jsclass_has_private flag.
... description js_
getprivate accesses an object's private data field.
... (but consider using js_valuetofunction instead to access it.) warning: it is dangerous to call js_
getprivate on a jsobject * unless the object's jsclass is known.
...And 4 more matches
JS_GetStringCharAt
syntax bool js_
getstringcharat(jscontext *cx, jsstring *str, size_t index, char16_t *res); char16_t js_
getflatstringcharat(jsflatstring *str, size_t index); name type description cx jscontext * the context in which to create the new string.
... str jsstring * or jsflatstring * the string to
get character.
... res char16_t * (js_
getstringcharat only) out parameter.
...And 4 more matches
BudgetService - Web APIs
the bud
getservice interface of the web bud
get api provides a programmatic interface to the user agent’s bud
get service.
... methods bud
getservice.
getcost() returns a promise that resolves to a double, indicating the worst-case background operation cost of the provided background operation.
... bud
getservice.
getbud
get() returns a promise that resolves to an array of bud
getstate objects, indicating the expected state of the bud
get at times in the future.
...And 4 more matches
DataTransfer.getData() - Web APIs
the datatransfer.
getdata() method retrieves drag data (as a domstring) for the specified type.
... syntax datatransfer.
getdata(format); arguments format a domstring representing the type of data to retrieve.
...this may result in unexpected behavior, being datatransfer.
getdata() not returning an expected value.
...And 4 more matches
DataTransferItem.getAsFile() - Web APIs
if the item is a file, the datatransferitem.
getasfile() method returns the drag data item's file object.
... syntax file = datatransferitem.
getasfile(); parameters none.
... example this example shows the use of the
getasfile() method in a drop event handler.
...And 4 more matches
DataTransferItem.getAsString() - Web APIs
the datatransferitem.
getasstring() method invokes the given callback with the drag data item's string data as the argument if the item's kind is a plain unicode string (i.e.
... syntax datatransferitem.
getasstring(callback); parameters callback a callback function that has access to the data transfer item's string data.
... example this example shows the use of the
getasstring() method as an inline function in a drop event handler.
...And 4 more matches
IDBIndex.get() - Web APIs
the
get() method of the idbindex interface returns an idbrequest object, and, in a separate thread, finds either the value in the referenced object store that corresponds to the given key or the first corresponding value, if key is set to an idbkeyrange.
... syntax var request = myindex.
get(key); parameters key optional a key or idbkeyrange that identifies the record to be retrieved.
... example in the following example we open a transaction and an object store, then
get the index lname from a simple contacts database.
...And 4 more matches
IDBObjectStore.get() - Web APIs
the
get() method of the idbobjectstore interface returns an idbrequest object, and, in a separate thread, returns the object store selected by the specified key.
... syntax var request = objectstore.
get(key); parameters key the key or key range that identifies the record to be retrieved.
... example in the following code snippet, we open a read/write transaction on our database and
get one specific record from object store using
get() — a sample record with the key "walk dog".
...And 4 more matches
Navigator.getUserMedia() - Web APIs
the deprecated navigator.
getusermedia() method prompts the user for permission to use up to one video input device (such as a camera or shared screen) and up to one audio input device (such as a microphone) as the source for a mediastream.
...please use the newer navigator.mediadevices.
getusermedia() instead.
... syntax navigator.
getusermedia(constraints, successcallback, errorcallback); parameters constraints a mediastreamconstraints object specifying the types of media to request, along with any requirements for each type.
...And 4 more matches
RTCRtpReceiver.getCapabilities() static function - Web APIs
the static function rtcrtpreceiver.
getcapabilities() returns an rtcrtpcapabilities object describing the codecs and capabilities supported by rtcrtpreceivers on the current device.
... you can, similarly, obtain the capabilities of rtcrtpsenders by calling the static function rtcrtpsender.
getcapabilities().
... syntax let rtpcapabilities = rtcrtpreceiver.
getcapabilities(kind); parameters kind a domstring indicating the type of media for which you wish to
get the device's capability to receive.
...And 4 more matches
RTCRtpSender.getCapabilities() static function - Web APIs
the static function rtcrtpsender.
getcapabilities() returns an rtcrtpcapabilities object describing the codecs and capabilities supported by the rtcrtpsender.
... you can, similarly, obtain the capabilities of rtcrtpreceivers by calling the static function rtcrtpreceiver.
getcapabilities().
... syntax let rtpcapabilities = rtcrtpsender.
getcapabilities(kind); parameters kind a domstring indicating the type of media for which you wish to
get the sender's capability to receive.
...And 4 more matches
WebGLRenderingContext.getBufferParameter() - Web APIs
the webglrenderingcontext.
getbufferparameter() method of the webgl api returns information about the buffer.
... syntax any gl.
getbufferparameter(tar
get, pname); parameters tar
get a glenum specifying the tar
get buffer object.
... examples gl.
getbufferparameter(gl.array_buffer, gl.buffer_size); specifications specification status comment webgl 1.0the definition of '
getbufferparameter' in that specification.
...And 4 more matches
WebGLRenderingContext.getFramebufferAttachmentParameter() - Web APIs
the webglrenderingcontext.
getframebufferattachmentparameter() method of the webgl api returns information about a framebuffer's attachment.
... syntax any gl.
getframebufferattachmentparameter(tar
get, attachment, pname); parameters tar
get a glenum specifying the binding point (tar
get).
... exceptions a gl.invalid_enum error is thrown if tar
get is not gl.framebuffer, gl.draw_framebuffer, gl.read_framebuffer or if attachment is not one of the accepted attachment points.
...And 4 more matches
WebGLRenderingContext.getUniform() - Web APIs
the webglrenderingcontext.
getuniform() method of the webgl api returns the value of a uniform variable at a given location.
... syntax any gl.
getuniform(program, location); parameters program a webglprogram containing the uniform attribute.
... location a webgluniformlocation object containing the location of the uniform attribute to
get.
...And 4 more matches
XRFrame.getViewerPose() - Web APIs
the
getviewerpose() method, a member of the xrframe interface, returns a xrviewerpose object which describes the viewer's pose (position and orientation) relative to the specified reference space.
... see the
getpose() method for a way to calculate a pose that represents the difference between two spaces.
... syntax var xrviewerpose = xrframe.
getviewerpose(referencespace); parameters referencespace an xrreferencespace object specifying the space to use as the reference point or base for the computation of the viewer's current pose.
...And 4 more matches
Date.prototype.getFullYear() - JavaScript
the
getfullyear() method returns the year of the specified date according to local time.
... use this method instead of the
getyear() method.
... syntax dateobj.
getfullyear() return value a number corresponding to the year of the given date, according to local time.
...And 4 more matches
WebAssembly.Table.prototype.get() - JavaScript
the
get() prototype method of the webassembly.table() object retrieves a function reference stored at a given index.
... syntax table.
get(index); parameters index the index of the function reference you want to retrieve.
... examples using
get the following example (see table.html on github, and view it live also) compiles and instantiates the loaded table.wasm byte code using the webassembly.instantiatestreaming() method.
...And 4 more matches
Getting started with the Web - Learn web development
getting started with the web is a concise series introducing you to the practicalities of web development.
...you won't build another facebook right away, but it's not hard to
get your own simple website online, so we'll start there.
... by working through the articles listed below in order, you will go from nothing to
getting your first webpage online.
...And 3 more matches
Getting started with Vue - Learn web development
in this article we'll look at a little bit of vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and
get it prepared to start building our example.
... if you've never run the vue cli before, you'll
get one more question — you'll be asked to choose a package manager.
... public: this directory contains static assets that are published, but not processed by webpack during build (with one exception; index.html
gets some processing).
...And 3 more matches
How to get a stacktrace for a bug report
this article describes how to use the mozilla crash reporter (breakpad) to
get a crash id, which our engineers can use to
get a stacktrace, and alternative ways to
get a stacktrace if you can't
get a crash id.
... how to
get a crash id with the mozilla crash reporter 1.
... you can prefix a "bp-" to the beginning of an id to make bugzilla turn it into a link: bp-a70759c6-1295-4160-aa30-bc4772090918 how to
get the crash id if firefox crashes on startup if firefox crashes on startup you can still access your submitted crash reports.
...And 3 more matches
DownloadTarget
a downloadtar
get object represents the tar
get of a download, for example a file in the global downloads directory, or a file in the system temporary directory.
... method overview promise refresh() properties attribute type description exists read only boolean indicates whether or not the tar
get file exists.
... path read only string the path of the tar
get file.
...And 3 more matches
PR_GetFileInfo
gets information about a file with a specified pathname.
... syntax #include <prio.h> prstatus pr_
getfileinfo( const char *fn, prfileinfo *info); parameters the function has the following parameters: fn the pathname of the file to
get information about.
...on output, pr_
getfileinfo writes information about the given file to the file information object.
...And 3 more matches
PR_GetFileInfo64
gets information about a file with a specified pathname.
... syntax #include <prio.h> prstatus pr_
getfileinfo64( const char *fn, prfileinfo64 *info); parameters the function has the following parameters: fn the pathname of the file to
get information about.
...on output, pr_
getfileinfo64 writes information about the given file to the file information object.
...And 3 more matches
FC_GetFunctionList
name fc_
getfunctionlist -
get a pointer to the list of function pointers in the fips mode of operation.
... syntax ck_rv fc_
getfunctionlist(ck_function_list_ptr *ppfunctionlist); parameters fc_
getfunctionlist has one parameter: ppfunctionlist [output] the address of a variable that will receive a pointer to the list of function pointers.
... description fc_
getfunctionlist stores in *ppfunctionlist a pointer to the nss cryptographic module's list of function pointers in the fips mode of operation.
...And 3 more matches
JS_GetConstructor
syntax jsobject * js_
getconstructor(jscontext *cx, js::handle<jsobject*> proto); name type description cx jscontext * a context.
... description js_
getconstructor retrieves the constructor property of a given object, obj.
... if the result is a function object, js_
getconstructor returns a pointer to that object.
...And 3 more matches
JS_GetFunctionObject
syntax jsobject * js_
getfunctionobject(jsfunction *fun); name type description fun jsfunction * pointer to a js function.
... description js_
getfunctionobject returns the javascript function object for a specified function pointer, fun.
...in other cases, the object returned by js_
getfunctionobject is not necessarily safe to call and should not be exposed to script.
...And 3 more matches
JS_GetGlobalObject
(in javascript, global variables are stored as properties of the global object.) syntax jsobject * js_
getglobalobject(jscontext *cx); name type description cx jscontext * the context from which to retrieve the global object.
... description this function is obsolete: use js_
getglobalforobject or js_
getglobalforscopechain instead.
...js_
getglobalobject retrieves the global object for a specified jscontext *, cx.
...And 3 more matches
JS_GetInstancePrivate
syntax void * js_
getinstanceprivate(jscontext *cx, js::handle<jsobject*> obj, const jsclass *clasp, js::callargs *args); // added in jsapi 32 void * js_
getinstanceprivate(jscontext *cx, js::handle<jsobject*> obj, const jsclass *clasp, jsval *argv); // obsolete since jsapi 32 name type description cx jscontext * a context.
... description js_
getinstanceprivate determines if a javascript object, obj, is an instance of a given jsclass, clasp, and if it is, returns a pointer to the object's private data.
...note that if obj is an instance of clasp, but there is no private data currently associated with the object, or the object cannot have private data, js_
getinstanceprivate also returns null.
...And 3 more matches
JS_GetLatin1InternedStringChars
this article covers features introduced in spidermonkey 38
get the chars of an interned string.
... syntax const js::latin1char * js_
getlatin1internedstringchars(const js::autocheckcannotgc &nogc, jsstring *str); const char16_t * js_
gettwobyteinternedstringchars(const js::autocheckcannotgc &nogc, jsstring *str); name type description cx jscontext * a context.
... str jsstring * a string to
get characters.
...And 3 more matches
JS_GetLatin1StringCharsAndLength
this article covers features introduced in spidermonkey 38
get the chars and the length of a string.
... syntax const js::latin1char * js_
getlatin1stringcharsandlength(jscontext *cx, const js::autocheckcannotgc &nogc, jsstring *str, size_t *length); const char16_t * js_
gettwobytestringcharsandlength(jscontext *cx, const js::autocheckcannotgc &nogc, jsstring *str, size_t *length); name type description cx jscontext * a context.
... str jsstring * a string to
get characters.
...And 3 more matches
JS_GetRegExpFlags
this article covers features introduced in spidermonkey 17
get the flags of the given regexp object.
... syntax unsigned js_
getregexpflags(jscontext *cx, handleobject obj) name type description cx jscontext * a context.
... obj js::handleobject the object to
get the flags.
...And 3 more matches
JS_GetRegExpSource
this article covers features introduced in spidermonkey 17
get the source string of the given regexp object.
... syntax jsstring * js_
getregexpsource(jscontext *cx, js::handleobject obj); name type description cx jscontext * a context.
... obj js::handleobject the object to
get the source string.
...And 3 more matches
nsIXMLHttpRequestEventTarget
1.0 66 introduced gecko 1.9.1 inherits from: nsidomeventtar
get last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) attributes attribute type description onabort nsidomeventlistener a javascript function object that
gets invoked if the operation is canceled by the user.
... onerror nsidomeventlistener a javascript function object that
gets invoked if the operation fails to complete due to an error.
... onload nsidomeventlistener a javascript function object that
gets invoked when the operation is successfully completed.
...And 3 more matches
AnalyserNode.getFloatFrequencyData() - Web APIs
the
getfloatfrequencydata() method of the analysernode interface copies the current frequency data into a float32array array passed into it.
... if you need higher performance and don't care about precision, you can use analysernode.
getbytefrequencydata() instead, which works on a uint8array.
... syntax var audioctx = new audiocontext(); var analyser = audioctx.createanalyser(); var dataarray = new float32array(analyser.frequencybincount); // float32array should be the same length as the frequencybincount void analyser.
getfloatfrequencydata(dataarray); // fill the float32array with data returned from
getfloatfrequencydata() parameters array the float32array that the frequency domain data will be copied to.
...And 3 more matches
AudioTrackList.getTrackById() - Web APIs
the audiotracklist method
gettrackbyid() returns the first audiotrack object from the track list whose id matches the specified string.
... syntax var thetrack = audiotracklist.
gettrackbyid(id); paramters id a domstring indicating the id of the track to locate within the track list.
...this function allows the game to disable a specific character's audio in order to adjust the movie's performance based on occurrences within the game; if the character's dialog isn't relevant, it
gets left out.
...And 3 more matches
CanvasRenderingContext2D.getImageData() - Web APIs
the canvasrenderingcontext2d method
getimagedata() of the canvas 2d api returns an imagedata object representing the underlying pixel data for a specified portion of the canvas.
... you can find more information about
getimagedata() and general manipulation of canvas contents in pixel manipulation with canvas.
... syntax ctx.
getimagedata(sx, sy, sw, sh); parameters sx the x-axis coordinate of the top-left corner of the rectangle from which the imagedata will be extracted.
...And 3 more matches
CanvasRenderingContext2D.getLineDash() - Web APIs
the
getlinedash() method of the canvas 2d api's canvasrenderingcontext2d interface
gets the current line dash pattern.
... syntax ctx.
getlinedash(); return value an array of numbers that specify distances to alternately draw a line and a gap (in coordinate space units).
... if the number, when setting the elements, is odd, the elements of the array
get copied and concatenated.
...And 3 more matches
Crypto.getRandomValues() - Web APIs
the crypto.
getrandomvalues() method lets you
get cryptographically strong random values.
...
getrandomvalues() is the only member of the crypto interface which can be used from an insecure context.
... syntax typedarray = cryptoobj.
getrandomvalues(typedarray); parameters typedarray an integer-based typedarray, that is an int8array, a uint8array, an int16array, a uint16array, an int32array, or a uint32array.
...And 3 more matches
DocumentOrShadowRoot.getSelection() - Web APIs
the
getselection() property of the documentorshadowroot interface returns a selection object representing the range of text selected by the user, or the current position of the caret.
... syntax var selection = documentorshadowrootinstance.
getselection() parameters none.
... example function foo() { var selobj = document.
getselection(); alert(selobj); var selrange = selobj.
getrangeat(0); // do stuff with the range } notes string representation of the selection object in javascript, when an object is passed to a function expecting a string (like window.alert()), the object's tostring() method is called and the returned value is passed to the function.
...And 3 more matches
Element.getBoundingClientRect() - Web APIs
the element.
getboundingclientrect() method returns the size of an element and its position relative to the viewport.
... syntax domrect = element.
getboundingclientrect(); value the returned value is a domrect object which is the union of the rectangles returned by
getclientrects() for the element, i.e., the css border-boxes associated with the element.
... if you need the bounding rectangle relative to the top-left corner of the document, just add the current scrolling position to the top and left properties (these can be obtained using window.scrollx and window.scrolly) to
get a bounding rectangle which is independent from the current scrolling position.
...And 3 more matches
Element.getElementsByClassName() - Web APIs
the element method
getelementsbyclassname() returns a live htmlcollection which contains every descendant element which has the specified class name or names.
... the method
getelementsbyclassname() on the document interface works essentially the same way, except it acts on the entire document, starting at the document root.
... syntax var elements = element.
getelementsbyclassname(names); parameters names a domstring containing one or more class names to match on, separated by whitespace.
...And 3 more matches
Element.getElementsByTagNameNS() - Web APIs
the element.
getelementsbytagnamens() method returns a live htmlcollection of elements with the given tag name belonging to the given namespace.
... it is similar to document.
getelementsbytagnamens, except that its search is restricted to descendants of the specified element.
... syntax elements = element.
getelementsbytagnamens(namespaceuri, localname) elements is a live htmlcollection of found elements in the order they appear in the tree.
...And 3 more matches
Event.explicitOriginalTarget - Web APIs
the explicit original tar
get of the event.
... (mozilla-specific) if the event was retar
geted for some reason other than an anonymous boundary crossing, this will be set to the tar
get before the retar
geting occurs.
... for example, mouse events are retar
geted to their parent node when they happen over text nodes (see bug 185889), and in that case currenttar
get will show the parent and explicitoriginaltar
get will show the text node.
...And 3 more matches
Event.target - Web APIs
the tar
get property of the event interface is a reference to the object onto which the event was dispatched.
... it is different from event.currenttar
get when the event handler is called during the bubbling or capturing phase of the event.
... syntax const thetar
get = someevent.tar
get; value eventtar
get example the event.tar
get property can be used in order to implement event delegation.
...And 3 more matches
FileSystemEntry.getParent() - Web APIs
the filesystementry interface's method
getparent() obtains a filesystemdirectoryentry.
... syntax filesystementry.
getparent(successcallback[, errorcallback]); parameters successcallback a function which is called when the parent directory entry has been retrieved.
... fileentry.
getparent(function(parent) { fileentry.moveto(parent, "newname.html", function(updatedentry) { console.log("file " + fileentry.name + " renamed to newname.html."); }); }, function(error) { console.error("an error occurred: unable to rename " + fileentry.name + " to newname.html."); }); this is accomplished by first obtaining a filesystemdirectoryentry object representing the direct...
...And 3 more matches
FocusEvent.relatedTarget - Web APIs
the focusevent.relatedtar
get read-only property is the secondary tar
get, depending on the type of event: event name tar
get relatedtar
get blur the eventtar
get losing focus the eventtar
get receiving focus (if any).
... focus the eventtar
get receiving focus the eventtar
get losing focus (if any) focusin the eventtar
get receiving focus the eventtar
get losing focus (if any) focusout the eventtar
get losing focus the eventtar
get receiving focus (if any) note that many elements can't have focus, which is a common reason for relatedtar
get to be null.
... relatedtar
get may also be set to null for security reasons, like when tabbing in or out of a page.
...And 3 more matches
Headers.get() - Web APIs
the
get() method of the headers interface returns a byte string of all the values of a header within a headers object with a given name.
... syntax myheaders.
get(name); parameters name the name of the http header whose values you want to retrieve from the headers object.
... example creating an empty headers object is simple: var myheaders = new headers(); // currently empty myheaders.
get('not-set'); // returns null you could add a header to this using headers.append, then retrieve it using
get(): myheaders.append('content-type', 'image/jpeg'); myheaders.
get('content-type'); // returns "image/jpeg" if the header has multiple values associated with it, the byte string will contain all the values, in the order they were added to the headers object: myheaders.append('accept-encoding', 'deflate'); myheaders.append('accept-encoding...
...And 3 more matches
Node.getRootNode() - Web APIs
the
getrootnode() method of the node interface returns the context object's root, which optionally includes the shadow root if it is available.
... syntax var root = node.
getrootnode(options); parameters options optional an object that sets options for
getting the root node.
...this will differ in exact form depending on where you called
getrootnode(); for example: calling it on an element inside a standard web page will return an htmldocument object representing the entire page.
...And 3 more matches
performance.getEntries() - Web APIs
the
getentries() method returns a list of all performanceentry objects for the page.
...if you are only interested in performance entries of certain types or that have certain names, see
getentriesbytype() and
getentriesbyname().
... syntax general syntax: entries = window.performance.
getentries(); return value entries an array of performanceentry objects.
...And 3 more matches
PushSubscription.getKey() - Web APIs
the
getkey() method of the pushsubscription interface returns an arraybuffer representing a client public key, which can then be sent to a server and used in encrypting push message data.
... syntax var key = subscription.
getkey(name); parameters name a domstring representing the encryption method used to generate a client key.
... example reg.pushmanager.
getsubscription() .then(function(subscription) { // enable any ui which subscribes / unsubscribes from // push messages.
...And 3 more matches
SVGAElement.target - Web APIs
the svgaelement.tar
get read-only property of svgaelement returns an svganimatedstring object that specifies the portion of a tar
get window, frame, pane into which a document is to be opened when a link is activated.
... this property is used when there are multiple possible tar
gets for the ending resource, like when the parent document is a mlti-frame html or xhtml document.
... syntax mylink.tar
get = 'value'; value an svganimatedstring indicating the ending resource tar
get that opens the document when the link is activated.
...And 3 more matches
getBBox() - Web APIs
the svggraphicselement.
getbbox() allows us to determine the coordinates of the smallest rectangle in which the object fits.
... the coordinates returned are with respect to the current svg space (after the application of all geometry attributes on all the elements contained in the tar
get element).
... note:
getbbox() must return the actual bounding box at the time the method was called—even in case the element has not yet been rendered.
...And 3 more matches
StylePropertyMapReadOnly.get() - Web APIs
the
get() method of the stylepropertymapreadonly interface returns a cssstylevalue object for the first value of the specified property.
... syntax var declarationblock = stylepropertymapreadonly.
get(property) parameters property the name of the property to retrieve the value of.
... examples let's
get just a few properties and values.
...And 3 more matches
WebGL2RenderingContext.getIndexedParameter() - Web APIs
the webgl2renderingcontext.
getindexedparameter() method of the webgl 2 api returns indexed information about a given tar
get.
... syntax any gl.
getindexedparameter(tar
get, index); parameters tar
get a glenum specifying the tar
get for which to return information.
... index a gluint specifying the index of the tar
get that is queried.
...And 3 more matches
WebGLRenderingContext.getActiveAttrib() - Web APIs
the webglrenderingcontext.
getactiveattrib() method of the webgl api returns a webglactiveinfo object containing size, type, and name of a vertex attribute.
... syntax webglactiveinfo gl.
getactiveattrib(program,index); parameters program a webglprogram containing the vertex attribute.
... index a gluint specifying the index of the vertex attribute to
get.
...And 3 more matches
WebGLRenderingContext.getRenderbufferParameter() - Web APIs
the webglrenderingcontext.
getrenderbufferparameter() method of the webgl api returns information about the renderbuffer.
... syntax any gl.
getrenderbufferparameter(tar
get, pname); parameters tar
get a glenum specifying the tar
get renderbuffer object.
... examples gl.
getrenderbufferparameter(gl.renderbuffer, gl.renderbuffer_width); specifications specification status comment webgl 1.0the definition of '
getrenderbufferparameter' in that specification.
...And 3 more matches
WebGLRenderingContext.getTexParameter() - Web APIs
the webglrenderingcontext.
gettexparameter() method of the webgl api returns information about the given texture.
... syntax any gl.
gettexparameter(tar
get, pname); parameters tar
get a glenum specifying the binding point (tar
get).
... examples gl.
gettexparameter(gl.texture_2d, gl.texture_mag_filter); specifications specification status comment webgl 1.0the definition of '
gettexparameter' in that specification.
...And 3 more matches
WebGLRenderingContext.getVertexAttrib() - Web APIs
the webglrenderingcontext.
getvertexattrib() method of the webgl api returns information about a vertex attribute at a given position.
... syntax any gl.
getvertexattrib(index, pname); parameters index a gluint specifying the index of the vertex attribute.
... examples gl.
getvertexattrib(0, gl.vertex_attrib_array_buffer_binding); specifications specification status comment webgl 1.0the definition of '
getvertexattrib' in that specification.
...And 3 more matches
Window.getSelection() - Web APIs
the window.
getselection() method returns a selection object representing the range of text selected by the user or the current position of the caret.
... syntax selection = window.
getselection(); return value a selection object.
... examples function foo() { var selobj = window.
getselection(); alert(selobj); var selrange = selobj.
getrangeat(0); // do stuff with the range } notes string representation of the selection object in javascript, when an object is passed to a function expecting a string (like window.alert() or document.write()), the object's tostring() method is called and the returned value is passed to the function.
...And 3 more matches
TypeError: setting getter-only property "x" - JavaScript
the javascript strict mode-only exception "setting
getter-only property" occurs when there is an attempt to set a new value to a property for which only a
getter is specified.
... message typeerror: assignment to read-only properties is not allowed in strict mode (edge) typeerror: setting
getter-only property "x" (firefox) typeerror: cannot set property "prop" of #<object> which has only a
getter (chrome) error type typeerror in strict mode only.
... there is an attempt to set a new value to a property for which only a
getter is specified.
...And 3 more matches
Date.prototype.getDay() - JavaScript
the
getday() method returns the day of the week for the specified date according to local time, where 0 represents sunday.
... for the day of the month, see date.prototype.
getdate().
... syntax dateobj.
getday() return value an integer number, between 0 and 6, corresponding to the day of the week for the given date, according to local time: 0 for sunday, 1 for monday, 2 for tuesday, and so on.
...And 3 more matches
Object.getOwnPropertyDescriptor() - JavaScript
the object.
getownpropertydescriptor() method returns an object describing the configuration of a specific property on a given object (that is, one directly present on an object and not in the object's prototype chain).
... syntax object.
getownpropertydescriptor(obj, prop) parameters obj the object in which to look for the property.
...
get a function which serves as a
getter for the property, or undefined if there is no
getter (accessor descriptors only).
...And 3 more matches
Object.getOwnPropertyDescriptors() - JavaScript
the object.
getownpropertydescriptors() method returns all own property descriptors of a given object.
... syntax object.
getownpropertydescriptors(obj) parameters obj the object for which to
get all own property descriptors.
...
get a function which serves as a
getter for the property, or undefined if there is no
getter (accessor descriptors only).
...And 3 more matches
Object.getOwnPropertySymbols() - JavaScript
the object.
getownpropertysymbols() method returns an array of all symbol properties found directly upon a given object.
... syntax object.
getownpropertysymbols(obj) parameters obj the object whose symbol properties are to be returned.
... description similar to object.
getownpropertynames(), you can
get all symbol properties of a given object as an array of symbols.
...And 3 more matches
Reflect.getPrototypeOf() - JavaScript
the static reflect.
getprototypeof() method is almost the same method as object.
getprototypeof().
... syntax reflect.
getprototypeof(tar
get) parameters tar
get the tar
get object of which to
get the prototype.
... exceptions a typeerror, if tar
get is not an object.
...And 3 more matches
Getting started (cfx) - Archive of obsolete content
see:
getting started with jpm cfx to jpm prerequisites to create add-ons for firefox using the sdk, you'll first need to follow the instructions to install and activate the sdk.
...for example, we could change the page that
gets loaded: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://developer.mozilla.org/"); } at the command prompt,...
... to
get a feel for some of the things you can do with the sdk apis, try working through some of the tutorials.
...And 2 more matches
getFolder - Archive of obsolete content
method of install object syntax filespecobject
getfolder ( string foldername); filespecobject
getfolder ( string foldername, string subdirectory); filespecobject
getfolder ( object localdirspec, string subdirectory); parameters the
getfolder method has the following parameters: foldername a string representing one of netscape's standard directories.
... localdirspec a filespecobject representing a directory obtained by
getcomponentfolder or
getfolder.
... description the
getfolder method obtains an object representing one of netscape's standard directories, for use with the addfile and
getwinprofile methods.
...And 2 more matches
getLastError - Archive of obsolete content
getlasterror returns the most recent nonzero error code.
... method of install object syntax int
getlasterror (); parameters none.
...description use
getlasterror method to obtain the most recent nonzero error code since initinstall or reseterror were called.
...And 2 more matches
getWinProfile - Archive of obsolete content
getwinprofile (windows only) constructs an object for working with a windows .ini file.
... method of install object syntax winprofile
getwinprofile ( object folder, string file); parameters the
getwinprofile method has the following parameters: folder an object representing a directory.
... you create this object by passing a string representing the directory to the
getfolder method.
...And 2 more matches
Getting started with XULRunner - Archive of obsolete content
one way to achieve this is to run the following script everytime you want to install a new version: firefox_version=`grep -po "\d{2}\.\d+" /usr/lib/firefox/platform.ini` arch=`uname -p` xurl=https://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/$firefox_version/runtimes/xulrunner-$firefox_version.en-us.linux-$arch.tar.bz2 cd /opt sudo sh -c "w
get -o- $xurl | tar -xj" sudo ln -s /opt/xulrunner/xulrunner /usr/bin/xulrunner sudo ln -s /opt/xulrunner/xpcshell /usr/bin/xpcshell you could also save this script to a file for convenience.
... main.js: function showmore() { document.
getelementbyid("more-text").hidden = false; } for more information about xul see: xul.
...we need to
get xulrunner to launch the bare-bones application.
...And 2 more matches
HTMLIFrameElement.getScreenshot()
the
getscreenshot() method of the htmliframeelement lets you request a screenshot of a content <iframe>, scaled to fit within a specified maximum width and height.
... note:
getscreenshot() waits for the event loop to go idle before it takes the screenshot.
... syntax var instanceofdomrequest = instanceofhtmliframeelement.
getscreenshot(maxwidth, maxheight, mimetype); returns a domrequest for handling the screenshot request.
...And 2 more matches
How to get a stacktrace with WinDbg
introduction sometimes you need to
get a stacktrace (call stack) for a crash or hang but breakpad fails because it's a special crasher or a hang.
... this article describes how to
get a stacktrace in those cases with windbg on windows.
... (to
get a stacktrace for thunderbird or some other product, substitute the product name where ever you see firefox in this instructions.) requirements to
get such a stacktrace you need to install the following software: debugging tools for windows microsoft distributes the debugging tools for windows for free, those include windbg which you will need here.
...And 2 more matches
PR_GetConnectStatus
get the completion status of a nonblocking connection.
... syntax prstatus pr_
getconnectstatus(const prpolldesc *pd); parameter the function has the following parameter: pd a pointer to a prpolldesc satructure whose fd field is the socket and whose in_flags field must contain pr_poll_write and pr_poll_except.
...the reason for the failure can be retrieved via pr_
geterror.
...And 2 more matches
PR_GetOpenFileInfo
gets an open file's information.
... syntax #include <prio.h> prstatus pr_
getopenfileinfo( prfiledesc *fd, prfileinfo *info); parameters the function has the following parameters: fd a pointer to a prfiledesc object for an open file.
... description pr_
getopenfileinfo obtains the file type (normal file, directory, or other), file size (as a 32-bit integer), and the file creation and modification times of the open file represented by the file descriptor.
...And 2 more matches
PR_GetOpenFileInfo64
gets an open file's information.
... syntax #include <prio.h> prstatus pr_
getopenfileinfo64( prfiledesc *fd, prfileinfo *info); parameters the function has the following parameters: fd a pointer to a prfiledesc object for an open file.
... description pr_
getopenfileinfo64 is the 64-bit version of pr_
getopenfileinfo.
...And 2 more matches
PR_GetRandomNoise
syntax #include <prrng.h> nspr_api(prsize) pr_
getrandomnoise( void *buf, prsize size ); parameters the function has these parameters: buf a pointer to a caller-supplied buffer to contain the generated random number.
...a return value of zero means that pr_
getrandomnoise is not implemented on this platform, or there is no available noise to be returned at the time of the call.
... description pr_
getrandomnoise provides a random value, depending on platform.
...And 2 more matches
PR_GetSpecialFD
gets the file descriptor that represents the standard input, output, or error stream.
... syntax #include <prio.h> prfiledesc* pr_
getspecialfd(prspecialfd id); parameter the function has the following parameter: id a pointer to an enumerator of type prspecialfd, indicating the type of i/o stream desired: pr_standardinput, pr_standardoutput, or pr_standarderror.
... returns if the id parameter is valid, pr_
getspecialfd returns a file descriptor that represents the corresponding standard i/o stream.
...And 2 more matches
FC_GetAttributeValue
name fc_
getattributevalue -
get the value of attributes of an object.
... syntax ck_rv fc_
getattributevalue( ck_session_handle hsession, ck_object_handle hobject, ck_attribute_ptr ptemplate, ck_ulong uscount ); parameters hsession [in] session handle.
... description fc_
getattributevalue
gets the value of one or more attributes of an object.
...And 2 more matches
FC_GetMechanismInfo
name fc_
getmechanisminfo -
get information on a particular mechanism.
... syntax ck_rv fc_
getmechanisminfo( ck_slot_id slotid, ck_mechanism_type type, ck_mechanism_info_ptr pinfo ); parameters fc_
getmechanisminfo takes three parameters: slotid [input] type [input] .
... description fc_
getmechanisminfo obtains information about a particular mechanism possibly supported by a token.
...And 2 more matches
FC_GetMechanismList
name fc_
getmechanismlist -
get a list of mechanism types supported by a token.
... syntax ck_rv fc_
getmechanismlist( ck_slot_id slotid, ck_mechanism_type_ptr pmechanismlist, ck_ulong_ptr puscount ); parameters fc_
getmechanismlist takes three parameters: slotid [input] pinfo [output] the address of a variable that will receive a pointer to the list of function pointers.
... description fc_
getmechanismlist obtains a list of mechanism types supported by a token.
...And 2 more matches
FC_GetObjectSize
name fc_
getobjectsize - create a copy of an object.
... syntax ck_rv fc_
getobjectsize( ck_session_handle hsession, ck_object_handle hobject, ck_ulong_ptr pussize ); parameters hsession [in] session handle.
... description fc_
getobjectsize
gets the size of an object in bytes.
...And 2 more matches
FC_GetOperationState
name fc_
getoperationstate -
get the cryptographic operation state of a session.
... syntax ck_rv fc_
getoperationstate( ck_session_handle hsession, ck_byte_ptr poperationstate, ck_ulong_ptr puloperationstatelen ); parameters hsession [in] handle of the open session.
... description fc_
getoperationstate saves the state of the cryptographic operation in a session.
...And 2 more matches
FC_GetSessionInfo
name fc_
getsessioninfo - obtain information about a session.
... syntax ck_rv fc_
getsessioninfo( ck_session_handle hsession, ck_session_info_ptr pinfo ); parameters hsession [in] the open session handle.
... description fc_
getsessioninfo obtains information about a session.
...And 2 more matches
FC_GetSlotInfo
name fc_
getslotinfo -
get information about a particular slot in the system.
... syntax ck_rv fc_
getslotinfo( ck_slot_id slotid, ck_slot_info_ptr pinfo ); parameters fc_
getslotinfo takes two parameters: slotid [in] pinfo [out] the address of a ck_slot_info structure.
... description fc_
getslotinfo stores the information about the slot in the ck_slot_info structure that pinfo points to.
...And 2 more matches
FC_GetSlotList
name fc_
getslotlist - obtain a list of slots in the system.
... syntax ck_rv fc_
getslotlist( ck_bbool tokenpresent, ck_slot_id_ptr pslotlist, ck_ulong_ptr pulcount ); parameters tokenpresent [in] if true only slots with a token present are included in the list, otherwise all slots are included.
...pulcount [out] pointer to a ck_ulong variable which receives the slot count.; description fc_
getslotlist obtains a list of slots in the system.
...And 2 more matches
FC_GetTokenInfo
name fc_
gettokeninfo - obtain information about a particular token in the system.
... syntax ck_rv fc_
gettokeninfo(ck_slot_id slotid, ck_token_info_ptr pinfo); parameters fc_
gettokeninfo has two parameters: slotid the id of the token's slot pinfo points to a ck_token_info structure description fc_
gettokeninfo returns information about the token in the specified slot.
... a user may call fc_
gettokeninfo without logging into the token (to assume the nss user role).
...And 2 more matches
JSObjectOps.getProperty
jsobjectops.
getproperty, setproperty, and deleteproperty are high-level callbacks that implement object property accesses.
... each of these callbacks is responsible for everything involved with an individual property access operation, including: any locking necessary for thread safety; security checks; finding the property, including walking the prototype chain if needed; calling the lower-level jsclass hooks; calling
getters or setters; and actually
getting, setting, or deleting the property once it is found.
... contrast jsclass.
getproperty, jsclass.setproperty, and jsclass.delproperty, which are hooks called during property accesses and don't have to implement any of that.
...And 2 more matches
JS_ForgetLocalRoot
syntax void js_for
getlocalroot(jscontext *cx, void *thing); name type description cx jscontext * pointer to the context in which the caller is running.
...in case a native hook allocates many objects or other gc-things, but the native protects some of those gc-things by storing them as property values in an object that is itself protected, the hook can call js_for
getlocalroot to free the local root automatically pushed for the now-protected gc-thing.
... (here the term gc-thing refers to any value that is subject to garbage collection: a jsobject, jsstring, jsfunction, or jsdouble.) js_for
getlocalroot works on any gc-thing allocated in the current local root scope, but it's more time-efficient when called on references to more recently created gc-things.
...And 2 more matches
JS_ForwardGetPropertyTo
syntax bool js_forward
getpropertyto(jscontext *cx, js::handleobject obj, js::handleid id, js::handleobject onbehalfof, js::mutablehandlevalue vp); bool js_forward
getelementto(jscontext *cx, js::handleobject obj, uint32_t index, js::handleobject onbehalfof, js::mutablehandlevalue vp); name type description cx jscontext * a context.
... onbehalfof js::handleobject object to receive
getter invocation.
... description js_forward
getpropertyto is the base implementation of js_
getproperty, js_
getucproperty, js_
getpropertybyid etc, where onbehalfof is same to obj.
...And 2 more matches
JS_GetClassObject
get the builtin class constructor.
... syntax bool js_
getclassobject(jscontext *cx, jsprotokey key, js::mutablehandle<jsobject*> objp); name type description cx jscontext * a context.
... description js_
getclassobject
gets the builtin class costructor for the specified prototype key.
...And 2 more matches
JS_GetClassPrototype
get the builtin class prototype object.
... syntax bool js_
getclassprototype(jscontext *cx, jsprotokey key, js::mutablehandle<jsobject*> objp); name type description cx jscontext * a context.
... description js_
getclassprototype
gets the builtin class costructor for the specified prototype key.
...And 2 more matches
JS_GetElement
syntax bool js_
getelement(jscontext *cx, js::handleobject obj, uint32_t index, js::mutablehandlevalue vp); name type description cx jscontext * the context in which to perform the property lookup.
... description js_
getelement examines a specified js object, obj, and its prototype chain, for an element or numeric property numbered index.
... if the element exists, js_
getelement sets *vp to the element's current value.
...And 2 more matches
JS_GetGlobalForScopeChain
syntax jsobject * js_
getglobalforscopechain(jscontext *cx); name type description cx jscontext * the context for which to return the global object.
... description js_
getglobalforscopechain() returns the global object for whatever function is currently running on the context.
...if there is no javascript running on the context, this returns the context's global, i.e., js_
getglobalobject(cx).
...And 2 more matches
JS_GetLatin1FlatStringChars
this article covers features introduced in spidermonkey 38
get the chars of a flat string.
... syntax const js::latin1char * js_
getlatin1flatstringchars(const js::autocheckcannotgc &nogc, jsflatstring *str); const char16_t * js_
gettwobyteflatstringchars(const js::autocheckcannotgc &nogc, jsflatstring *str); name type description cx jscontext * a context.
... str jsflatstring * a string to
get characters.
...And 2 more matches
JS_GetPositiveInfinityValue
syntax // added in spidermonkey 42 js::value js_
getpositiveinfinityvalue(jscontext *cx); js::value js_
getnegativeinfinityvalue(jscontext *cx); // obsolete since spidermonkey 42 jsval js_
getpositiveinfinityvalue(jscontext *cx); jsval js_
getnegativeinfinityvalue(jscontext *cx); name type description cx jscontext * a context.
... description js_
getpositiveinfinityvalue returns a js::value that represents an ieee floating-point positive infinity.
... js_
getnegativeinfinityvalue returns the corresponding negative infinity.
...And 2 more matches
JS_GetPropertyAttributes
get the attributes of a specified property.
... syntax jsbool js_
getpropertyattributes(jscontext *cx, jsobject *obj, const char *name, unsigned int *attrsp, jsbool *foundp); jsbool js_
getucpropertyattributes(jscontext *cx, jsobject *obj, const jschar *name, size_t namelen, unsigned int *attrsp, jsbool *foundp); name type description cx jscontext * the context in which to look up property attributes.
... namelen size_t (only in js_
getucpropertyattributes) the length of name in characters; or (size_t) -1 to indicate that name is null-terminated.
...And 2 more matches
JS_GetPrototype
syntax bool js_
getprototype(jscontext *cx, js::handleobject obj, js::mutablehandleobject protop); name type description cx jscontext * pointer to a js context from which to derive runtime information.
... description js_
getprototype retrieves the prototype of a specified object, obj.
...this is the equivalent of object.
getprototypeof(obj) from javascript.
...And 2 more matches
JS_GetStringChars
syntax jschar * js_
getstringchars(jsstring *str); // obsolete since jsapi 1.8.5 const jschar * js_
getstringcharsz(jscontext *cx, jsstring *str); // added in spidermonkey 1.8.2, obsolete since jsapi 33 name type description cx jscontext * (in js_
getstringcharsz only) a context.
... description js_
getstringchars obsolete since javascript 1.8.5 returns a pointer to the first element of an array of jschars.
...to
get the length of the string, use js_
getstringlength.
...And 2 more matches
JS_GetStringEncodingLength
this article covers features introduced in spidermonkey 1.8.5
get the length of a javascript string in bytes.
... syntax size_t js_
getstringencodinglength(jscontext *cx, jsstring *str); name type description cx jscontext * a context.
... description js_
getstringencodinglength returns the length of the specified string in bytes, regardless of its encoding.
...And 2 more matches
JS_GetTwoByteExternalStringChars
this article covers features introduced in spidermonkey 38
get the chars of an external string.
... syntax const char16_t * js_
gettwobyteexternalstringchars(jsstring *str); name type description str jsstring * a string to
get characters.
... description js_
gettwobyteexternalstringchars
gets the characters of the string, str.
...And 2 more matches
JS_IdArrayGet
this article covers features introduced in spidermonkey 17
get the item of a jsidarray.
... syntax jsid js_idarray
get(jscontext *cx, jsidarray *ida, unsigned index) name type description cx jscontext * a context.
... ida jsidarray * the jsidarray to
get the length.
...And 2 more matches
NS_CStringGetData
« xpcom api reference summary the ns_cstring
getdata function gives the caller read access to the string's internal buffer.
... #include "nsstringapi.h" pruint32 ns_cstring
getdata( const nsacstring& astring, const char** adata, prbool* aterminated = nsnull ); parameters astring [in] a nsacstring instance to inspect.
... return values the ns_cstring
getdata function returns the length of adata, measured in storage units (bytes).
...And 2 more matches
AnimationEffect.getComputedTiming() - Web APIs
the
getcomputedtiming() method of the animationeffect interface returns the calculated timing properties for this animation effect.
... although many of the attributes of the returned object are common to the effecttiming contained in the object returned by the animationeffect.
gettiming() method, the values returned by this object differ in the following ways: duration returns the calculated value of the iteration duration.
... these values are comparable to the computed styles of an element returned using window.
getcomputedstyle(elem).
...And 2 more matches
AudioContext.getOutputTimestamp() - Web APIs
the
getoutputtimestamp() property of the audiocontext interface returns a new audiotimestamp object containing two audio timestamp values relating to the current audio context.
... syntax var timestamp = audiocontext.
getoutputtimestamp() parameters none.
... play.addeventlistener('click', () => { if(!audioctx) { audioctx = new window.audiocontext(); }
getdata(); source.start(0); play.setattribute('disabled', 'disabled'); raf = requestanimationframe(outputtimestamps); }); stop.addeventlistener('click', () => { source.stop(0); play.removeattribute('disabled'); cancelanimationframe(raf); }); // function to output timestamps function outputtimestamps() { let ts = audioctx.
getoutputtimestamp() console.log('context time: ' + ts.conte...
...And 2 more matches
AudioWorkletProcessor.parameterDescriptors (static getter) - Web APIs
the read-only parameterdescriptors property of an audioworkletprocessor-derived class is a static
getter, which returns an iterable of audioparamdescriptor-based objects.
... defining the
getter is optional.
... we expand the processor by adding a static parameterdescriptors
getter.
...And 2 more matches
BiquadFilterNode.getFrequencyResponse() - Web APIs
the
getfrequencyresponse() method of the biquadfilternode interface takes the current filtering algorithm's settings and calculates the frequency response for frequencies specified in a specified array of frequencies.
... syntax biquadfilternode.
getfrequencyresponse(frequencyarray, magresponseoutput, phaseresponseoutput); parameters frequencyarray a float32array containing an array of frequencies, specified in hertz, which you want to filter.
... example in the following example we are using a biquad filter on a media stream (for the full demo, see our stream-source-buffer demo live, or read the source.) as part of this demo, we
get the frequency responses for this biquad filter, for five sample frequencies.
...And 2 more matches
Bluetooth.getAvailability() - Web APIs
the
getavailability() method of bluetooth interface of web bluetooth api interface exposes the bluetooth capabilities of the current device.
... note: user might not allow use of web bluetooth api, even if
getavailability() returned true (navigator.bluetooth.requestdevice() might not resolve with a bluetoothdevice).
... syntax var readerpromise = bluetooth.
getavailability(); parameters none.
...And 2 more matches
BudgetState - Web APIs
the bud
getstate interface of the the web bud
get api provides the amount of the user agent's processing bud
get at a specific point in time.
... properties bud
getstate.bud
getat returns the anticipated processing bud
get at a specific time.
... bud
getstate.time returns a timestamp at which the bud
getat value is valid.
...And 2 more matches
CanvasRenderingContext2D.getTransform() - Web APIs
the canvasrenderingcontext2d.
gettransform() method of the canvas 2d api retrieves the current transformation matrix being applied to the context.
... syntax let storedtransform = ctx.
gettransform(); parameters none.
...we apply a transform to the first one's context using canvasrenderingcontext2d.settransform() and draw a square on it, then retrieve the matrix from it using
gettransform().
...And 2 more matches
EXT_disjoint_timer_query.getQueryEXT() - Web APIs
the ext_disjoint_timer_query.
getqueryext() method of the webgl api returns information about a query tar
get.
... syntax any ext.
getqueryext(tar
get, pname); parameters tar
get a glenum specifying the tar
get of the time query.
... return value depends on pname: if pname is ext.current_query_ext: a webglquery object, which is the currently active query for the given tar
get.
...And 2 more matches
EXT_disjoint_timer_query.getQueryObjectEXT() - Web APIs
the ext_disjoint_timer_query.
getqueryobjectext() method of the webgl api returns the state of a query object.
... syntax any ext.
getqueryobjectext(query, pname); parameters query a webglquery object from which to return information.
... examples var ext = gl.
getextension('ext_disjoint_timer_query'); var query = ext.createqueryext(); ext.beginqueryext(ext.time_elapsed_ext, query); // ...
...And 2 more matches
Element.getAnimations() - Web APIs
the
getanimations() method of the element interface (specified on the animatable mixin) returns an array of all animation objects affecting this element or which are scheduled to do so in future.
... syntax const animations = element.
getanimations(options); parameters options optional an options object containing the following property: subtree a boolean value which, if true, causes animations that tar
get descendants of element to be returned as well.
... this includes animations that tar
get any css pseudo-elements attached to element or one of its descendents.
...And 2 more matches
Element.getAttributeNode() - Web APIs
syntax var attrnode = element.
getattributenode(attrname); attrnode is an attr node for the attribute.
... example // html: <div id="top" /> let t = document.
getelementbyid("top"); let idattr = t.
getattributenode("id"); alert(idattr.value == "top") notes when called on an html element in a dom flagged as an html document,
getattributenode lower-cases its argument before proceeding.
...you can, however,
get the element to which the attribute belongs with the ownerelement property.
...And 2 more matches
Element.getClientRects() - Web APIs
the
getclientrects() method of the element interface returns a collection of domrect objects that indicate the bounding rectangles for each css border box in a client.
... syntax let rectcollection = object.
getclientrects(); return value the returned value is a collection of domrect objects, one for each css border box associated with the element.
...*/ var rects = elt.
getclientrects(); for (var i = 0; i != rects.length; i++) { var rect = rects[i]; var tablerectdiv = document.createelement('div'); tablerectdiv.style.position = 'absolute'; tablerectdiv.style.border = '1px solid red'; var scrolltop = document.documentelement.scrolltop || document.body.scrolltop; var scrollleft = document.documentelement.scrollleft || document.body.scrollleft...
...And 2 more matches
EventTarget.dispatchEvent() - Web APIs
dispatches an event at the specified eventtar
get, (synchronously) invoking the affected eventlisteners in the appropriate order.
... syntax cancelled = !tar
get.dispatchevent(event) parameter event is the event object to be dispatched.
... tar
get is used to initialize the event.tar
get and determine which event listeners to invoke.
...And 2 more matches
IDBIndex.getAll() - Web APIs
the
getall() method of the idbindex interface retrieves all objects that are inside the index.
...to use a feature like
getall(), the browser has to create all the objects at once.
...if you are trying to
get an array of all the objects in an object store, though, you should use
getall().
...And 2 more matches
IDBObjectStore.getKey() - Web APIs
the
getkey() method of the idbobjectstore interface returns an idbrequest object, and, in a separate thread, returns the key selected by the specified query.
... syntax var request = objectstore.
getkey(key); parameters key the key or key range that identifies the record to be retrieved.
... example let openrequest = indexeddb.open("telemetry"); openrequest.onsuccess = (event) => { let db = event.tar
get.result; let store = db.transaction("netlogs").objectstore("netlogs"); let today = new date(); let yesterday = new date(today); yesterday.setdate(today.
getdate() - 1); let request = store.
getkey(idbkeyrange(yesterday, today)); request.onsuccess = (event) => { let when = event.tar
get.result; alert("the 1st activity in last 24 hours was occurred at " + when); }; }; specificat...
...And 2 more matches
IIRFilterNode.getFrequencyResponse() - Web APIs
the
getfrequencyresponse() method of the iirfilternode interface takes the current filtering algorithm's settings and calculates the frequency response for frequencies specified in a specified array of frequencies.
... syntax iirfilternode.
getfrequencyresponse(frequencyarray, magresponseoutput, phaseresponseoutput); parameters frequencyarray a float32array containing an array of frequencies, specified in hertz, which you want to filter.
... examples in the following example we are using an iir filter on a media stream (for a complete full demo, see our stream-source-buffer demo live, or read its source.) as part of this demo, we
get the frequency responses for this iir filter, for five sample frequencies.
...And 2 more matches
ImageCapture.getPhotoCapabilities() - Web APIs
the
getphotocapabilities() method of the imagecapture interface returns a promise that resolves with a photocapabilities object containing the ranges of available configuration options.
... syntax const capabilitiespromise = imagecaptureobj.
getphotocapabilities() return value a promise that resolves with a photocapabilities object.
... example the following example, extracted from chrome's image capture / photo resolution sample, uses the results from
getphotocapabilities() to modify the size of an input range.
...And 2 more matches
ImageCapture.getPhotoSettings() - Web APIs
the
getphotosettings() method of the imagecapture interface returns a promise that resolves with a photosettings object containing the current photo configuration settings.
... syntax const settingspromise = imagecapture.
getphotosettings() return value a promise that resolves with a photosettings object containing the following properties: filllightmode: the flash setting of the capture device, one of "auto", "off", or "on".
... example the following example, extracted from chrome's image capture / photo resolution sample, uses the results from
getphotosettings() to modify the size of an input range.
...And 2 more matches
IntersectionObserverEntry.target - Web APIs
the intersectionobserverentry interface's read-only tar
get property indicates which tar
geted element has changed its amount of intersection with the intersection root.
... syntax var tar
get = intersectionobserverentry.tar
get; value the intersectionobserverentry's tar
get property specifies which element previously tar
geted by calling intersectionobserver.observe() experienced a change in intersection with the root.
... example in this simple example, each tar
geted element's opacity is set to its intersectionratio.
...And 2 more matches
KeyframeEffect.target - Web APIs
the tar
get property of a keyframeeffect interface represents the element or pseudo-element being animated.
... it may be null for animations that do not tar
get a specific element.
... it performs as both a
getter and a setter, except with animations and transitions generated by css.
...And 2 more matches
MediaStream.getAudioTracks() - Web APIs
the
getaudiotracks() method of the mediastream interface returns a sequence that represents all the mediastreamtrack objects in this stream's track set where mediastreamtrack.kind is audio.
... syntax var mediastreamtracks = mediastream.
getaudiotracks() parameters none.
... note: the order of the returned tracks is not defined by the specification and may, in fact, change from one call to
getaudiotracks() to the next.
...And 2 more matches
MediaStream.getVideoTracks() - Web APIs
the
getvideotracks() method of the mediastream interface returns a sequence of mediastreamtrack objects representing the video tracks in this stream.
... syntax var mediastreamtracks[] = mediastream.
getvideotracks(); parameters none.
... note: the order of the tracks is not defined by the specification, and may not be the same from one call to
getvideotracks() to another.
...And 2 more matches
OffscreenCanvas.getContext() - Web APIs
the offscreencanvas.
getcontext() method returns a drawing context for an offscreen canvas, or null if the context identifier is not supported.
... syntax offscreen.
getcontext(contexttype, contextattributes); parameters contexttype is a domstring containing the context identifier defining the drawing context associated to the canvas.
... contextattributes you can use several context attributes when creating your rendering context, for example: offscreen.
getcontext("webgl", { antialias: false, depth: false }); 2d context attributes: alpha: boolean that indicates if the canvas contains an alpha channel.
...And 2 more matches
PageTransitionEvent - Web APIs
the pa
getransitionevent event object is available inside handler functions for the pageshow and pagehide events, fired when a document is being loaded or unloaded.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/pa
getransitionevent" tar
get="_top">...
...<rect x="116" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">pa
getransitionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, event.
...And 2 more matches
performance.getEntriesByName() - Web APIs
the
getentriesbyname() method returns a list of performanceentry objects for the given name and type.
... syntax entries = window.performance.
getentriesbyname(name, type); arguments name the name of the entry to retrieve.
...performance.mark not supported"); return; } // create some performance entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); performance.mark("begin"); do_work(100000); performance.mark("end"); do_work(200000); performance.mark("end"); // use
getentries() to iterate through the each entry var p = performance.
getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]"); check_performanceentry(p[i]); } // use
getentries(name, entrytype) to
get specific entries p = performance.
getentries({name : "begin", entrytype: "mark"}); for (var i=0; i < p.length; i++) { log("begin[" + i + "]"); check_performance...
...And 2 more matches
performance.getEntriesByType() - Web APIs
the
getentriesbytype() method returns a list of performanceentry objects for a given type.
... syntax entries = window.performance.
getentriesbytype(type); arguments type the type of entry to retrieve such as "mark".
...performance.mark not supported"); return; } // create some performance entries via the mark() method performance.mark("begin"); dowork(50000); performance.mark("end"); performance.mark("begin"); dowork(100000); performance.mark("end"); dowork(200000); performance.mark("end"); // use
getentries() to iterate through the each entry var p = performance.
getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]"); checkperformanceentry(p[i]); } // use
getentries(name, entrytype) to
get specific entries p = performance.
getentries({name : "begin", entrytype: "mark"}); for (var i=0; i < p.length; i++) { log("begin[" + i + "]"); checkperformanceen...
...And 2 more matches
PerformanceObserverEntryList.getEntriesByName() - Web APIs
the
getentriesbyname() method of the performanceobserverentrylist interface returns a list of explicitly observed performance entry objects for a given name and entry type.
... syntax entries = list.
getentriesbyname(name, type); parameters name a domstring representing the name of the entry to retrieve.
...unction print_perf_entry(pe) { console.log("name: " + pe.name + "; entrytype: " + pe.entrytype + "; starttime: " + pe.starttime + "; duration: " + pe.duration); } // create observer for all performance event types var observe_all = new performanceobserver(function(list, obs) { var perfentries; // print all entries perfentries = list.
getentries(); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } // print entries named "begin" with type "mark" perfentries = list.
getentriesbyname("begin", "mark"); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } // print entries with type "mark" perfentries = list.
getentriesbytype("mark"); for (var i=0; i < ...
...And 2 more matches
PerformanceObserverEntryList.getEntriesByType() - Web APIs
the
getentriesbytype() method of the performanceobserverentrylist returns a list of explicitly observed performance entry objects for a given performance entry type.
... syntax entries = list.
getentriesbytype(type); parameters type the type of entry to retrieve such as "frame".
...unction print_perf_entry(pe) { console.log("name: " + pe.name + "; entrytype: " + pe.entrytype + "; starttime: " + pe.starttime + "; duration: " + pe.duration); } // create observer for all performance event types var observe_all = new performanceobserver(function(list, obs) { var perfentries; // print all entries perfentries = list.
getentries(); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } // print entries named "begin" with type "mark" perfentries = list.
getentriesbyname("begin", "mark"); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } // print entries with type "mark" perfentries = list.
getentriesbytype("mark"); for (var i=0; i < ...
...And 2 more matches
RTCIceTransport.getLocalCandidates() - Web APIs
the rtcicetransport method
getlocalcandidates() returns an array of rtcicecandidate objects, one for each of the candidates that have been gathered by the local device during the current ice agent session.
... syntax localcandidates = rtcicetransport.
getlocalcandidates(); parameters none.
...to find the best match found so far, call rtcicetransport.
getselectedcandidatepair().
...And 2 more matches
RTCIceTransport.getRemoteCandidates() - Web APIs
the rtcicetransport method
getremotecandidates() returns an array which contains one rtcicecandidate for each of the candidates that have been received from the remote peer so far during the current ice gathering session.
... syntax remotecandidates = rtcicetransport.
getremotecandidates(); parameters none.
...to find the best match found so far, call rtcicetransport.
getselectedcandidatepair().
...And 2 more matches
RTCIceTransport.getSelectedCandidatePair() - Web APIs
the rtcicetransport method
getselectedcandidatepair() returns an rtcicecandidatepair object containing the current best-choice pair of ice candidates describing the configuration of the endpoints of the transport.
... syntax candidatepair = rtcicetransport.
getselectedcandidatepair(); parameters none.
...from that time forward, the best matching pair of candidates will always be available by calling
getselectedcandidatepair().
...And 2 more matches
RTCPeerConnection.getSenders() - Web APIs
the rtcpeerconnection method
getsenders() returns an array of rtcrtpsender objects, each of which represents the rtp sender responsible for transmitting one track's data.
... syntax var senders = rtcpeerconnection.
getsenders(); return value an array of rtcrtpsender objects, one for each track on the connection.
... the order of the returned rtcrtpsenders is not defined by the specification, and may change from one call to
getsenders() to the next.
...And 2 more matches
RTCPeerConnection.getStreamById() - Web APIs
the rtcpeerconnection.
getstreambyid() method returns the mediastream with the given id that is associated with local or remote end of the connection.
... this property has been replaced with the rtcpeerconnection.
getlocalstreams and rtcpeerconnection.
getremotestreams properties.
... syntax var mediastream = pc.
getstream(id); parameters id is a domstring corresponding to the stream to return.
...And 2 more matches
Range.getBoundingClientRect() - Web APIs
the range.
getboundingclientrect() method returns a domrect object that bounds the contents of the range; this is a rectangle enclosing the union of the bounding rectangles for all the elements in the range.
...see element.
getboundingclientrect() for details on the returned value.
... syntax boundingrect = range.
getboundingclientrect() example html <div id="highlight"></div> <p>this example positions a "highlight" rectangle behind the contents of a range.
...And 2 more matches
ReadableStream.getReader() - Web APIs
the
getreader() method of the readablestream interface creates a reader and locks the stream to it.
... syntax var reader = readablestream.
getreader({mode}); parameters {mode} optional an object containing a property mode, which takes as its value a domstring specifying the type of reader to create.
... examples in the following simple example, a previously-created custom readablestream is read using a readablestreamdefaultreader created using
getreader().
...And 2 more matches
targetElement - Web APIs
the svganimationelement.tar
getelement property refers to the element which is being animated.
... if no tar
get element is being animated (for example, because the href attribute specifies an unknown element), the value returned is null.
... syntax var tar
getelement = someelement.tar
getelement; specifications specification status comment svg animations level 2the definition of 'svganimationelement.tar
getelement' in that specification.
...And 2 more matches
WebGL2RenderingContext.getQuery() - Web APIs
the webgl2renderingcontext.
getquery() method of the webgl 2 api returns the currently active webglquery for the tar
get, or null.
... syntax webglquery gl.
getquery(tar
get, pname); parameters tar
get a glenum specifying the tar
get of the query.
... pname a glenum specifying the query object tar
get.
...And 2 more matches
WebGLRenderingContext.getAttribLocation() - Web APIs
the webglrenderingcontext.
getattriblocation() method of the webgl api returns the location of an attribute variable in a given webglprogram.
... syntax glint gl.
getattriblocation(program, name); parameters program a webglprogram containing the attribute variable.
... name a domstring specifying the name of the attribute variable whose location to
get.
...And 2 more matches
WebGLRenderingContext.getError() - Web APIs
the webglrenderingcontext.
geterror() method of the webgl api returns error information.
... syntax glenum gl.
geterror(); parameters none.
... gl.context_lost_webgl if the webgl context is lost, this error is returned on the first call to
geterror.
...And 2 more matches
WebGLRenderingContext.getExtension() - Web APIs
the webglrenderingcontext.
getextension() method enables a webgl extension.
... syntax gl.
getextension(name); parameters name a string for the name of the webgl extension to enable.
... return value a webgl extension object, or null if name does not match (case-insensitive) to one of the strings in webglrenderingcontext.
getsupportedextensions.
...And 2 more matches
WebGLRenderingContext.getParameter() - Web APIs
the webglrenderingcontext.
getparameter() method of the webgl api returns a value for the passed parameter name.
... syntax any gl.
getparameter(pname); parameters pname a glenum specifying which parameter value to return.
... examples gl.
getparameter(gl.dither); gl.
getparameter(gl.version); gl.
getparameter(gl.viewport); specifications specification status comment webgl 1.0the definition of '
getparameter' in that specification.
...And 2 more matches
WebGLRenderingContext.getProgramParameter() - Web APIs
the webglrenderingcontext.
getprogramparameter() method of the webgl api returns information about the given program.
... syntax any gl.
getprogramparameter(program, pname); parameters program a webglprogram to
get parameter information from.
... examples gl.
getprogramparameter(program, gl.delete_status); specifications specification status comment webgl 1.0the definition of '
getprogramparameter' in that specification.
...And 2 more matches
WebGLRenderingContext.getShaderPrecisionFormat() - Web APIs
the webglrenderingcontext.
getshaderprecisionformat() method of the webgl api returns a new webglshaderprecisionformat object describing the range and precision for the specified shader numeric format.
... syntax webglshaderprecisionformat gl.
getshaderprecisionformat(shadertype, precisiontype); parameters shadertype either a gl.fragment_shader or a gl.vertex_shader.
... examples the following code
gets the precision format of a gl.vertex_shader with a gl.medium_float precision type.
...And 2 more matches
WebGLRenderingContext.getSupportedExtensions() - Web APIs
the webglrenderingcontext.
getsupportedextensions() method returns a list of all the supported webgl extensions.
... syntax gl.
getsupportedextensions(); return value an array of strings with all the supported webgl extensions.
... examples var canvas = document.
getelementbyid('canvas'); gl = canvas.
getcontext('webgl'); var extensions = gl.
getsupportedextensions(); // array [ 'angle_instanced_arrays', 'ext_blend_minmax', ...
...And 2 more matches
Window.getDefaultComputedStyle() - Web APIs
the
getdefaultcomputedstyle() method gives the default computed values of all the css properties of an element, ignoring author styling.
... syntax var style = window.
getdefaultcomputedstyle(element [, pseudoelt]); parameters element the element for which to
get the computed style.
...the object is of the same type as the object returned by window.
getcomputedstyle(), but only takes into account user-agent and user rules.
...And 2 more matches
WritableStream.getWriter() - Web APIs
the
getwriter() method of the writablestream interface returns a new instance of writablestreamdefaultwriter and locks the stream to that instance.
... syntax var writer = writablestream.
getwriter(); parameters none.
...inside this function it calls the stream's
getwriter() method, which returns an instance of writablestreamdefaultwriter.
...And 2 more matches
XMLHttpRequest.getResponseHeader() - Web APIs
the xmlhttprequest method
getresponseheader() returns the string containing the text of a particular header's value.
...the
getresponseheader() method returns the value as a utf byte sequence.
... if you need to
get the raw string of all of the headers, use the
getallresponseheaders() method, which returns the entire raw header string.
...And 2 more matches
XRWebGLLayer.getViewport() - Web APIs
the xrwebgllayer interface's
getviewport() method returns the xrviewport that should be used to render the specified xrview into the webgl layer.
... syntax let viewport = xrwebgllayer.
getviewport(view); parameters view an xrview object indicating the view for which the viewport is to be returned.
... example this example demonstrates in part what the callback for the requestanimationframe() function might look like, using
getviewport() to
get the viewport so that drawing can be constrained to the area set aside for the eye whose viewpoint is currently being rendered.
...And 2 more matches
Date.prototype.getMonth() - JavaScript
the
getmonth() method returns the month in the specified date according to local time, as a zero-based value (where zero indicates the first month of the year).
... syntax dateobj.
getmonth() return value an integer number, between 0 and 11, representing the month in the given date according to local time.
... examples using
getmonth() the second statement below assigns the value 11 to the variable month, based on the value of the date object xmas95.
...And 2 more matches
Date.prototype.getUTCFullYear() - JavaScript
the
getutcfullyear() method returns the year in the specified date according to universal time.
... syntax dateobj.
getutcfullyear() return value a number representing the year in the given date according to universal time.
... description the value returned by
getutcfullyear() is an absolute number that is compliant with year-2000, for example, 1995.
...And 2 more matches
Date.prototype.getUTCMilliseconds() - JavaScript
the
getutcmilliseconds() method returns the milliseconds portion of the time object's value.
... syntax dateobj.
getutcmilliseconds() return value an integer number, between 0 and 999, representing the milliseconds portion of the given date object.
... to
get total milliseconds since 1970/01/01, use the method ".
gettime()".
...And 2 more matches
Object.prototype.__defineGetter__() - JavaScript
this feature is deprecated in favor of defining
getters using the object initializer syntax or the object.defineproperty() api.
... the __define
getter__ method binds an object's property to a function to be called when that property is looked up.
... syntax obj.__define
getter__(prop, func) parameters prop a string containing the name of the property to bind to the given function.
...And 2 more matches
WeakMap.prototype.get() - JavaScript
the
get() method returns a specified element from a weakmap object.
... syntax wm.
get(key); parameters key required.
... examples using the
get method var wm = new weakmap(); wm.set(window, 'foo'); wm.
get(window); // returns "foo".
...And 2 more matches
targetX - SVG: Scalable Vector Graphics
the tar
getx attribute determines the positioning in horizontal direction of the convolution matrix relative to a given tar
get pixel in the input image.
...the value must be such that: 0 <= tar
getx < orderx.
... only one element is using this attribute: <feconvolvematrix> usage notes value <integer> default value floor(orderx / 2) animatable yes <integer> this value indicates the positioning in horizontal direction of the convolution matrix relative to a given tar
get pixel in the input image.
...And 2 more matches
targetY - SVG: Scalable Vector Graphics
the tar
gety attribute determines the positioning in vertical direction of the convolution matrix relative to a given tar
get pixel in the input image.
...the value must be such that: 0 <= tar
gety < ordery.
... only one element is using this attribute: <feconvolvematrix> usage notes value <integer> default value floor(ordery / 2) animatable yes <integer> this value indicates the positioning in vertical direction of the convolution matrix relative to a given tar
get pixel in the input image.
...And 2 more matches
getAttributeNS - Archive of obsolete content
as some browsers do not support
getattributens, the following might be used to work on them as well.
... note that all gecko-based browsers (including firefox) support dom:element.
getattributens.
... function
getattributenswrapper (thisitem, ns, nsatt) { if (thisitem === null) { return false; } if (thisitem.
getattributens) { return thisitem.
getattributens(ns, nsatt); } else if (ns === null) { return thisitem.
getattribute(nsatt); } else if (ns === 'http://www.w3.org/xml/1998/namespace') { // this is assumed so don't try to
get an xmlns for the 'xml' prefix return thisitem.
getattribute('xml:'+nsatt); // prefix must be 'xml' per the specs } var attrs2, result; var attrs = thisitem.attributes; var prefixatt = new regexp('^(.*):'+nsatt.replace(/\./g, '\\.')+'$'); // e.g., xlink:href // find any prefixes with the local-name being searched (escape period since o...
...nodename.match(xmlnsprefix) && attrs2[i].nodevalue === ns ) { // e.g., 'xmlns:xlink' and 'http://www.w3.org/1999/xlink' return attrs[j].nodevalue; } } thisitem = thisitem.parentnode; } } } return ''; // if not found (some implementations return 'null' but this is not standard) } alert(
getattributenswrapper (someelement, 'http://www.w3.org/1999/xlink', 'href')); //
gets xlink:href, xl:href, etc.
getString - Archive of obsolete content
getstring retrieves a value from a .ini file.
... method of winprofile object syntax string
getstring ( string section, string key); parameters the method has the following parameters: section section in the file, such as "boot" or "drivers".
...description the
getstring method is similar to the windows api function
getprivateprofilestring.
...example to
get the name of the wallpaper file from the desktop section of the win.ini file, use this call: ini =
getwinprofile (
getfolder("windows"), "win.ini"); var wallpapervalue = ini.
getstring ("desktop", "wallpaper"); ...
getValue - Archive of obsolete content
getvalue netscape 6 and mozilla do not currently support this method.
...method of winreg object syntax winregvalue
getvalue ( string subkey, string valname); parameters the
getvalue method has the following parameters: subkey the key path to the appropriate location in the key hierarchy, such as "software\\netscape\\navigator\\mail".
...description the
getvalue method retrieves the value of an arbitraty key.
...if the value is a string, the
getvaluestring method is more convenient.
getValueString - Archive of obsolete content
getvaluestring retrieves the value of a key when that value is a string.
... method of winreg object syntax string
getvaluestring ( string subkey, string valname); parameters the
getvaluestring method has the following parameters: subkey the key path to the appropriate location in the key hierarchy, such as "software\\netscape\\navigator\\mail".
...description the
getvaluestring method
gets the value of a string.
... if the value is not a string, use the
getvalue method instead.
NPN_GetAuthenticationInfo - Archive of obsolete content
« gecko plugin api reference « browser side plug-in api summary the function is called by plugins to
get http authentication information from the browser.
... syntax #include <npapi.h> nperror npn_
getauthenticationinfo(npp instance, const char *protocol, const char *host, int32_t port, const char *scheme, const char *realm, char **username, uint32_t *ulen, char **password, uint32_t *plen); parameters this function has the following parameters: instance pointer to the current plug-in instance protocol protocol name (uri scheme) host host name port port number scheme http authentication scheme name realm http authentication realm use...
...unless the plugin has special networking needs, it is recommended to use the standard network apis, such as npn_
geturlnotify/npn_posturlnotify.
... see also npn_setvalueforurl, npn_
getvalueforurl ...
NP_GetMIMEDescription - Archive of obsolete content
np_
getmimedescription returns a supported mime type list for your plugin.
... one mime type // example inside http://mxr.mozilla.org/mozilla-central/source/modules/plugin/sdk/samples/basic/unix/plugin.cpp #define mime_type_description "application/basic-plugin:bsp:basic example plug-in for mozilla" const char* np_
getmimedescription(void) { return(mime_types_description); } two mime types const char* np_
getmimedescription(void) { return "application/basic-example-plugin:xmp1:example 1;application/basic-example2-plugin:xmp2, xm2p:example 2"; } gnome integration if you use gnome vfs (gnome-vfs-2.0), you can
get the mime type description with a function.
... #include <libgnomevfs/gnome-vfs-mime-handlers.h> #include <libgnomevfs/gnome-vfs-mime-info.h> #include <libgnomevfs/gnome-vfs-utils.h> // const char* gnome_vfs_mime_
get_description (const char *mime_type); const char* desc = gnome_vfs_mime_
get_description ("audio/ogg"); if you use gnome gio (gio-2.0), you can
get the mime type description too.
... #include <gio/gio.h> const char* desc = g_content_type_
get_description("audio/ogg"); javascript inside a web page, you can retrieve these informations with this code: var mimetype = navigator.mimetypes['application/basic-example-plugin']; if (mimetype) { alert(mimetype.type + ':' + mimetype.suffixes + ':' + mimetype.description); } ...
Date.getVarDate() - Archive of obsolete content
the
getvardate method returns a vt_date value from a date object.
... syntax dateobj.
getvardate() parameters the required dateobj reference is a date object.
... remarks the
getvardate() method is used when javascript code interacts with com objects, activex objects, or other objects that accept and return date values in vt_date format.
... applies to: date object see also date.
getdate() date.parse() ...
Makefile - targets
this article lists possible tar
gets provided by the makefile.
... tar
get name description build default tar
get.
... compile firefox, thunderbird, etc check standalone shell unit test invoked directly by make configure launch the configure program to define headers and and attributes for the tar
get build machine.
... export generate and install exported headers: exports makefiles tar
get used to only regenerate makefiles package generate a package tarball clean tar
gets clean remove object files, binaries and generated content clobber alias for clean distclean clean + configure cleanup ...
HTMLIFrameElement.getMuted()
the
getmuted() method of the htmliframeelement indicates whether the browser <iframe> is currently muted.
... syntax there are two versions of this method, a callback version: var request = instanceofhtmliframeelement.
getmuted(); and a promise version: instanceofhtmliframeelement.
getmuted().then(function(muted) { ...
... }); returns callback version: a domrequest that represents the
get muted request.
... example callback version: var browser = document.queryselector('iframe'); var request = browser.
getmuted(); request.onsuccess = function() { if(request.result) { console.log('the browser is muted.'); } else { console.log('the browser is unmuted.'); } } promise version: var browser = document.queryselector('iframe'); browser.
getmuted().then(function(muted) { if(muted) { console.log('the browser is muted.'); } else { console.log('the browser is unmuted.'); } }); ...
HTMLIFrameElement.getVolume()
the
getvolume() method of the htmliframeelement
gets the current volume of the browser <iframe>.
... syntax there are two versions of this method, a callback version: var request = instanceofhtmliframeelement.
getvolume(); and a promise version: instanceofhtmliframeelement.
getvolume().then(function(volume) { ...
... }); returns callback version: a domrequest that represents the
get volume request.
... example callback version: var browser = document.queryselector('iframe'); var request = browser.
getvolume(); request.onsuccess = function() { console.log('the current browser volume is ' + request.result); } promise version: var browser = document.queryselector('iframe'); browser.
getvolume().then(function(volume) { console.log('the current browser volume is ' + volume); }); specification not part of any specification.
How to get a process dump with Windows Task Manager
this article describes how to
get a process dump with task manager on windows.
... (to
get a process dump for thunderbird or some other product, substitute the product name where ever you see firefox in these instructions.) caution the memory dump that will be created through this process is a complete snapshot of the state of firefox when you create the file, so it contains urls of active tabs, history information, and possibly even passwords depending on what you are doing when the snapshot is taken.
... requirements windows to
get a process dump, you need to be using windows vista or above.
... see also how to
get a stacktrace for a bug report [en-us] how to create a user-mode process dump file in windows vista and in windows 7 (msdn) ...
PR_GetHostByAddr
syntax #include <prnetdb.h> prstatus pr_
gethostbyaddr( const prnetaddr *hostaddr, char *buf, printn bufsize, prhostent *hostentry); parameters the function has the following parameters: hostaddr a pointer to the ip address of host in question.
...you can retrieve the reason for the failure by calling pr_
geterror.
... description pr_
gethostbyaddr is used to perform reverse lookups of network addresses.
... that is, given a valid network address (of type prnetaddr), pr_
gethostbyaddr discovers the address' primary name, any aliases, and any other network addresses for the same host.
Getting Started With NSS
how to
get involved with nss network security services (nss) is a base library for cryptographic algorithms and secure network protocols used by mozilla software.
... would you like to
get involved and help us to improve the core security of mozilla firefox and other applications that make use of nss?
... learn about
getting the nss sources, building, and testing.
... creating your patch seee our section on nss sources, building, and testing to
get started making your patch.
FC_GetFunctionStatus
name fc_
getfunctionstatus -
get the status of a function running in parallel syntax ck_rv fc_
getfunctionstatus( ck_session_handle hsession ); parameters hsession [in] session handle.
... description fc_
getfunctionstatus is a legacy function that simply returns ckr_function_not_parallel.
... return value fc_
getfunctionstatus always returns ckr_function_not_parallel.
... examples see also nsc_
getfunctionstatus ...
JS::GetFirstArgumentAsTypeHint
syntax bool js::
getfirstargumentastypehint(jscontext* cx, callargs args, jstype *result); name type description cx jscontext * the context in which to define functions.
... description js::
getfirstargumentastypehint converts first argument of @@toprimitive method to jstype.
... if args.
get(0) is one of the strings "string", "number", or "default", set *result to jstype_string, jstype_number, or jstype_void accordingly and return true.
... see also mxr id search for js::
getfirstargumentastypehint bug 1054756 - added ...
JS::GetSelfHostedFunction
syntax jsfunction* js::
getselfhostedfunction(jscontext* cx, const char* selfhostedname, js::handle<jsid> id, unsigned nargs); name type description cx jscontext* the context from which to
get the function.
... description js::
getselfhostedfunction creates a new javascript function implemented in self-hosted javascript.
... on success, js::
getselfhostedfunction returns a pointer to the newly created function.
... see also mxr id search for js::
getselfhostedfunction bug 1140573 ...
JSObjectOps.getRequiredSlot
the jsobjectops.
getrequiredslot and setrequiredslot callbacks
get and set a required slot—one that should already have been allocated.
... syntax typedef jsval (*js
getrequiredslotop)(jscontext *cx, jsobject *obj, uint32 slot); typedef jsbool (*jssetrequiredslotop)(jscontext *cx, jsobject *obj, uint32 slot, jsval v); name type description cx jscontext * the js context in which we access the slot.
... description
get and set a required slot, one that should already have been allocated.
... note: the slot parameter is a zero-based index into obj slots, unlike the index parameter to the js_
getreservedslot and js_setreservedslot api entry points, which is a zero-based index into the jsclass_reserved_slots(clasp) reserved slots that come after the initial well-known slots: proto, parent, class, and optionally, the private data slot.
JS_GetArrayLength
syntax bool js_
getarraylength(jscontext *cx, js::handle<jsobject*> obj, uint32_t *lengthp); name type description cx jscontext * the context in which to look up the array's length.
... description js_
getarraylength
gets the .length property of obj as though by calling js_
getproperty and converts it to a 32-bit unsigned integer.
...on success, js_
getarraylength stores the length in *lengthp and returns true.
...see also mxr id search for js_
getarraylength js_
getelement js_setarraylength ...
JS_GetContextThread
syntax int js_
getcontextthread(jscontext *cx); name type description cx jscontext * the context to examine.
... description js_
getcontextthread returns the id of the thread currently associated with this context.
... js_
getcontextthread is available only if the engine is built with js_threadsafe.
... mxr id search for js_
getcontextthread ...
JS_GetEmptyStringValue
get the empty string as a value of type js::value.
... syntax // added in spidermonkey 42 js::value js_
getemptystringvalue(jscontext *cx); // obsolete since spidermonkey 42 jsval js_
getemptystringvalue(jscontext *cx); name type description cx jscontext * a context.
... description js_
getemptystringvalue returns the empty string as a js::value.
... see also mxr id search for js_
getemptystringvalue bug 1184564 -- changed jsval to js::value ...
JS_GetFunctionArity
get the number of arguments a function expects.
... syntax uint16_t js_
getfunctionarity(jsfunction *fun); name type description fun jsfunction * a javascript function.
... description js_
getfunctionarity returns the number of formal parameters of a function, fun.
... see also mxr id search for js_
getfunctionarity js_definefunction ...
JS_GetFunctionName
use js_
getfunctionid instead.
... syntax const char * js_
getfunctionname(jsfunction *fun); name type description fun jsfunction * a pointer to a javascript function.
... description js_
getfunctionname retrieves the function name associated with a function pointer, fun.
... see also js_
getfunctionid js_
getfunctiondisplayid bug 617215 ...
JS_GetGlobalForObject
syntax jsobject * js_
getglobalforobject(jscontext *cx, jsobject *obj); name type description cx jscontext * a context.
... description js_
getglobalforobject returns the last non-null object on the parent chain of the input object.
...for example, if the function refers to a global variable foo, then foo is a property of the object returned by js_
getglobalforobject.
... see also mxr id search for js_
getglobalforobject ...
JS_GetInternedStringChars
this article covers features introduced in spidermonkey 1.8.5
get the chars of an interned string.
... syntax const jschar * js_
getinternedstringchars(jsstring *str); const jschar * js_
getinternedstringcharsandlength(jsstring *str, size_t *length); name type description str jsstring * the interned string.
... description js_
getinternedstringchars returns a pointer to the interned string.
... js_
getinternedstringcharsandlength returns a pointer to the interned string and stores the length of it to *length.
JS_GetLocaleCallbacks
get and set locale specific string conversion and error message callbacks.
... syntax jslocalecallbacks * js_
getlocalecallbacks(jsruntime *rt); void js_setlocalecallbacks(jsruntime *rt, jslocalecallbacks *callbacks); name type description cx jscontext * pointer to a js context from which to derive runtime information.
...js_
getlocalecallbacks returns the address of the current locale callbacks struct, which may be nullptr.
... see also mxr id search for js_
getlocalecallbacks mxr id search for js_setlocalecallbacks mxr id search for jslocalecallbacks mxr id search for jslocaletouppercase mxr id search for jslocaletolowercase mxr id search for jslocalecompare mxr id search for jslocaletounicode ...
JS_GetNaNValue
get the not-a-number (nan) floating-point number as a value of type js::value.
... syntax // added in spidermonkey 42 js::value js_
getnanvalue(jscontext *cx); // obsolete since spidermonkey 42 jsval js_
getnanvalue(jscontext *cx); name type description cx jscontext * a context.
... description js_
getnanvalue returns a value of type js::value that represents an ieee floating-point quiet not-a-number (nan).
... see also mxr id search for js_
getnanvalue js_
getnegativeinfinityvalue js_
getpositiveinfinityvalue bug 1184564 -- changed jsval to js::value ...
JS_GetOptions
get the currently enabled jscontext options.
... syntax uint32 js_
getoptions(jscontext *cx); name type description cx jscontext * the context from which to read options.
... description js_
getoptions retrieves the option flags of a given js context cx.
...see also mxr id search for js_
getoptions js_setoptions js_toggleoptions bug 880330 ...
JS_GetOwnPropertyDescriptor
get a detailed description of that property.
... syntax bool js_
getownpropertydescriptor(jscontext *cx, js::handleobject obj, const char *name, js::mutablehandle<jspropertydescriptor> desc); bool js_
getownpropertydescriptorbyid(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandle<jspropertydescriptor> desc); bool js_
getownucpropertydescriptor(jscontext *cx, js::handleobject obj, const char16_t *name, js::mutablehandle desc); // added in spidermonkey 45 name type description cx jscontext * a context.
... description js_
getownpropertydescriptor and js_
getownpropertydescriptorbyid
get a detailed description of that property (returned in desc->obj).
... see also mxr id search for js_
getownpropertydescriptor mxr id search for js_
getownpropertydescriptorbyid mxr id search for js_
getownucpropertydescriptor js_
getpropertydescriptor js_
getpropertydescriptorbyid jspropertydescriptor bug 893186 bug 1135731 -- added js_
getownpropertydescriptor ...
JS_GetParentRuntime
syntax jsruntime * js_
getparentruntime(jscontext *cx); name type description cx jscontext * the context to query.
... description js_
getparentruntime retrieves a pointer to the parent jsruntime of the runtime for a specified jscontext.
... if the cx's runtime has no parent runtime, js_
getparentruntime returns cx's runtime itself.
... see also mxr id search for js_
getparentruntime js_
getruntime bug 964059 ...
JS_GetPendingException
get the current pending exception for a given jscontext.
... syntax bool js_
getpendingexception(jscontext *cx, js::mutablehandlevalue vp); name type description cx jscontext * pointer to the js context in which the exception was thrown.
... description if an exception has been thrown in the context cx, and it has not yet been caught or cleared, js_
getpendingexception stores the exception object in *vp and returns true.
...see also mxr id search for js_
getpendingexception js_isexceptionpending js_clearpendingexception js_reportpendingexception js_setpendingexception ...
JS_GetPropertyDescriptor
finds a specified property of an object and
gets a detailed description of that property.
... syntax bool js_
getpropertydescriptor(jscontext *cx, js::handleobject obj, const char *name, js::mutablehandle<jspropertydescriptor> desc); // added in spidermonkey 31 bool js_
getpropertydescriptorbyid(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandle<jspropertydescriptor> desc); name type description cx jscontext * a context.
... description js_
getpropertydescriptor and js_
getpropertydescriptorbyid find a specified property of an object and
gets a detailed description of that property on the prototype chain (returned in desc->obj).
...see also mxr id search for js_
getpropertydescriptor mxr id search for js_
getpropertydescriptorbyid js_
getownpropertydescriptor js_
getownpropertydescriptorbyid jspropertydescriptor bug 482381 - added js_
getpropertydescriptorbyid bug 893186 - added js_
getpropertydescriptor ...
JS_GetRuntime
syntax jsruntime * js_
getruntime(jscontext *cx); name type description cx jscontext * the context to query.
... description js_
getruntime retrieves a pointer to the jsruntime with which a specified jscontext, cx, is associated.
... each context is associated with a particular jsruntime when it is created (see js_newcontext); js_
getruntime provides a convenient, programmatic way to look up the association.
... see also mxr id search for js_
getruntime js_newcontext ...
JS_GetStringCharsAndLength
this article covers features introduced in spidermonkey 1.8.5
get the characters and the length of a string.
... syntax const jschar * js_
getstringcharsandlength(jscontext *cx, jsstring *str, size_t *length); name type description cx jscontext * the context.
... str jsstring * a string to
get characters.
... description js_
getstringcharsandlength
gets the characters and the length of the string, str if successful, js_
getstringcharsandlength returns a pointer to the string, and store the length to *length, otherwise returns null see also bug 1037869 ...
JS_GetStringLength
syntax size_t js_
getstringlength(jsstring *str); name type description str jsstring * the string to examine.
... description js_
getstringlength reports the length, in 16-bit code units, of the string str.
...this is the same as the length of the array returned by js_
getstringchars, in char16_ts (not bytes).
...see also mxr id search for js_
getstringlength js_comparestrings js_convertvalue js_
getemptystringvalue js_
getstringbytes js_internstring js_newstringcopyn js_newstringcopyz js_valuetostring ...
Components.utils.getWeakReference
to obtain the object reference, you have to call
get() on the resulting object.
... in addition, just because
get() succeeds doesn't mean your object is valid.
... syntax weakref = components.utils.
getweakreference(obj); parameters obj the object for which to obtain a weak reference.
... var arr = []; arr.push(cu.
getweakreference(window)); //now lets say this code runs in another block: for (var i=0; i<arr.length; i++) { if (arr[i].
get() == window) { //found the window break; } } ...
GetGlobalMemoryService
« xpcom api reference summary the
getglobalmemoryservice function returns a reference to xpcom's global nsimemory object.
... static nsimemory*
getglobalmemoryservice(); return values this function returns nsnull if the global memory manager does not exist or could not be initialized.
... remarks this function returns the same value as the ns_
getmemorymanager function.
... see also ns_
getmemorymanager ...
NS_CStringGetMutableData
« xpcom api reference summary the ns_cstring
getmutabledata function gives the caller write access to the string's internal buffer.
... #include "nsstringapi.h" pruint32 ns_cstring
getmutabledata( nsacstring& astring, pruint32 adatalength, char** adata ); parameters astring [in] a nsacstring instance to modify.
...example // convert any uppercase ascii letters to lowercase void tolowercase(nscstring &str) { char *iter; pruint32 len = ns_cstring
getmutabledata(str, pr_uint32_max, &iter); char *end = iter + len; while (iter != end) { char c = *iter; if (c >= 'a' && c <= 'z') *iter = c + ('a' - 'a'); ++iter; } } history this function was finalized for mozilla 1.8.
...see also ns_cstring
getdata ...
NS_StringGetData
« xpcom api reference summary the ns_string
getdata function gives the caller access to the string's internal buffer.
... #include "nsstringapi.h" pruint32 ns_string
getdata( const nsastring& astring, const prunichar** adata, prbool* aterminated ); parameters astring [in] a nsastring instance to inspect.
... return values the ns_string
getdata function returns the length of adata, measured in storage units (bytes).
... example code pruint32 countchar(const nsastring& str, prunichar c) { const prunichar* data; pruint32 len = ns_string
getdata(str, &data); pruint32 count = 0; for (pruint32 i = 0; i < len; ++i) { if (data[i] == c) ++count; } return count; } history this function was frozen for mozilla 1.7.
AnalyserNode.getByteFrequencyData() - Web APIs
the
getbytefrequencydata() method of the analysernode interface copies the current frequency data into a uint8array (unsigned byte array) passed into it.
... syntax var audioctx = new audiocontext(); var analyser = audioctx.createanalyser(); var dataarray = new uint8array(analyser.frequencybincount); // uint8array should be the same length as the frequencybincount void analyser.
getbytefrequencydata(dataarray); // fill the uint8array with data returned from
getbytefrequencydata() parameters array the uint8array that the frequency domain data will be copied to.
... analyser.fftsize = 256; var bufferlength = analyser.frequencybincount; console.log(bufferlength); var dataarray = new uint8array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { drawvisual = requestanimationframe(draw); analyser.
getbytefrequencydata(dataarray); canvasctx.fillstyle = 'rgb(0, 0, 0)'; canvasctx.fillrect(0, 0, width, height); var barwidth = (width / bufferlength) * 2.5; var barheight; var x = 0; for(var i = 0; i < bufferlength; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',50,50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight/2); ...
... specifications specification status comment web audio apithe definition of '
getbytefrequencydata()' in that specification.
AnalyserNode.getByteTimeDomainData() - Web APIs
the
getbytetimedomaindata() method of the analysernode interface copies the current waveform, or time-domain, data into a uint8array (unsigned byte array) passed into it.
... syntax const audioctx = new audiocontext(); const analyser = audioctx.createanalyser(); const dataarray = new uint8array(analyser.fftsize); // uint8array should be the same length as the fftsize analyser.
getbytetimedomaindata(dataarray); // fill the uint8array with data returned from
getbytetimedomaindata() parameters array the uint8array that the time domain data will be copied to.
... analyser.fftsize = 2048; const bufferlength = analyser.fftsize; const dataarray = new uint8array(bufferlength); analyser.
getbytetimedomaindata(dataarray); // draw an oscilloscope of the current audio source function draw() { drawvisual = requestanimationframe(draw); analyser.
getbytetimedomaindata(dataarray); canvasctx.fillstyle = 'rgb(200, 200, 200)'; canvasctx.fillrect(0, 0, width, height); canvasctx.linewidth = 2; canvasctx.strokestyle = 'rgb(0, 0, 0)'; const slicewidth = width * 1.0 / bufferlength;...
...npath(); for(var i = 0; i < bufferlength; i++) { const v = dataarray[i]/128.0; const y = v * height/2; if(i === 0) canvasctx.moveto(x, y); else canvasctx.lineto(x, y); x += slicewidth; } canvasctx.lineto(width, height/2); canvasctx.stroke(); }; draw(); specifications specification status comment web audio apithe definition of '
getbytetimedomaindata()' in that specification.
AnalyserNode.getFloatTimeDomainData() - Web APIs
the
getfloattimedomaindata() method of the analysernode interface copies the current waveform, or time-domain, data into a float32array array passed into it.
... syntax var audioctx = new audiocontext(); var analyser = audioctx.createanalyser(); var dataarray = new float32array(analyser.fftsize); // float32array needs to be the same length as the fftsize analyser.
getfloattimedomaindata(dataarray); // fill the float32array with data returned from
getfloattimedomaindata() parameters array the float32array that the time domain data will be copied to.
... analyser.fftsize = 1024; var bufferlength = analyser.fftsize; console.log(bufferlength); var dataarray = new float32array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { drawvisual = requestanimationframe(draw); analyser.
getfloattimedomaindata(dataarray); canvasctx.fillstyle = 'rgb(200, 200, 200)'; canvasctx.fillrect(0, 0, width, height); canvasctx.linewidth = 2; canvasctx.strokestyle = 'rgb(0, 0, 0)'; canvasctx.beginpath(); var slicewidth = width * 1.0 / bufferlength; var x = 0; for(var i = 0; i < bufferlength; i++) { var v = dataarray[i] * 200.0; var y = height/2 + v; if(i === 0) { ...
... specifications specification status comment web audio apithe definition of '
getfloattimedomaindata()' in that specification.
AudioBuffer.getChannelData() - Web APIs
the
getchanneldata() method of the audiobuffer interface returns a float32array containing the pcm data associated with the channel, defined by the channel parameter (with 0 representing the first channel).
... syntax var myarraybuffer = audioctx.createbuffer(2, framecount, audioctx.samplerate); var nowbuffering = myarraybuffer.
getchanneldata(channel); parameters channel the channel property is an index representing the particular channel to
get data for.
...xt var framecount = audioctx.samplerate * 2.0; var myarraybuffer = audioctx.createbuffer(2, framecount, audioctx.samplerate); button.onclick = function() { // fill the buffer with white noise; //just random values between -1.0 and 1.0 for (var channel = 0; channel < channels; channel++) { // this gives us the actual arraybuffer that contains the data var nowbuffering = myarraybuffer.
getchanneldata(channel); for (var i = 0; i < framecount; i++) { // math.random() is in [0; 1.0] // audio needs to be in [-1.0; 1.0] nowbuffering[i] = math.random() * 2 - 1; } } //
get an audiobuffersourcenode.
...ource = audioctx.createbuffersource(); // set the buffer in the audiobuffersourcenode source.buffer = myarraybuffer; // connect the audiobuffersourcenode to the // destination so we can hear the sound source.connect(audioctx.destination); // start the source playing source.start(); } specification specification status comment web audio apithe definition of '
getchanneldata' in that specification.
CSSPrimitiveValue.getFloatValue() - Web APIs
the
getfloatvalue() method of the cssprimitivevalue interface is used to
get a float value in a specified unit.
... syntax var floatvalue = cssprimitivevalue.
getfloatvalue(unit); parameters unittype an unsigned short representing the code for the unit type, in which the value should be returned.
...the value can be obtained by using the
getfloatvalue method.
... example var cs = window.
getcomputedstyle(document.body); var cssvalue = cs.
getpropertycssvalue("margin-top"); console.log(cssvalue.
getfloatvalue(cssprimitivevalue.css_cm)); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.
getfloatvalue' in that specification.
CSSStyleDeclaration.getPropertyCSSValue() - Web APIs
the cssstyledeclaration.
getpropertycssvalue() method interface returns a cssvalue containing the css value for a property.
... you should use cssstyledeclaration.
getpropertyvalue() instead.
... syntax var value = style.
getpropertycssvalue(property); parameters property is a domstring representing the property name to be retrieved.
... example the following javascript code
gets an object containing the computed rgb values of the color css property: var style = window.
getcomputedstyle(elem, null); var rgbobj = style.
getpropertycssvalue('color').
getrgbcolorvalue(); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification.
CanvasRenderingContext2D.drawWidgetAsOnScreen() - Web APIs
the non-standard and internal only canvasrenderingcontext2d.drawwid
getasonscreen() method of the canvas 2d api renders the root wid
get of a window into the canvas.
... unlike drawwindow(), this api uses the operating system to snapshot the wid
get on-screen, rather than reading from gecko's own compositor.
...it is only supported on windows, only on wid
gets that use omtc, and only from within the chrome process.
... syntax void ctx.drawwid
getasonscreen(window); parameters window the window to render.
ClipboardItem.getType() - Web APIs
the
gettype() method of the clipboarditem interface returns a promise that resolves with a blob of the requested mime type or an error if the mime type is not found.
... syntax var blob = clipboarditem.
gettype(type); parameters type a valid mime type.
...then utilizing the clipboarditem.types property to set the
gettype() argument and return the corresponding blob object.
... async function
getclipboardcontents() { try { const clipboarditems = await navigator.clipboard.read(); for (const clipboarditem of clipboarditems) { for (const type of clipboarditem.types) { const blob = await clipboarditem.
gettype(type); // we can now use blob here } } } catch (err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eventsthe definition of 'clipboarditem' in that specification.
ContentIndex.getAll() - Web APIs
the
getall() method of the contentindex interface returns a promise that resolves with an iterable list of content index entries.
... syntax var indexedcontent = contentindex.
getall(); parameters this method receives no parameters.
... async function createreadinglist() { // access our service worker registration const registration = await navigator.serviceworker.ready; //
get our index entries const entries = await registration.index.
getall(); // create a containing element const readinglistelem = document.createelement('div'); // test for entries if (!array.length) { // if there are no entries, display a message const message = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' re...
...y of entries) { const listitem = document.createelement('li'); const anchorelem = document.createelement('a'); anchorelem.innertext = entry.title; anchorelem.setattribute('href', entry.url); listelem.append(listitem); } readinglistelem.append(listelem); } } specifications specification status comment unknownthe definition of '
getall' in that specification.
CredentialsContainer.get() - Web APIs
the
get() method of the credentialscontainer interface returns a promise to a single credential instance that matches the provided parameters.
... syntax var promise = credentialscontainer.
get([options]) parameters options optional an object of type credentialrequestoptions that contains options for the request.
... signal: an instance of abortsignal that can indicate that an ongoing
get() operation should be halted.
... specifications specification status comment credential management level 1the definition of '
get()' in that specification.
DataTransfer.mozGetDataAt() - Web APIs
the datatransfer.moz
getdataat() method is used to retrieve an item in the drag event's data transfer object, based on a given format and index.
... syntax nsivariant datatransfer.moz
getdataat([type], index); arguments type a string representing the type of the drag data to retrieve from the drag data object.
... example this example shows the use of the moz
getdataat() method in a drop event handler.
... function drop_handler(event) { var dt = event.datatransfer; var count = dt.mozitemcount; output("items: " + count + "\n"); for (var i = 0; i < count; i++) { output(" item " + i + ":\n"); var types = dt.moztypesat(i); for (var t = 0; t < types.length; t++) { output(" " + types[t] + ": "); try { var data = dt.moz
getdataat(types[t], i); output("(" + (typeof data) + ") : <" + data + " >\n"); } catch (ex) { output("<>\n"); dump(ex); } } } } specifications this method is not defined in any web standard.
Event.originalTarget - Web APIs
the original tar
get of the event before any retar
getings.
...see anonymous content#event_flow_and_tar
geting for more details.
... note: originaltar
get may also be native anonymous content (see bug 208427), in which case it's useless for non-privileged code.
... see also comparison of event tar
gets example need an example that makes sense here specification this is a mozilla-specific property.
EventTarget() - Web APIs
the eventtar
get() constructor creates a new eventtar
get object instance.
... syntax var myeventtar
get = new eventtar
get(); parameters none.
... return value an instance of the eventtar
get object.
... examples class myeventtar
get extends eventtar
get { constructor(mysecret) { super(); this._secret = mysecret; }
get secret() { return this._secret; } }; let myeventtar
get = new myeventtar
get(5); let value = myeventtar
get.secret; // == 5 myeventtar
get.addeventlistener("foo", function(e) { this._secret = e.detail; }); let event = new customevent("foo", { detail: 7 }); myeventtar
get.dispatchevent(event); let newvalue = myeventtar
get.secret; // == 7 specifications specification status comment domthe definition of 'eventtar
get() constructor' in that specification.
File.getAsText() - Web APIs
summary the
getastext method provides the file's data interpreted as text using a given encoding.
... syntax var str = instanceoffile.
getastext(encoding); parameters encoding a string indicating the encoding to use for the returned data.
... example // fileinput is a htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.
getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // object for allowed media types var accept = { binary : ["image/png", "image/jpeg"], text : ["text/plain", "text/css", "application/xml", "text/html"] }; var file; for (var i = 0; i < files.length; i++) { file = files[i]; // if file type could be detected if (file !== null) { if (accept.text.indexof(file.mediatype) > -1) { // file is of type text, which we accept // make sure it's encoded as utf-8 ...
... var data = file.
getastext("utf-8"); // modify data with string methods } else if (accept.binary.indexof(file.mediatype) > -1) { // binary } } } specification not part of any specification.
FileSystemEntry.getMetadata() - Web APIs
} the filesystementry interface's method
getmetadata() obtains a metadata object with information about the file system entry, such as its modification date and time and its size.
... syntax filesystementry.
getmetadata(successcallback[, errorcallback]); parameters successcallback a function which is called when the copy operation is succesfully completed.
... workingdirectory.
getfile("tmp/log.txt", {}, function(fileentry) { fileentry.
getmetadata(function(metadata) { if (metadata.size > 1048576) { workingdirectory.
getdirectory("log", {}, function(direntry) { fileentry.moveto(direntry); }, handleerror); } }); }, handleerror); browser compatibility the compatibility table on this page is generated from structured data.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet
getmetadata experimentaldeprecatednon-standardchrome full support 8edge full support 79firefox no support noie no support noopera no support nosafari no support nowebview android full support ≤37chro...
FormData.get() - Web APIs
the
get() method of the formdata interface returns the first value associated with a given key from within a formdata object.
... if you expect multiple values and want all of them, use the
getall() method instead.
... syntax formdata.
get(name); parameters name a usvstring representing the name of the key you want to retrieve.
... example the following line creates an empty formdata object: var formdata = new formdata(); if we add two username values using formdata.append: formdata.append('username', 'chris'); formdata.append('username', 'bob'); the following
get() function will only return the first username value appended: formdata.
get('username'); // returns "chris" specifications specification status comment xmlhttprequestthe definition of '
get()' in that specification.
HTMLCanvasElement.mozGetAsFile() - Web APIs
the non-standard, firefox-specific the htmlcanvaselement method moz
getasfile() returns a memory-based file object representing the image contained in the canvas.
... syntax canvas.moz
getasfile(name, type); parameters name a domstring indicating the file name to give the file representing the image file in memory.
... html <canvas id="canvas" width="100" height="100"></canvas> <p><a href="#" id="link">click here to try out moz
getasfile()</a>.</p> javascript the following code uses moz
getasfile() to create a file object from the canvas and appends it as an image to the page by loading it as a data url using the readasdataurl() method.
... function draw() { var canvas = document.
getelementbyid('canvas'); var ctx = canvas.
getcontext('2d'); ctx.fillstyle = 'rgb(200, 0, 0)'; ctx.fillrect(10, 10, 55, 50); ctx.fillstyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillrect(30, 30, 55, 50); var link = document.
getelementbyid('link'); link.addeventlistener('click', copy); } function copy() { var canvas = document.
getelementbyid('canvas'); var f = canvas.moz
getasfile('test.png'); var reader = new filereader(); reader.readasdataurl(f); reader.onloadend = function() { var newimg = document.createelement('img'); newimg.src = reader.result; document.body.appendchild(newimg); } } window.addeventlistener('load', draw); specifications not part of any ...
Headers.getAll() - Web APIs
the
getall() method of the headers interface used to return an array of all the values of a header within a headers object with a given name; in newer versions of the fetch spec, it has been deleted, and headers.
get() has been updated to fetch all header values instead of only the first one.
... syntax myheaders.
getall(name); parameters name the name of the http header whose values you want to retrieve from the headers object.
... example creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could add a header to this using headers.append, then retrieve it using
getall(): myheaders.append('content-type', 'image/jpeg'); myheaders.
getall('content-type'); // returns [ "image/jpeg" ] if the header has multiple values associated with it, the array will contain all the values, in the order they were added to the headers object: myheaders.append('accept-encoding', 'deflate'); myheaders.append('accept-encoding', 'gzip'); myheaders.
getall('accept-encoding'); // returns [ "deflate", "gzip" ] ...
... note: use headers.
get to return only the first value added to the headers object.
IDBIndex.getAllKeys() - Web APIs
the
getallkeys() method of the idbindex interface instantly retrieves the primary keys of all objects inside the index, setting them as the result of the request object.
... syntax var allkeysrequest = idbindex.
getallkeys(); var allkeysrequest = idbindex.
getallkeys(query); var allkeysrequest = idbindex.
getallkeys(query, count); parameters query optional a key or an idbkeyrange identifying the keys to retrieve.
... example var myindex = objectstore.index('index'); var
getallkeysrequest = myindex.
getallkeys();
getallkeysrequest.onsuccess = function() { console.log(
getallkeysrequest.result); } specification specification status comment indexed database api draftthe definition of '
getall()' in that specification.
... indexed database api draftthe definition of '
getall()' in that specification.
Keyboard.getLayoutMap() - Web APIs
the
getlayoutmap() method of the keyboard interface returns a promise that resolves with an instance of keyboardlayoutmap which is a map-like object with functions for retrieving the strings associated with specific physical keys.
... syntax var promise = keyboard.
getlayoutmap() parameters none.
... example the following example demonstrates how to
get the location- or layout-specific string associated with the key that corresponds to the 'w' key on an english qwerty keyboard.
... var keyboard = navigator.keyboard; keyboard.
getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.
get('keyw'); window.alert('press ' + upkey + ' to move up.'); }) specifications specification status comment keyboard mapthe definition of '
getlayoutmap()' in that specification.
KeyboardLayoutMap.get() - Web APIs
the
get() method of the keyboardlayoutmap interface returns the element with the given key.
... syntax var value = keyboardlayoutmap.
get(key) parameters key the key of the item to return from the map.
... example the following example demonstrates how to
get the location- or layout-specific string associated with the key that corresponds to the 'w' key on an english qwerty keyboard.
... var keyboard = navigator.keyboard; keyboard.
getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.
get('keyw'); window.alert('press ' + upkey + ' to move up.'); } specifications specification status comment keyboard mapthe definition of '
get()' in that specification.
MediaDevices.getSupportedConstraints() - Web APIs
the
getsupportedconstraints() method of the mediadevices interface returns an object based on the mediatracksupportedconstraints dictionary, whose member fields each specify one of the constrainable properties the user agent understands.
... syntax var supportedconstraints = navigator.mediadevices.
getsupportedconstraints(); parameters none.
... html <p>the following media constraints are supported by your browser:</p> <ul id="constraintlist"> </ul> css body { font: 15px arial, sans-serif; } javascript let constraintlist = document.
getelementbyid("constraintlist"); let supportedconstraints = navigator.mediadevices.
getsupportedconstraints(); for (let constraint in supportedconstraints) { if (supportedconstraints.hasownproperty(constraint)) { let elem = document.createelement("li"); elem.innerhtml = "<code>" + constraint + "</code>"; constraintlist.appendchild(elem); } } result specifications speci...
...fication status comment media capture and streamsthe definition of '
getsupportedconstraints()' in that specification.
MediaStream.getTracks() - Web APIs
the
gettracks() method of the mediastream interface returns a sequence that represents all the mediastreamtrack objects in this stream's track set, regardless of mediastreamtrack.kind.
... syntax var mediastreamtracks = mediastream.
gettracks() parameters none.
... example navigator.mediadevices.
getusermedia({audio: false, video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; // stop the stream after 5 seconds settimeout(() => { const tracks = mediastream.
gettracks() tracks[0].stop() }, 5000) }) specifications specification status comment media capture and streamsthe definition of '
gettracks()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet
gettracks experimentalchrome full support 45edge full support 12firefox full support yesie no support noopera full support yessafari full support ...
MediaStreamTrack.getConstraints() - Web APIs
the
getconstraints() method of the mediastreamtrack interface returns a mediatrackconstraints object containing the set of constraints most recently established for the track using a prior call to applyconstraints().
... syntax const constraints = track.
getconstraints() return value a mediatrackconstraints object which indicates the constrainable properties the web site or app most recently set using applyconstraints().
...to
get the currently active settings for all constrainable properties, you should instead call
getsettings().
... function switchcameras(track, camera) { const constraints = track.
getconstraints(); constraints.facingmode = camera; track.applyconstraints(constraints); } specifications specification status comment media capture and streamsthe definition of '
getconstraints()' in that specification.
MediaStreamTrack.getSettings() - Web APIs
the
getsettings() method of the mediastreamtrack interface returns a mediatracksettings object containing the current values of each of the constrainable properties for the current mediastreamtrack.
... syntax const settings = track.
getsettings() returns a mediatracksettings object describing the current configuration of the track's constrainable properties.
...to instead fetch the most-recently established constraints for the track's properties, as specified by the site's code, use
getconstraints().
... specifications specification status comment media capture and streamsthe definition of '
getsettings()' in that specification.
MouseEvent.getModifierState() - Web APIs
the mouseevent.
getmodifierstate() method returns the current state of the specified modifier key: true if the modifier is active (i.e., the modifier key is pressed or locked), otherwise, false.
... see the document of keyboardevent.
getmodifierstate() for details.
... syntax var active = event.
getmodifierstate(keyarg); returns a boolean parameters keyarg a modifier key value.
... specifications specification status comment document object model (dom) level 3 events specificationthe definition of '
getmodifierstate()' in that specification.
Navigator.getBattery() - Web APIs
the
getbattery() method provides information about the system's battery.
... syntax var batterypromise = navigator.
getbattery(); return value a promise which, when resolved, calls its fulfillment handler with a single parameter: a batterymanager object which you can use to
get information about the battery's state.
... let batteryischarging = false; navigator.
getbattery().then(function(battery) { batteryischarging = battery.charging; battery.addeventlistener('chargingchange', function() { batteryischarging = battery.charging; }); }); for more examples and details, see battery status api.
... specifications specification status comment battery status apithe definition of 'navigator.
getbattery()' in that specification.
Node.getUserData() - Web APIs
the node.
getuserdata() method returns any user domuserdata set previously on the given node by node.setuserdata().
... the node.setuserdata and node.
getuserdata methods are no longer available from web content.
... syntax userdata = somenode.
getuserdata(userkey); parameters userkey is the key to choose the specific data sought for the given node.
... example var d = document.setuserdata('key', 15, null); console.log(document.
getuserdata('key')); // 15 specifications specification status comment document object model (dom) level 3 core specificationthe definition of 'node.
getuserdata()' in that specification.
PerformanceObserverEntryList.getEntries() - Web APIs
the
getentries() method of the performanceobserverentrylist interface returns a list of explicitly observed performance entry objects for a given filter.
... syntax general syntax: entries = list.
getentries(); entries = list.
getentries(performanceentryfilteroptions); specific usage: entries = list.
getentries({name: "entry_name", entrytype: "mark"}); parameters performanceentryfilteroptionsoptional is a performanceentryfilteroptions dictionary, having the following fields: "name", the name of a performance entry.
...unction print_perf_entry(pe) { console.log("name: " + pe.name + "; entrytype: " + pe.entrytype + "; starttime: " + pe.starttime + "; duration: " + pe.duration); } // create observer for all performance event types var observe_all = new performanceobserver(function(list, obs) { var perfentries; // print all entries perfentries = list.
getentries(); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } // print entries named "begin" with type "mark" perfentries = list.
getentriesbyname("begin", "mark"); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } // print entries with type "mark" perfentries = list.
getentriesbytype("mark"); for (var i=0; i < ...
...perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to all performance event types observe_all.observe({entrytypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']}); var observe_frame = new performanceobserver(function(list, obs) { var perfentries = list.
getentries(); // should only have 'frame' entries for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to frame event only observe_frame.observe({entrytypes: ['frame']}); specifications specification status comment performance timeline level 2the definition of '
getentries()' in that specification.
PointerEvent.getCoalescedEvents() - Web APIs
the
getcoalescedevents() method of the pointerevent interface returns a sequence of all pointerevent instances that were coalesced into the dispatched pointermove event.
... syntax var pointerevents[] = pointerevent.
getcoalescedevents() parameters none.
... specifications specification status comment pointer events – level 3the definition of '
getcoalescedevents()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet
getcoalescedevents experimentalchrome full support 58edge full support 79firefox full support 59ie no support noopera full support 45safari no support ...
PublicKeyCredential.getClientExtensionResults() - Web APIs
getclientextensionresults() is a method of the publickeycredential interface that returns an arraybuffer which contains a map between the extensions identifiers and their results after having being processed by the client.
... during the creation or fetching of a publickeycredential (respectively via navigator.credentials.create() and navigator.credentials.
get()), it is possible to have "custom" processing by the client for different extensions which are respectively given by publickeycredentialcreationoptions.extensions and publickeycredentialrequestoptions.extensions.
... syntax maparraybuffer = publickeycredential.
getclientextensionresults() parameters none.
...r */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16) /* from the server */, name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var mybuffer = newcredentialinfo.
getclientextensionresults(); // mybuffer will contain the result of any of the processing of the "loc" and "uvi" extensions }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of '
getclientextensionresults()' in that specification.
PushManager.getSubscription() - Web APIs
the pushmanager.
getsubscription() method of the pushmanager interface retrieves an existing push subscription.
... syntax pushmanager.
getsubscription().then(function(pushsubscription) { ...
... serviceworkerregistration.pushmanager.
getsubscription() .then(function(subscription) { // enable any ui which subscribes / unsubscribes from // push messages.
... // keep your server in sync with the latest subscriptionid sendsubscriptiontoserver(subscription); showcurlcommand(subscription); // set your ui to show they have subscribed for // push messages pushbutton.textcontent = 'disable push messages'; ispushenabled = true; }) .catch(function(err) { window.demo.debug.log('error during
getsubscription()', err); }); }); specifications specification status comment push apithe definition of '
getsubscription()' in that specification.
RTCPeerConnection.getConfiguration() - Web APIs
the rtcpeerconnection.
getconfiguration() method returns an rtcconfiguration object which indicates the current configuration of the rtcpeerconnection on which the method is called.
... syntax var configuration = rtcpeerconnection.
getconfiguration(); parameters this method takes no input parameters.
... let configuration = mypeerconnection.
getconfiguration(); if ((configuration.certificates != undefined) && (!configuration.certificates.length)) { rtcpeerconnection.generatecertificate({ name: 'rsassa-pkcs1-v1_5', hash: 'sha-256', moduluslength: 2048, publicexponent: new uint8array([1, 0, 1]) }).then(function(cert) { configuration.certificates = [cert]; mypeerconnection.setconfiguration(configuration); }); } this example fetches the current configuration of the rtcpeerconnection, then looks to see if it has any certificates set by examining whet...
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of '
getconfiguration()' in that specification.
RTCPeerConnection.getIdentityAssertion() - Web APIs
the rtcpeerconnection.
getidentityassertion() method initiates the gathering of an identity assertion.
... syntax pc.
getidentityassertion(); there is neither parameter nor return value for this method.
... example var pc = new peerconnection(); pc.
getidentityassertion(); // not mandatory, but we know that we will need it in the future.
... specifications specification status comment identity for webrtcthe definition of 'rtcpeerconnection.
getidentityassertion()' in that specification.
RTCPeerConnection.getReceivers() - Web APIs
the rtcpeerconnection.
getreceivers() method returns an array of rtcrtpreceiver objects, each of which represents one rtp receiver.
... each rtp receiver manages the reception and decoding of data for a mediastreamtrack on an rtcpeerconnection syntax var receivers = rtcpeerconnection.
getreceivers(); return value an array of rtcrtpreceiver objects, one for each track on the connection.
... the order of the returned rtcrtpreceiver instances is not defined by the specification, and may change from one call to
getreceivers() to the next.
... example tbd specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.
getreceivers()' in that specification.
RTCRtpSender.getParameters() - Web APIs
the
getparameters() method of the rtcrtpsender interface returns an rtcrtpsendparameters object describing the current configuration for the encoding and transmission of media on the sender's track.
... syntax var rtpsendparameters = rtpsender.
getparameters() parameters none.
... examples this example
gets the sender's current transaction id; the transaction id uniquely identifies the current set of parameters, to ensure that calls to setparameters() are always handled in the correct order, avoiding inadvertently overwriting parameters with older parameters.
... function
getsendertransactionid(sender) { let parameters = sender.
getparameters(); return parameters.transactionid; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of '
getparameters()' in that specification.
ResizeObserverEntry.target - Web APIs
the tar
get read-only property of the resizeobserverentry interface returns a reference to the element or svgelement that is being observed.
... syntax var element = resizeobserverentry.tar
get; var svgelement = resizeobserverentry.tar
get; value an element or svgelement representing the element being observed.
... to grab a reference to the observed element so we can update its border-radius value after each change, we make use of the tar
get property of each entry — entry.tar
get.style.borderradius.
... const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { entry.tar
get.style.borderradius = math.min(100, (entry.contentboxsize.inlinesize/10) + (entry.contentboxsize.blocksize/10)) + 'px'; } else { entry.tar
get.style.borderradius = math.min(100, (entry.contentrect.width/10) + (entry.contentrect.height/10)) + 'px'; } } }); resizeobserver.observe(document.queryselector('div')); specifications specification status comment resize observerthe definition of 'tar
get' in that specification.
SpeechSynthesis.getVoices() - Web APIs
the
getvoices() method of the speechsynthesis interface returns a list of speechsynthesisvoice objects representing all the available voices on the current device.
... syntax speechsynthesisinstance.
getvoices(); parameters none.
... example javascript function populatevoicelist() { if(typeof speechsynthesis === 'undefined') { return; } var voices = speechsynthesis.
getvoices(); for(var i = 0; i < voices.length; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); document.
getelementbyid("voiceselect").appendchild(option); } } populatevoiceli...
...st(); if (typeof speechsynthesis !== 'undefined' && speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } html <select id="voiceselect"></select> specifications specification status comment web speech apithe definition of '
getvoices()' in that specification.
Storage.getItem() - Web APIs
the
getitem() method of the storage interface, when passed a key name, will return that key's value, or null if the key does not exist, in the given storage object.
... syntax var avalue = storage.
getitem(keyname); parameters keyname a domstring containing the name of the key you want to retrieve the value of.
... function setstyles() { var currentcolor = localstorage.
getitem('bgcolor'); var currentfont = localstorage.
getitem('font'); var currentimage = localstorage.
getitem('image'); document.
getelementbyid('bgcolor').value = currentcolor; document.
getelementbyid('font').value = currentfont; document.
getelementbyid('image').value = currentimage; htmlelem.style.backgroundcolor = '#' + currentcolor; pelem.style.fontfamily = currentfont; imgelem.setattribute('src', currentimage); } note: to see this used within a real world example, see our web storage ...
... specifications specification status comment html living standardthe definition of 'storage.
getitem' in that specification.
URLSearchParams.getAll() - Web APIs
the
getall() method of the urlsearchparams interface returns all the values associated with a given search parameter as an array.
... syntax urlsearchparams.
getall(name) parameters name the name of the parameter to return.
...params.append('foo', 4); console.log(params.
getall('foo')) //prints ["1","4"].
... specifications specification status comment urlthe definition of '
getall()' in that specification.
WEBGL_debug_shaders.getTranslatedShaderSource() - Web APIs
the webgl_debug_shaders.
gettranslatedshadersource() method is part of the webgl api and allows you to debug a translated shader.
... syntax gl.
getextension('webgl_debug_shaders').
gettranslatedshadersource(shader); parameters shader a webglshader to
get the translated source from.
... examples var canvas = document.
getelementbyid('canvas'); var gl = canvas.
getcontext('webgl'); var shader = gl.createshader(gl.fragment_shader); gl.shadersource(shader, 'void main() { gl_fragcolor = vec4(gl_fragcoord.x, 0.0, 0.0, 1.0); }'); gl.compileshader(shader); var src = gl.
getextension('webgl_debug_shaders').
gettranslatedshadersource(shader); console.log(src); // "void main(){ // (gl_fragcolor = vec4(gl_fragcoord.x, 0.0, 0.0, 1.0)); // }" specifications specification status comment webgl_debug_shadersthe definition of '...
...webgl_debug_shaders.
gettranslatedshadersource' in that specification.
WebGL2RenderingContext.getActiveUniformBlockName() - Web APIs
the webgl2renderingcontext.
getactiveuniformblockname() method of the webgl 2 api retrieves the name of the active uniform block at a given index within a webglprogram.
... syntax domstring gl.
getactiveuniformblockname(program, uniformblockindex); parameters program a webglprogram containing the uniform block.
... examples var blockname = gl.
getactiveuniformblockname(program, 0); specifications specification status comment webgl 2.0the definition of '
getactiveuniformblockname' in that specification.
... opengl es 3.0the definition of 'gl
getactiveuniformblockname' in that specification.
WebGL2RenderingContext.getActiveUniformBlockParameter() - Web APIs
the webgl2renderingcontext.
getactiveuniformblockparameter() method of the webgl 2 api retrieves information about an active uniform block within a webglprogram.
... syntax any gl.
getactiveuniformblockparameter(program, uniformblockindex, pname); parameters program a webglprogram containing the active uniform block.
... examples var blocksize = gl.
getactiveuniformblockparameter(program, blockindex, gl.uniform_block_data_size); specifications specification status comment webgl 2.0the definition of '
getactiveuniformblockparameter' in that specification.
... opengl es 3.0the definition of 'gl
getactiveuniformblockiv' in that specification.
WebGL2RenderingContext.getActiveUniforms() - Web APIs
the webgl2renderingcontext.
getactiveuniforms() method of the webgl 2 api retrieves information about active uniforms within a webglprogram.
... syntax any gl.
getactiveuniforms(program, uniformindices, pname); parameters program a webglprogram containing the active uniforms.
... examples var uniformindices = gl.
getuniformindices(program, ['ubored', 'ubogreen', 'uboblue']); var uniformoffsets = gl.
getactiveuniforms(program, uniformindices, gl.uniform_offset); specifications specification status comment webgl 2.0the definition of '
getactiveuniforms' in that specification.
... opengl es 3.0the definition of 'gl
getactiveuniformsiv' in that specification.
WebGL2RenderingContext.getBufferSubData() - Web APIs
the webgl2renderingcontext.
getbuffersubdata() method of the webgl 2 api reads data from a buffer binding point and writes them to an arraybuffer or sharedarraybuffer.
... syntax void gl.
getbuffersubdata(tar
get, srcbyteoffset, arraybufferview dstdata, optional dstoffset, optional length); parameters tar
get a glenum specifying the binding point (tar
get).
... an invalid_operation error is generated if: zero is bound to tar
get tar
get is transform_feedback_buffer, and any transform feedback object is currently active.
... examples var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float32array(vertices), gl.static_draw); var arrbuffer = new arraybuffer(vertices.length * float32array.bytes_per_element); gl.
getbuffersubdata(gl.array_buffer, 0, arrbuffer); specifications specification status comment webgl 2.0the definition of '
getbuffersubdata' in that specification.
WebGL2RenderingContext.getFragDataLocation() - Web APIs
the webgl2renderingcontext.
getfragdatalocation() method of the webgl 2 api returns the binding of color numbers to user-defined varying out variables.
... syntax glint gl.
getfragdatalocation(program, name); parameters program a webglprogram to query.
... examples // program is a linked webglprogram gl.
getfragdatalocation(program, 'fragcolor'); specifications specification status comment webgl 2.0the definition of '
getfragdatalocation' in that specification.
... opengl es 3.0the definition of 'gl
getfragdatalocation' in that specification.
WebGL2RenderingContext.getInternalformatParameter() - Web APIs
the webgl2renderingcontext.
getinternalformatparameter() method of the webgl 2 api returns information about implementation-dependent support for internal formats.
... syntax any gl.
getinternalformatparameter(tar
get, internalformat, pname); parameters tar
get a glenum specifying the tar
get renderbuffer object.
... examples var samples = gl.
getinternalformatparameter(gl.renderbuffer, gl.rgba8, gl.samples); specifications specification status comment webgl 2.0the definition of '
getinternalformatparameter' in that specification.
... opengl es 3.0the definition of 'gl
getinternalformativ' in that specification.
WebGL2RenderingContext.getQueryParameter() - Web APIs
the webgl2renderingcontext.
getqueryparameter() method of the webgl 2 api returns parameter information of a webglquery object.
... syntax any gl.
getqueryparameter(query, pname); parameters query a webglquery object.
... examples var query = gl.createquery(); gl.beginquery(gl.any_samples_passed, query); var result = gl.
getqueryparameter(query, gl.query_result); specifications specification status comment webgl 2.0the definition of '
getqueryparameter' in that specification.
... opengl es 3.0the definition of 'gl
getqueryobjectuiv' in that specification.
WebGL2RenderingContext.getSamplerParameter() - Web APIs
the webgl2renderingcontext.
getsamplerparameter() method of the webgl 2 api returns parameter information of a webglsampler object.
... syntax any gl.
getsamplerparameter(sampler, pname); parameters sampler a webglsampler object.
... examples var sampler = gl.createsampler(); gl.
getsamplerparameter(sampler, gl.texture_compare_func); specifications specification status comment webgl 2.0the definition of '
getsamplerparameter' in that specification.
... opengl es 3.0the definition of 'gl
getsamplerparameter' in that specification.
WebGL2RenderingContext.getSyncParameter() - Web APIs
the webgl2renderingcontext.
getsyncparameter() method of the webgl 2 api returns parameter information of a webglsync object.
... syntax any gl.
getsyncparameter(sync, pname); parameters sync a webglsync object.
... examples var sync = gl.fencesync(gl.sync_gpu_commands_complete, 0); gl.
getsyncparameter(sync, gl.sync_status); specifications specification status comment webgl 2.0the definition of '
getsyncparameter' in that specification.
... opengl es 3.0the definition of 'gl
getsynciv' in that specification.
WebGL2RenderingContext.getTransformFeedbackVarying() - Web APIs
the webgl2renderingcontext.
gettransformfeedbackvarying() method of the webgl 2 api returns information about varying variables from webgltransformfeedback buffers.
... syntax webglactiveinfo gl.
gettransformfeedbackvarying(program, index); parameters program a webglprogram.
... examples activeinfo = gl.
gettransformfeedbackvarying(program, 0); specifications specification status comment webgl 2.0the definition of '
gettransformfeedbackvarying' in that specification.
... opengl es 3.0the definition of 'gl
gettransformfeedbackvarying' in that specification.
WebGL2RenderingContext.getUniformBlockIndex() - Web APIs
the webgl2renderingcontext.
getuniformblockindex() method of the webgl 2 api retrieves the index of a uniform block within a webglprogram.
... syntax gluint gl.
getuniformblockindex(program, uniformblockname); parameters program a webglprogram containing the uniform block.
... examples // assuming a shader with the following declaration: // uniform ubodata { // mat4 foo; // } instancename; // use the block name, not the instance name: var blockindex = gl.
getuniformblockindex(program, 'ubodata'); specifications specification status comment webgl 2.0the definition of '
getuniformblockindex' in that specification.
... opengl es 3.0the definition of 'gl
getuniformblockindex' in that specification.
WebGL2RenderingContext.getUniformIndices() - Web APIs
the webgl2renderingcontext.
getuniformindices() method of the webgl 2 api retrieves the indices of a number of uniforms within a webglprogram.
... syntax sequence<gluint> gl.
getuniformindices(program, uniformnames); parameters program a webglprogram containing uniforms whose indices to query.
... examples var uniformindices = gl.
getuniformindices(program, ['ubored', 'ubogreen', 'uboblue']); specifications specification status comment webgl 2.0the definition of '
getuniformindices' in that specification.
... opengl es 3.0the definition of 'gl
getuniformindices' in that specification.
WebGLRenderingContext.getAttachedShaders() - Web APIs
the webglrenderingcontext.
getattachedshaders() method of the webgl api returns a list of webglshader objects attached to a webglprogram.
... syntax sequence<webglshader> gl.
getattachedshaders(program); parameters program a webglprogram object to
get attached shaders for.
... examples var program = gl.createprogram(); // attach pre-existing shaders gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.
getattachedshaders(program); specifications specification status comment webgl 1.0the definition of '
getattachedshaders' in that specification.
... opengl es 2.0the definition of 'gl
getattachedshaders' in that specification.
WebGLRenderingContext.getContextAttributes() - Web APIs
the webglrenderingcontext.
getcontextattributes() method returns a webglcontextattributes object that contains the actual context parameters.
... syntax gl.
getcontextattributes(); return value a webglcontextattributes object that contains the actual context parameters, or null if the context is lost.
... examples given this <canvas> element <canvas id="canvas"></canvas> and given this webgl context var canvas = document.
getelementbyid('canvas'); var gl = canvas.
getcontext('webgl'); gl.
getcontextattributes(); the
getcontextattributes method returns an object that describes the attributes set on this context, for example: { alpha: true, antialias: true, depth: true, failifmajorperformancecaveat: false, powerpreference: "default", premultipliedalpha: true, preservedrawingbuffer: false, stencil: false, desynchronized: false } the context attributes can be set when creating the context using the htmlcanvaselement.
getcontext() method: canvas.
getcontext('webgl', { antialias: false, depth: false }); see
getcontext() for more informati...
... specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.
getcontextattributes' in that specification.
WebGLRenderingContext.getProgramInfoLog() - Web APIs
the webglrenderingcontext.
getprograminfolog returns the information log for the specified webglprogram object.
... syntax gl.
getprograminfolog(program); parameters program the webglprogram to query.
... examples checking program errors var program = gl.createprogram(); // attach pre-existing shaders gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.
getprograminfolog(program); specifications specification status comment webgl 1.0the definition of '
getprograminfolog' in that specification.
... opengl es 2.0the definition of 'gl
getprograminfolog' in that specification.
WebGLRenderingContext.getShaderInfoLog() - Web APIs
the webglrenderingcontext.
getshaderinfolog returns the information log for the specified webglshader object.
... syntax gl.
getshaderinfolog(shader); parameters shader a webglshader to query.
...*/ gl.compileshader(shader); var message = gl.
getshaderinfolog(shader); if (message.length > 0) { /* message may be an error or a warning */ throw message; } specifications specification status comment webgl 1.0the definition of '
getshaderinfolog' in that specification.
... opengl es 2.0the definition of 'gl
getshaderinfolog' in that specification.
WebGLRenderingContext.getShaderParameter() - Web APIs
the webglrenderingcontext.
getshaderparameter() method of the webgl api returns information about the given shader.
... syntax any gl.
getshaderparameter(shader, pname); parameters shader a webglshader to
get parameter information from.
... examples gl.
getshaderparameter(shader, gl.shader_type); specifications specification status comment webgl 1.0the definition of '
getshaderparameter' in that specification.
... opengl es 2.0the definition of 'gl
getshaderiv' in that specification.
WebGLRenderingContext.getShaderSource() - Web APIs
the webglrenderingcontext.
getshadersource() method of the webgl api returns the source code of a webglshader as a domstring.
... syntax domstring gl.
getshadersource(shader); parameters shader a webglshader object to
get the source code from.
... examples var shader = gl.createshader(gl.vertex_shader); gl.shadersource(shader, originalsource); var source = gl.
getshadersource(shader); specifications specification status comment webgl 1.0the definition of '
getshadersource' in that specification.
... opengl es 2.0the definition of 'gl
getshadersource' in that specification.
WebGLRenderingContext.getVertexAttribOffset() - Web APIs
the webglrenderingcontext.
getvertexattriboffset() method of the webgl api returns the address of a specified vertex attribute.
... syntax glintptr gl.
getvertexattriboffset(index, pname); parameters index a gluint specifying the index of the vertex attribute.
... examples gl.
getvertexattriboffset(i, gl.vertex_attrib_array_pointer); specifications specification status comment webgl 1.0the definition of '
getvertexattriboffset' in that specification.
... opengl es 2.0the definition of 'gl
getvertexattribpointerv' in that specification.
XMLHttpRequest.getAllResponseHeaders() - Web APIs
the xmlhttprequest method
getallresponseheaders() returns all the response headers, separated by crlf, as a string, or returns null if no response has been received.
... syntax var headers = xmlhttprequest.
getallresponseheaders(); parameters none.
... var request = new xmlhttprequest(); request.open("
get", "foo.txt", true); request.send(); request.onreadystatechange = function() { if(this.readystate == this.headers_received) { //
get the raw header string var headers = request.
getallresponseheaders(); // convert the header string into an array // of individual headers var arr = headers.trim().split(/[\r\n]+/); // create a map of header names to values var headerm...
... specifications specification status comment xmlhttprequestthe definition of '
getallresponseheaders()' in that specification.
XRFrame.getPose() - Web APIs
the xrframe method
getpose() returns the relative position and orientation—the pose—of one xrspace to that of another space.
... for example, to
get the position of a controller relative to the viewer's head, you would compare the controller's gripspace to the xrreferencespace of type viewer.
... syntax var xrpose = xrframe.
getpose(space, basespace); parameters space an xrspace specifying the space for which to obtain an xrpose describing the item's position and orientation.
... specifications specification status comment webxr device apithe definition of 'xrframe.
getpose()' in that specification.
Date.prototype.getDate() - JavaScript
the
getdate() method returns the day of the month for the specified date according to local time.
... syntax dateobj.
getdate() return value an integer number, between 1 and 31, representing the day of the month for the given date according to local time.
... examples using
getdate() the second statement below assigns the value 25 to the variable day, based on the value of the date object xmas95.
... var xmas95 = new date('december 25, 1995 23:15:30'); var day = xmas95.
getdate(); console.log(day); // 25 specifications specification ecmascript (ecma-262)the definition of 'date.prototype.
getdate' in that specification.
Date.prototype.getHours() - JavaScript
the
gethours() method returns the hour for the specified date, according to local time.
... syntax dateobj.
gethours() return value an integer number, between 0 and 23, representing the hour for the given date according to local time.
... examples using
gethours() the second statement below assigns the value 23 to the variable hours, based on the value of the date object xmas95.
... let xmas95 = new date('december 25, 1995 23:15:30'); let hours = xmas95.
gethours(); console.log(hours); // 23 specifications specification ecmascript (ecma-262)the definition of 'date.prototype.
gethours' in that specification.
Date.prototype.getMinutes() - JavaScript
the
getminutes() method returns the minutes in the specified date according to local time.
... syntax dateobj.
getminutes() return value an integer number, between 0 and 59, representing the minutes in the given date according to local time.
... examples using
getminutes() the second statement below assigns the value 15 to the variable minutes, based on the value of the date object xmas95.
... var xmas95 = new date('december 25, 1995 23:15:30'); var minutes = xmas95.
getminutes(); console.log(minutes); // 15 specifications specification ecmascript (ecma-262)the definition of 'date.prototype.
getminutes' in that specification.
Date.prototype.getSeconds() - JavaScript
the
getseconds() method returns the seconds in the specified date according to local time.
... syntax dateobj.
getseconds() return value an integer number, between 0 and 59, representing the seconds in the given date according to local time.
... examples using
getseconds() the second statement below assigns the value 30 to the variable seconds, based on the value of the date object xmas95.
... var xmas95 = new date('december 25, 1995 23:15:30'); var seconds = xmas95.
getseconds(); console.log(seconds); // 30 specifications specification ecmascript (ecma-262)the definition of 'date.prototype.
getseconds' in that specification.
Date.prototype.getTimezoneOffset() - JavaScript
the
gettimezoneoffset() method returns the time zone difference, in minutes, from current locale (host system settings) to utc.
... syntax dateobj.
gettimezoneoffset() return value a number representing the time-zone offset, in minutes, from the date based on current host system settings to utc.
... examples using
gettimezoneoffset() //
get current timezone offset for host device let x = new date(); let currenttimezoneoffsetinhours = x.
gettimezoneoffset() / 60; // 1 //
get timezone offset for international labour day (may 1) in 2016 // be careful, the date() constructor uses 0-indexed months, so may is // represented with 4 (and not 5) let labourday = new date(2016, 4, 1) let labourdayoffset = labourday.
gett...
...imezoneoffset() / 60; specifications specification ecmascript (ecma-262)the definition of 'date.prototype.
gettimezoneoffset' in that specification.
Date.prototype.getUTCDate() - JavaScript
the
getutcdate() method returns the day (date) of the month in the specified date according to universal time.
... syntax dateobj.
getutcdate() return value an integer number, between 1 and 31, representing the day of the month in the given date according to universal time.
... examples using
getutcdate() the following example assigns the day portion of the current date to the variable day.
... var today = new date(); var day = today.
getutcdate(); specifications specification ecmascript (ecma-262)the definition of 'date.prototype.
getutcdate' in that specification.
Date.prototype.getUTCDay() - JavaScript
the
getutcday() method returns the day of the week in the specified date according to universal time, where 0 represents sunday.
... syntax dateobj.
getutcday() return value an integer number corresponding to the day of the week for the given date, according to universal time: 0 for sunday, 1 for monday, 2 for tuesday, and so on.
... examples using
getutcday() the following example assigns the weekday portion of the current date to the variable weekday.
... var today = new date(); var weekday = today.
getutcday(); specifications specification ecmascript (ecma-262)the definition of 'date.prototype.
getutcday' in that specification.
Date.prototype.getUTCHours() - JavaScript
the
getutchours() method returns the hours in the specified date according to universal time.
... syntax dateobj.
getutchours() return value an integer number, between 0 and 23, representing the hours in the given date according to universal time.
... examples using
getutchours() the following example assigns the hours portion of the current time to the variable hours.
... var today = new date(); var hours = today.
getutchours(); specifications specification ecmascript (ecma-262)the definition of 'date.prototype.
getutchours' in that specification.
Date.prototype.getUTCMinutes() - JavaScript
the
getutcminutes() method returns the minutes in the specified date according to universal time.
... syntax dateobj.
getutcminutes() return value an integer number, between 0 and 59, representing the minutes in the given date according to universal time.
... examples using
getutcminutes() the following example assigns the minutes portion of the current time to the variable minutes.
... var today = new date(); var minutes = today.
getutcminutes(); specifications specification ecmascript (ecma-262)the definition of 'date.prototype.
getutcminutes' in that specification.
Date.prototype.getUTCMonth() - JavaScript
the
getutcmonth() returns the month of the specified date according to universal time, as a zero-based value (where zero indicates the first month of the year).
... syntax dateobj.
getutcmonth() return value an integer number, between 0 and 11, corresponding to the month of the given date according to universal time.
... examples using
getutcmonth() the following example assigns the month portion of the current date to the variable month.
... var today = new date(); var month = today.
getutcmonth(); specifications specification ecmascript (ecma-262)the definition of 'date.prototype.
getutcmonth' in that specification.
Date.prototype.getUTCSeconds() - JavaScript
the
getutcseconds() method returns the seconds in the specified date according to universal time.
... syntax dateobj.
getutcseconds() return value an integer number, between 0 and 59, representing the seconds in the given date according to universal time.
... examples using
getutcseconds() the following example assigns the seconds portion of the current time to the variable seconds.
... var today = new date(); var seconds = today.
getutcseconds(); specifications specification ecmascript (ecma-262)the definition of 'date.prototype.
getutcseconds' in that specification.
Intl.DateTimeFormat.prototype.formatRangeToParts() - JavaScript
the intl.datetimeformat.prototype.formatran
getoparts() method allows locale-specific tokens representing each part of the formatted date range produced by datetimeformat formatters.
... syntax intl.datetimeformat.prototype.formatran
getoparts(startdate, enddate) examples basic formatran
getoparts usage this method receives two dates and returns an array of objects containing the locale-specific tokens representing each part of the formatted date range.
... let date1 = new date(date.utc(2007, 0, 10, 10, 0, 0)); let date2 = new date(date.utc(2007, 0, 10, 11, 0, 0)); // > 'wed, 10 jan 2007 10:00:00 gmt' // > 'wed, 10 jan 2007 11:00:00 gmt' let fmt = new intl.datetimeformat("en", { hour: 'numeric', minute: 'numeric' }); console.log(fmt.formatrange(date1, date2)); // > '10:00 – 11:00 am' fmt.formatran
getoparts(date1, date2); // return value: // [ // { type: 'hour', value: '10', source: "startrange" }, // { type: 'literal', value: ':', source: "startrange" }, // { type: 'minute', value: '00', source: "startrange" }, // { type: 'literal', value: ' – ', source: "shared" }, // { type: 'hour', value: '11', source: "endrange" }, // { type: 'literal', value: ':', source: "endrange" }, // { ty...
...pe: 'minute', value: '00', source: "endrange" }, // { type: 'literal', value: ' ', source: "shared" }, // { type: 'dayperiod', value: 'am', source: "shared" } // ] specifications specification intl.datetimeformat.formatran
gethe definition of 'formatran
getoparts()' in that specification.
Map.prototype.get() - JavaScript
the
get() method returns a specified element from a map object.
... if the value that is associated to the provided key is an object, then you will
get a reference to that object and any change made to that object will effectively modify it inside the map object.
... syntax mymap.
get(key) parameters key the key of the element to return from the map object.
... examples using
get() let mymap = new map(); mymap.set('bar', 'foo'); mymap.
get('bar'); // returns "foo" mymap.
get('baz'); // returns undefined specifications specification ecmascript (ecma-262)the definition of 'map.prototype.
get' in that specification.
Object.getPrototypeOf() - JavaScript
the object.
getprototypeof() method returns the prototype (i.e.
... syntax object.
getprototypeof(obj) parameters obj the object whose prototype is to be returned.
... examples using
getprototypeof var proto = {}; var obj = object.create(proto); object.
getprototypeof(obj) === proto; // true non-object coercion in es5, it will throw a typeerror exception if the obj parameter isn't an object.
... object.
getprototypeof('foo'); // typeerror: "foo" is not an object (es5 code) object.
getprototypeof('foo'); // string.prototype (es2015 code) specifications specification ecmascript (ecma-262)the definition of 'object.
getprototypeof' in that specification.
target - SVG: Scalable Vector Graphics
the tar
get attribute should be used when there are multiple possible tar
gets for the ending resource, such as when the parent document is embedded within an html or xhtml document, or is viewed with a tabbed browser.
... or an (x)html iframe or object element) into which a document is to be opened when the link is activated: only one element is using this attribute: <a> html, body, svg { height: 100%; } text { font: 20px arial, helvetica, sans-serif; fill: blue; text-decoration: underline; } <svg viewbox="0 0 300 120" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org" tar
get="_self"> <text x="0" y="20">open link within iframe</text> </a> <a href="https://developer.mozilla.org" tar
get="_blank"> <text x="0" y="60">open link in new tab or window</text> </a> <a href="https://developer.mozilla.org" tar
get="_top"> <text x="0" y="100">open link in this tab or window</text> </a> </svg> usage notes value _self | _parent | _top | _blank |...
... specifications specification status comment scalable vector graphics (svg) 2the definition of 'tar
get' in that specification.
... scalable vector graphics (svg) 1.1 (second edition)the definition of 'tar
get' in that specification.
Getting Started (jpm) - Archive of obsolete content
see instructions for
getting started with cfx.
...for example, we could change the page that
gets loaded: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://developer.mozilla.org/"); } at the command prompt,...
... to
get a feel for some of the things you can do with the sdk apis, try working through some of the tutorials.
dirGetParent - Archive of obsolete content
dir
getparent returns an object representing the parent directory of the current directory or file.
... method of file object syntax filespecobject dir
getparent( filespecobject fileordir ); parameters the dir
getparent method has the following parameters: fileordir a filespecobject representing the pathname of the file or directory whose parent is being requested.
...example f =
getfolder("program", "mynewdirectory"); err = file.dircreate(f); err = file.
getparent(f) // returns "program" ...
getComponentFolder - Archive of obsolete content
getcomponentfolder returns an object representing the directory in which a component is installed.
... method of install object syntax object
getcomponentfolder (string registryname); object
getcomponentfolder ( string registryname, string subdirectory); parameters the
getcomponentfolder method has these parameters: registryname the pathname in the client version registry for the component whose installation directory is to be obtained.
... description the
getcomponentfolder method to find the location of a previously installed software package.
getWinRegistry - Archive of obsolete content
getwinregistry (windows only) constructs an object for working with the windows registry.
... method of install syntax winreg
getwinregistry(); parameters none.
...description use the
getwinregistry method to create an object for manipulating the contents of the windows registry.
Getting File Information - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files |
getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes).
... var filesize = 0; var file = io.
getfile("desktop", "saved file"); if (file.exists()) filesize = file.filesize; it is also possible to modify the size of a file by setting the filesize (nsifile.attributes) attribute to a value.
...however, you can also use the permissions (nsifile.attributes) attribute to
get the unix-style permission flags for a file.
NPP_GetValue - Archive of obsolete content
syntax #include <npapi.h> nperror npp_
getvalue(void *instance, nppvariable variable, void *value); parameters the function has the following parameters: instance pointer to the plugin instance from which the value should come.
... description npp_
getvalue retrieves instance variables.
... see also npp_setvalue, npn_
getvalue, npn_setvalue ...
NP_GetValue - Archive of obsolete content
syntax #include <npapi.h> nperror np_
getvalue(void *instance, nppvariable variable, void *value); parameters the function has the following parameters: instance pointer to the current plug-in instance.
... variable plug-in information the call
gets.
... values: nppvpluginnamestring:
gets the name of the plug-in nppvplugindescriptionstring:
gets the description string of the plug-in value plug-in name, returned by the function.
VBArray.getItem - Archive of obsolete content
the vbarray.
getitem method returns the item at the specified location.
... syntax safearray.
getitem(dimension1[, dimension2, ...], dimensionn) parameters safearray a vbarray object.
... <head> <script type="text/vbscript"> <!-- function createvbarray() dim i, j, k dim a(2, 2) k = 1 for i = 0 to 2 for j = 0 to 2 a(i, j) = k document.writeln(k) k = k + 1 next document.writeln("<br>") next createvbarray = a end function --> </script> <script type="text/javascript"> <!-- function
getitemtest(vbarray) { var i, j; var a = new vbarray(vbarray); for (i = 0; i <= 2; i++) { for (j =0; j <= 2; j++) { document.writeln(a.
getitem(i, j)); } } } --> </script> </head> <body> <script type="text/javascript"> <!--
getitemtest(createvbarray()); --> </script> </body> requirements supported in the following document modes: quirks, internet explor...
HTMLIFrameElement.getActive()
the
getactive() method of the htmliframeelement indicates whether the current browser <iframe> is the currently active frame.
... syntax var amiactive = instanceofhtmliframeelement.
getactive(); returns a boolean indicating whether the current browser <iframe> is the currently active frame (true) or not (false.) parameters none.
... example var browser = document.queryselector('iframe'); var amiactive = browser.
getactive(); specification not part of any specification.
HTMLIFrameElement.getCanGoBack()
the
getcangoback() method of the htmliframeelement interface is used to indicate whether it's possible to go back in the navigation history of the browser <iframe>.
... syntax instanceofhtmliframeelement.
getcangoback() .then(function(result) { ...
... example function canmovebwd() { browser.
getcangoback().then(function(result) { if (result) { back.disabled = false; console.log("it's possible to navigate the history backward."); } else { back.disabled = true; console.log("it's not possible to navigate the history backward."); } }); } specification not part of any specification.
HTMLIFrameElement.getCanGoForward()
the
getcangoforward() method of the htmliframeelement is used to indicate whether it's possible to go forward in the navigation history of the browser <iframe>.
... syntax instanceofhtmliframeelement.
getcangoforward() .then(function(result) { ...
... example function canmovefwd() { browser.
getcangoforward().then(function(result) { if (result) { fwd.disabled = false; console.log("it's possible to navigate the history forward."); } else { fwd.disabled = true; console.log("it's not possible to navigate the history forward."); } }); } specification not part of any specification.
HTMLIFrameElement.getContentDimensions()
the
getcontentdimensions() method of the htmliframeelement interface retrieves the x and y dimensions of the content window.
... syntax var instanceofdomrequest = instanceofhtmliframeelement.
getcontentdimensions(); returns a domrequest for handling the dimensions request.
... examples var browser = document.queryselector('iframe'); var request = browser.
getcontentdimensions(); request.onsuccess = function() { console.log("page size:", request.result.width + "x" + request.result.height); } request.onerror = function() { console.log("download error"); } specification not part of any specification.
HTMLIFrameElement.getManifest()
the
getmanifest() method of the htmliframeelement interface retrieves the manifest of an app loaded in the browser <iframe> and returns it as json.
... syntax instanceofhtmliframeelement.
getmanifest().then(function(json) { ...
... examples var browser = document.queryselector('iframe'); browser.addeventlistener('mozbrowserloadend',function() { var request = browser.
getmanifest().then(function(json) { console.log(json); }); }); specification not part of any specification.
HTMLIFrameElement.getStructuredData()
the
getstructureddata() method of the htmliframeelement interface retrieves any structured microdata (and hcard and hcalendar microformat data) contained in the html loaded in the browser <iframe> and returns it as json.
... syntax var instanceofdomrequest = instanceofhtmliframeelement.
getstructureddata(); returns a domrequest to handle the
getstructureddata() request's success and error cases.
... examples var browser = document.queryselector('iframe'); browser.addeventlistener('mozbrowserloadend',function() { var request = browser.
getstructureddata(); request.onsuccess = function() { console.log(request.result); } }); running this code in a browser api app and then loading up a page that contains microdata (such as the website of british alt-country band salter cane) will result in a json object being returned, along the lines of: { "items": [ { "type":["http://microformats.org/profile/hcard"], "properties":{"fn":["chris askew"], "n":[ { "properties": ...
HTMLIFrameElement.getVisible()
the
getvisible() method of the htmliframeelement is used to request the current visible state of the browser <iframe>.
... syntax instanceofdomrequest = instanceofhtmliframeelement.
getvisible(); returns a domrequest object to handle the
getvisible() request's success and error cases.
... example var browser = document.queryselector('iframe'); var request = browser.
getvisible(); request.onsuccess = function() { console.log('the visible state is: ' + this.result ?
Intel Power Gadget
intel power gad
get provides real-time graphs of various power-related measures and estimates, all taken from the intel rapl msrs.
... understanding the power gad
get output the following screenshot (from the mac version) demonstrates the available measurements.
... intel power gad
get can also log these results to a file.
PR GetAddrInfoByName
equivalent to
getaddrinfo(host, null, ...) of rfc 3493.
... syntax #include <prnetdb.h> praddrinfo *pr
getaddrinfobyname( const char *hostname, pruint16 af, printn flags); parameters the function has the following parameters: hostname the character string defining the host name of interest.
...you can retrieve the reason for the failure by calling pr_
geterror.
PR_GetDefaultIOMethods
gets the default i/o methods table.
... syntax #include <prio.h> const priomethods* pr_
getdefaultiomethods(void); returns if successful, the function returns a pointer to a priomethods structure.
... description after using pr_
getdefaultiomethods to identify the default i/o methods table, you can select elements from that table with which to build your own layer's methods table.
PR_GetNameForIdentity
gets the string associated with a layer's unique identity.
... syntax #include <prio.h> const char* pr_
getnameforidentity(prdescidentity ident); parameter the function has the following parameter: ident a layer's identity.
...the string is copied by the runtime, and pr_
getnameforidentity returns a pointer to that copy.
PR_GetPeerName
gets the network address of the connected peer.
... syntax #include <prio.h> prstatus pr_
getpeername( prfiledesc *fd, prnetaddr *addr); parameters the function has the following parameters: fd a pointer to a prfiledesc object representing a socket.
...the reason for the failure can be obtained by calling pr_
geterror.
PR_GetSockName
gets network address for a specified socket.
... syntax #include <prio.h> prstatus pr_
getsockname( prfiledesc *fd, prnetaddr *addr); parameters the function has the following parameters: fd a pointer to a prfiledesc object representing the socket.
...the reason for the failure can be obtained by calling pr_
geterror.
PR_GetThreadPrivate
syntax #include <prthread.h> void* pr_
getthreadprivate(pruintn index); parameter pr_
getthreadprivate has the following parameters: index the index into the per-thread private data table.
... description pr_
getthreadprivate may be called at any time during a thread's execution.
... a thread can
get access only to its own per-thread private data.
PR_GetUniqueIdentity
syntax #include <prio.h> prdescidentity pr_
getuniqueidentity(const char *layer_name); parameter the function has the following parameter: layer_name the string associated with the creation of a layer's identity.
...pr_
getuniqueidentity allocates a unique layer identity and associates it with the string.
... call pr_
getuniqueidentity only once for any particular layer name.
JSGetObjectOps
js
getobjectops is the type for jsclass.
getobjectops callback syntax typedef jsobjectops * (* js
getobjectops)(jscontext *cx, jsclass *clasp); name type description cx jscontext * the js context in which the new object is being created.
...thus jsclass (which pre-dates jsobjectops in the api) provides a low-level interface to class-specific code and data, while jsobjectops allows for a higher level of operation, which does not use the object's class except to find the class's jsobjectops struct, by calling clasp->
getobjectops, and to finalize the object.
... jsclass hooks jsclass offerd following hook: the jsclass.
getobjectops hook is called each time an object is created.
JSObjectOps.getAttributes
the jsobjectops.
getattributes and setattributes callbacks are called to access the attributes of a property.
... description
get or set attributes of the property obj[id].
... for more information on property attributes, see js_
getpropertyattributes.
JS_GetArrayPrototype
syntax jsobject * js_
getarrayprototype(jscontext *cx, js::handleobject forobj); name type description cx jscontext * pointer to a javascript context from which to derive runtime information.
... description js_
getarrayprototype() retrieves the original array.prototype of a specified object, obj.
...see also mxr id search for js_
getarrayprototype bug 872043 ...
JS_GetCompartmentPrivate
syntax void js_setcompartmentprivate(jscompartment *compartment, void *data); void * js_
getcompartmentprivate(jscompartment *compartment); name type description compartment jscompartment * any compartment data void * (in js_setcompartmentprivate) pointer to application-defined data to be associated with the compartment.
...js_
getcompartmentprivate
gets this field and js_setcompartmentprivate sets it.
... see also mxr id search for js_setcompartmentprivate mxr id search for js_
getcompartmentprivate js_
getruntimeprivate js_setruntimeprivate js_
getprivate js_setprivate js_
getinstanceprivate js_
getcontextprivate js_setcontextprivate js_
getcontextprivate js_setsecondcontextprivate bug 563106 ...
JS_GetContextPrivate
syntax void * js_
getcontextprivate(jscontext *cx); void js_setcontextprivate(jscontext *cx, void *data); void * js_
getsecondcontextprivate(jscontext *cx); // added in spidermonkey 17 void js_setsecondcontextprivate(jscontext *cx, void *data); // added in spidermonkey 17 name type description cx jscontext * any context.
...js_
getcontextprivate and js_
getsecondcontextprivate
get this field and js_setcontextprivate and js_setsecondcontextprivate set it.
...see also mxr id search for js_
getcontextprivate mxr id search for js_setcontextprivate mxr id search for js_
getsecondcontextprivate mxr id search for js_setsecondcontextprivate js_
getruntimeprivate js_setruntimeprivate js_
getcompartmentprivate js_setcompartmentprivate js_
getprivate js_setprivate js_
getinstanceprivate bug 714458 ...
JS_GetDefaultFreeOp
syntax jsfreeop * js_
getdefaultfreeop(jsruntime *rt); name type description rt jsruntime * a pointer to the runtime.
... description js_
getdefaultfreeop returns default jsfreeop for the runtime.
... see also mxr id search for js_
getdefaultfreeop js_freeop jsfreeop bug 737365 ...
JS_GetErrorPrototype
syntax jsobject * js_
geterrorprototype(jscontext *cx); name type description cx jscontext * pointer to a js context whose errors should be reported via your function.
... description js_
geterrorprototype returns the original value of error.prototype from the global object of the current compartment of cx.
... see also mxr id search for js_
geterrorprototype bug 997285 ...
JS_GetExternalStringFinalizer
this article covers features introduced in spidermonkey 17
get the string finalizer of an external string.
... syntax const jsstringfinalizer * js_
getexternalstringfinalizer(jsstring *str); name type description str jsstring * a string to
get finalizer.
... description js_
getexternalstringfinalizer returns the fin parameter passed to js_newexternalstring.
JS_GetFlatStringChars
this article covers features introduced in spidermonkey 1.8.5
get the chars of a flat string.
... syntax const jschar * js_
getflatstringchars(jsflatstring *str); name type description str jsflatstring * the flattended string returned by js_flattenstring.
... description jsflatstring *fstr = js_flattenstring(cx, str); if (!fstr) return js_false; const jschar *chars = js_
getflatstringchars(fstr) js_assert(chars); see also js_flattenstring bug 1037869 ...
JS_GetFunctionCallback
syntax jsfunctioncallback js_
getfunctioncallback(jscontext *cx); name type description cx jscontext * pointer to a js context from which to derive runtime information.
... description js_
getfunctioncallback returns the current function invocation callback, or null if there isn't one set up.
... see also mxr id search for js_
getfunctioncallback js_setfunctioncallback jsfunctioncallback bug 1103269 ...
JS_GetFunctionPrototype
syntax jsobject * js_
getfunctionprototype(jscontext *cx, js::handleobject forobj); name type description cx jscontext * pointer to a javascript context from which to derive runtime information.
... description js_
getfunctionprototype() retrieves the original function.prototype of a specified object, obj.
...see also mxr id search for js_
getfunctionprototype bug 726182 ...
JS_GetFunctionScript
syntax jsscript * js_
getfunctionscript(jscontext *cx, js::handlefunction fun); name type description cx jscontext * pointer to a js context from which to derive runtime information.
... description js_
getfunctionscript returns a pointer to jsscript for the specified function, fun.
... see also mxr id search for js_
getfunctionscript bug 1069694 ...
JS_GetGlobalForCompartmentOrNull
syntax jsobject * js_
getglobalforcompartmentornull(jscontext *cx, jscompartment *c); name type description cx jscontext * the context for which to return the global object.
... description js_
getglobalforcompartmentornull() returns the global object for the context and the compartment.
... see also mxr id search for js_
getglobalforcompartmentornull js_
getglobalforobject js::currentglobalornull bug 687724 ...
JS_GetImplementationVersion
get the version number of the js engine.
... syntax const char * js_
getimplementationversion(void); description js_
getimplementationversion returns a hard-coded, english language string that specifies the version number of the js engine currently in use, and its release date.
... see also mxr id search for js_
getimplementationversion js_
getversion js_setversionforcompartment ...
JS_GetObjectPrototype
syntax jsobject * js_
getobjectprototype(jscontext *cx, js::handleobject forobj); name type description cx jscontext * pointer to a javascript context from which to derive runtime information.
... description js_
getobjectprototype() retrieves the original object.prototype of a specified object, obj.
...see also mxr id search for js_
getobjectprototype bug 725888 ...
JS_GetObjectRuntime
syntax jsruntime * js_
getobjectruntime(jsobject *obj); name type description obj jsobject * the object to query.
... description js_
getobjectruntime retrieves a pointer to the jsruntime for a specified jsobject.
... see also mxr id search for js_
getobjectruntime bug 723286 ...
JS_GetRuntimePrivate
syntax void * js_
getruntimeprivate(jsruntime *rt); void js_setruntimeprivate(jsruntime *rt, void *data); name type description rt jsruntime * any js runtime.
...js_
getruntimeprivate
gets the value of this field and js_setruntimeprivate sets it.
...see also mxr id search for js_
getruntimeprivate js_
getcontextprivate js_setcontextprivate js_
getsecondcontextprivate js_setsecondcontextprivate js_
getcompartmentprivate js_setcompartmentprivate js_
getprivate js_setprivate js_
getinstanceprivate ...
JS_GetSecurityCallbacks
syntax /* added in spidermonkey 17 */ void js_setsecuritycallbacks(jsruntime *rt, const jssecuritycallbacks *callbacks); const jssecuritycallbacks * js_
getsecuritycallbacks(jsruntime *rt); /* obsolete since jsapi 13 */ jssecuritycallbacks * js_setcontextsecuritycallbacks(jscontext *cx, jssecuritycallbacks *callbacks); jssecuritycallbacks * js_
getruntimesecuritycallbacks(jsruntime *rt); jssecuritycallbacks * js_setruntimesecuritycallbacks(jsruntime *rt, jssecuritycallbacks *callbacks); name type description rt jsruntime * a runtime to
get/set the security callbacks.
... js_
getsecuritycallbacks returns the runtime's current security callbacks.
... if the callbacks are default value, it returns null see also mxr id search for js_
getsecuritycallbacks mxr id search for js_setsecuritycallbacks jsprincipals jscspevalchecker jssubsumesop bug 957688 - removed checkobjectaccess bug 924905 - added subsumes bug 728250 - added -js_
getsecuritycallbacks and js_setsecuritycallbacks, removed js_setcontextsecuritycallbacks, js_
getruntimesecuritycallbacks, and js_setruntimesecuritycallbacks ...
JS_GetTypeName
syntax const char * js_
gettypename(jscontext *cx, jstype type); name type description cx jscontext * pointer to a js context from which to derive runtime information.
... description js_
gettypename returns a pointer to a string literal description of a specified js data type, type.
... the following table lists jstypes and the string literals reported by js_
gettypename: type literal jstype_void "undefined" jstype_object "object" jstype_function "function" jstype_string "string" jstype_number "number" jstype_boolean "boolean" any other value null see also js_convertvalue js_typeofvalue js_valuetoboolean js_valuetofunction js_valuetoint32 js_valuetonumber js_valuetoobject js_valuetostring bug 1037718 ...
JS_GetVersion
syntax jsversion js_
getversion(jscontext *cx); name type description cx jscontext * the context to query.
... description js_
getversion returns the javascript version currently used by the given jscontext, cx.
...see also mxr id search for js_
getversion js_versiontostring js_stringtoversion js_setversionforcompartment ...
NS_GetComponentManager
« xpcom api reference summary the ns_
getcomponentmanager function returns a reference to the xpcom component manager.
... #include "nsxpcom.h" #include "nsicomponentmanager.h" nsresult ns_
getcomponentmanager( nsicomponentmanager** aresult ); parameters aresult [out] a reference to the xpcom component manager.
... return values the ns_
getcomponentmanager function returns ns_ok if successful.
NS_GetComponentRegistrar
« xpcom api reference summary the ns_
getcomponentregistrar function returns a reference to the xpcom component registrar.
... #include "nsxpcom.h" #include "nsicomponentregistrar.h" nsresult ns_
getcomponentregistrar( nsicomponentmanager** aresult ); parameters aresult [out] a reference to the xpcom component registrar.
... return values the ns_
getcomponentregistrar function returns ns_ok if successful.
NS_GetMemoryManager
« xpcom api reference summary the ns_
getmemorymanager function returns a reference to the xpcom memory manager.
... #include "nsxpcom.h" #include "nsimemory.h" nsresult ns_
getmemorymanager( nsimemory** aresult ); parameters aresult [out] a reference to the xpcom memory manager.
... return values the ns_
getmemorymanager function returns ns_ok if successful.
NS_GetServiceManager
« xpcom api reference summary the ns_
getservicemanager function returns a reference to the xpcom service manager.
... #include "nsxpcom.h" #include "nsiservicemanager.h" nsresult ns_
getservicemanager( nsiservicemanager** aresult ); parameters aresult [out] a reference to the xpcom service manager.
... return values the ns_
getservicemanager function returns ns_ok if successful.
Get Thunderbird version
on thunderbird version 3.0b3pre and later, you can use the following snippet to
get the thunderbird version.
... (version 3.0b3pre was the first build to include steel.) var versionchecker = components.classes["@mozilla.org/xpcom/version-comparator;1"].
getservice(components.interfaces.nsiversioncomparator); if (versionchecker.compare(application.version, "3.0b4") >= 0) // code for >= 3.0b4 else // code for < 3.0b4 for versions prior to 3.0b3pre, you can use something like this: var version; if ( "@mozilla.org/xre/app-info;1" in components.classes ) version = components.classes["@mozilla.org/xre/app-info; 1"].
getservice(components.interfaces.nsixulappinfo).version; else version = components.classes["@mozilla.org/preferences-service; 1"].
getservice(components.interfaces.nsiprefbranch).
getcharpref ("app.version"); var versionchecker = components.classes["@mozilla.org/xpcom/version- comparat...
...or;1"].
getservice(components.interfaces.nsiversioncomparator); if ( versionchecker.compare( version, "3.0b3" ) >= 0 ) // code for >= 3.0b3 else // code for < 3.0b3 ...
AnimationEffect.getTiming() - Web APIs
the animationeffect.
gettiming() method of the animationeffect interface returns an effecttiming object containing the timing properties for the animation effect.
... syntax animationtiming = animation.
gettiming(); returns an effecttiming object.
... specifications specification status comment web animationsthe definition of 'animationeffect.
gettiming()' in that specification.
AuthenticatorAttestationResponse.getTransports() - Web APIs
gettransports() is a method of the authenticatorattestationresponse interface that returns an array containing strings describing the different transports which may be used by the authenticator.
... syntaxe arrtransports = authenticatorattestationresponse.
gettransports() parameters none.
...m the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var transports = newcredentialinfo.response.
gettransports(); console.table(transports); // may be something like ["internal", "nfc", "usb"] }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of '
gettransports()' in that specification.
Bluetooth.getDevices() - Web APIs
the
getdevices() method of bluetooth interface of web bluetooth api exposes the bluetooth devices this origin is allowed to access.
... syntax var readerpromise = bluetooth.
getdevices(); parameters none.
... specifications specification status comment web bluetooththe definition of '
getdevices()' in that specification.
BluetoothRemoteGATTCharacteristic.getDescriptor() - Web APIs
the bluetoothremotegattcharacteristic.
getdescriptor() method returns a promise that resolves to the first bluetoothgattdescriptor for a given descriptor uuid.
... syntax bluetoothremotegattcharacteristic.
getdescriptor(bluetoothdescriptoruuid).then(function(bluetoothgattdescriptor) { ...
... specifications specification status comment web bluetooththe definition of '
getdescriptor()' in that specification.
BluetoothRemoteGATTCharacteristic.getDescriptors() - Web APIs
the bluetoothremotegattcharacteristic.
getdescriptors() method returns a promise that resolves to an array of all bluetoothgattdescriptor objects for a given descriptor uuid.
... syntax bluetoothremotegattcharacteristic.
getdescriptors(bluetoothdescriptoruuid).then(function(bluetoothgattdescriptors[]) { ...
... specifications specification status comment web bluetooththe definition of '
getdescriptors()' in that specification.
BluetoothRemoteGATTServer.getPrimaryService() - Web APIs
the bluetoothremotegattserver.
getprimaryservice() method returns a promise to the primary bluetoothgattservice offered by the bluetooth device for a specified bluetoothserviceuuid.
... syntax bluetoothremotegattserver.
getprimaryservice(bluetoothserviceuuid).then(function(bluetoothgattservice) { ...
... specifications specification status comment web bluetooththe definition of '
getprimaryservice()' in that specification.
BluetoothRemoteGATTServer.getPrimaryServices() - Web APIs
the bluetoothremotegattserver.
getprimaryservices() method returns a promise to a list of primary bluetoothgattservice objects offered by the bluetooth device for a specified bluetoothserviceuuid.
... syntax bluetoothremotegattserver.
getprimaryservices(bluetoothserviceuuid).then(function(bluetoothgattservices) { ...
... specifications specification status comment web bluetooththe definition of '
getprimaryservices()' in that specification.
getCharacteristic() - Web APIs
the bluetoothgattservice.
getcharacteristic() method returns a promise to an instance of bluetoothgattcharacteristic for a given universally unique identifier (uuid).
... syntax bluetoothgattserviceinstance.
getcharacteristic(characteristic).then(function(bluetoothgattcharacteristic) { ...
... specifications specification status comment web bluetooththe definition of '
getcharacteristic()' in that specification.
getCharacteristics() - Web APIs
the bluetoothgattservice.
getcharacteristics() method returns a promise to a list of bluetoothgattcharacteristic instances for a given universally unique identifier (uuid).
... syntax bluetoothgattserviceinstance.
getcharacteristics(characteristics).then(function(bluetoothgattcharacteristic[]) { ...
... specifications specification status comment web bluetooththe definition of '
getcharacteristics()' in that specification.
getIncludedService() - Web APIs
the bluetoothgattservice.
getincludedservice() method returns a promise to an instance of bluetoothgattservice for a given universally unique identifier (uuid).
... syntax bluetoothgattserviceinstance.
getincludedservice(service).then(function(bluetoothgattservice) { ...
... specifications specification status comment web bluetooththe definition of '
getincludedservice()' in that specification.
getIncludedServices() - Web APIs
the bluetoothgattservice.
getincludedservices() method returns a promise to an array of bluetoothgattservice instances for an optional universally unique identifier (uuid).
... syntax bluetoothgattserviceinstance.
getincludedservice(service).then(function(bluetoothgattservice) { ...
... specifications specification status comment web bluetooththe definition of '
getincludedservices()' in that specification.
CSSPrimitiveValue.getCounterValue() - Web APIs
the
getcountervalue() method of the cssprimitivevalue interface is used to
get the counter value.
... syntax var countervalue = cssprimitivevalue.
getcountervalue(); return value a counter object representing the counter value.
... specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.
getcountervalue' in that specification.
CSSPrimitiveValue.getRGBColorValue() - Web APIs
the
getrgbcolorvalue() method of the cssprimitivevalue interface is used to
get an rgb color value.
... syntax var rgbcolorvalue = cssprimitivevalue.
getrgbcolorvalue(); return value an rgbcolor object representing the color value.
... example var cs = window.
getcomputedstyle(document.body); var cssvalue = cs.
getpropertycssvalue("color"); console.log(cssvalue.
getrgbcolorvalue()); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.
getrgbcolorvalue' in that specification.
CSSPrimitiveValue.getRectValue() - Web APIs
the
getrectvalue() method of the cssprimitivevalue interface is used to
get a rect value.
... syntax var rectvalue = cssprimitivevalue.
getrectvalue(); return value a rect object representing the rect value.
... example var cs = window.
getcomputedstyle(document.
getelementbyid("clippeddiv")); var cssvalue = cs.
getpropertycssvalue("clip"); console.log(cssvalue.
getrectvalue()); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.
getrectvalue' in that specification.
CSSPrimitiveValue.getStringValue() - Web APIs
the
getstringvalue() method of the cssprimitivevalue interface is used to
get a string value.
... syntax var stringvalue = cssprimitivevalue.
getstringvalue(); return value a string value.
... example var cs = window.
getcomputedstyle(document.body); var cssvalue = cs.
getpropertycssvalue("display"); console.log(cssvalue.
getstringvalue()); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.
getstringvalue' in that specification.
CSSStyleDeclaration.getPropertyPriority() - Web APIs
the cssstyledeclaration.
getpropertypriority() method interface returns a domstring that provides all explicitly set priorities on the css property.
... syntax var priority = style.
getpropertypriority(property); parameters property is a domstring representing the property name to be checked.
... example the following javascript code checks whether margin is marked as important in a css selector rule: var declaration = document.stylesheets[0].cssrules[0].style; var isimportant = declaration.
getpropertypriority('margin') === 'important'; specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.
getpropertypriority()' in that specification.
CSSStyleDeclaration.getPropertyValue() - Web APIs
the cssstyledeclaration.
getpropertyvalue() method interface returns a domstring containing the value of a specified css property.
... syntax var value = style.
getpropertyvalue(property); parameters property is a domstring representing the property name to be checked.
... example the following javascript code queries the value of the margin property in a css selector rule: var declaration = document.stylesheets[0].cssrules[0].style; var value = declaration.
getpropertyvalue('margin'); // "1px 2px" specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.
getpropertyvalue()' in that specification.
Clients.get() - Web APIs
the
get() method of the clients interface
gets a service worker client matching a given id and returns it in a promise.
... syntax self.clients.
get(id).then(function(client) { // do something with your returned client }); parameters id a domstring representing the id of the client you want to
get.
... examples self.clients.
get(id).then(function(client) { self.clients.openwindow(client.url); }); specifications specification status comment service workersthe definition of '
get()' in that specification.
CustomElementRegistry.get() - Web APIs
the
get() method of the customelementregistry interface returns the constructor for a previously-defined custom element.
... syntax constructor = customelements.
get(name); parameters name the name of the custom element whose constructor you want to return a reference to.
... examples customelements.define('my-paragraph', class extends htmlelement { constructor() { super(); let template = document.
getelementbyid('my-paragraph'); let templatecontent = template.content; const shadowroot = this.attachshadow({mode: 'open'}) .appendchild(templatecontent.clonenode(true)); } }) // return a reference to the my-paragraph constructor let ctor = customelements.
get('my-paragraph'); specifications specification status comment html living standardthe definition of 'customelements.
get()' in that specification.
Document.getAnimations() - Web APIs
the
getanimations() method of the document interface returns an array of all animation objects currently in effect whose tar
get elements are descendants of the document.
... syntax var allanimations = document.
getanimations(); parameters none.
... document.
getanimations().foreach( function (animation) { animation.playbackrate *= .5; } ); specifications specification status comment web animationsthe definition of 'document.
getanimations()' in that specification.
Document.getBoxObjectFor() - Web APIs
you should use the element.
getboundingclientrect() method instead.
... syntax boxobject = document.
getboxobjectfor(element); boxobject is an nsiboxobject.
... example var mydiv = document.
getelementbyid("mydiv"), boxobj = document.
getboxobjectfor (mydiv); alert ( "x:" + boxobj.x + ", y:" + boxobj.y + ", width:" + boxobj.width + ", height:" + boxobj.height ); notes specified in nsixuldocument.idl ...
Element.getAttributeNames() - Web APIs
the
getattributenames() method of the element interface returns the attribute names of the element as an array of strings.
... using
getattributenames() along with
getattribute(), is a memory-efficient and performant alternative to accessing element.attributes.
... syntax let attributenames = element.
getattributenames(); example // iterate over element's attributes for (let name of element.
getattributenames()) { let value = element.
getattribute(name); console.log(name, value); } polyfill if (element.prototype.
getattributenames == undefined) { element.prototype.
getattributenames = function () { var attributes = this.attributes; var length = attributes.length; var result = new array(length); for (var i = 0; i < length; i++) { result[i] = attributes[i].name; } return result; }; } specifications specification status comment domthe definition of 'element.
getattributenames' in that specification.
Element.getAttributeNodeNS() - Web APIs
syntax attributenode = element.
getattributenodens(namespace, nodename) attributenode is the node for specified attribute.
... == example == tbd the example needs to be fixed pre> // html: <div id="top" /> t = document.
getelementbyid("top"); specialnode = t.
getattributenodens( "http://www.mozilla.org/ns/specialspace", "id"); // inode.value = "full-top" </pre notes
getattributenodens is more specific than
getattributenode in that it allows you to specify attributes that are part of a particular namespace.
... dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens
getattribute (dom 1)
getattributens
getattributenode
getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status comment domthe definition of '
getattributenodens()' in that specification.
FeaturePolicy.getAllowlistForFeature() - Web APIs
the
getallowlistforfeature() method of the featurepolicy allows query of the allow list for a specific feature for the current feature policy.
... syntax const allowlist = featurepolicy.
getallowlistforfeature(<feature>) parameter feature name a specific feature name must be specified.
... // first,
get the feature policy object const featurepolicy = document.featurepolicy // then query feature for specific const allowlist = featurepolicy.
getallowlistforfeature("camera") for (const origin of allowlist){ console.log(origin) } specification specification status comment feature policythe definition of '
getallowlistforfeature' in that specification.
File.getAsBinary() - Web APIs
summary the
getasbinary method allows to access the file's data in raw binary format.
... syntax var binary = instanceoffile.
getasbinary(); returns a string.
... example // fileinput is an htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.
getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // object for allowed media types var accept = { binary : ["image/png", "image/jpeg"], text : ["text/plain", "text/css", "application/xml", "text/html"] }; var file; for (var i = 0; i < files.length; i++) { file = files[i]; // if file type could be detected if (file !== null) { if (accept.binary.indexof(file.type) > -1) { // file is a binary, which we accept var data = file.
getasbinary(); } else if (accept.text.indexof(file.type) > -1) { // file is of type text, which we accept var data = file.
getastext(); // mo...
FormData.getAll() - Web APIs
the
getall() method of the formdata interface returns all the values associated with a given key from within a formdata object.
... syntax formdata.
getall(name); parameters name a usvstring representing the name of the key you want to retrieve.
... example the following line creates an empty formdata object: var formdata = new formdata(); if we add two username values using formdata.append: formdata.append('username', 'chris'); formdata.append('username', 'bob'); the following
getall() function will return both username values in an array: formdata.
getall('username'); // returns ["chris", "bob"] specifications specification status comment xmlhttprequestthe definition of '
getall()' in that specification.
Geolocation.getCurrentPosition() - Web APIs
the geolocation.
getcurrentposition() method is used to
get the current position of the device.
... syntax navigator.geolocation.
getcurrentposition(success[, error[, [options]]) parameters success a callback function that takes a geolocationposition object as its sole input parameter.
...highaccuracy: true, timeout: 5000, maximumage: 0 }; function success(pos) { var crd = pos.coords; console.log('your current position is:'); console.log(`latitude : ${crd.latitude}`); console.log(`longitude: ${crd.longitude}`); console.log(`more or less ${crd.accuracy} meters.`); } function error(err) { console.warn(`error(${err.code}): ${err.message}`); } navigator.geolocation.
getcurrentposition(success, error, options); specifications specification status comment geolocation api recommendation initial specification.
HTMLInputElement.mozGetFileNameArray() - Web APIs
the htmlinputelement.moz
getfilenamearray() method returns an array of the names of the files that were selected by the user on an html input element.
... syntax inputelement.moz
getfilenamearray(alength, afilenames); parameters alength if specified, will receive the number of file names in the returned array.
... example var numfiles = 0; var filearray = {}; inputelement.moz
getfilenamearray(numfiles, filearray); ...
HTMLInputElement.setRangeText() - Web APIs
the htmlinputelement.setran
getext() method replaces a range of text in an <input> or <textarea> element with a new string.
... syntax element.setran
getext(replacement); element.setran
getext(replacement, start, end [, selectmode]); parameters replacement the string to insert.
... html <input type="text" id="text-box" size="30" value="this text has not been updated."> <button onclick="selecttext()">update text</button> javascript function selecttext() { const input = document.
getelementbyid('text-box'); input.focus(); input.setran
getext('already', 14, 17, 'select'); } result specifications specification status comment html living standardthe definition of 'htmlinputelement.setselectionrange()' in that specification.
HTMLVideoElement.getVideoPlaybackQuality() - Web APIs
the htmlvideoelement method
getvideoplaybackquality() creates and returns a videoplaybackquality object containing metrics including how many frames have been lost.
... syntax videopq = videoelement.
getvideoplaybackquality(); return value a videoplaybackquality object providing information about the video element's current playback quality.
...this value includes any dropped or corrupted frames, so it's not the same as "total number of frames played." var videoelem = document.
getelementbyid("my_vid"); var counterelem = document.
getelementbyid("counter"); var quality = videoelem.
getvideoplaybackquality(); counterelem.innertext = quality.totalvideoframes; specifications specification status comment media playback qualitythe definition of 'htmlvideoelement.
getvideoplaybackquality()' in that specification.
IDBObjectStore.getAll() - Web APIs
the
getall() method of the idbobjectstore interface returns an idbrequest object containing all objects in the object store matching the specified parameter or all objects in the store if no parameters are given.
... syntax var request = objectstore.
getall(); var request = objectstore.
getall(query); var request = objectstore.
getall(query, count); parameters query optional a key or idbkeyrange to be queried.
... specifications specification status comment indexed database api draftthe definition of '
getall()' in that specification.
IDBObjectStore.getAllKeys() - Web APIs
the
getallkeys() method of the idbobjectstore interface returns an idbrequest object retrieves record keys for all objects in the object store matching the specified parameter or all objects in the store if no parameters are given.
... syntax var request = objectstore.
getallkeys(); var request = objectstore.
getallkeys(query); var request = objectstore.
getallkeys(query, count); parameters query optional a value that is or resolves to an idbkeyrange.
... specifications specification status comment indexed database api draftthe definition of '
getallkeys()' in that specification.
KeyframeEffect.getKeyframes() - Web APIs
the
getkeyframes() method of a keyframeeffect returns an array of the computed keyframes that make up this animation along with their computed offsets.
... syntax var keyframes = keyframeeffect.
getkeyframes(); parameters none.
... examples in the red queen race example, we can inspect alice and the redqueen's animation to see its individual keyframes like so: // return the array of keyframes redqueen_alice.effect.
getkeyframes(); specifications specification status comment web animationsthe definition of 'keyframeeffect.
getkeyframes()' in that specification.
MediaKeyStatusMap.get() - Web APIs
the
get property of the mediakeystatusmap interface returns the value associated with the given key, or undefined if there is none.
... syntax var value = mediakeystatusmap.
get(key); parameters key the key whose value you want returned.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet
get experimentalchrome full support 42edge full support 13firefox full support yesie ?
MediaStream.getTrackById() - Web APIs
the mediastream.
gettrackbyid() method returns a mediastreamtrack object representing the track with the specified id string.
... syntax var track = mediastream.
gettrackbyid(id); parameters id a domstring which identifies the track to be returned.
... stream.
gettrackbyid("primary-audio-track").applyconstraints({ volume: 0.5 }); stream.
gettrackbyid("commentary-track").enabled = true; specifications specification status comment media capture and streamsthe definition of '
gettrackbyid()' in that specification.
MediaStreamTrack.getCapabilities() - Web APIs
the
getcapabilities() method of the mediastreamtrack interface returns a mediatrackcapabilities object which specifies the values or range of values which each constrainable property, based upon the platform and user agent.
... syntax const capabilities = track.
getcapabilities() return value a mediatrackcapabilities object which specifies the value or range of values which are supported for each of the user agent's supported constrainable properties.
... specifications specification status comment media capture and streamsthe definition of '
getcapabilities()' in that specification.
RTCIceTransport.getLocalParameters() - Web APIs
the rtcicetransport method
getlocalparameters() returns an rtciceparameters object which provides information uniquely identifying the local peer for the duration of the ice session.
... syntax parameters = rtcicetransport.
getlocalparameters(); parameters none.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicetransport.
getlocalparameters' in that specification.
RTCIceTransport.getRemoteParameters() - Web APIs
the rtcicetransport method
getremoteparameters() returns an rtciceparameters object which provides information uniquely identifying the remote peer for the duration of the ice session.
... syntax parameters = rtcicetransport.
getremoteparameters(); parameters none.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicetransport.
getremoteparameters' in that specification.
RTCPeerConnection.getDefaultIceServers() - Web APIs
the
getdefaulticeservers() method of the rtcpeerconnection interface returns an array of objects based on the rtciceserver dictionary, which indicates what, if any, ice servers the browser will use by default if none are provided to the rtcpeerconnection in its rtcconfiguration.
... syntax var defaulticeservers = rtcpeerconnection.
getdefaulticeservers(); return value an array of ice servers, specified as objects based on rtciceserver, which the browser will use if none are specified in the configuration of the rtcpeerconnection.
... example var pc = new rtcpeerconnection(); var iceservers = pc.
getdefaulticeservers(); if (iceservers.length === 0) { // deal with the lack of default ice servers, possibly by using our own defaults } specifications specification status comment webrtc extensions ...
RTCPeerConnection.getTransceivers() - Web APIs
the rtcpeerconnection interface's
gettransceivers() method returns a list of the rtcrtptransceiver objects being used to send and receive data on the connection.
... syntax transceiverlist = rtcpeerconnection.
gettransceivers(); parameters none.
... pc.
gettransceivers().foreach(transceiver => { transceiver.stop(); }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.
gettransceivers()' in that specification.
RTCRtpReceiver.getContributingSources() - Web APIs
the
getcontributingsources() method of the rtcrtpreceiver interface returns an array of rtcrtpcontributingsource instances, each corresponding to one csrc (contributing source) identifier received by the current rtcrtpreceiver in the last ten seconds.
... syntax var rtcrtpcontributingsources = rtcrtpreceiver.
getcontributingsources() parameters none.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of '
getcontributingsources()' in that specification.
RTCRtpReceiver.getParameters() - Web APIs
the
getparameters() method of the rtcrtpreceiver interface returns an rtcrtpreceiveparameters object describing the current configuration for the encoding and transmission of media on the receiver's track.
... syntax let rtpreceiveparameters = rtpreceiver.
getparameters(); parameters none.
... function
getrtcpcname(receiver) { let parameters = receiver.
getparameters(); return parameters.rtcp.cname; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpreceiver.
getparameters()' in that specification.
RTCRtpReceiver.getStats() - Web APIs
the rtcrtpreceiver method
getstats() asynchronously requests an rtcstatsreport object which provides statistics about incoming traffic on the owning rtcpeerconnection, returning a promise whose fulfillment handler will be called once the results are available.
... syntax var promise = rtcrtpreceiver.
getstats(); return value a javascript promise which is fulfilled once the statistics are available.
... receiver.
getstats().then(function(stats) { document.
getelementbyid("lostpackets").innertext = stats.packetslost; }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpreceiver.
getstats()' in that specification.
RTCRtpReceiver.getSynchronizationSources() - Web APIs
the
getsynchronizationsources() method of the rtcrtpreceiver interface returns an array of rtcrtpcontributingsource instances, each corresponding to one ssrc (synchronization source) identifier received by the current rtcrtpreceiver in the last ten seconds.
... syntax var rtcrtpcontributingsources = rtcrtpreceiver.
getcontributingsources() parameters none.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of '
getsynchronizationsources()' in that specification.
RTCRtpSender.getStats() - Web APIs
the rtcrtpsender method
getstats() asynchronously requests an rtcstatsreport object which provides statistics about outgoing traffic on the rtcpeerconnection which owns the sender, returning a promise which is fulfilled when the results are available.
... syntax var promise = rtcrtpsender.
getstats(); return value a javascript promise which is fulfilled once the statistics are available.
... sender.
getstats().then(function(stats) { document.
getelementbyid("currentrtt").innertext = stats.roundtriptime; }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsender.
getstats()' in that specification.
Range.getClientRects() - Web APIs
the range.
getclientrects() method returns a list of domrect objects representing the area of the screen occupied by the range.
... this is created by aggregating the results of calls to element.
getclientrects() for all the elements in the range.
... syntax rectlist = range.
getclientrects() example range = document.createrange(); range.selectnode(document.
getelementsbytagname("div").item(0)); rectlist = range.
getclientrects(); specification specification status comment css object model (cssom) view modulethe definition of 'range.
getclientrects()' in that specification.
SVGGeometryElement.getPointAtLength() - Web APIs
the svggeometryelement.
getpointatlength() method returns the point at a given distance along the path.
... syntax dompoint someelement.
getpointatlength(float distance); parameters distance a float referring to the distance along the path.
... specifications specification status comment scalable vector graphics (svg) 2the definition of 'svggeometryelement.
gettotallength()' in that specification.
SVGGeometryElement.getTotalLength() - Web APIs
the svggeometryelement.
gettotallength() method returns the user agent's computed value for the total length of the path in user units.
... syntax float someelement.
gettotallength(); return value a float indicating the total length of the path in user units.
... specifications specification status comment scalable vector graphics (svg) 2the definition of 'svggeometryelement.
gettotallength()' in that specification.
SVGPathElement.getPointAtLength() - Web APIs
the svgpathelement.
getpointatlength() method returns the point at a given distance along the path.
... syntax svgpoint someelement.
getpointatlength(float distance); parameters distance a float referring to the distance along the path.
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgpathelement.
gettotallength()' in that specification.
SVGPathElement.getTotalLength() - Web APIs
the svgpathelement.
gettotallength() method returns the user agent's computed value for the total length of the path in user units.
... syntax float someelement.
gettotallength(); return value a float indicating the total length of the path in user units.
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgpathelement.
gettotallength()' in that specification.
Selection.getRangeAt() - Web APIs
the selection.
getrangeat() method returns a range object representing one of the ranges currently selected.
... syntax range = sel.
getrangeat(index) parameters index the zero-based index of the range to return.
... example let ranges = []; sel = window.
getselection(); for(let i = 0; i < sel.rangecount; i++) { ranges[i] = sel.
getrangeat(i); } /* each item in the ranges array is now * a range object representing one of the * ranges in the current selection */ specifications specification status comment selection apithe definition of 'selection:
getrangeat()' in that specification.
ServiceWorkerContainer.getRegistration() - Web APIs
the
getregistration() method of the serviceworkercontainer interface
gets a serviceworkerregistration object whose scope url matches the provided document url.
... syntax serviceworkercontainer.
getregistration(scope).then(function(serviceworkerregistration) { ...
... example navigator.serviceworker.
getregistration('/app').then(function(registration) { if(registration){ document.queryselector('#status').textcontent = 'serviceworkerregistration found.'; } }); specifications specification status comment service workersthe definition of 'serviceworkercontainer:
getregistration' in that specification.
ServiceWorkerContainer.getRegistrations() - Web APIs
the
getregistrations() method of the serviceworkercontainer interface
gets all serviceworkerregistrations associated with a serviceworkercontainer, in an array.
... syntax serviceworkercontainer.
getregistrations().then(function(serviceworkerregistrations) { ...
... example navigator.serviceworker.
getregistrations().then(function(registrations) { document.queryselector('#status').textcontent = 'serviceworkerregistrations found.'; }); specifications specification status comment service workersthe definition of '
getregistrations()' in that specification.
ServiceWorkerRegistration.getNotifications() - Web APIs
the
getnotifications() method of the serviceworkerregistration interface returns a list of the notifications in the order that they were created from the current origin via the current service worker registration.
... syntax serviceworkerregistration.
getnotifications(options) .then(function(notificationslist) { ...
... example navigator.serviceworker.register('sw.js'); var options = { tag : 'user_alerts' }; navigator.serviceworker.ready.then(function(registration) { registration.
getnotifications(options).then(function(notifications) { // do something with your notifications }) }); specifications specification status comment notifications apithe definition of 'serviceworkerregistration.
getnotifications()' in that specification.
SourceBuffer.changeType() - Web APIs
the chan
getype() method of the sourcebuffer interface sets the mime type that future calls to appendbuffer() should expect the new media data to conform to.
... syntax sourcebuffer.chan
getype(type); parameters type a domstring specifying the mime type that future buffers will conform to.
... usage notes if the parent mediasource is in its "ended" readystate, calling chan
getype() will transition the media source to the "open" readystate and fire a simple event named sourceopen at the parent media source.
StylePropertyMapReadOnly.getAll() - Web APIs
the
getall() method of the stylepropertymapreadonly interface returns an array of cssstylevalue objects containing the values for the provided property.
... syntax var cssstylevalues[] = stylepropertymapreadonly.
getall(property) parameters property the name of the property to retrieve all values of.
... example // tbd specifications specification status comment css typed om level 1the definition of '
getall()' in that specification.
getTrackById() - Web APIs
the texttracklist method
gettrackbyid() returns the first texttrack object from the track list whose id matches the specified string.
... syntax var thetrack = texttracklist.
gettrackbyid(id); paramters id a domstring indicating the id of the track to locate within the track list.
... specifications specification status comment html living standardthe definition of 'texttracklist.
gettrackbyid()' in that specification.
URLSearchParams.get() - Web APIs
the
get() method of the urlsearchparams interface returns the first value associated to the given search parameter.
... syntax urlsearchparams.
get(name) parameters name the name of the parameter to return.
... examples if the url of your page is https://example.com/?name=jonathan&age=18 you could parse out the 'name' and 'age' parameters using: let params = new urlsearchparams(document.location.search.substring(1)); let name = params.
get("name"); // is the string "jonathan" let age = parseint(params.
get("age"), 10); // is the number 18 requesting a parameter that isn't present in the query string will return null: let address = params.
get("address"); // null specifications specification status comment urlthe definition of '
get()' in that specification.
USB.getDevices() - Web APIs
the
getdevices method of the usb interface returns a promise that resolves with an array of usbdevice objects for paired attached devices.
... syntax usb.
getdevices() parameters none.
... navigator.usb.
getdevices() .then(devices => { console.log("total devices: " + devices.length); devices.foreach(device => { console.log("product name: " + device.productname + ", serial number " + device.serialnumber); }); }); specifications specification status comment webusbthe definition of '
getdevices' in that specification.
getTrackById - Web APIs
the videotracklist method
gettrackbyid() returns the first videotrack object from the track list whose id matches the specified string.
... syntax var thetrack = videotracklist.
gettrackbyid(id); paramters id a domstring indicating the id of the track to locate within the track list.
... specifications specification status comment html living standardthe definition of 'videotracklist.
gettrackbyid()' in that specification.
VisualViewport.pageTop - Web APIs
the pa
getop read-only property of the visualviewport interface returns the y coordinate of the top edge of the visual viewport relative to the initial containing block origin, in css pixels.
... syntax var pa
getop = visualviewport.pa
getop value a double.
... specifications specification status comment visual viewport apithe definition of 'pa
getop' in that specification.
WEBGL_compressed_texture_astc.getSupportedProfiles() - Web APIs
the webgl_compressed_texture_astc.
getsupportedprofiles() method returns an array of strings containing the names of the astc profiles supported by the implementation.
... syntax sequence<domstring> ext.
getsupportedprofiles(); return value an array of domstring elements indicating which astc profiles are supported by the implementation.
... examples var ext = gl.
getextension('webgl_compressed_texture_astc'); ext.
getsupportedprofiles(); // ["ldr"] specifications specification status comment webgl_compressed_texture_astcthe definition of 'webgl_compressed_texture_astc' in that specification.
Getting started with WebGL - Web APIs
// // start here // function main() { const canvas = document.queryselector("#glcanvas"); // initialize the gl context const gl = canvas.
getcontext("webgl"); // only continue if webgl is available and working if (gl === null) { alert("unable to initialize webgl.
... once we have the canvas, we try to
get a webglrenderingcontext for it by calling
getcontext() and passing it the string "webgl".
... if the browser does not support webgl,
getcontext() will return null in which case we display a message to the user and exit.
Web Budget API - Web APIs
concepts and usage tbd interfaces bud
getservice provides a programmatic interface to the user agent’s bud
get service.
... bud
getstate provides the amount of the user agent's processing bud
get at a specific point in time.
... specifications specification status comment web bud
get api draft initial definition.
Window.getAttention() - Web APIs
the window.
getattention() method attempts to
get the user's attention.
... syntax window.
getattention(); notes on windows, the taskbar button for the window flashes, if this hasn't been disabled by the user.
...
getattention will still work when used from chrome in a gecko application.
Feature-Policy: publickey-credentials-get - HTTP
the http feature-policy header publickey-credentials-
get directive controls whether the current document is allowed to access web authentcation api to create new public-key credentials, i.e, via navigator.credentials.
get({publickey: ..., ...}).
... syntax feature-policy: publickey-credentials-
get <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
... definition of publickey-credentials-
get directive, default allowlist.
GET - HTTP
the http
get method requests a representation of the specified resource.
... requests using
get should only retrieve data.
... request has body no successful response has body yes safe yes idempotent yes cacheable yes allowed in html forms yes syntax
get /index.html specifications specification title rfc 7231, section 4.3.1:
get hypertext transfer protocol (http/1.1): semantics and content ...
DataView.prototype.getBigInt64() - JavaScript
the
getbigint64() method
gets a signed 64-bit integer (long long) at the specified byte offset from the start of the dataview.
... syntax dataview.
getbigint64(byteoffset [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to read the data from.
... examples using the
getbigint64 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.
getbigint64(0); // 0n specifications specification ecmascript (ecma-262)the definition of 'dataview.prototype.
getbigint64()' in that specification.
DataView.prototype.getBigUint64() - JavaScript
the
getbiguint64() method
gets an unsigned 64-bit integer (unsigned long long) at the specified byte offset from the start of the dataview.
... syntax dataview.
getbiguint64(byteoffset [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to read the data from.
... examples using the
getbiguint64 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.
getbiguint64(0); // 0n specifications specification ecmascript (ecma-262)the definition of 'dataview.prototype.
getbiguint64()' in that specification.
DataView.prototype.getFloat32() - JavaScript
the
getfloat32() method
gets a signed 32-bit float (float) at the specified byte offset from the start of the dataview.
... syntax dataview.
getfloat32(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... examples using the
getfloat32 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.
getfloat32(1); // 0 specifications specification ecmascript (ecma-262)the definition of 'dataview.prototype.
getfloat32' in that specification.
DataView.prototype.getFloat64() - JavaScript
the
getfloat64() method
gets a signed 64-bit float (double) at the specified byte offset from the start of the dataview.
... syntax dataview.
getfloat64(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... examples using the
getfloat64 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.
getfloat64(0); // 0 specifications specification ecmascript (ecma-262)the definition of 'dataview.prototype.
getfloat64' in that specification.
DataView.prototype.getInt16() - JavaScript
the
getint16() method
gets a signed 16-bit integer (short) at the specified byte offset from the start of the dataview.
... syntax dataview.
getint16(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... examples using the
getint16 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.
getint16(1); // 0 specifications specification ecmascript (ecma-262)the definition of 'dataview.prototype.
getint16' in that specification.
DataView.prototype.getInt32() - JavaScript
the
getint32() method
gets a signed 32-bit integer (long) at the specified byte offset from the start of the dataview.
... syntax dataview.
getint32(byteoffset [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view where to read the data.
... examples using the
getint32 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.
getint32(1); // 0 specifications specification ecmascript (ecma-262)the definition of 'dataview.prototype.
getint32' in that specification.
DataView.prototype.getInt8() - JavaScript
the
getint8() method
gets a signed 8-bit integer (byte) at the specified byte offset from the start of the dataview.
... syntax dataview.
getint8(byteoffset) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... examples using the
getint8 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.
getint8(1); // 0 specifications specification ecmascript (ecma-262)the definition of 'dataview.prototype.
getint8' in that specification.
DataView.prototype.getUint16() - JavaScript
the
getuint16() method
gets an unsigned 16-bit integer (unsigned short) at the specified byte offset from the start of the dataview.
... syntax dataview.
getuint16(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... examples using the
getuint16 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.
getuint16(1); // 0 specifications specification ecmascript (ecma-262)the definition of 'dataview.prototype.
getuint16' in that specification.
DataView.prototype.getUint32() - JavaScript
the
getuint32() method
gets an unsigned 32-bit integer (unsigned long) at the specified byte offset from the start of the dataview.
... syntax dataview.
getuint32(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... examples using the
getuint32 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.
getuint32(1); // 0 specifications specification ecmascript (ecma-262)the definition of 'dataview.prototype.
getuint32' in that specification.
DataView.prototype.getUint8() - JavaScript
the
getuint8() method
gets an unsigned 8-bit integer (unsigned byte) at the specified byte offset from the start of the dataview.
... syntax dataview.
getuint8(byteoffset) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... examples using the
getuint8 method var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.
getuint8(1); // 0 specifications specification ecmascript (ecma-262)the definition of 'dataview.prototype.
getuint8' in that specification.
Date.prototype.getMilliseconds() - JavaScript
the
getmilliseconds() method returns the milliseconds in the specified date according to local time.
... syntax dateobj.
getmilliseconds() return value a number, between 0 and 999, representing the milliseconds for the given date according to local time.
... examples using
getmilliseconds() the following example assigns the milliseconds portion of the current time to the variable milliseconds: var today = new date(); var milliseconds = today.
getmilliseconds(); specifications specification ecmascript (ecma-262)the definition of 'date.prototype.
getmilliseconds' in that specification.
Intl.getCanonicalLocales() - JavaScript
the intl.
getcanonicallocales() method returns an array containing the canonical locale names.
... syntax intl.
getcanonicallocales(locales) parameters locales a list of string values for which to
get the canonical locale names.
... examples using
getcanonicallocales intl.
getcanonicallocales('en-us'); // ["en-us"] intl.
getcanonicallocales(['en-us', 'fr']); // ["en-us", "fr"] intl.
getcanonicallocales('en_us'); // rangeerror:'en_us' is not a structurally valid language tag specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.
getcanonicallocales' in that specification.
preferences/event-target - Archive of obsolete content
globals constructor prefstar
get(options) parameters options : object required options: name type branchname string by default this is "", the root.
... example var { prefstar
get } = require("sdk/preferences/event-tar
get"); // listen to the same branch which reqire("sdk/simple-prefs") does var tar
get = prefstar
get({ branchname: "extensions." + require("sdk/self").preferencesbranch + "." }); tar
get.once("test", function(prefname) { console.log(prefname) // logs "test" console.log(tar
get.prefs[name]) // logs true }); tar
get.once("", function() { console.log(prefname) // logs "test" console.log(tar
get.prefs[name]) // logs true }) // changing a pref which our tar
get listens to require("sdk/simple-prefs").prefs.test = true; ...
Getting Started - Archive of obsolete content
you will also have to update the minimum and maximum compatible versions for the tar
get application (seamonkey) in the following section: <em:tar
getapplication> <description> <!-- seamonkey's uuid --> <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id> <em:minversion>min_sm_version</em:minversion> <em:maxversion>max_sm_version</em:maxversion> </description> </em:tar
getapplication> establishing both minimum and maximum compatible versions lets y...
...more after i
get done with some tests repackaging jar now all you need to do is repackage a jar file with the following directory structure, using your favorite archive manager to create a zip archive: /chrome/my_theme.jar!/communicator/* /chrome/my_theme.jar!/editor/* /chrome/my_theme.jar!/global/* /chrome/my_theme.jar!/help/* /chrome/my_theme.jar!/messenger/* /chrome/my_theme.jar!/messenger-newsblog/* /chrome/m...
Getting Started - Archive of obsolete content
the default wid
gets are defined here, and anything that is modified will change throughout mozilla.
...creating the install script
getting it ready for the installation before we can package everything up for installation, we need to remove all references to classic.
windowsGetShortName - Archive of obsolete content
method of file object syntax string windows
getshortname( object localdirspec ) parameters the windowsregisterserver method has the following parameter: localdirspec a filespecobject representing a directory obtained by
getcomponentfolder or
getfolder.
... example flongfilepath =
getfolder(fprogram, "longfilename.file"); sshortfilepath = file.windows
getshortname(flongfilepath); if(sshortfilepath) { // do something } ...
getValueNumber - Archive of obsolete content
getvaluenumber
gets the value of a key when that value is a number.
... method of winreg object syntax number
getvaluenumber ( string subkey, string valname); parameters the
getvaluestring method has the following parameters: subkey the key path to the appropriate location in the key hierarchy, such as "software\\netscape\\navigator\\mail".
getNextItem - Archive of obsolete content
« xul reference home
getnextitem( startitem, delta ) return type: element this method returns the item a given distance (delta) after the specified startitem, or null if no such item exists.
... this example will return the item two rows after someitem:
getnextitem ( someitem, 2 ); ...
getPreviousItem - Archive of obsolete content
« xul reference home
getpreviousitem( startitem, delta ) return type: element this method returns the item a given distance (delta) before the specified startitem, or null if no such item exists.
... this example will return the item five rows before someitem:
getpreviousitem ( someitem, 5 ); ...
WebIDL bindings
this is a signal that you need to
get a review from a dom peer.
... resist the urge to just add your interfaces to the moz.build list without the review; it will just annoy the dom peers and they'll make you
get the review anyway.
...ns_impl_cycle_collection_wrappercache_0(myclass) ns_impl_cycle_collecting_addref(myclass) ns_impl_cycle_collecting_release(myclass) ns_interface_map_begin_cycle_collection(myclass) ns_wrappercache_interface_map_entry ns_interface_map_entry(nsisupports) ns_interface_map_end if your class doesn't inherit from a class that implements
getparentobject, then add a function of that name that, for a given instance of your class, returns the same object every time (unless you write explicit code that handles your parent object changing by reparenting js wrappers, as nodes do).
...And 94 more matches
IME handling guide
and editor sets these ime selections from mozilla::textran
getype which are sent by mozilla::wid
getcompositionevent as mozilla::textrangearray.
... selection types of each clause of composition string or caret nsiselectioncontroller mozilla::selectiontype mozilla::textran
getype caret selection_normal enormal ecaret raw text typed by the user selection_ime_raw_input eimerawclause erawclause selected clause of raw text typed by the user selection_ime_selectedrawtext eimeselectedrawclause eselectedrawclause converted clause by ime selection_ime_convertedtext eimeconvertedclause econvertedclause selected clause by the user or ime and also converted by ime selection_ime_selectedconvertedtext eimeselectedclause eselectedclause note that typically, "selected clause of raw t...
... modules handling ime composition wid
get each wid
get handles native ime events and dispatches wid
getcompositionevent with mozilla::wid
get::texteventdispatcher to represent the behavior of ime in the focused editor.
...And 93 more matches
sslfnc.html
nss_init nss_initreadwrite nss_nodb_init ssl_optionsetdefault ssl_option
getdefault ssl_cipherprefsetdefault ssl_cipherpref
getdefault ssl_clearsessioncache ssl_configserversessionidcache ssl_configmpserversidcache ssl_inheritmpserversidcache nss_init sets up configuration files and performs other tasks required to run network security services.
...use pr_
geterror to retrieve the error code.
...use pr_
geterror to retrieve the error code.
...And 81 more matches
Editor Embedding Guide - Archive of obsolete content
in the beginning there is makeeditable given an nsiwebbrowser instance,
get an nsidomwindow from the
getcontentdomwindow call.
... then simply call nsiwebbrowser->do_
getinterface on the nsiwebbrowser to retrieve the nsieditingsession from it.
...nscomptr<nsieditingsession> editingsession; nsiwebbrowser->do_
getinterface(
getter_addrefs(editingsession)); if (editingsession) editingsession->makewindoweditable(domwindow, "html", pr_true); the valid editor types are: "text" (similar to notepad or a textarea; does not allow for html) "textmail" (similar to "text" but html can be inserted; intended for plaintext mail usage and handling of citations) "html" (this is the default type if no type is specifie...
...And 76 more matches
nsIAnnotationService
to use this service, use: var annotationservice = components.classes["@mozilla.org/browser/annotation-service;1"] .
getservice(components.interfaces.nsiannotationservice); note: the annotation service is not thread-safe.
...nst, array, size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amimetype, in long aflags, in unsigned short aexpiration); void setitemannotationbinary(in long long aitemid, in autf8string aname,[const, array, size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amimetype, in long aflags, in unsigned short aexpiration); nsivariant
getpageannotation(in nsiuri auri, in autf8string aname); nsivariant
getitemannotation(in long long aitemid, in autf8string aname); astring
getpageannotationstring(in nsiuri auri, in autf8string aname); astring
getitemannotationstring(in long long aitemid, in autf8string aname); long
getpageannotationint32(in nsiuri auri, in autf8string aname); long
getitem...
...annotationint32(in long long aitemid, in autf8string aname); long long
getpageannotationint64(in nsiuri auri, in autf8string aname); long long
getitemannotationint64(in long long aitemid, in autf8string aname); double
getpageannotationdouble(in nsiuri auri, in autf8string aname); double
getitemannotationdouble(in long long aitemid, in autf8string aname); void
getpageannotationbinary(in nsiuri auri, in autf8string aname,[array, size_is(adatalen)] out octet adata, out unsigned long adatalen, out autf8string amimetype); void
getitemannotationbinary(in long long aitemid, in autf8string aname,[array, size_is(adatalen)] out octet adata, out unsigned long adatalen, out autf8string amimetype); void
getpageannotationinfo(in nsiuri auri, in...
...And 67 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
ref: bug 690370 available functions are (see prefcalls.js file for details): function
getprefbranch() function pref(prefname, value) function defaultpref(prefname, value) function lockpref(prefname, value) function unlockpref(prefname) function
getpref(prefname) function
getldapattributes(host, base, filter, attribs) function
getldapvalue(str, key) function displayerror(funcname, message) function
getenv(name) configure autoconfig two directives ask thunderbird to use autoconfig ...
... autoconfig directives here we want to set users central mail preferences: create one account from their login name,
get their email address from an ldap request and set the enterprise imap and smtp servers.
... hence, when working on multiuser workstations, each user
gets automatically thunderbird configured for his profile.
...And 62 more matches
Using IndexedDB - Web APIs
with these big concepts under our belts, we can
get to more concrete stuff.
...}; which of the two functions, onsuccess() or onerror(),
gets called?
... if everything succeeds, a success event (that is, a dom event whose type property is set to "success") is fired with request as its tar
get.
...And 60 more matches
Index - Learn web development
13 aprender y obtener ayuda beginner, learn, learning, web development,
getting help it is great that you are putting some time into learning a new set of skills, but there are good practices to employ that will make your learning more effective.
... there are also are times when you'll
get stuck and feel frustrated — even professional web developers feel like this regularly — and it pays to know about the most effective ways to try and
get help so you can progress in your work.
... this article provides some hints and tips in both of these areas that will help you
get more out of learning web development, as well as further reading so you can find out more information about each sub-topic should you wish..
...And 59 more matches
nsIDOMWindowUtils
to
get this interface, use: var domwindowutils = window.windowutils; method overview void activatenativemenuitemat(in astring indexstring); void clearmozafterpaintevents(); pruint32 comparecanvases(in nsidomhtmlcanvaselement acanvas1, in nsidomhtmlcanvaselement acanvas2, out unsigned long amaxdifference); double computeanimationdistance(in nsidomelement element, in astring property, in astring value1, in astring val...
...ue2); nsicompositionstringsynthesizer createcompositionstringsynthesizer(); obsolete since gecko 38.0 void disablenontestmouseevents(in boolean adisable); boolean dispatchdomeventviapresshell(in nsidomnode atar
get, in nsidomevent aevent, in boolean atrusted); nsidomelement elementfrompoint(in float ax, in float ay, in boolean aignorerootscrollframe, in boolean aflushlayout); void entermodalstate(); nsidomelement findelementwithviewid(in nsviewid aid); void focus(in nsidomelement aelement); void forceupdatenativemenuat(in astring indexstring); void garbagecollect([optional] in nsicyclecollectorlistener alistener); short
getcursortype(); astring
getdocumentmetadata(in astring aname); ...
... nsidomwindow
getouterwindowwithid(in unsigned long long aouterwindowid); long
getpccountscriptcount(); astring
getpccountscriptsummary(in long ascript); astring
getpccountscriptcontents(in long ascript); void
getscrollxy(in boolean aflushlayout, out long ascrollx, out long ascrolly); astring
getvisiteddependentcomputedstyle(in nsidomelement aelement, in astring apseudoelement, in astring apropertyname); boolean isinmodalstate(); void leavemodalstate(); void loadsheet(in nsiuri sheeturi, in unsigned long type); nsidomnodelist nodesfromrect(in float ax, in float ay, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, in boolean aignorerootscrollframe, in boolean a...
...And 59 more matches
Inputs and input sources - Web APIs
inputs in webxr fundamentally, inputs in webxr fall into two basic categories: tar
geting and actions.
... tar
geting is the specification of a point in space by the user's input.
... input device types webxr supports a variety of different types of devices to handle tar
geting and action inputs.
...And 59 more matches
nsINavBookmarksService
to use this service, use: var navbookmarksservice = components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .
getservice(components.interfaces.nsinavbookmarksservice); method overview void addobserver(in nsinavbookmarkobserver observer, in boolean ownsweak); void beginupdatebatch(); obsolete since gecko 1.9 void changebookmarkuri(in long long aitemid, in nsiuri anewuri); long long createdynamiccontainer(in long long aparentfolder, in autf8string aname, in astring acontr...
...actid, in long aindex); note: renamed from createcontainer in gecko 1.9 obsolete since gecko 13.0 long long createfolder(in long long aparentfolder, in autf8string name, in long index); void endupdatebatch(); obsolete since gecko 1.9 void exportbookmarkshtml(in nsifile file); obsolete since gecko 1.9 nsiuri
getbookmarkedurifor(in nsiuri auri); void
getbookmarkfolderstarray(in nsiuri auri, in print64array aresult); native code only!
... obsolete since gecko 1.9 void
getbookmarkidsforuri(in nsiuri auri, [optional] out unsigned long count, [array, retval, size_is(count)] out long long bookmarks); note: renamed from
getbookmarkfolders in gecko 1.9 void
getbookmarkidsforuritarray(in nsiuri auri, in print64array aresult); native code only!
...And 57 more matches
WebGL constants - Web APIs
standard webgl constants are installed on the webglrenderingcontext and webgl2renderingcontext objects, so that you use them as gl.constant_name: var canvas = document.
getelementbyid('mycanvas'); var gl = canvas.
getcontext('webgl'); gl.
getparameter(gl.line_width); some constants are also provided by webgl extensions.
... var debuginfo = gl.
getextension('webgl_debug_renderer_info'); var vendor = gl.
getparameter(debuginfo.unmasked_vendor_webgl); the webgl tutorial has more information, examples, and resources on how to
get started with webgl.
...
getting gl parameter information constants passed to webglrenderingcontext.
getparameter() to specify what information to return.
...And 56 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
if you're implementing controls/wid
gets, you should also see the accessible toolkit checklist.
...msaa is supposed to be the "right way" for accessibility aids to
get information, but sometimes the hacks are more effective.
...without downloading the sdk, you won't
get the extremely useful tools, which help a great deal in the learning process.
...And 54 more matches
jspage - Archive of obsolete content
slice","sort","splice","tostring","unshift","valueof"],string:["charat","charcodeat","concat","indexof","lastindexof","match","replace","search","slice","split","substr","substring","tolowercase","touppercase","valueof"]}; for(var e in f){for(var b=f[e].length;b--;){native.genericize(a[e],f[e][b],true);}}})();var hash=new native({name:"hash",initialize:function(a){if($type(a)=="hash"){a=$unlink(a.
getclean()); }for(var b in a){this[b]=a[b];}return this;}});hash.implement({foreach:function(b,c){for(var a in this){if(this.hasownproperty(a)){b.call(c,this[a],a,this); }}},
getclean:function(){var b={};for(var a in this){if(this.hasownproperty(a)){b[a]=this[a];}}return b;},
getlength:function(){var b=0;for(var a in this){if(this.hasownproperty(a)){b++; }}return b;}});hash.alias("foreach","each");arra...
...n c;}return b;}var browser=$merge({engine:{name:"unknown",version:0},platform:{name:(window.orientation!=undefined)?"ipod":(navigator.platform.match(/mac|win|linux/i)||["other"])[0].tolowercase()},features:{xpath:!!(document.evaluate),air:!!(window.runtime),query:!!(document.queryselector)},plugins:{},engines:{presto:function(){return(!window.opera)?false:((arguments.callee.caller)?960:((document.
getelementsbyclassname)?950:925)); },trident:function(){return(!window.activexobject)?false:((window.xmlhttprequest)?((document.queryselectorall)?6:5):4);},webkit:function(){return(navigator.taintenabled)?false:((browser.features.xpath)?((browser.features.query)?525:420):419); },gecko:function(){return(!document.
getboxobjectfor&&window.mozinnerscreenx==null)?false:((document.
getelementsbyclassname)?1...
...return $try(function(){return new xmlhttprequest();},function(){return new activexobject("msxml2.xmlhttp"); },function(){return new activexobject("microsoft.xmlhttp");});};browser.features.xhr=!!(browser.request());browser.plugins.flash=(function(){var a=($try(function(){return navigator.plugins["shockwave flash"].description; },function(){return new activexobject("shockwaveflash.shockwaveflash").
getvariable("$version");})||"0 r0").match(/\d+/g);return{version:parseint(a[0]||0+"."+a[1],10)||0,build:parseint(a[2],10)||0}; })();function $exec(b){if(!b){return b;}if(window.execscript){window.execscript(b);}else{var a=document.createelement("script");a.setattribute("type","text/javascript"); a[(browser.engine.webkit&&browser.engine.version<420)?"innertext":"text"]=b;document.head.appendchild(a);d...
...And 49 more matches
Starting WebLock
getting called at startup no person is an island to himself, and neither are components.
...weblock does the latter and
gets called when a gecko profile startup occurs.
...
getting access to the category manager two fields in the nsmodulecomponentinfo structure introduced in the last section are addresses for registration and unregistration callbacks.
...And 48 more matches
nsIVariant
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview acstring
getasacstring(); native code only!
... nsresult
getasarray(out pruint16 type, out nsiid iid, out pruint32 count, out voidptr ptr); violates the xpcom interface guidelines astring
getasastring(); native code only!
... autf8string
getasautf8string(); native code only!
...And 48 more matches
Reference Manual
if you've never use nscomptrs before, you might want to read the
getting started guide first.
... nscomptr<nsifoo> foo = bar; // ns_assertion: "queryinterface needed" // ...even assuming you can
get the line to compile // (either by casting, or because the types are related by c ) this invariant is relaxed for nscomptr<nsisupports>.
... nscomptr<nsifoo> foo = ...; foo->addref(); // error: |addref| is private delete foo.
get(); // error: |operator delete| is private ns_release(foo); // error: |release| is private of course, the most important safety feature provided by nscomptr is that it addrefs and releases automatically at the appropriate times.
...And 48 more matches
Index - Archive of obsolete content
6 flexgroup "flexgroup" is used to group flexible elements to
gether and should be set to an integer.
... 337 sizemode xul attributes, xul reference this attribute is used to save and restore the state of a window (to
gether with the persist attribute) and for css styles (e.g.
... 361 tar
gets xul attributes, xul reference no summary!
...And 47 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
not only does this make the code easier to read, it simplifies adding support for new clients: var elm =
getelmbyid("myid"); function
getelmbyid(aid){ var element = null; if (ismozilla || isie5) element = document.
getelementbyid(aid); else if (isnetscape4) element = document.layers[aid]; else if (isie4) element = document.all[aid]; return element; } the above code still has the issue of browser sniffing, or detecting which browser the user is using.
...for example, rather than: if (ismozilla || isie5) you would use: if (document.
getelementbyid) this would allow other browsers that support that w3c standard method, such as opera or safari, to work without any changes.
...conditionistrue : conditionisfalse; for example, to retrieve an element, you would use: function
getelement(aid){ return (document.
getelementbyid) ?
...And 43 more matches
Intersection Observer API - Web APIs
the intersection observer api provides a way to asynchronously observe changes in the intersection of a tar
get element with an ancestor element or with a top-level document's viewport.
... implementing intersection detection in the past involved event handlers and loops calling methods like element.
getboundingclientrect() to build up the needed information for every element affected.
...when a site is loaded with these tests, things can
get downright ugly.
...And 43 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
urwhilesearching, inputfield, issearching, iswaiting, label, maxlength, maxrows, minresultsforpopup, nomatch, open, popup, popupopen, resultspopup, searchcount, searchparam, searchsessions, selectionend, selectionstart, sessioncount, showcommentcolumn, showpopup, size, tabindex, tabscrolling, textlength, textvalue, timeout, type, useraction, value methods addsession, clearresults,
getdefaultsession,
getresultat,
getresultcount,
getresultvalueat,
getsession,
getsessionbyname,
getsessionresultat,
getsessionstatusat,
getsessionvalueat, removesession, select, setselectionrange, syncsessions examples (example needed) attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.tar
get.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> onerrorcommand type: script code this event handler is called when an error occurs when selecting a result from the popup.
...for those elements, setattribute("value", myvalue) and
getattribute("value") do not access or affect the contents displayed to the user.
...And 41 more matches
URLs - Plugins
« previousnext » this chapter describes retrieving urls and displaying them on specified tar
get pages, posting data to an http server, uploading files to an ftp server, and sending mail.
...
getting urls posting urls
getting urls to retrieve a url and display it on a specified tar
get page, use the npn_
geturl, npn_
geturlnotify, and npp_urlnotify functions.
... this section describes the methods and procedures used for
getting the url and displaying the page.
...And 41 more matches
Floats - Learn web development
the kind of thing you might
get in a newspaper layout.
...ut id ornare felis, e
get fermentum sapien.</p> <p>nam vulputate diam nec tempor bibendum.
... donec luctus augue e
get malesuada ultrices.
...And 39 more matches
Gecko info for Windows accessibility vendors
contains more desktop-style wid
gets than html and follows a box layout model, rather than being text-flow based.
...if it is a content window, you may use accessibleobjectfromwindow() to
get the root iaccessible for the content, and begin traversing the tree from there.
...when handling the event, use
get_accstate() to check the state_busy flag.
...And 38 more matches
DevTools API - Firefox Developer Tools
a toolbox (and all the tools it contains) is linked to a tar
get, which is the object the tools are debugging.
... a tar
get is usually a web page (a tab), but can be other things (a chrome window, a remote tab,…).
... showtoolbox(tar
get [, toolid [, hosttype [, hostoptions]]]) opens a toolbox for given tar
get either by creating a new one or activating an existing one.
...And 37 more matches
Tabbed browser - Archive of obsolete content
getting access to the browser from main window code running in firefox's global chromewindow, common for extensions that overlay into browser.xul, can access the tabbrowser element using the global variable gbrowser.
... if your code does not have access to the main window because it is run in a sidebar or dialog, you first need to
get access to the browser window you need before you can use gbrowser.
... you can find more information on
getting access to the browser window in working with windows in chrome code.
...And 36 more matches
JSAPI reference
runtimes and contexts js_init added in spidermonkey 31 js_shutdown struct jsruntime js_newruntimeobsolete since jsapi 52 js_destroyruntime js_
getruntimeprivate js_setruntimeprivate js_setnativestackquota added in spidermonkey 17 js_contextiteratorobsolete since jsapi 52 js_finish obsolete since jsapi 19 struct jscontext js_newcontext js_destroycontext js_destroycontextnogc js_setcontextcallback enum jscontextop js_
getruntime js_
getparentruntime added in spidermonkey 31 js_
getobjectruntime added in spidermonk...
...ey 17 js_
getcontextprivate js_setcontextprivate js_
getsecondcontextprivate added in spidermonkey 17 js_setsecondcontextprivate added in spidermonkey 17 js_setinterruptcallback added in spidermonkey 31 js_
getinterruptcallback added in spidermonkey 31 js_requestinterruptcallback added in spidermonkey 31 js_checkforinterrupt added in jsapi 45 js_destroycontextmaybegc obsolete since jsapi 14 js_setbranchcallback obsolete since javascript 1.9.1 js_setoperationcallback obsolete since jsapi 30 js_
getoperationcallback obsolete since jsapi 30 js_triggeroperationcallback obsolete since jsapi 30 js_clearoperationcallback obsolete since javascript 1.9.1 js_
getoperationlimit obsolete since javascript 1.9.1 js_setoperationlimit obsolete since javascript 1.9.1 js_max_operation_limi...
...t obsolete since javascript 1.9.1 js_operation_weight_base obsolete since javascript 1.9.1 js_setthreadstacklimit obsolete since jsapi 13 js_setscriptstackquota obsolete since javascript 1.8.6 js_setoptions obsolete since jsapi 27 js_
getoptions obsolete since jsapi 27 js_toggleoptions obsolete since jsapi 27 enum jsversion jsversion_ecma_3 jsversion_1_6 jsversion_1_7 jsversion_1_8 jsversion_ecma_5 jsversion_default jsversion_unknown jsversion_latest js_
getimplementationversion js_
getversion js_setversionforcompartment added in spidermonkey 31 js_stringtoversion js_versiontostring js_setversion obsolete since jsapi 25 js::currentglobalornull added in spidermonkey 31 js_
getglobalforscopechain obsolete since jsapi 25 js_
getglobalobj...
...And 36 more matches
Color picker tool - CSS: Cascading Style Sheets
: 16px; position: absolute; opacity: 0; top: -10000px; left: 0; color: #777; float: left; transition: opacity 1s; } #zindex input { border: 1px solid #ddd; font-size: 16px; color: #777; } #zindex .ui-input-slider-info { width: 60px; } #zindex[data-active='true'] { top: 0; opacity: 1; } javascript content 'use strict'; var uicolorpicker = (function uicolorpicker() { function
getelembyid(id) { return document.
getelementbyid(id); } var subscribers = []; var pickers = []; /** * rgba color class * * hsv/hsb and hsl (hue, saturation, value / brightness, lightness) * @param hue 0-360 * @param saturation 0-100 * @param value 0-100 * @param lightness 0-100 */ function color(color) { if(color instanceof color === true) { this.copy(color); r...
... (delta) { if (cmax === red ) { hue = ((green - blue) / delta); } if (cmax === green ) { hue = 2 + (blue - red) / delta; } if (cmax === blue ) { hue = 4 + (red - green) / delta; } if (cmax) saturation = delta / x; } this.hue = 60 * hue | 0; if (this.hue < 0) this.hue += 360; this.saturation = (saturation * 100) | 0; this.lightness = (lightness * 100) | 0; }; /*==========
get methods ==========*/ color.prototype.
gethexa = function
gethexa() { var r = this.r.tostring(16); var g = this.g.tostring(16); var b = this.b.tostring(16); if (this.r < 16) r = '0' + r; if (this.g < 16) g = '0' + g; if (this.b < 16) b = '0' + b; var value = '#' + r + g + b; return value.touppercase(); }; color.prototype.
getrgba = function
getrgba() { var rgb = '(' + this.r ...
...+ ', ' + this.g + ', ' + this.b; var a = ''; var v = ''; var x = parsefloat(this.a); if (x !== 1) { a = 'a'; v = ', ' + x; } var value = 'rgb' + a + rgb + v + ')'; return value; }; color.prototype.
gethsla = function
gethsla() { if (this.format === 'hsv') { var color = new color(this); color.setformat('hsl'); color.updatehsx(); return color.
gethsla(); } var a = ''; var v = ''; var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%'; var x = parsefloat(this.a); if (x !== 1) { a = 'a'; v = ', ' + x; } var value = 'hsl' + a + hsl + v + ')'; return value; }; color.prototype.
getcolor = function
getcolor() { if (this.a | 0 === 1) return this.
gethexa(); return this.
getrgba(); }; /*====================...
...And 36 more matches
AddonManager
getinstallforurl(in string url, in installcallback?
...
getinstallforfile(in nsifile file, in installcallback?
...
getallinstalls(in installlistcallback?
...And 35 more matches
Mozilla DOM Hacking Guide
tar
get audience: people interested in learning how the dom is implemented.
...for example, when we ask for |document.
getelementbyid("myid");|, xpconnect will find that |document| is a property of the window object, so it will look on the interface nsidomwindow, and it will find the
getdocument() method.
... the return value of
getdocument() is a nsidomdocument.
...And 35 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
in this chapter, we’ll discuss how to put them to
gether to actually build an extension.
... change your preferences for more efficient development before you
get to work developing your extension, you’ll want to change some of your firefox preferences.
...you can learn more about chromebug and download it at http://
getfirebug.com/wiki/index.php/chromebug_user_guide you may also find this extension to be valuable: extension developer https://addons.mozilla.org/firefox/addon/7434 developing extensions: what you need to know let’s delve into chrome, something you’ll need to know about in order to develop extensions.
...And 34 more matches
Shell global objects
you can
get the list of functions by help() function in js shell.
... shell only functions functions always available version([number])
get or force a script compilation version number.
... options([option ...])
get or toggle javascript options.
...And 34 more matches
Capabilities, constraints, and settings - Web APIs
overview the process works like this (using mediastreamtrack as an example): if needed, call mediadevices.
getsupportedconstraints() to
get the list of supported constraints, which tells you what constrainable properties the browser knows about.
... this isn't always necessary, since any that aren't known will simply be ignored when you specify them—but if you have any that you can't
get by without, you can start by checking to be sure they're on the list.
... once the script knows whether the property or properties it wishes to use are supported, it can then check the capabilities of the api and its implementation by examining the object returned by the track's
getcapabilities() method; this object lists each supported constraint and the values or range of values which are supported.
...And 34 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
s-property { width: 90%; margin: 5px 5%; color: #777; position: relative; float: left; } #output .property { height: 100%; width: 12%; position: absolute; left: 0; } #output .value { width: 88%; position: absolute; white-space: pre; word-wrap: break-word; display: block; right: 0; } javascript content var uicolorpicker = (function uicolorpicker() { 'use strict'; function
getelembyid(id) { return document.
getelementbyid(id); } var subscribers = []; var pickers = []; /** * rgba color class * * hsv/hsb and hsl (hue, saturation, value / brightness, lightness) * @param hue 0-360 * @param saturation 0-100 * @param value 0-100 * @param lightness 0-100 */ function color(color) { if(color instanceof color === true) { this.copy(color); r...
... (delta) { if (cmax === red ) { hue = ((green - blue) / delta); } if (cmax === green ) { hue = 2 + (blue - red) / delta; } if (cmax === blue ) { hue = 4 + (red - green) / delta; } if (cmax) saturation = delta / x; } this.hue = 60 * hue | 0; if (this.hue < 0) this.hue += 360; this.saturation = (saturation * 100) | 0; this.lightness = (lightness * 100) | 0; }; /*==========
get methods ==========*/ color.prototype.
gethexa = function
gethexa() { var r = this.r.tostring(16); var g = this.g.tostring(16); var b = this.b.tostring(16); if (this.r < 16) r = '0' + r; if (this.g < 16) g = '0' + g; if (this.b < 16) b = '0' + b; var value = '#' + r + g + b; return value.touppercase(); }; color.prototype.
getrgba = function
getrgba() { var rgb = '(' + this.r ...
...+ ', ' + this.g + ', ' + this.b; var a = ''; var v = ''; var x = parsefloat(this.a); if (x !== 1) { a = 'a'; v = ', ' + x; } var value = 'rgb' + a + rgb + v + ')'; return value; }; color.prototype.
gethsla = function
gethsla() { if (this.format === 'hsv') { var color = new color(this); color.setformat('hsl'); color.updatehsx(); return color.
gethsla(); } var a = ''; var v = ''; var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%'; var x = parsefloat(this.a); if (x !== 1) { a = 'a'; v = ', ' + x; } var value = 'hsl' + a + hsl + v + ')'; return value; }; color.prototype.
getcolor = function
getcolor() { if (this.a | 0 === 1) return this.
gethexa(); return this.
getrgba(); }; /*====================...
...And 34 more matches
Introduction to XPCOM for the DOM
tar
get audience: people who would like a quick introduction to the use of c++ and xpcom in the dom code.
...in the first case, if we for
get to addref the object, the object may delete itself before we are done using the pointer, which would cause a crash when dereferencing it.
... in the second case, if we for
get to release the object, it will never delete itself, which will cause "memory leaks", i.e.
...And 33 more matches
Mozilla accessibility architecture
also, what if they want to
get dom information, like css rules, tag names and attributes, that msaa's iaccessible does not provide?
...on atk there is no such interface to
get actual dom information.
...in the past, this was accomplished through aggregation -- two separate trees of objects were kept, one in accessible/src and one in wid
get/src.
...And 32 more matches
Preferences - Archive of obsolete content
to
get an nsiprefbranch, either queryinterface() the pref service (that will give you the root branch) or call nsiprefservice.
getbranch() to
get a sub-branch.
... here are two examples: //
get the root branch var prefs = components.classes["@mozilla.org/preferences-service;1"] .
getservice(components.interfaces.nsiprefbranch); //
get the "extensions.myext." branch var prefs = components.classes["@mozilla.org/preferences-service;1"] .
getservice(components.interfaces.nsiprefservice); prefs = prefs.
getbranch("extensions.myext."); simple types there are three types of preferences: string, integer, and boolean.
...there are six methods in nsiprefbranch that read and write preferences:
getboolpref(), setboolpref(),
getcharpref(), setcharpref(),
getintpref(), and setintpref().
...And 31 more matches
Setting up your own test automation environment - Learn web development
see platforms supported by selenium for more information on where to
get browser drivers from, etc.
... we will cover writing and running selenium tests using node.js, as it is quick and easy to
get started, and a more familiar environment for front end devs.
...you can find details of where to
get them from on the selenium-webdriver page (see the table in the first section.) obviously, some of the browsers are os-specific, but we're going to stick with firefox and chrome, as they are available across all the main oses.
...And 31 more matches
Places Developer Guide
bookmarks the toolkit bookmarks service is nsinavbookmarksservice: var bookmarks = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .
getservice(ci.nsinavbookmarksservice); this service provides methods for adding, editing and deleting items in the bookmarks collection.
...var bookmarkuri = cc["@mozilla.org/network/io-service;1"] .
getservice(ci.nsiioservice) .newuri("http://www.mozilla.com", null, null); var bookmarkid = bookmarks.insertbookmark( bookmarks.toolbarfolder, // the id of the folder the bookmark will be placed in.
... creating a livemark var ioservice = cc["@mozilla.org/network/io-service;1"] .
getservice(ci.nsiioservice); var siteuri = ioservice.newuri("http://www.mozilla.com", null, null); var feeduri = ioservice.newuri("http://www.mozilla.org/news.rdf", null, null); var livemarks = cc["@mozilla.org/browser/livemark-service;2"] .
getservice(ci.nsilivemarkservice); livemarks.createlivemark(bookmarks.toolbarfolder, // the id of the folder the livemark will be placed in "...
...And 31 more matches
nsIHTMLEditor
t aevent); void checkselectionstateforanonymousbuttons(in nsiselection aselection); nsidomelement createanonymouselement(in astring atag, in nsidomnode aparentnode, in astring aanonclass, in boolean aiscreatedhidden); nsidomelement createelementwithdefaults(in astring atagname); void decreasefontsize(); void dodrag(in nsidomevent aevent); void
getalignment(out boolean amixed, out short aalign); astring
getbackgroundcolorstate(out boolean amixed); nsidomelement
getelementorparentbytagname(in astring atagname, in nsidomnode anode); astring
getfontcolorstate(out boolean amixed); astring
getfontfacestate(out boolean amixed); astring
getheadcontentsashtml(); astring
gethighlightcolorstate(ou...
...t boolean amixed); void
getindentstate(out boolean acanindent, out boolean acanoutdent); void
getinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue, out boolean afirst, out boolean aany, out boolean aall); astring
getinlinepropertywithattrvalue(in nsiatom aproperty, in astring aattribute, in astring avalue, out boolean afirst, out boolean aany, out boolean aall); nsisupportsarray
getlinkedobjects(); void
getlistitemstate(out boolean amixed, out boolean ali, out boolean adt, out boolean add); void
getliststate(out boolean amixed, out boolean aol, out boolean aul, out boolean adl); astring
getparagraphstate(out boolean amixed); nsidomelement
getselectedelement(in astring atagname); nsidom...
...element
getselectioncontainer(); void ignorespuriousdragevent(in boolean aignorespuriousdragevent); void increasefontsize(); void indent(in astring aindent); void insertelementatselection(in nsidomelement aelement, in boolean adeleteselection); void insertfromdrop(in nsidomevent aevent); void inserthtml(in astring ainputstring); void inserthtmlwithcontext(in astring ainputstring, in astring acontextstr, in astring ainfostr, in astring aflavor, in nsidomdocument asourcedoc, in nsidomnode adestinationnode, in long adestinationoffset, in boolean adeleteselection); void insertlinkaroundselection(in nsidomelement aanchorelement); boolean isanonymouselement(in nsidomelement aelement); void makeorchangelist(in ...
...And 31 more matches
Accessible Toolkit Checklist
the approaches there are two basic kinds of toolkits, which each provide different challenges when implementing accessibility: native wid
get toolkits , like eclipse and wxwid
gets, already have some accessibility built-in.
... these toolkits wrap the wid
gets implemented by the os with a consistent api for each platform.
... since the individual wid
gets predominately come from the operating system, they already implement standard keyboard commands and follow the operating system's visual theme.
...And 30 more matches
Creating localizable web applications
note: most of the code snippets used in the examples below come from an early version of the
getpersonas.com website.
... don't for
get about right-to-left locales.
...in
gettext use comments and contexts).
...And 30 more matches
CSSPrimitiveValue - Web APIs
an instance of this interface might be obtained from the
getpropertycssvalue() method of the cssstyledeclaration interface.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssvalue" tar
get="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/cssprimitivevalue" tar
get="_top"><rect x="121" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssprimitivevalue</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, cssvalue.
...And 30 more matches
Meta programming - JavaScript
for example,
getting a property on an object: let handler = {
get: function(tar
get, name) { return name in tar
get?
... tar
get[name] : 42 } } let p = new proxy({}, handler) p.a = 1 console.log(p.a, p.b) // 1, 42 the proxy object defines a tar
get (an empty object here) and a handler object, in which a
get trap is implemented.
... here, an object that is proxied will not return undefined when
getting undefined properties, but will instead return the number 42.
...And 30 more matches
StringView - Archive of obsolete content
|*| http://www.gnu.org/licenses/lgpl-3.0.html |*| \*/ function stringview (vinput, sencoding /* optional (default: utf-8) */, noffset /* optional */, nlength /* optional */) { var ftaview, awhole, araw, fputoutptcode, f
getoutptchrsize, ninptlen, nstartidx = isfinite(noffset) ?
... noffset : 0, ntranscrtype = 15; if (sencoding) { this.encoding = sencoding.tostring(); } encswitch: switch (this.encoding) { case "utf-8": fputoutptcode = stringview.pututf8charcode; f
getoutptchrsize = stringview.
getutf8charlength; ftaview = uint8array; break encswitch; case "utf-16": fputoutptcode = stringview.pututf16charcode; f
getoutptchrsize = stringview.
getutf16charlength; ftaview = uint16array; break encswitch; case "utf-32": ftaview = uint32array; ntranscrtype &= 14; break encswitch; default: /* case "ascii", or case "binarystring" or unknown cases */ ftaview = uint8array; ntranscrtype &= 14; } typeswitch: switch (typeof vinput) { case "string": /* the input argumen...
...*/ awhole = araw = new ftaview(number(vinput) || 0); } if (ntranscrtype < 8) { var vsource, noutptlen, ncharstart, ncharend, nendidx, f
getinptchrsize, f
getinptchrcode; if (ntranscrtype & 4) { /* input is string */ vsource = vinput; noutptlen = ninptlen = vsource.length; ntranscrtype ^= this.encoding === "utf-32" ?
...And 29 more matches
Client-side storage - Learn web development
showing a user's choice of custom wid
gets, color scheme, or font size).
... saving web application generated documents locally for use offline often client-side and server-side storage are used to
gether.
...try typing this into your javascript console (change the value to your own name, if you wish!): localstorage.setitem('name','chris'); the storage.
getitem() method takes one parameter — the name of a data item you want to retrieve — and returns the item's value.
...And 29 more matches
WebGLRenderingContext - Web APIs
to
get an access to a webgl context for 2d and/or 3d graphics rendering, call
getcontext() on a <canvas> element, supplying "webgl" as the argument: var canvas = document.
getelementbyid('mycanvas'); var gl = canvas.
getcontext('webgl'); once you have the webgl rendering context for a canvas, you can render within it.
... the webgl tutorial has more information, examples, and resources on how to
get started with webgl.
... webglrenderingcontext.
getcontextattributes() returns a webglcontextattributes object that contains the actual context parameters.
...And 29 more matches
Signaling and video calling - Web APIs
function sendtooneuser(tar
get, msgstring) { var isunique = true; var i; for (i=0; i<connectionarray.length; i++) { if (connectionarray[i].username === tar
get) { connectionarray[i].send(msgstring); break; } } } this function iterates over the list of connected users until it finds one matching the specified username, then sends the message to that user.
...this involves a change near the end of the "connection" message handler: if (sendtoclients) { var msgstring = json.stringify(msg); var i; if (msg.tar
get && msg.tar
get !== undefined && msg.tar
get.length !== 0) { sendtooneuser(msg.tar
get, msgstring); } else { for (i=0; i<connectionarray.length; i++) { connectionarray[i].send(msgstring); } } } this code now looks at the pending message to see if it has a tar
get property.
... tar
get the username of the person to receive the description (if the caller is sending the message, this specifies the callee, and vice-versa).
...And 29 more matches
Client-Server Overview - Learn web development
this request includes: a url identifying the tar
get server and resource (e.g.
... a method that defines the required action (for example, to
get a file or to save or update some data).
... the different methods/verbs and their associated actions are listed below:
get:
get a specific resource (e.g.
...And 28 more matches
JSAPI User Guide
it can compile and execute scripts,
get and set object properties, call javascript functions, convert javascript data from one type to another, create objects, and so on.
...when your application is done with spidermonkey alto
gether, use js_shutdown to free any remaining cached resources.
...but as that is not always the case, calling js_shutdown is a good habit to
get into.) the context: use js_newcontext and js_destroycontext.
...And 28 more matches
nsIDOMXULElement
66 introduced gecko 1.0 inherits from: nsidomelement last changed in gecko 1.9 (firefox 3) method overview void blur(); void click(); void docommand(); void focus(); nsidomnodelist
getelementsbyattribute(in domstring name, in domstring value); nsidomnodelist
getelementsbyattributens(in domstring namespaceuri, in domstring name, in domstring value); attributes attribute type description align domstring
gets/sets the value of the element's align attribute.
...
gets or creates a box object for the element; browser, editor, iframe, listbox, menu, menupopup, scrollbox, tooltip and tree elements receive specialized box objects allowing access to additional properties not normally available from script.
... classname domstring
gets/sets the value of the element's class attribute.
...And 28 more matches
nsIMsgFolder
inherits from: nsisupports method overview void startfolderloading(); void endfolderloading(); void updatefolder(in nsimsgwindow awindow); nsimsgfilterlist
getfilterlist(in nsimsgwindow msgwindow); void setfilterlist(in nsimsgfilterlist filterlist); void forcedbclosed(); void delete(); void deletesubfolders(in nsisupportsarray folders, in nsimsgwindow msgwindow); void propagatedelete(in nsimsgfolder folder, in boolean deletestorage,in nsimsgwindow msgwindow); void recursivedelete(in boolean deletesto...
...nsimsgwindow amsgwindow, in nsiurllistener alistener); void rename(in astring name, in nsimsgwindow msgwindow); void renamesubfolders( in nsimsgwindow msgwindow, in nsimsgfolder oldfolder); astring generateuniquesubfoldername(in astring prefix,in nsimsgfolder otherfolder); void updatesummarytotals(in boolean force); void summarychanged(); long
getnumunread(in boolean deep); long
gettotalmessages(in boolean deep); void clearnewmessages(); void clearrequirescleanup(); void setflag(in unsigned long flag); void clearflag(in unsigned long flag); boolean
getflag(in unsigned long flag); void toggleflag(in unsigned long flag); void onflagchange(in unsigned long flag); ...
... void setprefflag(); nsimsgfolder
getfolderswithflag(in unsigned long flags, in unsigned long resultsize, out unsigned long numfolders); nsisupportsarray
getallfolderswithflag(in unsigned long aflag); void
getexpansionarray(in nsisupportsarray expansionarray); acstring
geturiformsg(in nsimsgdbhdr msghdr); void deletemessages(in nsisupportsarray messages,in nsimsgwindow msgwindow, in boolean deletestorage, in boolean ismove, in nsimsgcopyservicelistener listener, in boolean allowundo); void copymessages(in nsimsgfolder srcfolder, in nsisupportsarray messages,in boolean ismove, in nsimsgwindow msgwindow,in nsimsgcopyservicelistener listener, in boolean isfolder, in boolean allowundo); void copyfolder(in nsimsgfolder srcfolder, in bo...
...And 28 more matches
nsITreeView
layout/xul/base/src/tree/public/nsitreeview.idlscriptable this interface is used by the tree wid
get to
get information about what and how to display a tree wid
get.
...fer datatransfer); boolean candropbeforeafter(in long index, in boolean before); obsolete since gecko 1.8 boolean candropon(in long index); obsolete since gecko 1.8 void cyclecell(in long row, in nsitreecolumn col); void cycleheader(in nsitreecolumn col); void drop(in long row, in long orientation, in nsidomdatatransfer datatransfer); astring
getcellproperties(in long row, in nsitreecolumn col, in nsisupportsarray properties obsolete since gecko 22); astring
getcelltext(in long row, in nsitreecolumn col); astring
getcellvalue(in long row, in nsitreecolumn col); astring
getcolumnproperties(in nsitreecolumn col, in nsisupportsarray properties obsolete since gecko 22); astring
getimagesrc(in long row, in n...
...sitreecolumn col); long
getlevel(in long index); long
getparentindex(in long rowindex); long
getprogressmode(in long row, in nsitreecolumn col); astring
getrowproperties(in long index, in nsisupportsarray properties obsolete since gecko 22); boolean hasnextsibling(in long rowindex, in long afterindex); boolean iscontainer(in long index); boolean iscontainerempty(in long index); boolean iscontaineropen(in long index); boolean iseditable(in long row, in nsitreecolumn col); boolean isselectable(in long row, in nsitreecolumn col); boolean isseparator(in long index); boolean issorted(); void performaction(in wstring action); void performactiononcell(in wstring action, in l...
...And 28 more matches
nsIWindowMediator
inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) the two most common uses of nsiwindowmediator are, enumerating all windows of a given type and
getting the most recent / any window of a given type.
... implemented by: @mozilla.org/appshell/window-mediator;1 as a service: var windowmediator = components.classes["@mozilla.org/appshell/window-mediator;1"] .
getservice(components.interfaces.nsiwindowmediator); method overview void addlistener(in nsiwindowmediatorlistener alistener); boolean calculatezposition(in nsixulwindow inwindow, in unsigned long inposition, in nsiwid
get inbelow, out unsigned long outposition, out nsiwid
get outbelow); native code only!
... nsisimpleenumerator
getenumerator(in wstring awindowtype); nsidomwindow
getmostrecentwindow(in wstring awindowtype); nsidomwindow
getouterwindowwithid(in unsigned long long aouterwindowid); nsisimpleenumerator
getxulwindowenumerator(in wstring awindowtype); pruint32
getzlevel(in nsixulwindow awindow); native code only!
...And 28 more matches
Document - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" tar
get="_top"><rect x="266" y="1" width="80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a></svg>...
... properties this interface also inherits from the node and eventtar
get interfaces.
...And 28 more matches
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
reference materials to
get an idea of what kinds of functions embedded xpcom can handle, take a look at the api reference and the interface definitions from xpidl in the actual source code.
...those should be accessed with
getservice().
...it's important to know whether a component should be created with
getservice() or createinstance(), because using one instead of the other can cause problems.
...And 27 more matches
Menu - Archive of obsolete content
methods add(items) clear() contexton(node) hide() insertbefore(newitems, tar
get) item(tar
get) popupon(node) remove(tar
get) replace(tar
get, newitems) reset() set(items) show(anchornode) add(items) adds items to the menu.
...insertbefore(newitems, tar
get) inserts new items before an existing item.
... tar
get indicates the existing item.
...And 27 more matches
RDF in Mozilla FAQ - Archive of obsolete content
by loading chunks of it into a xul ui from a remote site), don't for
get to let mozilla-rdf and the rdf interest group lists know.
...a datasource is a subgraph (or collection of statements, depending on your viewpoint) that are for some reason collected to
gether.
... in mozilla, datasources can be composed to
gether using the composite data source.
...And 27 more matches
source-editor.jsm
acallback); void removeeventlistener(string aeventtype, function acallback); undo stack operations boolean canredo(); boolean canundo(); void endcompoundchange(); boolean redo(); void resetundo(); void startcompoundchange(); boolean undo(); display management operations void focus(); number
gettopindex(); boolean hasfocus(); void settopindex(number atopindex); content management operations number
getcharcount(); string
getindentationstring(); string
getlinedelimiter(); number
getlinecount(); number
getlineend(number alineindex, boolean aincludedelimiter); number
getlinestart(number alineindex); s...
...tring
getmode(); string
gettext([optional] number astart, [optional] number aend); string
getselectedtext(); void setmode(string amode); void settext(string atext, [optional] number astart, [optional] number aend); selection operations void dropselection(); number
getcaretoffset(); object
getcaretposition(); object
getselection(); void setcaretoffset(number aoffset); void setcaretposition(number aline, [optional] number acolumn, [optional] number aalign); void setselection(number astart, number aend); breakpoint management void addbreakpoint(number alineindex, [optional] string acondition); array
getbreakpoints(); boolean removebreakpoint(number aline...
...
getbreakpoints returns an array of all of the breakpoints currently set on the code in the editor instance.
...And 27 more matches
Index
when working with handles to private keys it's usually difficult (and undesired) that an application
gets access to the raw key data; therefore it may be difficult to extract such data from nss.
...in order to verify a digital signature, we have to look at the application data (e.g., a document that was signed), the signature data block (the digital signature), and a public key (as found in a certificate that is believed to be the signer, e.g., identified by metadata received to
gether with the signature).
...new certificate authorities enter the global pki market, and in order to
get started with their business, they might make deals with established cas and receive so-called cross-signing-certificates.
...And 27 more matches
NSS functions
function name/documentation source code nss versions nss_
getclientauthdata mxr 3.2 and later nss_setdomesticpolicy mxr 3.2 and later nss_setexportpolicy mxr 3.2 and later nss_setfrancepolicy mxr 3.2 and later nssssl_versioncheck mxr 3.2.1 and later ssl_authcertificate mxr 3.2 and later ssl_authcertificatehook mxr 3.2 and later ssl_badcerthook mxr ...
...3.2 and later ssl_certdbhandleset mxr 3.2 and later ssl_canbypass mxr 3.11.7 and later ssl_cipherpolicy
get mxr 3.2 and later ssl_cipherpolicyset mxr 3.2 and later ssl_cipherpref
get mxr 3.2 and later ssl_cipherpref
getdefault mxr 3.2 and later ssl_cipherprefset mxr 3.2 and later ssl_cipherprefsetdefault mxr 3.2 and later ssl_clearsessioncache mxr 3.2 and later ssl_configmpserversidcache mxr 3.2 and later ssl_configsecureserver mxr 3.2 and later ssl_configserversessionidcache mxr 3.2 and later ssl_datapending mxr 3.2 and later ssl_forcehandshake mxr 3.2 and later ssl_forcehandshak...
...ewithtimeout mxr 3.11.4 and later ssl_
getchannelinfo mxr 3.4 and later ssl_
getciphersuiteinfo mxr 3.4 and later ssl_
getclientauthdatahook mxr 3.2 and later ssl_
getmaxservercachelocks mxr 3.4 and later ssl_
getsessionid mxr 3.2 and later ssl_
getstatistics mxr 3.2 and later ssl_handshakecallback mxr 3.2 and later ssl_importfd mxr 3.2 and later ssl_inheritmpserversidcache mxr 3.2 and later ssl_invalidatesession mxr 3.2 and later ssl_localcertificate mxr 3.4 and later ssl_option
get mxr 3.2 and later ssl_option
getdefault mxr 3.2 and later ssl_optionset mxr 3.2 and later ssl_opt...
...And 27 more matches
IAccessibleTable
method overview [prop
get] hresult accessibleat([in] long row, [in] long column, [out] iunknown accessible ); [prop
get] hresult caption([out] iunknown accessible ); [prop
get] hresult childindex([in] long rowindex, [in] long columnindex, [out] long cellindex ); [prop
get] hresult columndescription([in] long column, [out] bstr description ); [prop
get] hresult columnextentat([in] long row, [in] long column, [out] long...
... ncolumnsspanned ); [prop
get] hresult columnheader([out] iaccessibletable accessibletable, [out] long startingrowindex ); [prop
get] hresult columnindex([in] long cellindex, [out] long columnindex ); [prop
get] hresult iscolumnselected([in] long column, [out] boolean isselected ); [prop
get] hresult isrowselected([in] long row, [out] boolean isselected ); [prop
get] hresult isselected([in] long row, [in] long column, [out] boolean isselected ); [prop
get] hresult modelchange([out] ia2tablemodelchange modelchange ); [prop
get] hresult ncolumns([out] long columncount ); [prop
get] hresult nrows([out] long rowcount ); [prop
get] hresult nselectedchildren([out] long cellcount ); [prop
get] hresult nselectedcolumns([out] long columncount ); [prop
get] hresult nselectedrows([out] long r...
...owcount ); [prop
get] hresult rowcolumnextentsatindex([in] long index, [out] long row, [out] long column, [out] long rowextents, [out] long columnextents, [out] boolean isselected ); [prop
get] hresult rowdescription([in] long row, [out] bstr description ); [prop
get] hresult rowextentat([in] long row, [in] long column, [out] long nrowsspanned ); [prop
get] hresult rowheader([out] iaccessibletable accessibletable, [out] long startingcolumnindex ); [prop
get] hresult rowindex([in] long cellindex, [out] long rowindex ); hresult selectcolumn([in] long column ); [prop
get] hresult selectedchildren([in] long maxchildren, [out, size_is(,maxchildren), length_is(, nchildren)] long children, [out] long nchildren ); [prop
get] hresult selectedcolumns([in] long maxcolumns, [out, size_is(,maxcol...
...And 27 more matches
nsIFaviconService
to use this service, use: var faviconservice = components.classes["@mozilla.org/browser/favicon-service;1"] .
getservice(components.interfaces.nsifaviconservice); method overview void addfailedfavicon(in nsiuri afaviconuri); void expireallfavicons(); void
getfavicondata(in nsiuri afaviconuri, out autf8string amimetype, [optional] out unsigned long adatalen, [array,retval,size_is(adatalen)] out octet adata); obsolete since gecko 22.0 astring
getfavicondataasdataurl(in nsi...
...uri afaviconuri); obsolete since gecko 22.0 nsiuri
getfaviconforpage(in nsiuri apageuri); obsolete since gecko 22.0 nsiuri
getfaviconimageforpage(in nsiuri apageuri); obsolete since gecko 22.0 nsiuri
getfaviconlinkforicon(in nsiuri afaviconuri); boolean isfailedfavicon(in nsiuri afaviconuri); void removefailedfavicon(in nsiuri afaviconuri); void setandloadfaviconforpage(in nsiuri apageuri, in nsiuri afaviconuri, in boolean aforcereload, in unsigned long afaviconloadtype, [optional] in nsifavicondatacallback acallback); obsolete since gecko 22.0 void setfavicondata(in nsiuri afaviconuri, [const,array,size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amimetype, in prtime aexpiration); obsolete since gecko...
...
getfavicondata() obsolete since gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) note: this method was removed in gecko 22.0.
...And 27 more matches
nsISessionStore
method overview void deletetabvalue(in nsidomnode atab, in astring akey); void deletewindowvalue(in nsidomwindow awindow, in astring akey); nsidomnode duplicatetab(in nsidomwindow awindow, in nsidomnode atab); nsidomnode for
getclosedtab(in nsidomwindow awindow, in unsigned long aindex); nsidomnode for
getclosedwindow(in unsigned long aindex); astring
getbrowserstate(); unsigned long
getclosedtabcount(in nsidomwindow awindow); astring
getclosedtabdata(in nsidomwindow awindow); unsigned long
getclosedwindowcount(); astring
getclosedwindowdata(); astring
get...
...tabstate(in nsidomnode atab); astring
gettabvalue(in nsidomnode atab, in astring akey); astring
getwindowstate(in nsidomwindow awindow); astring
getwindowvalue(in nsidomwindow awindow, in astring akey); void init(in nsidomwindow awindow); void persisttabattribute(in astring aname); void restorelastsession(); void setbrowserstate(in astring astate); void settabstate(in nsidomnode atab, in astring astate); void settabvalue(in nsidomnode atab, in astring akey, in astring astringvalue); void setwindowstate(in nsidomwindow awindow, in astring astate, in boolean aoverwrite); void setwindowvalue(in nsidomwindow awindow, in astring akey, in astring astringvalue); nsidomnode undoclosetab(in n...
... for
getclosedtab() nsidomnode for
getclosedtab( in nsidomwindow awindow, in unsigned long aindex ); parameters awindow is the browser window associated with the closed tab.
...And 27 more matches
Places utilities for JavaScript
as such, it
gets its own special section.
... placesutils method overview nsiuri createfixeduri(string aspec); string
getformattedstring(string key, string params); string
getstring(string key); boolean nodeisfolder(nsinavhistoryresultnode anode); boolean nodeisbookmark(nsinavhistoryresultnode anode); boolean nodeisseparator(nsinavhistoryresultnode anode); boolean nodeisvisit(nsinavhistoryresultnode anode); boolean nodeisuri(nsinavhistoryresultnode anode); boolean nodeisquery(nsinavhistoryresultnode anode); boolean nodeisreadonly(nsinavhistoryresultnode anode); boolean nodeishost(nsinavhistoryresultnode anode); boolean nodeiscontainer(nsinavhistoryresultnode anode); boolean nodeisdynamiccontainer(nsinavhistoryresultnod...
...e anode); boolean nodeislivemarkcontainer(nsinavhistoryresultnode anode); obsolete since gecko 21 boolean nodeislivemarkitem(nsinavhistoryresultnode anode); obsolete since gecko 21 boolean isreadonlyfolder(nsinavhistoryresultnode anode); int
getindexofnode(nsinavhistoryresultnode anode); string wrapnode(nsinavhistoryresultnode anode, string atype, nsiuri aoverrideuri); array unwrapnodes(string blob, string atype); nsitransaction maketransaction(string data, string type, nsinavhistoryresultnode container, int index, boolean copy); nsinavhistoryresult
getfoldercontents(int afolderid, boolean aexcludeitems, boolean aexpandqueries); boolean showaddbookmarkui(nsiuri auri, string atitle, string adescription, i...
...And 26 more matches
WebGL best practices - Web APIs
general topics address and eliminate webgl errors your application should run without generating any webgl errors (as returned by
geterror).
...
geterror,
getparameter) certain webgl entry points cause synchronous stalls on the calling thread.
...
geterror(): causes a flush + round-trip to fetch errors from the gpu process).
...And 26 more matches
Finding window handles - Archive of obsolete content
since mozilla tries to be as cross-platform as possible, it can be difficult to
get the handle you need.
... here is some simple code that can
get access to mozilla window handles.
...er window hwnd hff = ::findwindowex(0, 0, "mozillauiwindowclass", 0); if (hff) { // next we step down through a fixed structure hwnd htemp; htemp = ::findwindowex(hff, 0, "mozillawindowclass", 0); htemp = ::findwindowex(htemp, 0, "mozillawindowclass", 0); // assume only 1 window at this level has children // and the 1 with children is the one we want hwnd hchild = ::
getwindow(htemp, gw_child); while (htemp && !hchild) { htemp = ::
getwindow(htemp, gw_hwndnext); hchild = ::
getwindow(htemp, gw_child); } // did we find a window with children?
...And 25 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
this guide tar
gets firefox 17 esr or later (or anything else gecko 17+, such as seamonkey 2.14+).
...restartless add-ons can easily
get a uri for their install location on startup, so you should look into what you can do with that.
... how to
get and load the data of of your add-on's files using the add-on manager api: // this is the old way of
getting one of your files const myaddonid = ...; // just store a constant with your id components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.
getaddonbyid(myaddonid,function(addon) { var file = services.io.newuri("resource://myaddon/filename.ext",null,null) ...
...And 25 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popupopen, searchcount, searchparam, selectionend, selectionstart, showcommentcolumn, showimagecolumn,size, tabindex, tabscrolling, textlength, textvalue, timeout, type, value methods
getsearchat, onsearchcomplete, ontextentered, ontextreverted, select, setselectionrange examples <textbox type="autocomplete" autocompletesearch="history"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.tar
get.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> oninput type: script code this event is sent when a user enters text in a textbox.
...for those elements, setattribute("value", myvalue) and
getattribute("value") do not access or affect the contents displayed to the user.
...And 25 more matches
nsIAccessibleRetrieval
accessible/public/nsiaccessibleretrieval.idlscriptable an interface for in-process accessibility clients wishing to
get an nsiaccessible or nsiaccessnode for a given dom node.
... inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsiaccessible
getaccessiblefor(in nsidomnode anode); nsiaccessible
getaccessibleinshell(in nsidomnode anode, in nsipresshell apresshell); nsiaccessible
getaccessibleinweakshell(in nsidomnode anode, in nsiweakreference apresshell); obsolete since gecko 2.0 nsiaccessible
getaccessibleinwindow(in nsidomnode anode, in nsidomwindow adomwin); obsolete since gecko 2.0 nsiaccessible
getapplicationaccessible(); nsiaccessible
getattachedaccessiblefor(in nsidomnode anode); nsiaccessible
getcachedaccessible(in nsidomnode anode, in nsiweakreference ashell); obsolete since gecko 2.0 nsiaccessnode
getcachedaccessnode...
...(in nsidomnode anode, in nsiweakreference ashell); obsolete since gecko 2.0 nsidomnode
getrelevantcontentnodefor(in nsidomnode anode); astring
getstringeventtype(in unsigned long aeventtype); astring
getstringrelationtype(in unsigned long arelationtype); astring
getstringrole(in unsigned long arole); nsidomdomstringlist
getstringstates(in unsigned long astates, in unsigned long aextrastates); methods
getaccessiblefor() return an nsiaccessible for a dom node in pres shell 0.
...And 25 more matches
HTTP Index - HTTP
8 identifying resources on the web domain, http, path, scheme, syntax, uri, url, url syntax, web, fragment, port, query, resources the tar
get of an http request is called a "resource", whose nature isn't defined further; it can be a document, a photo, or anything else.
...there are ways to develop your website to progressively enhance itself based on the availability of features rather than by tar
geting specific browsers.
... 83 csp: form-action csp, content-security-policy, directive, http, security, action, form, form-action the http content-security-policy (csp) form-action directive restricts the urls which can be used as the tar
get of a form submissions from a given context.
...And 25 more matches
Command line crash course - Learn web development
this article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands to
gether, and how to add your own command line interface (cli) tools.
... on the surface they’re far from welcoming but there’s a lot you can do with them, and we promise that, with a bit of guidance and practise, using them will
get easier!
... this is why we are providing this chapter — to help you
get started in this seemingly unfriendly environment.
...And 24 more matches
JIT Optimization Strategies
optimization information is currently collected for the following operations:
getproperty (obj.prop) setproperty (obj.prop = val)
getelement (obj[elemname]) setelement (obj[elemname] = val) call (func(...)) at each operation site, ionmonkey tries a battery of strategies, from the most optimized but most restrictive to the least optimized but least restrictive.
...
getproperty
getproperty_argumentslength attempts to optimize an arguments.length property access.
...
getprop_argumentscallee attempts to optimize an arguments.callee property access.
...And 24 more matches
Mozilla internal string guide
this allows for a method (.
get()) to access the underlying character buffer.
...for example: // when passing a string to a method, use const nsastring& nsfoo::printstring(const nsastring &str); // when
getting a string from a method, use nsastring& nsfoo::
getstring(nsastring &result); the abstract classes are also sometimes used to store temporary references to objects.
... an example: const nsastring& str =
getsomestring(); nsastring::const_iterator start, end; str.beginreading(start); str.endreading(end); constexpr auto valueprefix = u"value="_ns; if (findinreadable(valueprefix, start, end)) { // end now points to the character after the pattern valuestart = end; } checking for memory allocation failure the string classes now use infallible memory allocation, so you do not need to check ...
...And 24 more matches
MMgc - Archive of obsolete content
in mmgc, you
get managed memory by subclassing gcobject/gcfinalizedobject/rcobject, or by calling gc::alloc.
... gc* gc = gc::
getgc(this); gcobject* gcobject; gc class the class mmgc::gc is the main class of the gc.
...gc::
getgc given the pointer to any gcobject, it is possible to
get a pointer to the gc object that allocated it.
...And 23 more matches
Python binding for NSS
nss/nspr objects which have "
get" and "set" api function calls are exposed as python properties.
...thus each thread
gets it own set of callbacks.
... you may want to review the
getting mozilla source code using mercurial documentation for more information with working with mercurial.
...And 23 more matches
CSSPrimitiveValue.primitiveType - Web APIs
the value can be obtained by using the
getstringvalue() method.
...the value can be obtained by using the
getfloatvalue() method.
...the value can be obtained by using the
getcountervalue() method.
...And 23 more matches
Using XMLHttpRequest - Web APIs
function reqlistener () { console.log(this.responsetext); } var oreq = new xmlhttprequest(); oreq.addeventlistener("load", reqlistener); oreq.open("
get", "http://www.example.org/example.txt"); oreq.send(); types of requests a request made via xmlhttprequest can fetch the data in one of two ways, asynchronously or synchronously.
... analyzing and manipulating the responsexml property if you use xmlhttprequest to
get the content of a remote xml document, the responsexml property will be a dom object containing a parsed xml document.
... processing a responsetext property containing an html document if you use xmlhttprequest to
get the content of a remote html webpage, the responsetext property is a string containing the raw html.
...And 23 more matches
Accessibility documentation index - Accessibility
it supplements html so that interactions and wid
gets commonly used in applications can be passed to assistive technologies 3 aria screen reader implementors guide aria, accessibility this is just a guide.
...a few guidelines to follow that ensure better accessibility, like using drag and drop for placement of the wid
gets.
...this means that most of the instructions provided in the 'using the dialog role' technique are applicable to the alertdialog role as well: 17 using the aria-activedescendant attribute attribute, document object model, needscontent, property, wid
get, aria-activedescendant this article describes the aria-activedescendant property.
...And 23 more matches
Introduction to XUL - Archive of obsolete content
mozilla applications will be built of "small" components like dialog buttons and mail inbox folders, which we collectively term "wid
gets." within a wid
get, drawing and user interactions are completely under control of the individual wid
get, and set when the wid
get was built.
... relative placement of wid
gets, their interactions with each other, and optionally some of their configuration, will be controlled by a ui layout specified in a script whose structure is defined in this and related documents.
... wid
gets are pieces of the application largely self-contained, generally corresponding to a rectangle of window real estate.
...And 22 more matches
XForms Custom Controls - Archive of obsolete content
the purpose of this article is to give you enough background information so that you'll be able to
get a good start.
...for example, in the mozilla xforms extension we will render a combobox wid
get when appearance='minimal' on a select1 control.
... should the form author instead choose to use appearance='compact' on this control, we would render a listbox wid
get.
...And 22 more matches
nsIAccessible
can also be used by in-process accessibility clients to
get information about objects in the accessible tree.
... nsiaccessible.role to
get the role of the accessible nsiaccessible.
getstate() to
get states of the accessibe nsiaccessible.name, nsiaccessible.value to
get the name and the value of the accessible tree navigation you can navigate through the accessible tree by the following methods and attributes.
... nsiaccessible.parent to
get the parent accessible nsiaccessible.nextsibling, nsiaccessible.previoussibling to
get sibling accessibles nsiaccessible.firstchild, nsiaccessible.lastchild to
get first and last child nsiaccessible.children, nsiaccessible.
getchildat(), nsiaccessible.childcount to navigate through the children by index accessible position you can use nsiaccessible.indexinparent to
get accessible index in its parent.
...And 22 more matches
nsIAccessibleRelation
method overview nsiaccessible
gettar
get(in unsigned long index); nsiarray
gettar
gets(); attributes attribute type description relationtype unsigned long returns the type of the relation.
... tar
getscount unsigned long returns the number of tar
gets for this relation.
... constants constant value description relation_nul 0x00 relation_controlled_by 0x01 some attribute of this object is affected by a tar
get object.
...And 22 more matches
nsIXPConnect
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to access the xpconnect service, use code like this: nsresult rv; nscomptr<nsixpconnect> xpconnect = do_
getservice(nsixpconnect::
getcid(), &rv); if (ns_succeeded(rv)) { /* use the object */ } method overview void addjsholder(in voidptr aholder, in nsscriptobjecttracerptr atracer); native code only!
... void flagsystemfilenameprefix(in string afilenameprefix, in prbool awantnativewrappers); void garbagecollect(); [noscript,notxpcom] void
getcaller(out jscontextptr ajscontext, out jsobjectptr aobject); jsval
getcowforobject(in jscontextptr ajscontext, in jsobjectptr aparent, in jsobjectptr awrappedobj); native code only!
... obsolete since gecko 2.0 void
getdefaultsecuritymanager(out nsixpcsecuritymanager amanager, out pruint16 flags); nsixpcfunctionthistranslator
getfunctionthistranslator(in nsiidref aiid); jsobjectptr
getjsobjectofwrapper(in jscontextptr ajscontext, in jsobjectptr ajsobj); [noscript, notxpcom] nsisupports
getnativeofwrapper(in jscontextptr ajscontext, in jsobjectptr ajsobj); void
getsecuritymanagerforjscontext(in jscontextptr ajscontext, out nsixpcsecuritymanager amanager, out pruint16 flags); nsixpconnectwrappednative
getwrappednativeofjsobject(in jscontextptr ajscontext, in jsobjectptr ajsobj); nsixpconnectwrappednative
getwrappednativeofnativeobject(in jscontextptr ajscontext, in jsobjectptr ascope, in nsisupports acomobj, in...
...And 22 more matches
Using the CSS Typed Object Model - Web APIs
//
get the element const myelement = document.queryselector('a'); //
get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const defaultcomputedstyles = myelement.computedstylemap(); // iterate thru the map of all the properties and values, adding a <dt> and <dd> for each for (const [prop, val] of defaultc...
... .
get() method / custom properties let's update our example to only retrieve a few properties and values.
... let's start by adding some css to our example, including a custom property and an inhertable property: p { font-weight: bold; } a { --color: red; color: var(--color); } instead of
getting all the properties, we create an array of properties of interest and use the stylepropertymapreadonly.
get() method to
get each of their values: <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> //
get the element const myelement = document.queryselector('a'); //
get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const allcomputedstyles = myelement.computedstylemap(); // array of properties we're interested in const ofinterest = ['font-weight', 'border-left-color',...
...And 22 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
this will help to solidify your understanding of how the geometry of 3d graphics and vr work, as well as to help ensure you understand the way the functions and data that are used during xr rendering work to
gether.
... function logglerror(where) { let err = gl.
geterror(); if (err) { console.error(`webgl error returned by ${where}: ${err}`); } } this takes as its only input a string, where, which is used to indicate what part of the program generated the error, since similar errors can have in multiple situations.
...or("#projection-matrix div"); modelmatrixout = document.queryselector("#model-view-matrix div"); cameramatrixout = document.queryselector("#camera-matrix div"); mousematrixout = document.queryselector("#mouse-matrix div"); if (!navigator.xr || enableforcepolyfill) { console.log("using the polyfill"); polyfill = new webxrpolyfill(); } setupxrbutton(); } the load event handler
gets a reference to the button that toggles webxr on and off into xrbutton, then adds a handler for click events.
...And 22 more matches
Box-shadow generator - CSS: Cascading Style Sheets
s-user-select: text; } #output .css-property { width: 100%; float: left; white-space: pre; } #output .name { width: 35%; float: left; } #output .value { width: 65%; float: left; } javascript content 'use strict'; /** * ui-slidersmanager */ var slidermanager = (function slidermanager() { var subscribers = {}; var sliders = []; var slider = function(node) { var min = node.
getattribute('data-min') | 0; var max = node.
getattribute('data-max') | 0; var step = node.
getattribute('data-step') | 0; var value = node.
getattribute('data-value') | 0; var snap = node.
getattribute('data-snap'); var topic = node.
getattribute('data-topic'); this.min = min; this.max = max > 0 ?
...true : false; this.topic = topic; this.node = node; var pointer = document.createelement('div'); pointer.classname = 'ui-slider-pointer'; node.appendchild(pointer); this.pointer = pointer; setmousetracking(node, updateslider.bind(this)); sliders[topic] = this; setvalue(topic, this.value); } var setbuttoncomponent = function setbuttoncomponent(node) { var type = node.
getattribute('data-type'); var topic = node.
getattribute('data-topic'); if (type === "sub") { node.textcontent = '-'; node.addeventlistener("click", function() { decrement(topic); }); } if (type === "add") { node.textcontent = '+'; node.addeventlistener("click", function() { increment(topic); }); } } var setinputcomponent = function setinputcomponent(node) { v...
...ar topic = node.
getattribute('data-topic'); var unit_type = node.
getattribute('data-unit'); var input = document.createelement('input'); var unit = document.createelement('span'); unit.textcontent = unit_type; input.setattribute('type', 'text'); node.appendchild(input); node.appendchild(unit); input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { setvalue(topic, e.tar
get.value | 0); }); subscribe(topic, function(value) { node.children[0].value = value; }); } var increment = function increment(topic) { var slider = sliders[topic]; if (slider === null || slider === undefined) return; if (slider.value + slider.step <= slider.max) { slider.value += slider.step; setvalue(slider.top...
...And 22 more matches
The Implementation of the Application Object Model - Archive of obsolete content
xul has language constructs for all of the typical dialog controls, as well as for wid
gets like toolbars, trees, progress bars, and menus.
...now since the aol bookmark was specified by the remote file, the user has no way of going off to the site and changing that file just to
get rid of the button (even though the user might wish that he or she could!).
... for
get xul!
...And 21 more matches
Grids - Learn web development
this article will give you all you need to know to
get started with page layout.
...the fr unit distributes space in proportion, therefore you can give different positive values to your tracks, for example if you change the definition like so: .container { display: grid; grid-template-columns: 2fr 1fr 1fr; } the first track now
gets 2fr of the available space and the other two tracks
get 1fr, making the first track larger.
...change your track listing to the following: .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; } you will now
get 3 1fr tracks just as before.
...And 21 more matches
TypeScript support in Svelte - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to
get to the current app state, run cd mdn-svelte-tutorial/07-typescript-support or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/07-typescript-support remember to run npm install && npm run dev to start your app in development mode.
...thanks to the hard work of the svelte team, to
gether with many contributors, we have an official solution ready to be put to the test.
... note: remember that you can run npx degit opensas/mdn-svelte-tutorial/07-typescript-support svelte-todo-typescript to
get the complete to-do list application in javascript before you start porting it to typescript.
...And 21 more matches
Redis Tips
but obviously, calling ice cream a nowhale food doesn't give you any sense of how good the ice cream is, or what sets it apart from other kinds of food that aren't made from whale meat but that are also very unlike ice cream -- it just gives the whaling industry a way to lump to
gether people who don't use their products.
... redis data types include: strings hashes lists sets ordered sets (called zsets in redis) transactions publishers and subscribers this table lists some common programming tasks and data structures, and suggests some redis functions or data structures for them: dictionary lookup set,
get, setnx, etc.
...
getting started with redis before you go any further in this document, make sure you have played with redis for at least 5 or 10 minutes.
...And 21 more matches
Component; nsIPrefBranch
this object may be obtained from the preferences service (nsiprefservice) and used to
get and set default and/or user preferences across the application.
...for example, if this object is created with the root "browser.startup.", the preferences "browser.startup.page", "browser.startup.homepage", and "browser.startup.homepage_override" can be accessed by simply passing "page", "homepage", or "homepage_override" to the various
get/set methods.
... method overview void addobserver(in string adomain, in nsiobserver aobserver, in boolean aholdweak); void clearuserpref(in string aprefname); void deletebranch(in string astartingat); boolean
getboolpref(in string aprefname, requires gecko 54 [optional] in boolean adefaultvalue); string
getcharpref(in string aprefname,requires gecko 54 [optional] in string adefaultvalue); requires gecko 58 utf8tring
getstringpref(in string aprefname, [optional] in utf8string adefaultvalue); void
getchildlist(in string astartingat, [optional] out unsigned long acount, [array, size_is(acount), retval] out string achildarray); void
getcomplexvalue(in string aprefname, in nsiidref atype, [iid_is(atype), retval] out nsqiresult avalue); ...
...And 21 more matches
Border-image generator - CSS: Cascading Style Sheets
nager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.style.width = 50 + obj.precision * 10 + 'px'; input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parsefloat(e.tar
get.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); return input; }; var slidercomponent = function slidercomponent(obj, sign) { var slider = document.createelement('div'); var startx = null; var start_value = 0; slider.addeventlistener("click", function(e) { document.removeeventlistener("mousemove", slidermoti...
...on); document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }; var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resize"; var delta = (e.clientx - startx) / obj.sensivity | 0; var value = delta * obj.step + start_value; setvalue(obj.topic, value); }; return slider; }; var inputslider = function(node) { var min = parsefloat(node.
getattribute('data-min')); var max = parsefloat(node.
getattribute('data-max')); var step = parsefloat(node.
getattribute('data-step')); var value = parsefloat(node.
getattribute('data-value')); var topic = node.
getattribute('data-topic'); var unit = node.
getattribute('data-unit'); var name = node.
getattribute('data-info'); var sensivity = node.
getattribute('data-sensivity') | 0; var p...
...recision = node.
getattribute('data-precision') | 0; this.min = isnan(min) ?
...And 21 more matches
Date - JavaScript
in addition to methods to read and alter individual components of the local date and time (such as
getday() and sethours()), there are also versions of the same methods that read and manipulate the date and time using utc (such as
getutcday() and setutchours()).
... instance methods date.prototype.
getdate() returns the day of the month (1–31) for the specified date according to local time.
... date.prototype.
getday() returns the day of the week (0–6) for the specified date according to local time.
...And 21 more matches
Installer Script - Archive of obsolete content
//
get the available disk space on the given path 6.
... spaceavailable = file
getdiskspaceavailable(dirpath); 7.
...var communicatorfolder =
getfolder("program"); 23.
...And 20 more matches
Legacy layout methods - Learn web development
ut id ornare felis, e
get fermentum sapien.</p> </div> <div> <h2>second column</h2> <p>nam vulputate diam nec tempor bibendum.
... donec luctus augue e
get malesuada ultrices.
...nam id risus quis ante semper consectetur e
get aliquam lorem.
...And 20 more matches
Aprender y obtener ayuda - Learn web development
there are also are times when you'll
get stuck and feel frustrated — even professional web developers feel like this regularly — and it pays to know about the most effective ways to try and
get help so you can progress in your work.
... this article provides some hints and tips in both of these areas that will help you
get more out of learning web development, as well as further reading so you can find out more information about each sub-topic should you wish..
... focused thinking is great for concentrating hard on specific subjects,
getting into deep problem solving, and improving your mastery of the techniques required — strengthening the neural pathways in your brain where that information is stored.
...And 20 more matches
XPCOMUtils.jsm
define the ns
getfactory() or ns
getmodule() entry point.
... pseudocode this section provides some pseudocode that demonstrates how to put to
gether a javascript class based on the steps listed above.
... create the ns
getfactory() or ns
getmodule() entry point finally, you need to implement the ns
getmodule() entry point so gecko can start up your component: // "components" is the array created in the previous section if ("generatens
getfactory" in xpcomutils) var ns
getfactory = xpcomutils.generatens
getfactory(components); // gecko 2.0+ else var ns
getmodule = xpcomutils.generatens
getmodule(components); // g...
...And 20 more matches
Using XPCOM Utilities to Make Things Easier
much of the code created to
get the software recognized and registered as a component can be reduced to a small data structure and a single macro.
...to
get an idea about how much can be handled with the macros described in this section, compare the code listing in weblock2.cpp at the end of the chapter with weblock1.cpp in the previous chapter.
... the module macros include one set of macros that define the exported ns
getmodule entry point, the required nsimodule implementation code and another that creates a generic factory for your implementation class.
...And 20 more matches
Element - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a></svg>...
...</div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent interface, node, and by extension that interface's parent, eventtar
get.
...And 20 more matches
textbox - Archive of obsolete content
to
get the actual number of rows in the element, use the
getrowcount method.
...to
get the updated value, use the value property.
... decimalplaces type: integer
gets and sets the value of the decimalplaces attribute.
...And 19 more matches
Multiple-column layout - Learn web development
the column-count property will create as many columns as the value you give it, so if you add the following css to your stylesheet and reload the page, you will
get three columns: .container { column-count: 3; } the columns that you create have flexible widths — the browser works out how much space to assign each column.
...ut id ornare felis, e
get fermentum sapien.</p> <p>nam vulputate diam nec tempor bibendum.
... donec luctus augue e
get malesuada ultrices.
...And 19 more matches
Graceful asynchronous programming with Promises - Learn web development
that button's handler calls
getusermedia() in order to
get access to the user's camera and microphone.
... since
getusermedia() has to ensure that the user has permission to use those devices and ask the user which microphone to use and which camera to use (or whether to be a voice-only call, among other possible options), it can block until not only all of those decisions are made, but also the camera and microphone have been engaged.
... since the call to
getusermedia() is made from the browser's main thread, the entire browser is blocked until
getusermedia() returns!
...And 19 more matches
Handling common accessibility problems - Learn web development
note: like many things in web development, accessibility isn't about 100% success or not; 100% accessibility is pretty much impossible to achieve for all content, especially as sites
get more complex.
...if your content has no headings, all they will
get is a huge wall of text with no signposts to find anything.
...i think it is more interesting than the last one.</p> in addition, your content should make logical sense in its source order — you can always place it where you want using css later on, but you should
get the source order right to start with.
...And 19 more matches
Introduction to automated testing - Learn web development
previous overview: cross browser testing next manually running tests on several browsers and devices, several times per day, can
get tedious, and time-consuming.
...we can chain as many of these to
gether as we want.
...note that this only works if csslint doesn't find any errors — try removing a curly brace from your css file and re-running gulp to see what output you
get!
...And 19 more matches
Using the Screen Capture API - Web APIs
in this article, we will examine how to use the screen capture api and its
getdisplaymedia() method to capture part or all of a screen for streaming, recording, or sharing during a webrtc conference session.
... note: it may be useful to note that recent versions of the webrtc adapter.js shim include implementations of
getdisplaymedia() to enable screen sharing on browsers that support it but do not implement the current standard api.
... capturing screen contents capturing screen contents as a live mediastream is initiated by calling navigator.mediadevices.
getdisplaymedia(), which returns a promise that resolves to a stream containing the live screen contents.
...And 19 more matches
WebGL model view projection - Web APIs
these matrices can be composed to
gether and grouped in special ways to make them useful for rendering complicated 3d scenes.
...the z depth in the squares determines what
gets drawn on top when the squares share the same space.
... webglbox constructor the constructor looks like this: function webglbox() { // setup the canvas and webgl context this.canvas = document.
getelementbyid('canvas'); this.canvas.width = window.innerwidth; this.canvas.height = window.innerheight; this.gl = mdn.createcontext(canvas); var gl = this.gl; // setup a webgl program, anything part of the mdn object is defined outside of this article this.webglprogram = mdn.createwebglprogramfromids(gl, 'vertex-shader', 'fragment-shader'); gl.useprogram(this.webglprogram); // sa...
...And 19 more matches
Window - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/window" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">window</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructors see also the dom interfaces.
... properties this interface inherits properties from the eventtar
get interface and implements properties from the windoworworkerglobalscope and windoweventhandlers mixins.
... window.customelements read only returns a reference to the customelementregistry object, which can be used to register new custom elements and
get information about previously registered custom elements.
...And 19 more matches
Understanding WebAssembly text format - WebAssembly
getting and setting locals and parameters locals/parameters can be read and written by the body of the function with the local.
get and local.set instructions.
... the local.
get/local.set commands refer to the item to be got/set by its numeric index: parameters are referred to first, in order of their declaration, followed by locals in order of their declaration.
... so given the following function: (func (param i32) (param f32) (local f64) local.
get 0 local.
get 1 local.
get 2) the instruction local.
get 0 would
get the i32 parameter, local.
get 1 would
get the f32 parameter, and local.
get 2 would
get the f64 local.
...And 19 more matches
Document Object Model - Archive of obsolete content
« previousnext » the document object model (dom) can be used with xul elements to
get information about them or modify them.
... function
gettext(){ return "message"; } alert(
gettext()); alert(window.
gettext()); thus, if you want to access variables or call a function declared in a script used by another window, you just need to access it using the other window's window object.
... for example, if we combined the last two examples into a single file, we might want to call the
gettext() function from within the other window (for example, the test.xul window).
...And 18 more matches
Tree Box Objects - Archive of obsolete content
the tree will call the view to
get the updated data and update the contents of the tree on screen.
... example 1 : source view <script> function doscroll(){ var value = document.
getelementbyid("tbox").value; var tree = document.
getelementbyid("thetree"); var boxobject = tree.boxobject; boxobject.queryinterface(components.interfaces.nsitreeboxobject); boxobject.scrolltorow(value); } </script> <tree id="thetree" rows="4"> <treecols> <treecol id="row" label="row" primary="true" flex="1"/> </treecols> <treechildren> <treeitem label="row 0"/> <treeitem...
... the doscroll() function
gets the box object and calls the scrolltorow() function with an argument set to the value of the textbox.
...And 18 more matches
XPCOM Interfaces - Archive of obsolete content
the only way to handle this would be to write native code that would
get mail.
...
get a component
get the part of the component that implements the interface that we want to use.
...the first step is
getting a file component.
...And 18 more matches
Old Proxy API - Archive of obsolete content
fundamental traps emulated javascript code handler method description object.
getownpropertydescriptor(proxy, name)
getownpropertydescriptor: function(name) -> propertydescriptor | undefined should return a valid property descriptor object, or undefined to indicate that no property with name exists in the emulated object.
... object.
getpropertydescriptor(proxy, name)
getpropertydescriptor: function(name) -> propertydescriptor | undefined this function doesn't exist in ecmascript 5.
... like
getownpropertydescriptor, but should also search the prototype chain.
...And 18 more matches
Sending form data - Learn web development
this article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it
gets there?
... objective: to understand what happens when form data is submitted, including
getting a basic idea of how data is processed on the server first we'll discuss what happens to the data when a form is submitted.
... note: to
get a better idea of how client-server architectures work, read our server-side website programming first steps module.
...And 18 more matches
Standard OS Libraries
example:
getcursorpos i wanted to
get the mouse cursor position without using a mousemove listener, as this is a high overhead event listener.
... so i went to the msdn winapi index page and then went to the "cursors" category and came across
getcursorpos.
...(msdn -
getcursorpos) this example was created on windows xp sp2.
...And 18 more matches
Applying styles and colors - Web APIs
function draw() { var ctx = document.
getelementbyid('canvas').
getcontext('2d'); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { ctx.fillstyle = 'rgb(' + math.floor(255 - 42.5 * i) + ', ' + math.floor(255 - 42.5 * j) + ', 0)'; ctx.fillrect(j * 25, i * 25, 25, 25); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); the result looks like this: screenshotlive...
... function draw() { var ctx = document.
getelementbyid('canvas').
getcontext('2d'); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { ctx.strokestyle = 'rgb(0, ' + math.floor(255 - 42.5 * i) + ', ' + math.floor(255 - 42.5 * j) + ')'; ctx.beginpath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, math.pi * 2, true); ctx.stroke(); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); the result looks like this: screenshotlive sample transparency in addition to drawing opa...
... function draw() { var ctx = document.
getelementbyid('canvas').
getcontext('2d'); // draw background ctx.fillstyle = '#fd0'; ctx.fillrect(0, 0, 75, 75); ctx.fillstyle = '#6c0'; ctx.fillrect(75, 0, 75, 75); ctx.fillstyle = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw semi transparent cir...
...And 18 more matches
Window.open() - Web APIs
if the empty string ("") is specified as url, a blank page is opened into the tar
geted browsing context.
... this name can be used as the tar
get for the tar
get attribute of <a> or <form> elements.
...providing an empty string for url is a way to
get a reference to an open window by its name without changing the window's location.
...And 18 more matches
Miscellaneous - Archive of obsolete content
var osstring = services.appinfo.os; detecting the host application and version //
get the name of the application running us services.appinfo.name; // returns "firefox" for firefox services.appinfo.version; // returns "2.0.0.1" for firefox version 2.0.0.1 retrieving the version of an extension as specified in the extension's install.rdf components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.
getaddonbyid("extension-guid@example.org", function(addon) { // this is an asynchronous callback function that might not be called immediately alert("my exten...
...</div> <script type="text/javascript"> var elm = document.
getelementbyid("scrollarea"); elm.addeventlistener("dommousescroll", function scroll(event){ //event.detail is positive for a downward scroll, negative for an upward scroll alert("scrolling " + event.detail + " lines"); }, false); </script> if you do not receive a dommousescroll event while holding any of the modifier keys (ctrl,shift,alt,meta) you should check the mousewheel.withcontro...
... simulating mouse and key events https://developer.mozilla.org/samples/domref/dispatchevent.html also, new in firefox 3 / gecko 1.9: var utils = window.queryinterface(components.interfaces.nsiinterfacerequestor) .
getinterface(components.interfaces.nsidomwindowutils); utils.sendmouseevent("mousedown", 10, 10, 0, 1, 0); utils.sendmouseevent("mouseup", 10, 10, 0, 1, 0);
getting the currently selected text from browser.xul overlay context: var selectedtext = document.commanddispatcher.focusedwindow.
getselection().tostring(); or: content.
getselection(); // |window| object is implied; i.e., window.content.ge...
...And 17 more matches
XPCOM Objects - Archive of obsolete content
this.obsservice = cc["@mozilla.org/observer-service;1"].
getservice(ci.nsiobserverservice); the cc object (components.classes) is an index to static objects and class definitions available through xpcom.
...the method you call on cc["some-string"] should either be
getservice or createinstance, depending on what you're asking for.
...clicking on the link for the
getbranch method takes you to the nsiprefservice documentation page, where you can see more details on the interface and the method.
...And 17 more matches
Notes on HTML Reflow - Archive of obsolete content
an incremental reflow is tar
geted at a single frame in the frame hierarchy.
... dirty, when a container frame has consolidated several individual incremental reflows that have been tar
geted at its child frames.
...instead, a dirty reflow is detected when an incremental reflow reaches its tar
get frame , described below.
...And 17 more matches
Adding Methods to XBL-defined Elements - Archive of obsolete content
for example, the following javascript function would be written as an xbl method like so: function
getmaximum(num1,num2) { if (num1 <= num2) return num2; else return num1; } xbl: <method name="
getmaximum"> <parameter name="num1"/> <parameter name="num2"/> <body> if (num1 <= num2) return num2; else return num1; </body> </method> this function,
getmaximum, returns the largest of the values, each passed as a parameter to the method.
...you can call the method by using code such as element.
getmaximum(5, 10) where element is a reference to an element defined by the xbl containing the
getmaximum method.
...for example, the following code will probably fail: var element = document.createelement("my_element"); element.
getmaximum() // this will fail by the way, it is safe to call methods from the constructor, other methods on the object and event handlers.
...And 17 more matches
XBL Example - Archive of obsolete content
this will be a wid
get that stores a deck of objects, each displayed one at a time.
... navigation buttons along the bottom will allow the user to cycle through the objects while a text wid
get between the buttons will display the current page.
... you could put anything within the pages, however, this wid
get might be useful for a set of images.
...And 17 more matches
Table Reflow Internals - Archive of obsolete content
the container posts a dirty reflow command with itself as the tar
get.
...the container posts a dirty reflow command with itself as the tar
get.
...resize - reflowee
gets a change in available space only.
...And 17 more matches
Introduction to CSS layout - Learn web development
ut id ornare felis, e
get fermentum sapien.</p> .box { float: left; width: 150px; height: 150px; margin-right: 30px; } note: floats are fully explained in our lesson on the float and clear properties.
... there are five types of positioning you should know about: static positioning is the default that every element
gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here".
...the other two paragraphs now sit to
gether as if their positioned sibling doesn't exist.
...And 17 more matches
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
*/ /* nspr headers */ #include <prthread.h> #include <pl
getopt.h> #include <prerror.h> #include <prinit.h> #include <prlog.h> #include <prtypes.h> #include <plstr.h> /* nss headers */ #include <keyhi.h> #include <pk11priv.h> /* our samples utilities */ #include "util.h" /* constants */ #define blocksize 32 #define modblocksize 128 #define default_key_bits 1024 /* header file constants */ #define enckey_header ...
... this may take a few moments...\n\n"); privkey = pk11_generatekeypair(slot, mechanism, params, pubkeyp, pr_true /*isperm*/, pr_true /*issensitive*/, pwdata); cleanup: return privkey; } /* *
get the certificate request from csr */ static certcertificaterequest *
getcertrequest(char *infilename, prbool ascii) { certsigneddata signeddata; secitem reqder; certcertificaterequest *certreq = null; secstatus rv = secsuccess; prarenapool *arena = null; reqder.data = null; arena = port_newarena(der_default_chunksize); if...
... = readderfromfile(&reqder, infilename, ascii); if (rv) { rv = secfailure; goto cleanup; } certreq = (certcertificaterequest*) port_arenazalloc (arena, sizeof(certcertificaterequest)); if (!certreq) { rv = secfailure; goto cleanup; } certreq->arena = arena; /* since cert request is a signed data, must decode to
get the inner data */ port_memset(&signeddata, 0, sizeof(signeddata)); rv = sec_asn1decodeitem(arena, &signeddata, sec_asn1_
get(cert_signeddatatemplate), &reqder); if (rv) { rv = secfailure; goto cleanup; } rv = sec_asn1decodeitem(arena, certreq, sec_asn1_
get(cert_certificaterequesttemplate), &signedd...
...And 17 more matches
sample2
*/ /* nspr headers */ #include <prthread.h> #include <pl
getopt.h> #include <prerror.h> #include <prinit.h> #include <prlog.h> #include <prtypes.h> #include <plstr.h> /* nss headers */ #include <cryptohi.h> #include <keyhi.h> #include <pk11priv.h> #include <cert.h> #include <base64.h> #include <secerr.h> #include <secport.h> #include <secoid.h> #include <secmodt.h> #include <secoidt.h> #include <sechash.h> /* our samples utilities */ #include "util.h" /* constants */ #define blocksize 32 #define modblocksize 128 #define default_key_bits 1024 /* header file constants */ #define enckey...
...this may take a few moments...\n\n"); privkey = pk11_generatekeypair(slot, mechanism, params, pubkeyp, pr_true /*isperm*/, pr_true /*issensitive*/, pwdata); cleanup: return privkey; } /* *
get the certificate request from csr */ static certcertificaterequest *
getcertrequest(char *infilename, prbool ascii) { certsigneddata signeddata; secitem reqder; certcertificaterequest *certreq = null; secstatus rv = secsuccess; prarenapool *arena = null; reqder.data = null; arena = port_newarena(der_default_chunksize); if (arena == null) { rv = secfailure; goto cleanup; } rv = readderfromfile(&req...
...der, infilename, ascii); if (rv) { rv = secfailure; goto cleanup; } certreq = (certcertificaterequest*) port_arenazalloc (arena, sizeof(certcertificaterequest)); if (!certreq) { rv = secfailure; goto cleanup; } certreq->arena = arena; /* since cert request is a signed data, must decode to
get the inner data */ port_memset(&signeddata, 0, sizeof(signeddata)); rv = sec_asn1decodeitem(arena, &signeddata, sec_asn1_
get(cert_signeddatatemplate), &reqder); if (rv) { rv = secfailure; goto cleanup; } rv = sec_asn1decodeitem(arena, certreq, sec_asn1_
get(cert_certificaterequesttemplate), &signeddata.data); if (rv) { rv = secfailure; goto cleanup; } rv = cert_verifysigneddatawithpublickeyinfo(&signeddata, &certreq->subjectpublickeyinfo, null /* wincx */); if (reqder.data) { secitem_freeitem(&reqder, pr_f...
...And 17 more matches
inIDOMUtils
inherits from: nsisupports last changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) implemented by: @mozilla.org/inspector/dom-utils;1 as a service: var inidomutils = components.classes["@mozilla.org/inspector/dom-utils;1"] .
getservice(components.interfaces.inidomutils); method overview void addpseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); void clearpseudoclasslocks(in nsidomelement aelement); [implicit_jscontext] jsval colornametorgb(in domstring acolorname); nsiarray
getbindingurls(in nsidomelement aelement); nsidomnodelist
getchildrenfornode(in nsidomnode anode, in boolean ashowinganonymouscontent)...
...; unsigned long long
getcontentstate(in nsidomelement aelement); void
getcsspropertynames([optional] in unsigned long aflags, [optional] out unsigned long acount, [retval, array, size_is(acount)] out wstring aprops); nsisupportsarray
getcssstylerules(in nsidomelement aelement, [optional] in domstring apseudo); nsidomnode
getparentfornode(in nsidomnode anode, in boolean ashowinganonymouscontent); unsigned long
getruleline(in nsidomcssstylerule arule); unsigned long
getrulecolumn(in nsidomcssstylerule arule); unsigned long
getselectorcount(in nsidomcssstylerule arule); astring
getselectortext(in nsidomcssstylerule arule, in unsigned long aselectorindex); unsigned long long
getspecificity(in nsidomcssstylerule aru...
...le, in unsigned long aselectorindex); nsidomfontfacelist
getusedfontfaces(in nsidomrange arange); bool haspseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); boolean isignorablewhitespace(in nsidomcharacterdata adatanode); bool isinheritedproperty(in astring apropertyname); void parsestylesheet(in nsidomcssstylesheet asheet, in domstring ainput); void removepseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); astring rgbtocolorname(in octet ar, in octet ag, in octet ab); bool selectormatcheselement(in nsidomelement aelement, in nsidomcssstylerule arule, in unsigned long aselectorindex, [optional] in domstring apseudo); void setcontentstate(in nsidomelement aelement, in unsig...
...And 17 more matches
nsIAccessibleTable
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsiaccessible
getcellat(in long rowindex, in long columnindex); note: renamed from cellrefat in gecko 1.9.2 long
getcellindexat(in long rowindex, in long columnindex); note: renamed from
getindexat in gecko 1.9.2 astring
getcolumndescription(in long columnindex); long
getcolumnextentat(in long row, in long column); long
getcolumnindexat(in long cellindex); note: renamed from
getcolumnatindex in gecko 1.9.2 void
getrowandcolumnindicesat(in long cellindex, out long rowindex, out long columnindex); astring
getrowdes...
...cription(in long rowindex); long
getrowextentat(in long row, in long column); long
getrowindexat(in long cellindex); note: renamed from
getrowatindex in gecko 1.9.2 void
getselectedcellindices(out unsigned long cellsarraysize, [retval, array, size_is(cellsarraysize)] out long cellsarray); note: renamed from
getselectedcells in gecko 1.9.2 void
getselectedcolumnindices(out unsigned long columnsarraysize, [retval, array, size_is(columnsarraysize)] out long columnsarray); note: renamed from
getselectedcolumns in gecko 1.9.2 void
getselectedrowindices(out unsigned long rowsarraysize, [retval, array, size_is(rowsarraysize)] out long rowsarray); note: renamed from
getselectedrows in gecko 1.9.2 boolean iscellselected(in long rowindex, in long co...
... nsiaccessible
getcellat( in long rowindex, in long columnindex ); parameters rowindex the row index of the cell.
...And 17 more matches
nsIDOMMozNetworkStatsManager
you can test for the presence of the service as follows, for example: if ("moznetworkstats" in navigator) { /* networkstats is available */ } else { alert("i'm sorry, but networkstats services are not supported."); } method overview nsidomdomrequest
getsamples(in nsisupports network, in jsval start, in jsval end, [optional] in jsval options /* networkstats
getoptions */); nsidomdomrequest addalarm(in nsisupports network, in long threshold, [optional] in jsval options /* networkstatsal...
...armoptions */); nsidomdomrequest
getallalarms([optional] in nsisupports network); nsidomdomrequest removealarms([optional] in long alarmid); nsidomdomrequest clearstats(in nsisupports network); nsidomdomrequest clearallstats(); nsidomdomrequest
getavailablenetworks(); nsidomdomrequest
getavailableservicetypes(); attributes attribute type description samplerate long minimum time in milliseconds between samples stored in the database.
... constants constant type description wifi long constant for wifi, set to 0 mobile long constant for mobile, set to 1 methods
getsamples() asynchronously queries network interface statistics.
...And 17 more matches
nsINavHistoryService
toolkit/components/places/nsinavhistoryservice.idlscriptable this interface provides complex query functions, more fine-grained
getters and setters.
...to use this service, use: var historyservice = components.classes["@mozilla.org/browser/nav-history-service;1"] .
getservice(components.interfaces.nsinavhistoryservice); method overview astring
getpa
getitle(in nsiuri auri); void markpageasfollowedbookmark(in nsiuri auri); void markpageasfollowedlink(in nsiuri auri); void markpageastyped(in nsiuri auri); boolean canadduri(in nsiuri auri); long long addvisit(in nsiuri auri, in prtime atime, in nsiuri areferringuri, in long atransitiontype, ...
...in boolean aisredirect, in long long asessionid); obsolete since gecko 22.0 nsinavhistoryquery
getnewquery(); nsinavhistoryqueryoptions
getnewqueryoptions(); nsinavhistoryresult executequery(in nsinavhistoryquery aquery, in nsinavhistoryqueryoptions options); nsinavhistoryresult executequeries([array,size_is(aquerycount)] in nsinavhistoryquery aqueries, in unsigned long aquerycount, in nsinavhistoryqueryoptions options); void querystringtoqueries(in autf8string aquerystring, [array, size_is(aresultcount)] out nsinavhistoryquery aqueries, out unsigned long aresultcount, out nsinavhistoryqueryoptions options); autf8string queriestoquerystring([array, size_is(aquerycount)] in nsinavhistoryquery aqueries, in unsigned long aquerycount, in nsina...
...And 17 more matches
Using the clipboard
the component @mozilla.org/wid
get/clipboardhelper;1 can be used to copy text to the clipboard.
... const gclipboardhelper = components.classes["@mozilla.org/wid
get/clipboardhelper;1"] .
getservice(components.interfaces.nsiclipboardhelper); gclipboardhelper.copystring("put me on the clipboard, please."); this example will first create a clipboard helper and then copy a short string to the clipboard.
... a component @mozilla.org/wid
get/clipboard;1 and an interface nsiclipboard provide general access to the system clipboard.
...And 17 more matches
Using the Gamepad API - Web APIs
in addition to these events, the api also adds a gamepad object, which you can use to query the state of a connected gamepad, and a navigator.
getgamepads() method which you can use to
get a list of gamepads known to the page.
...the index property also functions as the index into the array returned by navigator.
getgamepads().
... var gamepads = {}; function gamepadhandler(event, connecting) { var gamepad = event.gamepad; // note: // gamepad === navigator.
getgamepads()[gamepad.index] if (connecting) { gamepads[gamepad.index] = gamepad; } else { delete gamepads[gamepad.index]; } } window.addeventlistener("gamepadconnected", function(e) { gamepadhandler(e, true); }, false); window.addeventlistener("gamepaddisconnected", function(e) { gamepadhandler(e, false); }, false); this previous example also demonstrates how the gamepad property can be held after the event has completed — a technique we will use for device state querying later.
...And 17 more matches
Rendering and the WebXR frame animation callback - Web APIs
this begins with
getting the reference space in which you want to draw, with its origin and orientation set at the viewer's starting position and viewing direction.
... kicking off the renderer thus looks like this: let worldrefspace; async function runxr(xrsession) { worldrefspace = await xrsession.requestreferencespace("immersive-vr"); if (worldrefspace) { viewerrefspace = worldrefspace.
getoffsetreferencespace( new xrrigidtransform(viewerstartposition, viewerstartorientation)); animationframerequestid = xrsession.requestanimationframe(mydrawframe); } } after
getting a reference space for the immersive world, this creates an offset reference space representing the position and orientation of the viewer by creating an xrrigidtransform representing that position and ori...
...entation, then calling the xrreferencespace method
getoffsetreferencespace().
...And 17 more matches
window.location - Web APIs
nunc e
get elit e
get velit pulvinar fringilla consectetur aliquam purus.
... curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam e
get arcu.
...phasellus sit amet lectus vitae eros egestas pellentesque fermentum e
get magna.
...And 17 more matches
Object.assign() - JavaScript
the object.assign() method copies all enumerable own properties from one or more source objects to a tar
get object.
... it returns the tar
get object.
... syntax object.assign(tar
get, ...sources) parameters tar
get the tar
get object — what to apply the sources’ properties to, which is returned after it is modified.
...And 17 more matches
SVG documentation index - SVG: Scalable Vector Graphics
5 linking guide, svg the tar
get attribute on the svg <a> element doesn't work in mozilla firefox 1.5.
...combined, we
get this very natural-looking behavior.
... 27 attributename needscompattable, svg, svg attribute the attributename attribute indicates the name of the css property or attribute of the tar
get element that is going to be changed during an animation.
...And 17 more matches
Adding Properties to XBL-defined Elements - Archive of obsolete content
the xbl interface javascript and the dom provide access to
get and set the properties of elements.
...that way, all you need is to
get a reference to the element (using document.
getelementbyid or a similar function) and then
get or set the additional properties and call the methods on it.
...you can use the name from a script to
get and set the value.
...And 16 more matches
Tree View Details - Archive of obsolete content
the tree will query the view for each row by calling its
getlevel method to find out the level of that row.
... in addition to the
getlevel method, there is a hasnextsibling function which, given a row, should return true if there is another row afterwards at the same level.
... the
getparentindex method is expected to return the parent row of a given row, that is, the row before it with a lower nesting value.
...And 16 more matches
Drawing graphics - Learn web development
we will however show how to use a webgl library to create a 3d scene more easily, and you can find a tutorial covering raw webgl elsewhere — see
getting started with webgl.
... active learning:
getting started with a <canvas> if you want to create a 2d or 3d scene on a web page, you need to start with an html <canvas> element.
... you'll also see that we are chaining assignments to
gether with multiple equals signs — this is allowed in javascript, and it is a good technique if you want to make multiple variables all equal to the same value.
...And 16 more matches
Handling common JavaScript problems - Learn web development
this includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems,
getting modern javascript features working in older browsers, and more.
... things have improved significantly since then; modern browsers do a good job of supporting "classic javascript features", and the requirement to use such code has diminished as the requirement to support older browsers has lessened (although bear in mind that they have not gone away alto
gether).
...this is supposed to be fetched from an external .json file using the following xmlhttprequest call: let requesturl = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; let request = new xmlhttprequest(); request.open('
get', requesturl); request.send(); let superheroes = request.response; populateheader(superheroes); showheroes(superheroes); but this fails.
...And 16 more matches
Displaying Places information using views
getservice(ci.nsinavhistoryservice); var query = histserv.
getnewquery(); query.searchterms = "mozilla"; query.onlybookmarked = true; var opts = histserv.
getnewqueryoptions(); opts.querytype = opts.query_type_bookmarks; var uri = histserv.queriestoquerystring([query], 1, opts); var tree = document.
getelementbyid("mytree"); tree.place = uri; these two examples use the built-in tree view, but the po...
...like all places views, the built-in tree view implements this interface, which provides broad methods such as
getting the view's nsinavhistoryresult instance and examining the view's selection.
... to put it in terms of javascript, say you have a variable named treeview that references your places tree view: var treeview = document.
getelementbyid("myplacestreeview"); points 1 and 2 apply to this variable.
...And 16 more matches
JSAPI Cookbook
// javascript var global = this; there is a function, js_
getglobalforscopechain(cx), that makes a best guess, and sometimes that is the best that can be done.
... but in a jsnative the correct way to do this is: /* jsapi */ bool mynative(jscontext *cx, unsigned argc, js::value *vp) { js::callargs args = js::callargsfromvp(argc, vp); jsobject *global = js_
getglobalforobject(cx, &args.callee()); ...
...pt var person = new person("dave", 24); it looks so simple in javascript, but a jsapi application has to do three things here: look up the constructor, person prepare the arguments ("dave", 24) call js_new to simulate the new keyword (if your constructor doesn't take any arguments, you can skip the second step and call js_new(cx, constructor, 0, null) in step 3.) /* jsapi */ /* step 1 -
get the value of |person| and check that it is an object.
...And 16 more matches
XPCOM array guide
this guide describes the available arrays as well as the enumerator classes that can be used to
get to them.
... the point of nscomarray is that it's a template, and all the pointers in it must be pointers to the same type; it's nice to be able to use it because you
get type-safety and don't have to spend time and code qiing (like you have to with nsiarray).
... c++ example void
getlist(nsiarray** aresult) { nscomptr<nsimutablearray> array = do_createinstance(ns_array_contractid); // append some elements ...
...And 16 more matches
IAccessible2
1.0 66 introduced gecko 1.9 inherits from: iaccessible last changed in gecko 1.9 (firefox 3) method overview [prop
get] hresult attributes([out] bstr attributes ); [prop
get] hresult extendedrole([out] bstr extendedrole ); [prop
get] hresult extendedstates([in] long maxextendedstates, [out, size_is(,maxextendedstates), length_is(, nextendedstates)] bstr extendedstates, [out] long nextendedstates ); [prop
get] hresult groupposition([out] long grouplevel, [out] long similaritemsingroup, [out] long positioningroup ); [prop
get] hresult indexinparent([out] long indexinparent ); [prop
get] hresult locale([out] ia2locale locale ); [prop
get] hresult localizedextendedrole(...
...[out] bstr localizedextendedrole ); [prop
get] hresult localizedextendedstates([in] long maxlocalizedextendedstates, [out, size_is(,maxlocalizedextendedstates), length_is(, nlocalizedextendedstates)] bstr localizedextendedstates, [out] long nlocalizedextendedstates ); [prop
get] hresult nextendedstates([out] long nextendedstates ); [prop
get] hresult nrelations([out] long nrelations ); [prop
get] hresult relation([in] long relationindex, [out] iaccessiblerelation relation ); [prop
get] hresult relations([in] long maxrelations, [out, size_is(maxrelations), length_is( nrelations)] iaccessiblerelation relations, [out] long nrelations ); hresult role([out] long role ); hresult scrollto([in] enum ia2scrolltype scrolltype ); hresult scrolltopoint([in] enum ia2coordinatetype coordinatetyp...
...e, [in] long x, [in] long y ); [prop
get] hresult states([out] accessiblestates states ); [prop
get] hresult uniqueid([out] long uniqueid ); [prop
get] hresult windowhandle([out] hwnd windowhandle ); methods attributes() returns the attributes specific to this iaccessible2 object, such as a cell's formula.
...And 16 more matches
IAccessibleTable2
method overview [prop
get] hresult caption([out] iunknown accessible ); [prop
get] hresult cellat([in] long row, [in] long column, [out] iunknown cell ); [prop
get] hresult columndescription([in] long column, [out] bstr description ); [prop
get] hresult iscolumnselected([in] long column, [out] boolean isselected ); [prop
get] hresult isrowselected([in] long row, [out] boolean isselected ); [prop
get] hresult modelcha...
...nge([out] ia2tablemodelchange modelchange ); [prop
get] hresult ncolumns([out] long columncount ); [prop
get] hresult nrows([out] long rowcount ); [prop
get] hresult nselectedcells([out] long cellcount ); [prop
get] hresult nselectedcolumns([out] long columncount ); [prop
get] hresult nselectedrows([out] long rowcount ); [prop
get] hresult rowdescription([in] long row, [out] bstr description ); hresult selectcolumn([in] long column ); [prop
get] hresult selectedcells([out, size_is(, nselectedcells,)] iunknown cells, [out] long nselectedcells ); [prop
get] hresult selectedcolumns([out, size_is(, ncolumns)] long selectedcolumns, [out] long ncolumns ); [prop
get] hresult selectedrows([out, size_is(, nrows)] long selectedrows, [out] long nrows ); hresult selectrow([in] long row ); ...
...[prop
get] hresult summary([out] iunknown accessible ); hresult unselectcolumn([in] long column ); hresult unselectrow([in] long row ); methods caption() returns the caption for the table.
...And 16 more matches
nsIDocShell
obsolete since gecko 1.8 nsisimpleenumerator
getdocshellenumerator(in long aitemtype, in long adirection); nsidomstorage
getsessionstorageforprincipal(in nsiprincipal principal, in domstring documenturi, in boolean create); nsidomstorage
getsessionstorageforuri(in nsiuri uri, in domstring documenturi); void historypurged(in long numentries); void internalload(in nsiuri auri, in nsiuri areferrer, in nsisupp...
...orts aowner, in pruint32 aflags, in wstring awindowtar
get, in string atypehint, in nsiinputstream apostdatastream, in nsiinputstream aheadersstream, in unsigned long aloadflags, in nsishentry ashentry, in boolean firstparty, out nsidocshell adocshell, out nsirequest arequest); native code only!
... chromeeventhandler nsidomeventtar
get events generated in the frame bubble up to its chromeeventhandler.
...And 16 more matches
nsIEventListenerService
content/events/public/nsieventlistenerservice.idlscriptable a service that can be used to
get a list of listeners observing events; this is primarily useful for debuggers.
...to create an instance, use: var eventlistenerservice = components.classes["@mozilla.org/eventlistenerservice;1"] .
getservice(components.interfaces.nsieventlistenerservice); universalxpconnect privileges are required to use this service.
... method overview void
geteventtar
getchainfor(in nsidomeventtar
get aeventtar
get, [optional] out unsigned long acount, [retval, array, size_is(acount)] out nsidomeventtar
get aoutarray); void
getlistenerinfofor(in nsidomeventtar
get aeventtar
get, [optional] out unsigned long acount, [retval, array, size_is(acount)] out nsieventlistenerinfo aoutarray); boolean haslistenersfor(in nsidomeventtar
get aeventtar
get, in domstring atype); void addsystemeventlistener(in nsidomeventtar
get tar
get, in domstring type, in nsidomeventlistener listener, in boolean usecapture); void removesystemeventlistener(in nsidomeventtar
get tar
get, in domstring type, in nsidomeventlistener listener, in boolean usecapture); attributes ...
...And 16 more matches
nsIMsgDBView
void init(in nsimessenger amessengerinstance, in nsimsgwindow amsgwindow, in nsimsgdbviewcommandupdater acommandupdater); void sort(in nsmsgviewsorttypevalue sorttype, in nsmsgviewsortordervalue sortorder); void docommand(in nsmsgviewcommandtypevalue command); void docommandwithfolder(in nsmsgviewcommandtypevalue command, in nsimsgfolder destfolder); void
getcommandstatus(in nsmsgviewcommandtypevalue command, out boolean selectable_p, out nsmsgviewcommandcheckstatevalue selected_p); void viewnavigate(in nsmsgnavigationtypevalue motion, out nsmsgkey resultid, out nsmsgviewindex resultindex, out nsmsgviewindex threadindex, in boolean wrap); boolean navigatestatus(in nsmsgnavigationtypevalue motion); nsmsgkey
getkeyat(in nsmsgv...
...iewindex index); nsimsgdbhdr
getmsghdrat(in nsmsgviewindex index); nsimsgfolder
getfolderforviewindex(in nsmsgviewindex index); acstring
geturiforviewindex(in nsmsgviewindex index); nsimsgdbview clonedbview(in nsimessenger amessengerinstance, in nsimsgwindow amsgwindow, in nsimsgdbviewcommandupdater acommandupdater); void
geturisforselection([array, size_is(count)] out string uris, out unsigned long count); void
getindicesforselection([array, size_is(count)] out nsmsgviewindex indices, out unsigned long count); void loadmessagebymsgkey(in nsmsgkey amsgkey); void loadmessagebyviewindex(in nsmsgviewindex aindex); void loadmessagebyurl(in string aurl); void reloadmessage(); void reloadmessagewithal...
...oid ondeletecompleted(in boolean succeeded); nsmsgviewindex findindexfromkey(in nsmsgkey amsgkey, in boolean aexpand); void expandandselectthreadbyindex(in nsmsgviewindex aindex, in boolean aaugment); void addcolumnhandler(in astring acolumn, in nsimsgcustomcolumnhandler ahandler); void removecolumnhandler(in astring acolumn); nsimsgcustomcolumnhandler
getcolumnhandler(in astring acolumn); attributes attribute type description viewtype nsmsgviewtypevalue readonly: type of view.
...And 16 more matches
Pointer events - Web APIs
the pointer is a hardware-agnostic device that can tar
get a specific set of screen coordinates.
... additionally, a pointer event contains the usual properties present in mouse events (client coordinates, tar
get element, button states, etc.) in addition to new properties for other forms of input: pressure, contact geometry, tilt, etc.
... hit test the process the browser uses to determine a tar
get element for a pointer event.
...And 16 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
animating 3d graphics is an area of software development that brings to
gether multiple disciplines in computer science, mathematics, art, graphic design, kinematics, anatomy, physiology, physics, and cinematography.
... the value of w is applied by dividing each of the other three components by it to
get the final position or vector; that is, for a coordinate given as (x, y, z, w), the point in the 3d space is actually (x/w, y/w, z/w, 1) or simply (x/w, y/w, z/w).
...since you're actually moving everything except the camera, take the inverse of the transform matrix to
get an inverse transform matrix.
...And 16 more matches
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
the tar
get ray; each controller or other handheld device may have a tar
geting ray associated with it, which is represented by a space whose origin is at the point on the controller at which the ray is emitted, and is oriented so that -z extends in the direction of the tar
get it's pointing at.
... in webxr, a pose is represented by an xrpose object, whose transform property is an xrrigidtransform defining the transform matrix that, applied to any coordinate, vector, or matrix in the original space, converts it to the tar
get space.
... there is only one way to create an xrpose, and that's using the
getpose() method on an animation frame as given using an xrframe object.
...And 16 more matches
Proxy - JavaScript
description a proxy is created with two parameters: tar
get: the original object which you want to proxy handler: an object that defines which operations will be intercepted and how to redefine intercepted operations.
... for example, this code defines a simple tar
get with just two properties, and an even simpler handler with no properties: const tar
get = { message1: "hello", message2: "everyone" }; const handler1 = {}; const proxy1 = new proxy(tar
get, handler1); because the handler is empty, this proxy behaves just like the original tar
get: console.log(proxy1.message1); // hello console.log(proxy1.message2); // everyone to customise the proxy, we define functions on the handler object: const tar
get = { message1: "hello", message2: "everyone" }; const handler2 = {
get: function(tar
get, prop, receiver) { return "world"; } }; const proxy2 = new proxy(tar
get, handler2); here we've provided an implementation of the
get() handler, which intercepts attempts to access properties in the ...
...tar
get.
...And 16 more matches
tabs/utils - Archive of obsolete content
gettabbrowser(window)
get the tabbrowser element for the given browser window.
... returns tabbrowser :
gettabcontainer(window)
get the tabbrowser's tabcontainer property.
... returns tabcontainer :
gettabs(window) returns the tabs for the specified window.
...And 15 more matches
ui/frame - Archive of obsolete content
so there are three cases to consider: sending messages from a frame script to the main add-on code sending messages from the main add-on code to all instances of a frame, across all browser windows sending messages from the main add-on code to a single instance of a frame, attached to a specific browser window in all cases, postmessage() takes two arguments: the message itself and a tar
getorigin.
... the tar
getorigin argument can be either the uri of the document hosted by the tar
get, or the wildcard "*".
... if you know the tar
get uri, you should use it, as this is more secure: it prevents another window from intercepting messages that were intended for someone else.
...And 15 more matches
File I/O - Archive of obsolete content
note: you can still
get a file object even if the specified file does not exist, and no exception will be thrown.
...
getting files in special directories components.utils.import("resource://gre/modules/fileutils.jsm"); //
get the "data.txt" file in the profile directory var file = fileutils.
getfile("profd", ["data.txt"]); or the same without using fileutils.jsm: //
get profile directory.
...
getservice(components.interfaces.nsiproperties).
...And 15 more matches
Anonymous Content - Archive of obsolete content
for example, the html file upload control appears in most browsers as a composite wid
get consisting of a text field and a button.
... a sample xbl binding for the file wid
get might look as follows: <binding id="fileupload"> <content> <html:input type="text"/> <html:input type="button"/> </content> </binding> because this content is not visible to its parent element, it is said to be anonymous content.
... the anonymous content is accessible only through special methods like
getanonymousnodes and
getanonymouselementbyattribute.
...And 15 more matches
Using the Editor from XUL - Archive of obsolete content
that causes the editoronload() javascript function to
get executed when the xul is done loading.
...that which you
get from window._content.
... having an id attribute, id="content-frame", allows us to find this element with document.
getelementbyid("content-frame"), and to style it from css.
...And 15 more matches
button - Archive of obsolete content
use hasattribute() to determine whether this attribute is set instead of
getattribute().
... properties accesskey type: character
gets and sets the value of the accesskey attribute.
... autocheck type: boolean
gets and sets the value of the autocheck attribute.
...And 15 more matches
listbox - Archive of obsolete content
ynavigation, preference, rows, seltype, suppressonselect, tabindex, value properties accessibletype, currentindex, currentitem, disabled, disablekeynavigation, itemcount, listboxobject, selectedcount, selectedindex, selecteditem, selecteditems, seltype, suppressonselect, tabindex, value methods additemtoselection, appenditem, clearselection, ensureelementisvisible, ensureindexisvisible,
getindexoffirstvisiblerow,
getindexofitem,
getitematindex,
getnumberofvisiblerows,
getrowcount,
getselecteditem, insertitemat, invertselection, movebyoffset, removeitemat, removeitemfromselection, scrolltoindex, selectall, selectitem, selectitemrange, timedselect, toggleitemselection examples <listbox id="thelist"> <listitem label="ruby"/> <listitem label="emerald"/> <listitem label="sapph...
...ire" selected="true"/> <listitem label="diamond"/> </listbox> <listbox id="thelist" rows="10" width="400"> <listhead> <listheader label="1ct gem" width="240"/> <listheader label="price" width="150"/> </listhead> <listcols> <listcol/> <listcol flex="1"/> </listcols> </listbox> var thelist = document.
getelementbyid('thelist'); gems = [ {gem: "ruby", price: "$3,500 - $4,600"}, {gem: "emerald", price: "$700 - 4,250"}, {gem: "blue sapphire", price: "$3,400 - $4,500"}, {gem: "diamond", price: "$5,600 - $16,000"} ]; for (var i = 0; i < gems.length; i++) { var row = document.createelement('listitem'); var cell = document.createelement('listcell'); cell.setattribute('label', gems[i].gem); row.appendchild(cell); ...
...to
get the actual number of rows in the element, use the
getrowcount method.
...And 15 more matches
toolbarbutton - Archive of obsolete content
use hasattribute() to determine whether this attribute is set instead of
getattribute().
... properties accesskey type: character
gets and sets the value of the accesskey attribute.
... autocheck type: boolean
gets and sets the value of the autocheck attribute.
...And 15 more matches
Mozilla release FAQ - Archive of obsolete content
for this particular example, you would want to go look at relevant topics stuart cheshire's discussion on latency versus bandwidth internet -- under the covers (by me) the rfc for http the w3's html 4.0 definition building mozilla i
get x error when trying to build mozilla - what's wrong?
...dated with time, but (according to netscape.public.mozilla.general) the following platforms have been built successfully: solaris 2.4, 2.5, 2.6 freebsd 2.2, 3.0 linux/intel and alpha 2.0, 2.1 macos winnt 4.0 irix 5.3, 6.2, 6.3, 6.4 win95, win98 digital unix 4.0 netbsd openbsd bsdi hp/ux 9.05, 10.20, 11.0 (see 2.7) hurd .03 dg/ux mac os x i'm *still* having problems
getting mozilla to build on my platform!
...in what directory should i be in order to
get a cvs update of the source?
...And 15 more matches
Parsing microformats in JavaScript - Archive of obsolete content
methods datetime
getter() specifically retrieves a date from a microformat node.
... after
getting the text, it is normalized into an iso 8601 date.
... normalizeddate = microformats.parser.datetime
getter(propnode, parentnode); parameters propnode the dom node to check.
...And 15 more matches
Basic native form controls - Learn web development
next we will look at the functionality of the different form controls, or wid
gets, in detail — studying all the different options available to collect different types of data.
... objective: to understand in detail the original set of native form wid
gets available in browsers for collecting data, and how to implement them using html.
... text input fields text <input> fields are the most basic form wid
gets.
...And 15 more matches
Styling web forms - Learn web development
this has historically been difficult — form controls vary greatly in how easy they are to customize with css — but it is
getting easier as old browsers are retired and modern browsers give us more features to use.
... why is styling form wid
gets challenging?
... for some form wid
gets, it is still difficult to rebuild controls to make them stylable, but we can now use css to style many form features, though we do need to take extra care to ensure we don't break usability.
...And 15 more matches
UI pseudo-classes - Learn web development
this included some usage of pseudo-classes, for example using :checked to tar
get a checkbox only when it is selected.
...more recently, the css selector level 3 and css basic ui level 3 added more pseudo-classes related to html forms that provide several other useful tar
getting conditions that you can take advantage of.
... we'll discuss these in more detail in the sections below, but briefly, the main ones we'll be looking at are: :required and :optional: tar
gets required or optional form controls.
...And 15 more matches
HTML text fundamentals - Learn web development
prerequisites: basic html familiarity, as covered in
getting started with html.
...(we usually spend a very short time on a web page.) if they can't see anything useful within a few seconds, they'll likely
get frustrated and go somewhere else.
...this software provides ways to
get fast access to given text content.
...And 15 more matches
Inheritance in JavaScript - Learn web development
getting started first of all, make yourself a local copy of our oojs-class-inheritance-start.html file (see it running live also).
...to see this, enter object.
getownpropertynames(teacher.prototype) into either the text input field or your javascript console.
...we need to
get teacher() to inherit the methods defined on person()'s prototype.
...And 15 more matches
Strategies for carrying out testing - Learn web development
instead, you should try to make sure your site works on the most important tar
get browsers and devices, and then code defensively to give your site the widest support reach it can be expected to have.
... using analytics a much more accurate source of data, if you can
get it, comes from an analytics app like google analytics.
...this is fairly intuitive to set up; the most important field to
get right is the website url.
...And 15 more matches
Creating the Component Code
use the calculator (after learning long division) you have to write a fair amount of code to create a component library that
gets loaded into xpcom.
...it can be used to implement parental controlled browsing for children, or for tar
geted "kiosk browsing," where the content is restricted to a particular server.
...in weblock, this is the part that brings to
gether various gecko services and prevents users from leaving the list of acceptable domains.
...And 15 more matches
mozIStorageValueArray
last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports method overview long
gettypeofindex(in unsigned long aindex); long
getint32(in unsigned long aindex); long long
getint64(in unsigned long aindex); double
getdouble(in unsigned long aindex); autf8string
getutf8string(in unsigned long aindex); astring
getstring(in unsigned long aindex); void
getblob(in unsigned long aindex, out unsigned long adatasize, [array,size_is(ad...
...atasize)] out octet adata); boolean
getisnull(in unsigned long aindex); attributes attribute type description numentries unsigned long the number of entries in the array.
... methods
gettypeofindex() returns the type of the value at the given column index.
...And 15 more matches
nsIAccessibleText
inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void addselection(in long startoffset, in long endoffset); nsiaccessible
getattributerange(in long offset, out long rangestartoffset, out long rangeendoffset); obsolete since gecko 1.9.1 wchar
getcharacteratoffset(in long offset); void
getcharacterextents(in long offset, out long x, out long y, out long width, out long height, in unsigned long coordtype); long
getoffsetatpoint(in long x, in long y, in unsigned long coordtype); void
getrangeextents(in long startoffset, in long endoffset, out long x, out long y, out long width, out long height, in unsigned long co...
...ordtype); void
getselectionbounds(in long selectionnum, out long startoffset, out long endoffset); astring
gettext(in long startoffset, in long endoffset); astring
gettextafteroffset(in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset); astring
gettextatoffset(in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset); nsipersistentproperties
gettextattributes(in boolean includedefattrs, in long offset, out long rangestartoffset, out long rangeendoffset); astring
gettextbeforeoffset(in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset); void removeselection(in long selectionnum); void scrollsubstringto(in long startindex, in long endindex, in ...
... constant value description coord_type_screen 0 coord_type_window 1 methods addselection() void addselection( in long startoffset, in long endoffset ); parameters startoffset endoffset
getattributerange() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0)
get the accessible and start/end offsets around the given offset.
...And 15 more matches
Working with windows in chrome code
the second parameter is the window's name; the name can be used in links or forms as the tar
get attribute.
... var ww = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .
getservice(components.interfaces.nsiwindowwatcher); var win = ww.openwindow(null, "chrome://myextension/content/about.xul", "aboutmyextension", "chrome,centerscreen", null); window object note the win variable in the above section, which is assigned the return value of window.open.
... note however, that the open() call returns before the window is fully loaded, so some calls, like win.document.
getelementbyid() will fail.
...And 15 more matches
Drag Operations - Web APIs
for instance, a drop tar
get that accepts links would check for the type text/uri-list.
...this allows data to be provided in more specific types, often custom types, yet still provide fallback data for drop tar
gets that do not support more specific types.
... setting the drag feedback image when a drag occurs, a translucent image is generated from the drag tar
get (the element the "dragstart" event is fired at), and follows the user's pointer during the drag.
...And 15 more matches
WebGL2RenderingContext - Web APIs
to
get an object of this interface, call
getcontext() on a <canvas> element, supplying "webgl2" as the argument: var canvas = document.
getelementbyid('mycanvas'); var gl = canvas.
getcontext('webgl2'); webgl 2 is an extension to webgl 1.
... the webgl tutorial has more information, examples, and resources on how to
get started with webgl.
... state information webgl2renderingcontext.
getindexedparameter() returns the indexed value for the given tar
get.
...And 15 more matches
ARIA Test Cases - Accessibility
still, dojo's wid
gets implement aria, and the noted test files could be used as an "aria test file".
... wid
get test cases alert simple alert complex alert real alert example with aria-required and aria-invalid -- type in a email address without an at sign to test the alert expected at behavior: a screen reader or screen magnifier must speak an alert when it becomes visible.
... a screen magnifier should move the current view to the alert or open a new panel with the alert information optional, but desired: if there are wid
gets within the alert, their role and any keyboard mnemonic (accesskey) should be spoken.
...And 15 more matches
panel - Archive of obsolete content
for example, here's an add-on whose content script intercepts mouse clicks on links inside the panel, and sends the tar
get url to the main add-on code.
... var myscript = "window.addeventlistener('click', function(event) {" + " var t = event.tar
get;" + " if (t.nodename == 'a')" + " self.port.emit('click-link', t.tostring());" + "}, false);" var mypanel = require("sdk/panel").panel({ contenturl: "http://www.bbc.co.uk/mobile/index.html", contentscript: myscript }); mypanel.port.on("click-link", function(url) { console.log(url); }); mypanel.show(); this example uses contentscript to supply the script as a string.
... warning: unless your content script is extremely simple and consists only of a static string, don't use contentscript: if you do, you may have problems
getting your add-on approved on amo.
...And 14 more matches
content/mod - Archive of obsolete content
to a content window, adding a border to all divs in page: var attachto = require("sdk/content/mod").attachto; var style = require("sdk/stylesheet/style").style; var style = style({ source: "div { border: 4px solid gray }" }); // assuming window points to the content page we want to modify attachto(style, window); parameters modification : object the modification we want to apply to the tar
get.
...detachfrom(style, window); parameters modification : object the modification we want to remove from the tar
get window : nsidomwindow the window to be modified.
... if window is not provided modification is removed from all tar
gets it's being attached to.
...And 14 more matches
Tamarin build documentation - Archive of obsolete content
windows 32 and 64 bit mac osx 10.4, 10.5 on ppc mac osx 10.5, 10.6 on intel linux 32 and 64 bit solaris 10 on sparc android 2.2 on arm windows mobile 6.5 mips (linux) sh4 (linux)
getting the tamarin source the tamarin source resides in mercurial at tamarin central.
...the work for that fix also included some changes to the configure.py default behavior to decouple the --tar
get switch from sdk choice: there is a new switch, --mac-sdk, that selects the 10.4u, 10.5 or 10.6 sdk.
... its options are '104u', '105' or '106' (note: no '.') if you don't pass the --mac-sdk switch you will
get no sdk in your build.
...And 14 more matches
Learn XPI Installer Scripting by Example - Archive of obsolete content
note also that when you call methods on the install--as you do so often in installation scripts (
getfolder, initinstall, addfile, and performinstall are all examples of common install object methods)--the install object is implicit; like the window object in regular web page scripts, the install object does not need to be prefixed to the method.
...in the browser.xpi installation, this function appears at line 20: var err = initinstall("netscape seamonkey", "browser", "6.0.0.2000110807"); if you call a method on the install object before initinstall(), you will
get an error.
... verifying the tar
get the first thing the installation script does when it's executed is to check that there is adequate disk space for the software to be installed, where the verifydiskspace function is called as a condition of the main installation block that starts at line 24).
...And 14 more matches
Building accessible custom components in XUL - Archive of obsolete content
this will become clearer with some concrete examples: the grid element is the container for the entire control; it
gets a role of "wairole:spreadsheet".
...they each
get the appropriate role, "wairole:rowheader" or "wairole:columnheader".
...<code> var gfocuscell = null; function install_handlers() { var spreadsheet = window.document.
getelementbyid('accjaxspreadsheet'); spreadsheet.addeventlistener('focus', spreadsheet_focus, true); spreadsheet.addeventlistener('click', spreadsheet_click, true); } function spreadsheet_focus(e) { if (e.tar
get.tagname == 'grid') { if (!gfocuscell) { gfocuscell = e.tar
get.
getelementsbytagname('label')[0]; } gfocuscell.focus(); } else { gfo...
...And 14 more matches
XForms Input Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of wid
get(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding special inputmode - not supported for this control incremental - supported.
...representations the xforms input element can be represented by the following wid
gets for the spcified data types (or types derived from these data types): text field - the default wid
get when no type is specified or the data is of type xsd:string (xhtml/xul) checkbox - used for xsd:boolean instance data.
...ent data of type xsd:date (xhtml/xul) calendar - used to represent data of type xsd:date when appearance attribute also has the value 'full' (xhtml/xul) month list - used to represent data of type xsd:gmonth (xhtml only) days list - used to represent data of type xsd:gday (xhtml only) number field - used to represent data of numeric type (fx 3.0 only, xul only) more detail about each of these wid
gets follows below.
...And 14 more matches
How to build custom form controls - Learn web development
for any interaction you do add, it is vital to spend time in the design stage; if you define a behavior poorly, or for
get to define one, it will be very hard to redefine it once the users have gotten used to it.
... if you have doubts, ask for the opinions of others, and if you have the bud
get for it, do not hesitate to perform user tests.
...custom controls rely on javascript to tie everything to
gether.
...And 14 more matches
Adding a new event
a simple dom event which can be implemented with webidl and wid
getevent or something.
...this is useful for wid
get notifying dom tree of something or retrieving something from dom tree.
... add event messages you need to add event messages which are stored by wid
getevent::message.
...And 14 more matches
A bird's-eye view of the Mozilla framework
organization this article first covers some conceptual groundwork, then walks through a user scenario to illustrate how key mozilla architectural components work to
gether to support a simplehelp viewer ui action.
... user interface (ui) wid
gets and services the x window system toolkit defines the termwid
get as a pre-defined object that encapsulates both the command actions and data associated with a graphical user interface (gui) control.
... the various x toolkit implementations provide a set of wid
gets for ui controls such as menus, command buttons, dialog boxes and scroll bars.
...And 14 more matches
Extending a Protocol
the tutorial is designed for beginners and will walk you through all the steps you need to
get things working.
... now let's implement the method in ./dom/base/navigator.cpp - we add a little bit of error boilerplate stuff, as is customary: already_addrefed<promise> navigator::echo(const nsastring& astring, errorresult& arv) { if (!mwindow || !mwindow->
getdocshell()) { arv.throw(ns_error_unexpected); return nullptr; } refptr<promise> echopromise = promise::create(mwindow->asglobal(), arv); if (ns_warn_if(arv.failed())) { return nullptr; } // message passing magic will happen here!
... return echopromise.for
get(); } ok, let's ./mach build and make sure everything is compiling ok.
...And 14 more matches
imgIContainer
obsolete since gecko 2.0 void
getcurrentframerect(in nsintrect aframerect); native code only!
... obsolete since gecko 2.0 gfxasurface
getframe(in pruint32 awhichframe, in pruint32 aflags); native code only!
... gfxiimageframe
getframeat(in unsigned long index); obsolete since gecko 1.9.2 void
getframecolormap(in unsigned long framenumber, [array, size_is(palettelength)] out pruint32 palettedata, out unsigned long palettelength); obsolete since gecko 2.0 unsigned long
getframeimagedatalength(in unsigned long framenumber); obsolete since gecko 2.0 imagecontainer
getimagecontainer(); native code only!
...And 14 more matches
nsIContentPrefService2
method overview void addobserverforname(in astring name, in nsicontentprefobserver observer); void
getbydomainandname(in astring domain, in astring name, in nsiloadcontext context, in nsicontentprefcallback2 callback); void
getbysubdomainandname(in astring domain, in astring name, in nsiloadcontext context, in nsicontentprefcallback2 callback); nsicontentpref
getcachedbydomainandname(in astring domain, in astring name, in nsiloadcontext context); voi...
...d
getcachedbysubdomainandname(in astring domain, in astring name, in nsiloadcontext context, out unsigned long len, [retval,array,size_is(len)] out nsicontentpref prefs); nsicontentpref
getcachedglobal(in astring name, in nsiloadcontext context); void
getglobal(in astring name, in nsiloadcontext context, in nsicontentprefcallback2 callback); void removealldomains(in nsiloadcontext context, [optional] in nsicontentprefcallback2 callback); void removeallglobals(in nsiloadcontext context, [optional] in nsicontentprefcallback2 callback); void removebydomain(in astring domain, in nsiloadcontext context, [optional] in nsicontentprefcallback2 callback); void removebydomainandname(in astring domain, in ast...
...
getbydomainandname()
gets the preference with the given domain and name.
...And 14 more matches
nsISelectionPrivate
method overview void addselectionlistener(in nsiselectionlistener newlistener); void endbatchchanges(); void
getcachedframeoffset(in nsiframe aframe, in print32 inoffset, in nspointref apoint); native code only!
... nsienumerator
getenumerator(); nsframeselection
getframeselection(); native code only!
... void
getrangesforinterval(in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, out pruint32 resultcount, [retval, array, size_is(resultcount)] out nsidomrange results); void
getrangesforintervalarray(in nsinode beginnode, in print32 beginoffset, in nsinode endnode, in print32 endoffset, in boolean allowadjacent, in rangearray results); native code only!
...And 14 more matches
nsITreeColumns
last changed in gecko 1.9 (firefox 3) inherits from: nsisupports method overview nsitreecolumn
getcolumnat(in long index); nsitreecolumn
getcolumnfor(in nsidomelement element); nsitreecolumn
getfirstcolumn(); nsitreecolumn
getkeycolumn(); nsitreecolumn
getlastcolumn(); nsitreecolumn
getnamedcolumn(in astring id); nsitreecolumn
getprimarycolumn(); nsitreecolumn
getsortedcolumn(); void invalidatecolumns(); void restorenaturalorder(); attributes attribute type description count long the number of columns.
... tree nsitreeboxobject the tree wid
get for these columns.
... methods
getcolumnat()
get the column for a given index.
...And 14 more matches
nsIZipReader
method overview void close(); void extract(in autf8string zipentry, in nsifile outfile); void extract(in string zipentry, in nsifile outfile); obsolete since gecko 10 nsiutf8stringenumerator findentries(in autf8string apattern); nsiutf8stringenumerator findentries(in string apattern); obsolete since gecko 10 nsiprincipal
getcertificateprincipal(in autf8string aentryname); nsiprincipal
getcertificateprincipal(in string aentryname); obsolete since gecko 10 nsizipentry
getentry(in autf8string zipentry); nsizipentry
getentry(in string zipentry); obsolete since gecko 10 nsiinputstream
getinputstream(in autf8string zipentry); nsiinputstream
getinputstream(in string zipentry); obsolete sinc...
...e gecko 10 nsiinputstream
getinputstreamwithspec(in autf8string ajarspec, in autf8string zipentry); nsiinputstream
getinputstreamwithspec(in autf8string ajarspec, in string zipentry); obsolete since gecko 10 boolean hasentry(in autf8string zipentry); void init(in nsifile zipfile); obsolete since gecko 1.9 void open(in nsifile zipfile); void openinner(in nsizipreader zipreader, in autf8string zipentry); void openinner(in nsizipreader zipreader, in string zipentry); obsolete since gecko 10 void test(in autf8string aentryname); void test(in string aentryname); obsolete since gecko 10 attributes attribute type description file nsifile the file that represents the zip with which this zip r...
...set this parameter to null (javascript) or emptycstring() (c++) to
get all entries; otherwise, use the following syntax: * matches anything.
...And 14 more matches
Storage
getting started this document covers the storage api and some peculiarities of sqlite.
... the overall procedure for use is:
get the storage service - mozistorageservice.
... opening a connection javascript example of opening my_db_file_name.sqlite in the profile directory: components.utils.import("resource://gre/modules/services.jsm"); components.utils.import("resource://gre/modules/fileutils.jsm"); let file = fileutils.
getfile("profd", ["my_db_file_name.sqlite"]); let dbconn = services.storage.opendatabase(file); // will also create the file if it does not exist likewise, the c++ would look like this: nscomptr<nsifile> dbfile; rv = ns_
getspecialdirectory(ns_app_user_profile_50_dir,
getter_addrefs(dbfile)); ns_ensure_success(rv, rv); rv = dbfile->append(ns_literal_string("my_db_file_na...
...And 14 more matches
Multi-touch interaction - Web APIs
the pointer is a hardware-agnostic device that can tar
get a specific set of screen coordinates.
... define touch tar
gets the application uses <div> to define three different touch tar
get areas.
... <style> div { margin: 0em; padding: 2em; } #tar
get1 { background: white; border: 1px solid black; } #tar
get2 { background: white; border: 1px solid black; } #tar
get3 { background: white; border: 1px solid black; } </style> global state to support multi-touch interaction, preserving a pointer's event state during various event phases is required.
...And 14 more matches
RequestDestination - Web APIs
"audio" the tar
get is audio data.
... "audioworklet" the tar
get is data being fetched for use by an audio worklet.
... "document" the tar
get is a document (html or xml).
...And 14 more matches
Reflect - JavaScript
static methods reflect.apply(tar
get, thisargument, argumentslist) calls a tar
get function with arguments as specified by the argumentslist parameter.
... reflect.construct(tar
get, argumentslist[, newtar
get]) the new operator as a function.
... equivalent to calling new tar
get(...argumentslist).
...And 14 more matches
Promises - Archive of obsolete content
let config = json.parse( yield os.file.read(configpath, { encoding: "utf-8" })); let files = []; //
get the directory contents from a list of directories.
... let resp = yield new promise((resolve, reject) => { let xhr = new xmlhttprequest; xhr.onload = resolve; xhr.onerror = reject; xhr.open("
get", dataurl); xhr.responsetype = "json"; xhr.send(); }); let data = resp.tar
get.response; // use the response to construct form data object for the // second request.
... notifyuser(resp.tar
get.responsetext); }); example using promise-based helper the following example relies on the helper function defined below.
...And 13 more matches
Space Manager Detailed Design - Archive of obsolete content
*/ class nsspacemanager { public: nsspacemanager(nsipresshell* apresshell, nsiframe* aframe); ~nsspacemanager(); void* operator new(size_t asize); void operator delete(void* aptr, size_t asize); static void shutdown(); /* *
get the frame that's associated with the space manager.
... * * you can use queryinterface() on this frame to
get any additional * interfaces.
... */ nsiframe*
getframe() const { return mframe; } /** * translate the current origin by the specified (dx, dy).
...And 13 more matches
Extensions - Archive of obsolete content
instead of having separate context menus depending on what type of element was the tar
get of the context menu, only one context menu is used and items that don't apply to that type of element are hidden from the menu as needed.
... function init() { var contextmenu = document.
getelementbyid("contentareacontextmenu"); if (contextmenu) contextmenu.addeventlistener("popupshowing", thumbnailsshowhideitems, false); } function thumbnailsshowhideitems(event) { var show = document.
getelementbyid("thumbnail-show"); show.hidden = (document.popupnode.localname != "img"); } the init function should be called within the handler for the load event so that the popupshowing ...
...this function retrieves the menuitem with the id 'thumbnail-show' that was added by the extension and hides it if an image was not the tar
get of the context menu.
...And 13 more matches
XPCOM Examples - Archive of obsolete content
the code below shows how to
get a component which implements it: var wmdata = components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"].
getservice(); wmdata.queryinterface(components.interfaces.nsiwindowdatasource); this code retrieves a window mediator data source component.
...you can also
get this component through the rdf service, which is another service that manages rdf datasources.
... the nsiwindowdatasource interface has a function
getwindowforresource, which can be used to
get the window given a resource.
...And 13 more matches
XUL Questions and Answers - Archive of obsolete content
return to mozilla-dev-tech-xul summaries the frequently asked questions should be moved to xul faq (make sure they have a clear answer.) where can i
get more information about creating mozsearch plugins?
... is there an editor wid
get in xul that supports syntax highlighting?
... support for non-rdf datasources for xul template is planned (bug 321170): xml datasources (bug 321171) storage (sqlite) datasources (bug 321172) when loading an xslt stylesheet into an xml i
get the error: "error loading stylesheet: an xslt stylesheet load was blocked for security reasons." that error is from a security check that has been put up to safeguard against cross-site-scripting attacks.
...And 13 more matches
richlistbox - Archive of obsolete content
lekeynavigation, preference, seltype, suppressonselect, tabindex, value properties accessibletype, currentindex, currentitem, disabled, disablekeynavigation, itemcount, scrollboxobject, selectedcount, selectedindex, selecteditem, selecteditems, seltype, suppressonselect, tabindex, value methods additemtoselection, appenditem, clearselection, ensureelementisvisible, ensureindexisvisible,
getindexoffirstvisiblerow,
getindexofitem,
getitematindex,
getnumberofvisiblerows,
getrowcount,
getselecteditem, insertitemat, invertselection, movebyoffset, removeitemat, removeitemfromselection, scrolltoindex, selectall, selectitem, selectitemrange, timedselect, toggleitemselection examples <richlistbox> <richlistitem> <description>a xul description!</description> </richlistitem> <rich...
...for those elements, setattribute("value", myvalue) and
getattribute("value") do not access or affect the contents displayed to the user.
... disabled type: boolean
gets and sets the value of the disabled attribute.
...And 13 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
40 breadcrumb accessibility, glossary, navigation, search, site map, breadcrumb a breadcrumb, or breadcrumb trail, is a navigational aid that is typically placed between a site's header and the main content, displaying either a hierarchy of the current page in relation to the the site's structure, from top level to current page, or a list of the links the user followed to
get to the current page, in the order visited.
...challenge-response protocols are one way to fight against replay attacks where an attacker listens to the previous messages and resends them at a later time to
get the same credentials as the original message.
... 114 distributed denial of service attack, ddos, denial of service, glossary, intro, security a distributed denial-of-service (ddos) is an attack in which many compromised systems are made to attack a single tar
get, in order to swamp server resources and block legitimate users.
...And 13 more matches
WAI-ARIA basics - Learn web development
a whole new set of problems as web apps started to
get more complex and dynamic, a new set of accessibility features and problems started to appear.
... the problem here is that visually they work, but screenreaders can't make any sense of what they are at all, and their users just
get told that they can see a jumble of elements with no semantics to describe what they mean.
... an important point about wai-aria attributes is that they don't affect anything about the web page, except for the information exposed by the browser's accessibility apis (where screenreaders
get their information from).
...And 13 more matches
How to structure a web form - Learn web development
the <fieldset> and <legend> elements the <fieldset> element is a convenient way to create groups of wid
gets that share the same purpose, for styling and semantic purposes.
... when reading the above form, a screen reader will speak "fruit juice size small" for the first wid
get, "fruit juice size medium" for the second, and "fruit juice size large" for the third.
...ideally, long forms should be spread across multiple pages, but if a form is
getting long and must be on a single page, putting the different related sections inside different fieldsets improves usability.
...And 13 more matches
CSS property compatibility table for form controls - Learn web development
the property has no meaning for this type of wid
get.
... rule below: * { /* turn off the native look and feel */ -webkit-appearance: none; appearance: none; /* for internet explorer */ background: none; } compatibility tables global behaviors some behaviors are common to many browsers at a global level: border, background, border-radius, height using one of these properties can partially or fully turn off the native look & feel of wid
gets on some browsers.
... text-decoration this property is not supported by opera on form wid
gets.
...And 13 more matches
What is JavaScript? - Learn web development
we can mark it up using html to give it structure and purpose: <p>player 1: chris</p> then we can add some css into the mix to
get it looking nice: p { font-family: 'helvetica neue', helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px; padding: 3px 10px; display: inline-block; cursor: pointer; } and final...
...they do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them to
gether to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and then put them to
gether to make a bookshelf.
... audio and video apis like htmlmediaelement and webrtc allow you to do really interesting things with multimedia, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else's computer (try our simple snapshot demo to
get the idea).
...And 13 more matches
Working with Svelte stores - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to
get to the current app state, run cd mdn-svelte-tutorial/06-stores or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/06-stores remember to run npm install && npm run dev to start your app in development mode.
... moreover, when your app becomes complicated and your component hierarchy
gets complex, it might become too difficult for components to relay data between each other.
...if you create your own stores honoring the store contract, you
get this reactivity syntactic sugar for free.
...And 13 more matches
How to implement a custom autocomplete search component
thunderbird 2.x and seamonkey 1.1.x support the toolkit interfaces, although they do not use the same autocomplete wid
get.
... note: when copying the examples below, change the uuid that uniquely identifies the component, otherwise you might have problems if your component
gets installed along another component derived from those same examples.
...so,
get a uuid from http://www.famkruithof.net/uuid/uuidgen, for example, and paste it in.
...And 13 more matches
Localization formats
there are 4 main approaches to web l10n with regards to the choice of technology used for localization logic: html/php .lang
gettext (.po) wiki (tbd) the choice of the filetype depends on a couple of factors: how much content is there to be localized?
...you may choose to present just the html for localization: we give an html file which lists several pieces of content like, <h1>
getting started</h1> and the localizer translates to <h1>débuter avec firefox</h1> the localizer then submits the translated html or php back to us by either checking in changes to svn or sending us a patch that pascal checks in.
... can be hard to tell what has changed .lang files historically, mozilla has used a
gettext-like file to present content for localization.
...And 13 more matches
AsyncTestUtils extended framework
this is how asynchronous callbacks
get their chance to run again.
...this allows you to write reasonably normal looking functions instead of having to chain to
gether a whole bunch of functions and callbacks.
...if you pass a number greater than 1, then you
get a direct reply-chain that long.
...And 13 more matches
Enc Dec MAC Output Public Key as CSR
} rv = readderfromfile(&reqder, infilename, ascii); if (rv) { rv = secfailure; goto cleanup; } certreq = (certcertificaterequest*) port_arenazalloc (arena, sizeof(certcertificaterequest)); if (!certreq) { rv = secfailure; goto cleanup; } certreq->arena = arena; /* since cert request is a signed data, must decode to
get the inner data */ port_memset(&signeddata, 0, sizeof(signeddata)); rv = sec_asn1decodeitem(arena, &signeddata, sec_asn1_
get(cert_signeddatatemplate), &reqder); if (rv) { rv = secfailure; goto cleanup; } rv = sec_asn1decodeitem(arena, certreq, sec_asn1_
get(cert_certificaterequesttemplate), &signe...
...goto cleanup; } rv = cert_verifysigneddatawithpublickeyinfo(&signeddata, &certreq->subjectpublickeyinfo, null /* wincx */); publickey = seckey_extractpublickey(&certreq->subjectpublickeyinfo); cleanup: if (reqder.data) { secitem_freeitem(&reqder, pr_false); } if (arena) { port_freearena(arena, pr_false); } return publickey; } /* *
get the private key corresponding to public key */ seckeyprivatekey *
getrsaprivatekey(pk11slotinfo *slot, secupwdata *pwdata, seckeypublickey *pubkey) { seckeyprivatekey *privkey = null; secitem *cka_id; if (slot == null) { fprintf(stderr, "empty slot\n"); goto cleanup; } if (pk11_authenticate(...
...slot, pr_true, pwdata) != secsuccess) { fprintf(stderr, "could not authenticate to token %s.", pk11_
gettokenname(slot)); goto cleanup; } cka_id = &pubkey->u.rsa.modulus; cka_id = pk11_makeidfrompubkey(cka_id); privkey = pk11_findkeybykeyid(slot, cka_id, pwdata); cleanup: return privkey; } /* * generate the certificate request with subject */ static secstatus certreq(seckeyprivatekey *privk, seckeypublickey *pubk, keytype keytype, secoidtag hashalgtag, certname *subject, prbool ascii, const char *certreqfilename) { certsubjectpublickeyinfo *spki = null; certcertificaterequest *cr = null; secitem *encoding = null; secoidtag signalgtag; secitem...
...And 13 more matches
Utilities for nss samples
get seed from a noise gile.
...
get a module password.
... /* pw_external = 3 */ } source; char *data; /* depending on source this can be the actual * password or the file to read it from */ } secupwdata; /* * printasascii */ extern void printasascii(prfiledesc* out, const unsigned char *data, unsigned int len); /* * printashex */ extern void printashex(prfiledesc* out, const unsigned char *data, unsigned int len); /* *
getdigit */ extern int
getdigit(char c); /* * hextobuf */ extern int hextobuf(unsigned char *instring, secitem *outbuf, prbool ishexdata); /* * filetoitem */ extern secstatus filetoitem(secitem *dst, prfiledesc *src); /* * checkpassword */ extern prbool checkpassword(char *cp); /* *
getpassword */ extern char *
getpassword(file *input, file *output, char *pr...
...And 13 more matches
PKCS11 Implement
c_
getfunctionlist the nss calls c_
getfunctionlist on startup or when it loads a new module.
... c_
getinfo the nss calls c_
getinfo on startup or when it loads a new module.
... slot and token management c_
getslotlist the nss calls c_
getslotlist on startup or when it loads a new module, requests all the module's slots, and keeps track of the list from that point on.
...And 13 more matches
IAccessibleText
method overview hresult addselection([in] long startoffset, [in] long endoffset ); [prop
get] hresult attributes([in] long offset, [out] long startoffset, [out] long endoffset, [out] bstr textattributes ); [prop
get] hresult caretoffset([out] long offset ); [prop
get] hresult characterextents([in] long offset, [in] enum ia2coordinatetype coordtype, [out] long x, [out] long y, [out] long width, [out] long height ); [prop
get] hresult ncharacters([out] long ncharacters ); [prop
get] hr...
...esult newtext([out] ia2textsegment newtext ); [prop
get] hresult nselections([out] long nselections ); [prop
get] hresult offsetatpoint([in] long x, [in] long y, [in] enum ia2coordinatetype coordtype, [out] long offset ); [prop
get] hresult oldtext([out] ia2textsegment oldtext ); hresult removeselection([in] long selectionindex ); hresult scrollsubstringto([in] long startindex, [in] long endindex, [in] enum ia2scrolltype scrolltype ); hresult scrollsubstringtopoint([in] long startindex, [in] long endindex, [in] enum ia2coordinatetype coordinatetype, [in] long x, [in] long y ); [prop
get] hresult selection([in] long selectionindex, [out] long startoffset, [out] long endoffset ); hresult setcaretoffset([in] long offset ); hresult setselection([in] long selectionindex, [in] long st...
...artoffset, [in] long endoffset ); [prop
get] hresult text([in] long startoffset, [in] long endoffset, [out] bstr text ); [prop
get] hresult textafteroffset([in] long offset, [in] enum ia2textboundarytype boundarytype, [out] long startoffset, [out] long endoffset, [out] bstr text ); [prop
get] hresult textatoffset([in] long offset, [in] enum ia2textboundarytype boundarytype, [out] long startoffset, [out] long endoffset, [out] bstr text ); [prop
get] hresult textbeforeoffset([in] long offset, [in] enum ia2textboundarytype boundarytype, [out] long startoffset, [out] long endoffset, [out] bstr text ); methods addselection() adds a text() selection().
...And 13 more matches
nsIEditorSpellCheck
editorspellchecker;1"] .createinstance(components.interfaces.nsieditorspellcheck); method overview void addwordtodictionary(in wstring word); boolean canspellcheck(); void checkcurrentdictionary(); boolean checkcurrentword(in wstring suggestedword); boolean checkcurrentwordnosuggest(in wstring suggestedword); astring
getcurrentdictionary(); void
getdictionarylist([array, size_is(count)] out wstring dictionarylist, out pruint32 count); wstring
getnextmisspelledword(); void
getpersonaldictionary(); wstring
getpersonaldictionaryword(); wstring
getsuggestedword(); void ignorewordalloccurrences(in wstring word); void initspellchecker(in nsieditor editor, i...
...if the word is misspelled, it will compute the suggestions which you can
get from
getsuggestedword().
...
getcurrentdictionary() returns the name of the dictionary currently in use.
...And 13 more matches
nsIMessenger
method overview void setdisplaycharset(in acstring acharset); void setwindow(in nsidomwindow ptr, in nsimsgwindow msgwindow); void openurl(in acstring aurl); void loadurl(in nsidomwindow ptr, in acstring aurl); void launchexternalurl(in acstring aurl); boolean canundo(); boolean canredo(); unsigned long
getundotransactiontype(); unsigned long
getredotransactiontype(); void undo(in nsimsgwindow msgwindow); void redo(in nsimsgwindow msgwindow); void sendunsentmessages(in nsimsgidentity aidentity, in nsimsgwindow amsgwindow); void setdocumentcharset(in acstring characterset); void saveas(in acstring auri, in boolean aasfile, in nsimsgidentity aident...
...)] in string messageuriarray, in boolean savefirst, [optional] in boolean withoutwarning); nsilocalfile saveattachmenttofolder(in acstring contenttype, in acstring url, in acstring displayname, in acstring messageuri, in nsilocalfile adestfolder); nsimsgmessageservice messageservicefromuri(in acstring auri); nsimsgdbhdr msghdrfromuri(in acstring auri); acstring
getmsguriatnavigatepos(in long apos); acstring
getfolderuriatnavigatepos(in long apos); void
getnavigatehistory(out unsigned long acurpos, out unsigned long acount, [array, size_is(acount)] out string ahistory); note: prior to gecko 8.0, all references to nsidomwindow used in this interface were nsidomwindow.
...
getundotransactiontype()
gets the type of the next undo transaction.
...And 13 more matches
Working with Multiple Versions of Interfaces
to do this i used the accessibility framework: hwnd
gethwnd(nsidomnode *node){ hwnd self = null; nsresult rv; nscomptr<nsiaccessibleretrieval> refp; refp = do_createinstance( "@mozilla.org/accessibleretrieval;1", &rv); if (ns_failed(rv)){ return self; } //line 6.
... nscomptr<nsiaccessible> accnode; rv = refp->
getaccessiblefor(node,
getter_addrefs(accnode)); if(ns_failed(rv)){ return self; } void *wh = null; nscomptr<nsiaccessibledocument> accdocnode; accdocnode = do_queryinterface(accnode, &rv); if(ns_failed(rv)){ return self; } rv = accdocnode->
getwindowhandle(&wh); if(ns_succeeded(rv)){ self = static_cast<hwnd>(wh); } return self; } this approach worked, as is, for versions as early as firefox 1.5.
...this is because the call to do_createinstance(acid, aouter, error); will eventually evolve into a request for an object supporting the interface with iid ns_
get_iid(nsiaccessibleretrieval).
...And 13 more matches
Mozilla
this guide provides information that will not only help you
get started as a mozilla contributor, but that you'll find useful to refer to even if you are already an experienced contributor.
...
getting from content to layout gecko maintains two separate representations of a document in memory: the content tree and the frame tree.
... changes to a document originate in the content tree (from dom modification by scripting, insertion of elements from the parser, etc.) and are propogated to the layout tree through magic that primarily resides in //github.com/realityripple/uxp/blob/master/layout/base/nscssframeconstructor.cpp
getting started with chat note that on 2nd march 2020, mozilla moved away from irc to matrix for its public channels, the irc server was shut down.
...And 13 more matches
Drawing and Event Handling - Plugins
it is drawn in a tar
get called a drawable, which corresponds to either the browser window or an off-screen bitmap.
... the npwindow structure when a plug-in is loaded, it is drawn into a tar
get area.
... this tar
get is either the windowed plug-in's native window, or the drawable of a windowless plug-in.
...And 13 more matches
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
example: creating an html table dynamically (sample1.html) html <input type="button" value="generate a table." onclick="generate_table()"> javascript function generate_table() { //
get the reference for the body var body = document.
getelementsbytagname("body")[0]; // creates a <table> element and a <tbody> element var tbl = document.createelement("table"); var tblbody = document.createelement("tbody"); // creating all cells for (var i = 0; i < 2; i++) { // creates a table row var row = document.createelement("tr"); for (var j = 0; j < 2; j++) { ...
... example: setting the background color of a paragraph
getelementsbytagname(tagnamevalue) is a method available in any dom element or the root document element.
... html <body> <input type="button" value="set paragraph background color" onclick="set_background()"> <p>hi</p> <p>hello</p> </body> javascript function set_background() { //
get a list of all the body elements (there will only be one), // and then select the zeroth (or first) such element mybody = document.
getelementsbytagname("body")[0]; // now,
get all the p elements that are descendants of the body mybodyelements = mybody.
getelementsbytagname("p"); //
get the second item of the list of p elements myp = mybodyelements[1]; myp.style.background = "rgb(255,0,0)"; } in this example, we set the myp vari...
...And 13 more matches
Dragging and Dropping Multiple Items - Web APIs
these are methods that mirror the types property as well as the
getdata(), setdata() and cleardata() methods, however, they take an additional argument that specifies the index of the item to retrieve, modify or remove.
... setting and
getting with indices the mozsetdataat() method allows you to add multiple items during a dragstart event.
...the ensures that receiving drop tar
gets can expect consistent data.
...And 13 more matches
SVGSVGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180"...
...And 13 more matches
SubtleCrypto.wrapKey() - Web APIs
let salt; /*
get some key material to use as input to the derivekey method.
...*/ function
getkeymaterial() { const password = window.prompt("enter your password"); const enc = new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* given some key material and some random salt derive an aes-kw key using pbkdf2.
... */ function
getkey(keymaterial, salt) { return window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-256" }, keymaterial, { "name": "aes-kw", "length": 256}, true, [ "wrapkey", "unwrapkey" ] ); } /* wrap the given key.
...And 13 more matches
Using DTMF with WebRTC - Web APIs
this
gets figured out in connectanddial(), as shown in starting the connection process.
...they'll
get set up when the page is first loaded.
...gstatechange = handlecallersignalingstatechangeevent; callerpc.onicegatheringstatechange = handlecallergatheringstatechangeevent; receiverpc = new rtcpeerconnection(); receiverpc.onicecandidate = handlereceivericeevent; if (hasaddtrack) { receiverpc.ontrack = handlereceivertrackevent; } else { receiverpc.onaddstream = handlereceiveraddstreamevent; } navigator.mediadevices.
getusermedia(mediaconstraints) .then(gotstream) .catch(err => log(err.message)); } after creating the rtcpeerconnection for the caller (callerpc), we look to see if it has an addtrack() method.
...And 13 more matches
Architecture - Accessibility
it is concatenated to
gether with all its sibling text nodes, and embedded objects between the text nodes are exposed as the unicoded embedded object character '\xfffc'.
...they are in the nsiaccessible hierarchy to make it easy for nshypertextaccessible to piece its final text representation to
gether.
...they end up
getting exposed as '\n' in their parent nshypertextaccessible.
...And 13 more matches
Object.defineProperty() - JavaScript
an accessor descriptor is a property described by a
getter-setter pair of functions.
... an accessor descriptor also has the following optional keys:
get a function which serves as a
getter for the property, or undefined if there is no
getter.
... if a descriptor has neither of value, writable,
get and set keys, it is treated as a data descriptor.
...And 13 more matches
event/core - Archive of obsolete content
also see the tutorial on implementing event tar
gets to
get started with this api.
... an event listener may be registered to any event tar
get using the on function: var { on, once, off, emit } = require('sdk/event/core'); var tar
get = { name: 'tar
get' }; on(tar
get, 'message', function listener(event) { console.log('hello ' + event); }); on(tar
get, 'data', console.log); an event of a specific type may be emitted on any event tar
get object using the emit function.
... this will call all registered listeners for the given type on the given event tar
get in the same order they were registered.
...And 12 more matches
JavaScript Daemons Management - Archive of obsolete content
daemon.prototype.unmakeloop = function () { this.reversals = 0; }; daemon.prototype.setrate = function (vto) { var nrate = number(vto); if (!isfinite(nrate) || nrate < 1) { return; } this.rate = nrate; this.synchronize(); }; daemon.prototype.forceposition = function (vto) { if (isfinite(vto)) { this.index = math.round(math.abs(vto)); } }; daemon.prototype.
getduration = function () { return this.rate * this.length; }; daemon.prototype.
getdirection = function () { return this.isatend() !== this.backw; }; daemon.prototype.
getposition = function () { return this.index; }; /* instantaneous movement (synchronous).
...vdate.
gettime() : isnan(vdate) ?
...vdate.
gettime() : isnan(vdate) ?
...And 12 more matches
Install Manifests - Archive of obsolete content
examples <em:name>my extension</em:name> tar
getapplication an object specifying an application tar
geted by this add-on.
...not in <em:tar
getapplication>).
... the install manifest must specify at least one of these objects, and may specify more if the add-on tar
gets multiple applications that support the add-on manager (e.g.
...And 12 more matches
Search Extension Tutorial (Draft) - Archive of obsolete content
var firstrun = false; //
get the root user preference branch.
... var userprefs = services.prefs.
getbranch(""); //
get the root default preference branch.
... var defaultprefs = services.prefs.
getdefaultbranch(""); // save the original values.
...And 12 more matches
NPAPI plugin reference - Archive of obsolete content
np_
getmimedescription np_
getmimedescription returns a supported mime type list for your plugin.
... np_
getvalue allows the browser to query the plug-in for information.
... npn_enumerate
gets the names of the properties and methods of the specified npobject.
...And 12 more matches
HTML: A good basis for accessibility - Learn web development
even better, semantic markup has other benefits beyond accessibility: easier to develop with — as mentioned above, you
get some functionality for free, plus it is arguably easier to understand.
... let's
get on and look at accessible html in more detail.
... sometimes you are not in the position to
get rid of lousy markup — your pages might be generated by some kind of server-side framework over which you don't have full control, or you might have third party content on your page (such as ad banners) over which you have no control.
...And 12 more matches
HTML: A good basis for accessibility - Learn web development
even better, semantic markup has other benefits beyond accessibility: easier to develop with — as mentioned above, you
get some functionality for free, plus it is arguably easier to understand.
... let's
get on and look at accessible html in more detail.
... sometimes you are not in the position to
get rid of lousy markup — your pages might be generated by some kind of server-side framework over which you don't have full control, or you might have third party content on your page (such as ad banners) over which you have no control.
...And 12 more matches
Advanced form styling - Learn web development
these include: elements involved in creating dropdown wid
gets, including <select>, <option>, <optgroup> and <datalist>.
...however, this seems to
get rid of the icon with focus too, with no apparent way to
get it back.
...er rendering firefox 71 (macos) firefox 57 (windows 10) chrome 77 (macos), safari 13, opera chrome 63 (windows 10) internet explorer 11 (windows 10) edge 16 (windows 10) using appearence: none on radios/checkboxes as we showed before, you can remove the default appearance of a checkbox or radio button alto
gether with appearance:none; let's take this example html: <form> <fieldset> <legend>fruit preferences</legend> <p> <label> <input type="checkbox" name="fruit-1" value="cherry"> i like cherry </label> </p> <p> <label> <input type="checkbox" name="fruit-2" value="banana" disabled> i can't like banana </label> </p> <p> ...
...And 12 more matches
Introduction to cross browser testing - Learn web development
on modern browsers you might
get something animated, 3d and shiny, whereas on older browsers you might just
get a flat graphic representing the same information.
...before you even
get to cross browser issues, you should have already fixed out bugs in your code (see debugging html, debugging css, and what went wrong?
...this is inevitable when you are dealing with bleeding edge features that browsers are just
getting round to implementing, or if you have to support really old browsers that are no longer being developed, which may have been frozen (i.e.
...And 12 more matches
Embedding the editor
note here that i use the term 'composer' to mean an html-savvy compose wid
get that does rich text editing, and 'editor' to mean a plain text editor (as well as the underlying technology for composer).
... <htmlarea> is intended as a shorthand for a rich-text multiline text wid
get embedded in an html document, and is not meant to infer that future versions of mozilla will support this specific tag.
... composer embedded in a xul application developers need to embed composer wid
gets in their xul applications, by using the <editor> tag as we do today.
...And 12 more matches
Downloads.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/downloads.jsm"); method overview promise<download> createdownload(object aproperties); promise<void> fetch(asource, atar
get, [optional] object aoptions); promise<downloadlist>
getlist(atype); promise<downloadsummary>
getsummary(atype); constants constant description public work on downloads that were not started from a private browsing window.
...example (using task.jsm): try { yield downloads.fetch(sourceuri, tar
getfile); } catch (ex if ex instanceof downloads.error && ex.becausetar
getfailed) { console.log("unable to write to the tar
get file, ignoring the error."); } methods createdownload() creates a new download object.
... tar
get: string containing the path of the tar
get file.
...And 12 more matches
JNI.jsm
method overview cdata
getforthread(); cdata loadclass(cdata ajenv, string aclassfullyqualifiedname, [optional] object adeclares); cdata newstring(cdata ajenv, string astr); string readstring(cdata ajenv, cdata ajavastring); void unloadclasses(); methods
getforthread() blah blah cdata
getforthread(); parameters this function does not take any arguments.
... return value blah blah loadclass() blah blah cdata loadclass( ajenv, afullyqualifiedname, [optional] object adeclares ); parameters ajenv the return value of
getforthread().
... return value blah blah newstring() blah blah cdata newstring( ajenv, astr ); parameters ajenv the return value of
getforthread().
...And 12 more matches
Profiling with the Firefox Profiler
using the firefox profiler visit profiler.firefox.com to
get started.
... it has instructions for enabling the profiler menu button, and
getting going.
...in addition to profiler.firefox.com, the firefox devtools have a simplified interface tar
geted towards web developers, but does not include as much information as the firefox profiler web app.
...And 12 more matches
Hacking Tips
debugging tips
getting help (from js shell) use the help function to
get the list of all primitive functions of the shell with their description.
...
getting the bytecode of a function (from js shell) the shell has a small function named dis to dump the bytecode of a function with its source notes.
... js> function f () { return 1; } js> dis(f); flags: loc op ----- -- main: 00000: one 00001: return 00002: stop source notes: ofs line pc delta desc args ---- ---- ----- ------ -------- ------ 0: 1 0 [ 0] newline 1: 2 0 [ 0] colspan 2 3: 2 2 [ 2] colspan 9
getting the bytecode of a function (from gdb) in jsopcode.cpp, a function named js::disassembleatpc can print the bytecode of a script.
...And 12 more matches
nsIBrowserSearchService
to access this service, use: var browsersearchservice = components.classes["@mozilla.org/browser/search-service;1"] .
getservice(components.interfaces.nsibrowsersearchservice); attempting to use any method or attribute of this interface before init() has completed will force the service to fall back to a slower, synchronous, initialization.
... method overview void addengine(in astring engineurl, in long datatype, in astring iconurl, in boolean confirm, [optional] in nsisearchinstallcallback callback); void addenginewithdetails(in astring name, in astring iconurl, in astring alias, in astring description, in astring method, in astring url); void
getdefaultengines([optional] out unsigned long enginecount, [retval, array, size_is(enginecount)] out nsisearchengine engines); nsisearchengine
getenginebyalias(in astring alias); nsisearchengine
getenginebyname(in astring aenginename); void
getengines([optional] out unsigned long enginecount, [retval, array, size_is(enginecount)] out nsisearchengine en...
...gines); void
getvisibleengines([optional] out unsigned long enginecount, [retval, array, size_is(enginecount)] out nsisearchengine engines); void init([optional] in nsibrowsersearchinitobserver observer); void moveengine(in nsisearchengine engine, in long newindex); void removeengine(in nsisearchengine engine); void restoredefaultengines(); attributes attribute type description currentengine nsisearchengine the currently active search engine.
...And 12 more matches
nsIDOMEvent
nseventptr
getinternalnsevent(); violates the xpcom interface guidelines boolean
getpreventdefault(); deprecated since gecko 16.0 void initevent(in domstring eventtypearg, in boolean canbubblearg, in boolean cancelablearg); boolean isdispatchstopped(); violates the xpcom interface guidelines void preventbubble(); obsolete since gecko 24 void preventcapture(); obsol...
...ete since gecko 24 void preventdefault(); void serialize(in ipcmessageptr amsg, in boolean aserializeinterfacetype); violates the xpcom interface guidelines void settar
get(in nsidomeventtar
get atar
get); native code only!
... currenttar
get nsidomeventtar
get used to indicate the eventtar
get whose eventlisteners are currently being processed.
...And 12 more matches
nsIEffectiveTLDService
to use this service, use: var etldservice = components.classes["@mozilla.org/network/effective-tld-service;1"] .
getservice(components.interfaces.nsieffectivetldservice); the name "effective tld service" is a historical one; today, the items this interface manipulates are called public suffixes, and the list of them is the public suffix list, or psl.
...therefore, if you call
getpublicsuffix("a.b.c.nonexistent"), you will
get back "nonexistent" - this "tld" is not in the public suffix list, but the implicit "*" rule means that it is returned.
...is "pretty.flowers" a domain name, according to
getpublicsuffix()?
...And 12 more matches
nsIHttpChannel
inherits from: nsichannel last changed in gecko 1.3 to create an http channel, use nsiioservice with a http uri, for example: var ios = components.classes["@mozilla.org/network/io-service;1"] .
getservice(components.interfaces.nsiioservice); var ch = ios.newchannel("https://www.example.com/", null, null); method overview void
getoriginalresponseheader(in acstring aheader, in nsihttpheadervisitor avisitor); acstring
getrequestheader(in acstring aheader); acstring
getresponseheader(in acstring header); boolean isnocacheresponse(); boolean isnos...
... referrer nsiuri
get or set the uri of the http referer: header.
...
getting the value will not throw.
...And 12 more matches
nsIMsgDBHdr
method overview astring
getproperty(in string propertyname); void setproperty(in string propertyname, in astring propertystr); void setstringproperty(in string propertyname, in string propertyvalue); string
getstringproperty(in string propertyname); unsigned long
getuint32property(in string propertyname); void setuint32property(in string propertyname, in unsigned long propertyval...
...); void markread(in boolean read); void markflagged(in boolean flagged); void markhasattachments(in boolean hasattachments); void setprioritystring(in string priority); unsigned long orflags(in unsigned long flags); unsigned long andflags(in unsigned long flags); void setreferences(in string references); acstring
getstringreference(in long refnum); void setrecipientsarray(in string names, in string addresses,in unsigned long numaddresses); void setcclistarray(in string names, in string addresses,in unsigned long numaddresses); void setbcclistarray(in string names, in string addresses,in unsigned long numaddresses);new in thunderbird 3.1 [noscript] void
getauthorcollationkey(out octetptr...
... key, out unsigned long len); [noscript] void
getsubjectcollationkey(out octetptr key, out unsigned long len); [noscript] void
getrecipientscollationkey(out octetptr key, out unsigned long len); attributes attribute type description isread boolean readonly: indicates whether or not the message is read.
...And 12 more matches
nsIPluginHost
nsiplugin
getplugin(in string amimetype); native code only!
... void
getplugincount(out unsigned long aplugincount); obsolete since gecko 1.8 nsiplugin
getpluginfactory(in string amimetype); native code only!
... obsolete since gecko 1.9.2 void
getpluginname(in nsiplugininstance ainstance, [shared] out string apluginname); native code only!
...And 12 more matches
nsIWindowWatcher
method overview nsiwebbrowserchrome
getchromeforwindow(in nsidomwindow awindow); nsiauthprompt
getnewauthprompter(in nsidomwindow aparent); nsiprompt
getnewprompter(in nsidomwindow aparent); nsidomwindow
getwindowbyname(in wstring atar
getname, in nsidomwindow acurrentwindow); nsisimpleenumerator
getwindowenumerator(); nsidomwindow openwindow(in nsidomwindow aparent, in string aurl, in string...
... methods
getchromeforwindow() retrieve the chrome window mapped to the given dom window.
... nsiwebbrowserchrome
getchromeforwindow( in nsidomwindow awindow ); parameters awindow the nsidomwindow whose chrome window the caller needs.
...And 12 more matches
XPIDL
jsval this type
gets const when an in type.
... nsid this type
gets const when an in type.
...attributes in idl are akin to javascript properties, in that they are a
getter and (optionally) a setter pair.
...And 12 more matches
Address Book examples
how do i
get all address books?
... use the address book manager to
get an nsisimpleenumerator, then progress through the enumerator, looking for nsiabitem, nsiabcollection or nsiabdirectory interfaces as you require.
... let abmanager = components.classes["@mozilla.org/abmanager;1"] .
getservice(components.interfaces.nsiabmanager); let alladdressbooks = abmanager.directories; while (alladdressbooks.hasmoreelements()) { let addressbook = alladdressbooks.
getnext() .queryinterface(components.interfaces.nsiabdirectory); if (addressbook instanceof components.interfaces.nsiabdirectory) { // or nsiabitem or nsiabcollection // alert ("directory name:" + addressbook.dirname); ...
...And 12 more matches
Add to iPhoto
since a lot of this stuff is repetitive, we'll only look at selected parts of the code to
get an idea how things work.
...the string can be stored in any of a number of encodings, so you use assorted functions that know how to cope with different encodings to set and
get values of cfstrings, as well as to perform typical string operations.
... this.cfurl
getfsref = this.lib.declare("cfurl
getfsref", ctypes.default_abi, ctypes.bool, // returns a bool this.cfurlref, // input: url to convert ctypes.voidptr_t); // input: pointer to fsref to fill the corefoundation.cfurl
getfsref() method is used to...
...And 12 more matches
Using Objective-C from js-ctypes
it performs the following through this objective-c syntax:
get the nsspeechsynthesizer class definition.
...
get a reference to a class class definitions are retrieved with the objc_
getclass function, declared in /usr/include/objc/runtime.h.
... the objc_
getclass function receives the name of the class, looks up the definition, and returns it.
...And 12 more matches
Web Console remoting - Firefox Developer Tools
when navigation stops the following packet is sent: { "from": tabactor, "type": "tabnavigated", "state": "stop", "url": newurl, "title": newtitle, "nativeconsoleapi": true|false }
getcachedmessages(types, onresponse) the webconsoleclient.
getcachedmessages(types, onresponse) method sends the following packet to the server: { "to": "conn0.console9", "type": "
getcachedmessages", "messa
getypes": [ "pageerror", "consoleapi" ] } the
getcachedmessages packet allows one to retrieve the cached messages from before the web console was open.
... you can only
get cached messages for page errors and console api calls.
... in firefox 25 we added the
getpreferences request packet: { "to": "conn0.console34", "type": "
getpreferences", "preferences": [ "networkmonitor.saverequestandresponsebodies" ] } reply packet: { "preferences": { "networkmonitor.saverequestandresponsebodies": false }, "from": "conn0.console34" } you can also use the webconsoleclient.
getpreferences(prefs, onresponse).
...And 12 more matches
Using microtasks in JavaScript with queueMicrotask() - Web APIs
these all
get scheduled on the task queue.
... tasks
get added to the task queue when: a new javascript program or subprogram is executed (such as from a console, or by running the code in a <script> element) directly.
...and they are similar; both are made up of javascript code which
gets placed on a queue and run at an appropriate time.
...And 12 more matches
HTML Drag and Drop API - Web APIs
dragend ondragend …a drag operation ends (such as releasing a mouse button or hitting the esc key; see finishing a drag.) dragenter ondragenter …a dragged item enters a valid drop tar
get.
... (see specifying drop tar
gets.) dragexit ondragexit …an element is no longer the drag operation's immediate selection tar
get.
... dragleave ondragleave …a dragged item leaves a valid drop tar
get.
...And 12 more matches
Timing element visibility with the Intersection Observer API - Web APIs
using this api lets everything
get streamlined by the browser to reduce the impact on performance substantially.
... let's
get started!
...if you change this to -1, it will appear on the right (although some other elements will need some adjustments made to their margins to
get the spacing just right).
...And 12 more matches
MSSiteModeEvent - Web APIs
stoppropagation prevents propagation of an event beyond the current tar
get.
... properties property description actionurl
gets the url of a jump list item that is removed.
... bubbles
gets a value that indicates whether an event propagates up from the event tar
get.
...And 12 more matches
Pinch zoom gestures - Web APIs
the pinch in (zoom out) gesture, which moves the two pointers toward each other, changes the tar
get element's background color to lightblue.
... the pinch out (zoom in) gesture, which moves the two pointers away from each other, changes the tar
get element's background color to pink.
... define touch tar
get the application uses <div> to define the pointers' tar
get areas.
...And 12 more matches
RTCPeerConnection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcpeerconnection" tar
get="_top"><rect x="151" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcpeerconnection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructorrtcpeerconnection() the rtcpeerconnection() constructor returns a newly-created rtcpeerconnection, which represents a connection between the local device and a remote peer.propertiesalso inherits properties from: eventtar
getcantrickleicecandidatesthe read-only rtcpeerconnection property cantrickleicecandidates returns a boolean which indicates whethe...
...also included is a list of any ice candidates that may already have been generated by the ice agent since the offer or answer represented by the description was first instantiated.
getdefaulticeservers() the
getdefaulticeservers() method of the rtcpeerconnection interface returns an array of objects based on the rtciceserver dictionary, which indicates what, if any, ice servers the browser will use by default if none are provided to the rtcpeerconnection in its rtcconfiguration.
...And 12 more matches
Using Service Workers - Web APIs
this article provides information on
getting started with service workers, including basic architecture, registering a service worker, the install and activation process for a new service worker, updating your service worker, cache control and custom responses, all in the context of a simple app with offline functionality.
...using a service worker you can easily set an app up to use cached assets first, thus providing a default experience even when offline, before then
getting more data from the network (commonly known as offline first).
... const imgload = (url) => { return new promise((resolve, reject) => { var request = new xmlhttprequest(); request.open('
get', url); request.responsetype = 'blob'; request.onload = () => { if (request.status == 200) { resolve(request.response); } else { reject(error('image didn\'t load successfully; error code:' + request.statustext)); } }; request.onerror = () => { reject(error('there was a network error.')); }; request.send(); }); } we return a new...
...And 12 more matches
Multi-touch interaction - Web APIs
define touch tar
gets the application uses <div> elements to represent four touch areas.
... <style> div { margin: 0em; padding: 2em; } #tar
get1 { background: white; border: 1px solid black; } #tar
get2 { background: white; border: 1px solid black; } #tar
get3 { background: white; border: 1px solid black; } #tar
get4 { background: white; border: 1px solid black; } </style> global state tpcache is used to cache touch points for processing outside of the event where they were fired.
... function set_handlers(name) { // install event handlers for the given element var el=document.
getelementbyid(name); el.ontouchstart = start_handler; el.ontouchmove = move_handler; // use same handler for touchcancel and touchend el.ontouchcancel = end_handler; el.ontouchend = end_handler; } function init() { set_handlers("tar
get1"); set_handlers("tar
get2"); set_handlers("tar
get3"); set_handlers("tar
get4"); } move/pinch/zoom handler this function provides very basic support for 2-touch horizontal move/pinch/zoom handling.
...And 12 more matches
Web Authentication API - Web APIs
navigator.credentials.
get() - when used with the publickey option, uses an existing set of credentials to authenticate to a service, either logging a user in or as a form of second-factor authentication.
... please note: both create() and
get() require a secure context (e.g.
... in their most basic forms, both create() and
get() receive a very large random number called a challenge from the server and they return the challenge signed by the private key back to the server.
...And 12 more matches
HTML attribute: rel - HTML: Hypertext Markup Language
link not allowed not allowed dns-prefetch tells the browser to preemptively perform dns resolution for the tar
get resource's origin external resource not allowed not allowed external referenced document is not part of the same site as the current document.
... not allowed annotation annotation noopener creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those to begin with (i.e., has an appropriate tar
get attribute value).
... not allowed annotation annotation opener creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not anauxiliary browsing context (i.e., has "_blank" as tar
get attribute value).
...And 12 more matches
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
focus on the fact that once you
get the build working, it'll probably work effortlessly from then on.
...this file should be located in the main extension directory and look something like this: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>myextension@mycompany.com</em:id> <em:version>0.1</em:version> <em:tar
getapplication> <!-- firefox --> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.0+</em:minversion> <em:maxversion>1.0+</em:maxversion> </description> </em:tar
getapplication> <!-- front-end metadata --> <em:name>my first extension</em:name> <em:description>just an example.</em:description> <em:creator>...
...personally i would discourage this practice (among other things, static linking means the same code
gets loaded more than once into memory, and the code won't be available from javascript or other non-c++ languages) and encourage the use of xpcom wherever possible.
...And 11 more matches
Interaction between privileged and non-privileged pages - Archive of obsolete content
var myextension = { mylistener: function(evt) { alert("received from web page: " + evt.tar
get.
getattribute("attribute1") + "/" + evt.tar
get.
getattribute("attribute2")); } } document.addeventlistener("myextensionevent", function(e) { myextension.mylistener(e); }, false, true); // the last value is a mozilla-specific value to indicate untrusted content is allowed to trigger the event.
... var mainwindow = window.queryinterface(components.interfaces.nsiinterfacerequestor) .
getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsidocshelltreeitem) .roottreeitem .queryinterface(components.interfaces.nsiinterfacerequestor) .
getinterface(components.interfaces.nsidomwindow); mainwindow.document.addeventlistener("myextensionevent", function(e) { myextension.mylistener...
... document.addeventlistener("message", function(e) { yourfunction(e); }, false, true); sending data from chrome to unprivileged document to "answer" the web page (e.g., return code), your extension can set an attribute or attach child elements on the event tar
get element (<myextensiondataelement/> in this example).
...And 11 more matches
Adding preferences to an extension - Archive of obsolete content
get the code here: download the sample update the manifests the install manifest and chrome manifest need to be updated.
... var stockwatcher = { prefs: null, tickersymbol: "", // initialize the extension startup: function() { // register to receive notifications of preference changes this.prefs = components.classes["@mozilla.org/preferences-service;1"] .
getservice(components.interfaces.nsiprefservice) .
getbranch("extensions.stockwatcher2."); this.prefs.addobserver("", this, false); this.tickersymbol = this.prefs.
getcharpref("symbol").touppercase(); this.refreshinformation(); window.setinterval(this.refreshinformation, 10*60*1000); } }, our object has two member variables.
... the first thing the startup() function does is to
get a reference to the preferences for our extension.
...And 11 more matches
Index of archived content - Archive of obsolete content
message" cross-domain content scripts interacting with page scripts loading content scripts reddit example port self contributor's guide classes and inheritance content processes
getting started modules private properties firefox compatibility module structure of the sdk porting the library detector program id sdk api lifecycle sdk and xul comparison testing the add-on sdk two types of scripts ...
... notifications page-mod page-worker panel passwords private-browsing querystring request selection self simple-prefs simple-storage system tabs timers ui url wid
get windows low-level apis /loader chrome console/plain-text console/traceback content/content content/loader content/mod content/symbiont content/worker core/heritage ...
...core/namespace core/promise dev/panel event/core event/tar
get frame/hidden-frame frame/utils fs/path io/byte-streams io/file io/text-streams lang/functional lang/type loader/cuddlefish loader/sandbox net/url net/xhr places/bookmarks places/favicon places/history platform/xpcom preferences/event-tar
get preferences/service remote/child remote/parent stylesheet/style stylesheet/utils system/child_process system...
...And 11 more matches
Elements - Archive of obsolete content
to access anonymous nodes on an xbl bound element, you can use the
getanonymouselementbyattribute and
getanonymousnodes functions.
... note: prior to firefox 3, the constructor could be called at a time when reflow of the document layout was locked down, so that attempting to
get layout information from within the constructor could return out of date information.
... field <!element field empty> <!attlist field id id #implied name cdata #required readonly (true|false) #implied > a field is similar to a property, except that it should not have a
getter or setter.
...And 11 more matches
A XUL Bestiary - Archive of obsolete content
xul itself contains very little provision for how wid
gets are to be presented in the interface.
... even prior to the skinning that takes place with the global skin, which is loaded in almost every xul file you see in mozilla (and whose absence from your own xul files can make your work look strange, senseless, or invisible alto
gether), a xul.css file is loaded which provides some very basic presentational information for the wid
gets in the toolkit.
... wid
gets wid
gets are the pieces that you assemble to make an interface.
...And 11 more matches
Custom Tree Views - Archive of obsolete content
see tree wid
get changes for details.
...naturally, since a custom tree view is being used, the content tree view will not be used, so the treeitem, treerow, and treecell elements will have no purpose since the custom view will
get its data from elsewhere.
...the tree will call methods of the view to
get the information that it needs to display.
...And 11 more matches
tree - Archive of obsolete content
also tree wid
get changes.
...to
get the actual number of rows in the element, use the
getrowcount method.
...in newer versions of mozilla, the builderview property is actually a synonym for the view property, since the two interfaces are flattened to
gether into a single interface in javascript.
...And 11 more matches
Extentsions FAQ - Archive of obsolete content
just drag them there from the toolbar customisation window, like you would when adding buttons to the toolbars." option #4 install toolbar control <http://webdesigns.ms11.net/chromeditp.html> asking for help with
getting an extension to process windows messages.
..."); var replaceme = document.
getelementbyid("replaceme"); replaceme.parentnode.replacechild(newnode, replaceme); is it possible to place an image in the window that can be moved to anywhere in the window, and always remain on top of everything else?(similiar to using position:absolute and-index:100000 in html) you can almost do this with a stack: <window ...> <stack flex="1"> <image top="40" left="80"/> <vbox> other content here </vbox> </stack> </window> the only restriction is that your image can't overlap the right or bottom of the window.
... how to
get the value of a text box when a button is clicked?
...And 11 more matches
Game distribution - Game development
benefits of html5 over native building games with html5 gives you extra advantages, such as: multiplatform bliss the technology itself is multiplatform, so you can write the code once and tar
get multiple devices.
... you don't need to have separate teams to work on the same title tar
geting different platforms with only one code base to worry about.
...many html5 games will tar
get different market segments than native desktop games, e.g.
...And 11 more matches
Game monetization - Game development
the word itself acquired negative connotations after big companies focused on creating games, the main purpose of which was to
get as much money from the players as possible instead of delivering a fun experience.
... the worst cases were when you could use real money to pay for
getting advantages over other players, or when they restricted access to the next stages of the game unless the players paid.
... advertisements instead of actively selling the games you can also try to
get yourself a passive income — showing adverts and relying on previous activities related to promoting your game may benefit, but your game has to be addictive, which isn't as easy as it sounds.
...And 11 more matches
Game promotion - Game development
there are many ways to promote your game — most of them being free, so even if you're struggling to make a living as an indie dev with zero bud
get you can still do a lot to let people know about your great new game.
... competitions taking part in competitions will not only level up your gamedev skills and let you meet new devs to befriend and learn from — and it will also
get you involved in the community.
... many great games
get started as a quick, sloppy demo submitted to a competition.
...And 11 more matches
Making decisions in your code — conditionals - Learn web development
go to the beach, or the park, and
get an ice cream.'; } else if (choice === 'rainy') { para.textcontent = 'rain is falling outside; take a rain coat and an umbrella, and don\'t stay out for too long.'; } else if (choice === 'snowing') { para.textcontent = 'the snow is coming down — it is freezing!
...let\'s go out to the beach, or the park, and
get an ice cream.'; } else if (temperature >= 86) { para.textcontent = 'it is ' + temperature + ' degrees outside — really hot!
... if you want to go outside, make sure to put some sunscreen on.'; } } even though the code all works to
gether, each if...else statement works completely independently of the other one.
...And 11 more matches
Object building practice - Learn web development
objective: to
get some practice with using objects and object-oriented techniques in a real world context.
...
getting started to begin with, make local copies of our index.html, style.css, and main.js files.
... some very simple styles, which mainly serve to style and position the <h1>, and
get rid of any scrollbars or margin around the edge of the page (so that it looks nice and neat).
...And 11 more matches
Understanding client-side JavaScript frameworks - Learn web development
we want you to go forward and learn about frameworks in a pragmatic way that doesn't for
get about web platform fundamental best practices such as accessibility.
...
get started now, with "introduction to client-side frameworks" prerequisites you should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — html, css, and especially javascript.
... we have put to
gether a course that includes all the essential information you need to work towards your goal.
...And 11 more matches
Script security
the security model for web content is based on the same-origin policy, in which code
gets full access to objects from its origin but highly restricted access to objects from a different origin.
... objects that are cross-origin
get highly restricted access to each other, according to the same-origin policy.
... objects in a less privileged scope don't
get any access to objects in a more privileged scope, unless the more privileged scope explicitly clones those objects.
...And 11 more matches
Index
2 application translation with mercurial android, draft, editing, firefox, lightning, localization, mercurial, seamonkey, translate, patch, thunderbird first,
get the required programs to compile mozilla applications like firefox and thunderbird from build instructions.
...on mac and linux, you should be just fine, and on windows, mozillabuild should
get you everything you need.
... 12 localization quick start guide guide, translation this guide is filled with all of the basic, technical information you need to
get involved in the mozilla l10n program.
...And 11 more matches
NSS Sample Code Sample_3_Basic Encryption and MACing
sample code 3 /* nspr headers */ #include <prthread.h> #include <pl
getopt.h> #include <prerror.h> #include <prinit.h> #include <prlog.h> #include <prtypes.h> #include <plstr.h> /* nss headers */ #include <keyhi.h> #include <pk11priv.h> /* our samples utilities */ #include "util.h" #define buffersize 80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid-----" ...
...*/ /* nspr headers */ #include <prthread.h> #include <pl
getopt.h> #include <prerror.h> #include <prinit.h> #include <prlog.h> #include <prtypes.h> #include <plstr.h> /* * gather a cka_id */ secstatus gathercka_id(pk11symkey* key, secitem* buf) { secstatus rv = pk11_readrawattribute(pk11_typesymkey, key, cka_id, buf); if (rv != secsuccess) { pr_fprintf(pr_stderr, "pk11_readrawattribute returned (%d)\n", rv); pr_fprintf(pr_stderr,...
...eneratesymkey(pk11slotinfo *slot, ck_mechanism_type mechanism, int keysize, secitem *keyid, secupwdata *pwdata) { secstatus rv; pk11symkey *key; if (pk11_needlogin(slot)) { rv = pk11_authenticate(slot, pr_true, pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_
gettokenname(slot)); return null; } } /* generate the symmetric key */ key = pk11_tokenkeygen(slot, mechanism, null, keysize, keyid, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_...
...And 11 more matches
nss tech note5
ck_mechanism_type ciphermech = ckm_des_cbc_pad <big>(for example)</big> choose a slot on which to to do the operation pk11slotinfo* slot = pk11_
getbestslot(ciphermech, null); or pk11slotinfo* slot = pk11_
getinternalkeyslot(); /* alwys returns internal slot, may not be optimal */ prepare the key if using a raw key /* turn the raw key into a secitem */ secitem keyitem; keyitem.data = /* ptr to an array of key bytes */ keyitem.len = /* length of the array of key bytes */ /* tur...
... ck_mechanism_type digestmech = ckm_md5 <big>(for example)</big> choose a slot on which to to do the operation pk11slotinfo* slot = pk11_
getbestslot(digestmech, null); or pk11slotinfo* slot = pk11_
getinternalkeyslot(); /* always returns int slot, may not be optimal */ prepare the key if using a raw key /* turn the raw key into a secitem */ secitem keyitem; keyitem.data = /* ptr to an array of key bytes */ keyitem.len = /* length of the array of key bytes */ /* turn th...
...you can find a list of hmac mechanisms in security/nss/lib/softoken/pkcs11.c - grep for ckf_sn_vr, and choose the mechanisms that contain hmac in the name ck_mechanism_type hmacmech = ckm_md5_hmac; <big>(for example)</big> choose a slot on which to to do the operation pk11slotinfo* slot = pk11_
getbestslot(hmacmech, null); or pk11slotinfo* slot = pk11_
getinternalkeyslot(); /* always returns int slot, may not be optimal */ prepare the key if using a raw key /* turn the raw key into a secitem */ secitem keyitem; keyitem.type = sibuffer; keyitem.data = /* ptr to an array of key bytes */ keyitem.len = /* length of the array of key bytes...
...And 11 more matches
JSPropertyOp
jspropertyop and jsstrictpropertyop are the type of property
getter and setter callbacks in the jsapi.
... they are also the types of the jsclass.addproperty,
getproperty, and setproperty callbacks, which are called during object property accesses.
...a jspropertyop may be installed on an individual property as a
getter or setter; or it may be installed on a jsclass to hook property
gets, sets, or adds.
...And 11 more matches
JS_DefineProperty
syntax bool js_defineproperty(jscontext *cx, js::handleobject obj, const char *name, js::handlevalue value, unsigned attrs, jsnative
getter = nullptr, jsnative setter = nullptr); bool js_defineproperty(jscontext *cx, js::handleobject obj, const char *name, js::handleobject value, unsigned attrs, jsnative
getter = nullptr, jsnative setter = nullptr); bool js_defineproperty(jscontext *cx, js::handleobject obj, const char *name, js::handlestring value, unsigned attrs, jsnative
getter = nullptr, jsnative setter = nullptr); bool js_defineproperty(jscontext *cx, js::handleobject obj, const char *name, int32_t value, unsigned attrs,...
... jsnative
getter = nullptr, jsnative setter = nullptr); bool js_defineproperty(jscontext *cx, js::handleobject obj, const char *name, uint32_t value, unsigned attrs, jsnative
getter = nullptr, jsnative setter = nullptr); bool js_defineproperty(jscontext *cx, js::handleobject obj, const char *name, double value, unsigned attrs, jsnative
getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, js::handlevalue value, unsigned attrs, jsnative
getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t ...
...namelen, js::handleobject value, unsigned attrs, jsnative
getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, js::handlestring value, unsigned attrs, jsnative
getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, int32_t value, unsigned attrs, jsnative
getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, uint32_t value, unsigned attrs, jsnative
getter = nullp...
...And 11 more matches
IAccessibleHyperlink
the first level hyperlinks would only implement anchor() and anchortar
get().
...the anchortar
gets would reference the second level accessible hyperlink objects.
...their anchors would also reference the image object and their anchortar
gets would reference urls or the objects that would be activated.
...And 11 more matches
nsIFile
void create(in unsigned long type, in unsigned long permissions); void createunique(in unsigned long type, in unsigned long permissions); boolean equals(in nsifile infile); boolean exists(); acstring
getrelativedescriptor(in nsifile fromfile); void initwithfile(in nsifile afile); void initwithnativepath(in acstring filepath); void initwithpath(in astring filepath); boolean isdirectory(); boolean isexecutable(); boolean isfile(); boolean ishidden(); boolean isreadable(); boolean isspecial(); boolean issymlink...
... on the mac,
getting/setting the file size with nsifile only deals with the size of the data fork.
... if you need to know the size of the combined data and resource forks use nsilocalfilemac.
getfilesizewithresfork().
...And 11 more matches
nsIPropertyBag2
xpcom/ds/nsipropertybag2.idlscriptable this interface extends nsipropertybag with some methods for
getting properties in specific formats.
... inherits from: nsipropertybag last changed in gecko 1.0 method overview nsivariant
get(in astring prop); acstring
getpropertyasacstring(in astring prop); astring
getpropertyasastring(in astring prop); autf8string
getpropertyasautf8string(in astring prop); boolean
getpropertyasbool(in astring prop); double
getpropertyasdouble(in astring prop); print32
getpropertyasint32(in astring prop); print64
getpropertyasint64(in astring prop); void
getpropertyasinterface(in astring prop, in nsiidref iid, [iid_is(iid), retval] out nsqiresult result); pruint32
getpropertyasuint32(in astring prop); pruint64
getpropertyasuint64(in astring prop); prbool haskey(in astring prop); methods
get(...
...nsivariant
get( in astring prop ); parameters prop property to return the value of.
...And 11 more matches
nsITreeBoxObject
last changed in gecko 1.9 (firefox 3) inherits from: nsisupports to
get the treeboxobject for a tree: let boxobject = tree.boxobject; boxobject.queryinterface("components.interfaces.nsitreeboxobject"); or simply: let boxobject = tree.treeboxobject; method overview long
getfirstvisiblerow(); long
getlastvisiblerow(); long
getpagelength(); void ensurerowisvisible(in long index); void ensurecellisvisible(in long row, in nsitreecolumn col); void scrolltorow(in long index); ...
...in long horizontalposition); void invalidate(); void invalidatecolumn(in nsitreecolumn col); void invalidaterow(in long index); void invalidatecell(in long row, in nsitreecolumn col); void invalidaterange(in long startindex, in long endindex); void invalidatecolumnrange(in long startindex, in long endindex, in nsitreecolumn col); long
getrowat(in long x, in long y); void
getcellat(in long x, in long y, out long row, out nsitreecolumn col, out acstring childelt); void
getcoordsforcellitem(in long row, in nsitreecolumn col, in acstring element, out long x, out long y, out long width, out long height); boolean iscellcropped(in long row, in nsitreecolumn col); void rowcountchanged(in long index, in ...
... horizontalposition long readonly:
get the pixel position of the horizontal scrollbar.
...And 11 more matches
Debugger.Object - Firefox Developer Tools
the referent’s properties do not appear directly as properties of the debugger.object instance; the debugger can access them only through methods like debugger.object.prototype.
getownpropertydescriptor and debugger.object.prototype.defineproperty, ensuring that the debugger will not inadvertently invoke the referent’s
getters and setters.
... if more than one debugger instance is debugging the same code, each debugger
gets a separate debugger.object instance for a given object.
... boundtar
getfunction if the referent is a bound debuggee function, this is its tar
get function— the function that was bound to a particular this object.
...And 11 more matches
Using the CSS Painting API - Web APIs
if set to false, all colours used on the canvas will be fully opaque */ static
get contextoptions() { return { alpha: true }; } /* ctx is the 2d drawing context a subset of the html5 canvas api.
... .fancy { background-image: paint(headerhighlight); } putting it to
gether we can then add the fancy class to any element on the page to add a yellow box as a background: <h1 class="fancy">my cool header</h1> the following example will look like the image above in browsers supporting the css painting api.
... the code to do this looks like so: registerpaint('headerhighlight', class { static
get contextoptions() { return { alpha: true }; } /* ctx is the 2d drawing context size is the paintsize, the dimensions (height and width) of the box being painted */ paint(ctx, size) { ctx.fillstyle = 'hsla(55, 90%, 60%, 1.0)'; ctx.fillrect( 0, size.height / 3, size.width * 0.4, size.height * 0.6 ); } }); this code example has two differenc...
...And 11 more matches
Using images - Web APIs
importing images into a canvas is basically a two step process:
get a reference to an htmlimageelement object or to another canvas element as a source.
...
getting images to draw the canvas api is able to use any of the following data types as an image source: htmlimageelement these are images created using the image() constructor, as well as any <img> element.
... there are several ways to
get images for use on a canvas.
...And 11 more matches
Using the Geolocation API - Web APIs
you can test for the presence of geolocation thusly: if('geolocation' in navigator) { /* geolocation is available */ } else { /* geolocation is not available */ }
getting the current position to obtain the user's current location, you can call the
getcurrentposition() method.
... this initiates an asynchronous request to detect the user's position, and queries the positioning hardware to
get up-to-date information.
... note: by default,
getcurrentposition() tries to answer as fast as possible with a low accuracy result.
...And 11 more matches
Starting up and shutting down a WebXR session - Web APIs
be sure to read the readme carefully; the polyfill comes in several versions depending on what degree of compatibility with newer javascript features your tar
get browsers include.
...
getting the extension download the webxr api emulator for your supported browser below: google chrome mozilla firefox the source code for the extension is also available on github.
... if the document wasn't loaded securely, you won't
get very far.
...And 11 more matches
pointer-events - CSS: Cascading Style Sheets
the pointer-events css property sets under what circumstances (if any) a particular graphic element can become the tar
get of pointer events.
... none the element is never the tar
get of pointer events; however, pointer events may tar
get its descendant elements if those descendants have pointer-events set to some other value.
...the element can only be the tar
get of a pointer event when the visibility property is set to visible and e.g.
...And 11 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
the html <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control wid
gets are available, depending on the device and user agent.
...displays as a range wid
get defaulting to the middle value.
...associates the control with a form element formaction image, submit url to use for form submission formenctype image, submit form data set encoding type to use for form submission formmethod image, submit http method to use for form submission formnovalidate image, submit bypass form control validation for form submission formtar
get image, submit browsing context for form submission height image same as height attribute for <img>; vertical dimension list almost all value of the id attribute of the <datalist> of autocomplete options max numeric types maximum value maxlength password, search, tel, text, url maximum length (number of characters) of value ...
...And 11 more matches
HTML documentation index - HTML: Hypertext Markup Language
classes allow css and javascript to select and access specific elements via the class selectors or functions like the dom method document.
getelementsbyclassname.
...if so, the browser modifies its wid
get to allow editing.
...if css tar
gets the element with properties impacting the width, css takes precedence.
...And 11 more matches
JavaScript modules - JavaScript
« previous this guide gives you all you need to
get started with javascript module syntax.
... basic example structure in our first example (see basic-modules) we have a file structure as follows: index.html main.js modules/ canvas.js square.js note: all of the examples in this guide have basically the same structure; the above should start
getting pretty familiar.
...to
get modules to work correctly in a browser, you need to make sure that your server is serving them with a content-type header that contains a javascript mime type such as text/javascript.
...And 11 more matches
Working with objects - JavaScript
object.
getownpropertynames(o) this method returns an array containing all own properties' names (enumerable or not) of an object o.
...however, this can be achieved with the following function: function listallproperties(o) { var objecttoinspect; var result = []; for(objecttoinspect = o; objecttoinspect !== null; objecttoinspect = object.
getprototypeof(objecttoinspect)) { result = result.concat( object.
getownpropertynames(objecttoinspect) ); } return result; } this can be useful to reveal "hidden" properties (properties in the prototype chain which are not accessible through the object, because another property has the same name earlier in the prototype chain).
... defining
getters and setters a
getter is a method that
gets the value of a specific property.
...And 11 more matches
DataView - JavaScript
as a workaround, you could implement your own
getuint64() function to obtain a value with precision up to number.max_safe_integer, which could suffice for certain cases.
... function
getuint64(dataview, byteoffset, littleendian) { // split 64-bit number into two 32-bit (4-byte) parts const left = dataview.
getuint32(byteoffset, littleendian); const right = dataview.
getuint32(byteoffset+4, littleendian); // combine the two 32-bit values const combined = littleendian?
... const bigint = window.bigint, bigthirtytwo = bigint(32), bigzero = bigint(0); function
getuint64bigint(dataview, byteoffset, littleendian) { // split 64-bit number into two 32-bit (4-byte) parts const left = bigint(dataview.
getuint32(byteoffset|0, !!littleendian)>>>0); const right = bigint(dataview.
getuint32((byteoffset|0) + 4|0, !!littleendian)>>>0); // combine the two 32-bit values and return return littleendian ?
...And 11 more matches
Creating a status bar extension - Archive of obsolete content
some of the samples in this series may be similar to samples you've seen elsewhere, but the goal of this series of articles is to help compile information for new extension developers into one place to make it easy to jump in and
get started.
...many of the concepts introduced here apply to any xul-based application; however, to keep from
getting completely overwhelmed, we're going to focus specifically on firefox.
...em:version>1.0</em:version> <em:type>2</em:type> <!-- front end metadata --> <em:name>status bar sample 1</em:name> <em:description>sample static status bar panel</em:description> <em:creator>my name</em:creator> <em:homepageurl>http://developer.mozilla.org/en/docs/creating_a_status_bar_extension</em:homepageurl> <!-- describe the firefox versions we support --> <em:tar
getapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> </description> </em:tar
getapplication> </description> </rdf> let's take a look at some key parts of the manifest.
...And 10 more matches
listitem - Archive of obsolete content
use hasattribute() to determine whether this attribute is set instead of
getattribute().
...for those elements, setattribute("value", myvalue) and
getattribute("value") do not access or affect the contents displayed to the user.
... properties accesskey type: character
gets and sets the value of the accesskey attribute.
...And 10 more matches
tabbrowser - Archive of obsolete content
sers, cangoback, cangoforward, contentdocument, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, securityui, selectedbrowser, selectedtab, sessionhistory, tabcontainer, tabs, visibletabs, webbrowserfind, webnavigation, webprogress methods addprogresslistener, addtab, addtabsprogresslistener,appendgroup,
getbrowseratindex,
getbrowserindexfordocument,
getbrowserfordocument,
getbrowserfortab,
geticon,
getnotificationbox,
gettabforbrowser,
gettabmodalpromptbox, goback, gobackgroup, goforward, goforwardgroup, gohome, gotoindex, loadgroup, loadonetab, loadtabs, loaduri, loaduriwithflags, movetabto, pintab, reload, reloadalltabs, reloadtab, reloadwithflags, removealltabsbut, removecurrenttab, removeprogres...
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(),...
...
getbrowseratindex( index ) return type: browser element returns a browser at the specified tab index.
...And 10 more matches
LiveConnect Overview - Archive of obsolete content
working with wrappers in javascript, a wrapper is an object of the tar
get language data type that encloses an object of the source language.
...there are cases where liveconnect will fail to load a class, and you will need to manually load it like this: var wid
getry = java.lang.thread.currentthread().
getcontextclassloader().loadclass("org.mywid
gets.wid
getry"); in javascript 1.3 and earlier, javaclass objects are not automatically converted to instances of java.lang.class when you pass them as parameters to java methods—you must create a wrapper around an instance of java.lang.class.
...place the forname assignment statement in a try block to handle the exception, as follows: function
getclass(javaclassname) { try { var theclass = java.lang.class.forname(javaclassname); } catch (e) { return ("the java exception is " + e); } return theclass; } in this example, if javaclassname evaluates to a legal class name, such as "java.lang.string", the assignment succeeds.
...And 10 more matches
Cascade and inheritance - Learn web development
as you
get more practice writing css, however, the way it works will become more obvious to you.
...it is basically a measure of how specific a selector's selection will be: an element selector is less specific — it will select all elements of that type that appear on a page — so will
get a lower score.
... a class selector is more specific — it will select only the elements on a page that have a specific class attribute value — so will
get a higher score.
...And 10 more matches
The web and web standards - Learn web development
this article provides some useful background on the web — how it came about, what web standard technologies are, how they work to
gether, why "web developer" is a great career to choose, and what kinds of best practices you'll learn about through the course.
... brief history of the web we'll keep this very brief, as there are many (more) detailed accounts of the web's history out there, which we'll link to later on (also try searching for "history of the web" in your favorite search engine and see what you
get, if you are interested in more detail.) in the late 1960s, the us military developed a communication network called arpanet.
... fast forward to 1989, and timbl wrote information management: a proposal and hypertext at cern; these two publications to
gether provided the background for how the web would work.
...And 10 more matches
Advanced text formatting - Learn web development
previous overview: introduction to html next there are many other elements in html for formatting text, which we didn't
get to in the html text fundamentals article.
... prerequisites: basic html familiarity, as covered in
getting started with html.
...if you
get really stuck, press the show solution button to see the answer.
...And 10 more matches
Document and website structure - Learn web development
prerequisites: basic html familiarity, as covered in
getting started with html.
...some websites have more columns, some are a lot more complex, but you
get the idea.
... with the right css, you could use pretty much any elements to wrap around the different sections and
get it looking how you wanted, but as discussed before, we need to respect semantics and use the right element for the right job.
...And 10 more matches
Routing in Ember - Learn web development
since our data is static, we won't
get to any of those fancy features, but we'll still make sure that the route provides the minimally required data to view a page.
...it already contains a
getter that returns all todos, and a
getter that returns incomplete todos.
... the
getter we are missing is one to return just the completed todos.
...And 10 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
we also need to learn a bit about component lifecycle, to understand when these dom nodes
get mounted and and unmounted from the dom and how we can access them.
... code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to
get to the current app state, run cd mdn-svelte-tutorial/05-advanced-concepts or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/05-advanced-concepts remember to run npm install && npm run dev to start your app in development mode.
... don't for
get to pass the prop into moreactions from inside todos.svelte, where the component is called: <moreactions {todos} on:checkall={e => checkalltodos(e.detail)} on:removecompleted={removecompletedtodos} /> working with the dom: focusing on the details now that we have completed all of the app's required functionality, we'll concentrate on some accessibility features that will improve ...
...And 10 more matches
Introducing a complete toolchain - Learn web development
creating a development environment this part of the toolchain is sometimes seen to be delaying the actual work, and it can be very easy to fall into a "rabbit hole" of tooling where you spend a lot of time trying to
get the environment "just right".
...if not, we'll
get you to install prettier as a global utility using the terminal right now.
... you can check whether you've already got it installed globally using the following command: prettier -v if installed, you'll
get a version number returned like 2.0.2; if not, it'll return something along the lines of "command not found".
...And 10 more matches
Creating Sandboxed HTTP Connections
to create an nsiuri from an string, we use the newuri method of nsiioservice: // the io service var ioservice = components.classes["@mozilla.org/network/io-service;1"] .
getservice(components.interfaces.nsiioservice); // create an nsiuri var uri = ioservice.newuri(myurlstring, null, null); once the nsiuri has been created, a nsichannel can be generated from it using nsiioservice's newchannelfromuri method: //
get a channel for that nsiuri var channel = ioservice.newchannelfromuri(uri); to initiate the connection, the asyncopen method is called.
... channel.asyncopen(listener, null); http notifications the above mentioned listener is a nsistreamlistener, which
gets notified about events such as http redirects and data availability.
... onstartrequest -
gets called when a new request is initiated.
...And 10 more matches
Debugging on Mac OS X
this is due to notarization requiring hardened runtime to be enabled with the com.apple.security.
get-task-allow entitlement disallowed.
...at this time, developers can obtain a hardened runtime build with the com.apple.security.
get-task-allow entitlement allowed by submitting a try build and downloading the dmg generated by the "rpk" shippable build job.
... select "build" from the left of the scheme editor window, and check that there is nothing listed under tar
gets (otherwise it may cause problems when you try to run the executable for debugging since you will
get build errors).
...And 10 more matches
Performance best practices for Firefox front-end engineers
that means that the more code we can
get off of the main thread, the more that thread can respond to user events, paint, and generally be responsive to the user.
...
get familiar with the pipeline that
gets pixels to the screen learn how pixels you draw make their way to the screen.
...the more of them there are, the more likely they'll exceed the 16ms frame bud
get.
...And 10 more matches
Browser API
htmliframeelement.
getcangoback() indicates whether it's possible to navigate backwards.
... htmliframeelement.
getcangoforward() indicates whether it's possible to navigate forward.
... htmliframeelement.
getvisible() indicates the current visibility state of the browser <iframe>.
...And 10 more matches
Following the Android Toasts Tutorial from a JNI Perspective
context context =
getapplicationcontext(); charsequence text = "hello, firefox!"; int duration = toast.length_short; toast toast = toast.maketext(context, text, duration); toast.show(); nativewindow code as mentioned earlier, toasts are a very popular feature, so mozilla developers chose to bring it to the privileged javascript scope via the nativewindow object.
... let sig = { context: 'landroid/content/context;', charsequence; 'ljava/lang/charsequence;', int: 'i', toast: 'landroid/wid
get/toast;', void: 'v', };
get java environment before we go on to declare the other important features, we need to load our environment variable.
... this is the template that will follow our object of signatures: var my_jenv = null; try { my_jenv = jni.
getforthread(); // do the jni work here } finally { if (my_jenv) { jni.unloadclasses(my_jenv); } } the reason we choose my_jenv for a variable name, and not jenv, is because the global privileged window scope of firefox for android has a variable jenv already, and we don't want to mix.
...And 10 more matches
OS.File for the main thread
var img = new image(); img.onload = function() { var canvas = document.createelementns('http://www.w3.org/1999/xhtml', 'canvas'); canvas.width = img.naturalwidth; canvas.height = img.naturalheight; var ctx = canvas.
getcontext('2d'); ctx.drawimage(img, 0, 0); (canvas.toblobhd || canvas.toblob).call(canvas, function(b) { var r = cc['@mozilla.org/files/filereader;1'].createinstance(ci.nsidomfilereader); //new filereader(); r.onloadend = function() { // r.result contains the arraybuffer.
... global object os.file method overview promise<file> open(in string path, [optional] in object mode, [optional] in object options); promise<object> openunique(in string path, [optional] in object options); promise<void> copy(in string sourcepath, in string destpath, [optional] in object options); promise<bool> exists(in string path); promise<string>
getcurrentdirectory(); promise<void> makedir(in string path, [optional] in object options); promise<void> move(in string sourcepath, in string destpath); promise<uint8array> read(in string path, [optional] in object options); promise<void> remove(in string path, [optional] in object options); promise<void> removeemptydir(in string path, [optional] in objec...
...ional] in object options); promise<void> setcurrentdirectory(in string path); promise<void> setdates(in string path, in date|number accessdate, in date|number modificationdate); promise<void> setpermissions(in string path, in object options ); promise<file.info> stat(in string path, [optional] in object options); promise<void> unixsymlink(in string tar
getpath, in string createpath); promise<void> writeatomic(in string path, in arrayview data, in object options); methods os.file.open() use method os.file.open() to open a file.
...And 10 more matches
Localization and Plurals
chrome://mozapps/locale/downloads/do...tes,hours,days chrome://mozapps/locale/downloads/do...dstitlepercent chrome://browser/locale/browser.prop...auseddownloads version history 0.1: initial version with pluralrule check, properties input loading, table generation, sample output display 0.2: use pluralform.numforms() to
get the number of forms instead of figuring out locally to better support future rules - requires build from 2007/01/27 or later 0.3: generate a list of what numbers fall into which plural form to minimize the sample output to at most 3 of each form developing with pluralform the functionality for
getting the correct plural forms is provided by a javascript module, pluralform.jsm.
... this module provides a couple methods for localizing to the browser's current locale as well as
getting methods to localize to a desired plural rule.
... components.utils.import("resource://gre/modules/pluralform.jsm"); methods:
get these methods make use of the browser's current locale specified by chrome://global/locale/intl.properties's pluralrule value.
...And 10 more matches
Encrypt Decrypt_MAC_Using Token
eneratesymkey(pk11slotinfo *slot, ck_mechanism_type mechanism, int keysize, secitem *keyid, secupwdata *pwdata) { secstatus rv; pk11symkey *key; if (pk11_needlogin(slot)) { rv = pk11_authenticate(slot, pr_true, pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_
gettokenname(slot)); return null; } } /* generate the symmetric key.
...ey(pk11slotinfo *slot, ck_mechanism_type mechanism, secitem *keybuf, secupwdata *pwdata) { secstatus rv; pk11symkey *key; if (pk11_needlogin(slot)) { rv = pk11_authenticate(slot, pr_true, pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_
gettokenname(slot)); if (slot) { pk11_freeslot(slot); } return null; } } key = pk11_findfixedkey(slot, mechanism, keybuf, 0); if (!key) { pr_fprintf(pr_stderr, "pk11_findfixedkey failed (err %d)\n", pr_
geterror()); pk11_freeslot(slot); return null; } return ke...
...shex(pr_stderr, macitem->data, macitem->len); pr_fprintf(pr_stderr, "computed : "); printashex(pr_stderr, newmac, newmaclen); rv = secfailure; } cleanup: if (ctxmac) { pk11_destroycontext(ctxmac, pr_true); } if (ctxenc) { pk11_destroycontext(ctxenc, pr_true); } if (outfile) { pr_close(outfile); } return rv; } /* *
gets iv and ckaids from header file.
...And 10 more matches
Building the WebLock UI
if you are planning on deploying the weblock component in some other application, you'll have to devise a different means of access (e.g., native wid
getry that instantiates and controls the weblock component).
... client code overview before we
get started on the actual user interface, we should establish how the client code is to access the weblock component and use its interfaces to control the web locking of the browser.
...a boolean wlocked variable can do this: // initialize the wlocked variable as unlocked var wlocked = 0; then the functions that
get called from the interface and call through to the lock and unlock methods of the weblock component must also adjust this variable accordingly: function wlock() { // check to see if locking is on or off weblock.lock(); wlocked = 1; } function wunlock() { // check to see if locking is on or off weblock.unlock(); wlocked = 0; } an important preliminary of these functions is that the ...
...And 10 more matches
IAccessibleRelation
1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) method overview [prop
get] hresult localizedrelationtype([out] bstr localizedrelationtype ); [prop
get] hresult ntar
gets([out] long ntar
gets ); [prop
get] hresult relationtype([out] bstr relationtype ); [prop
get] hresult tar
get([in] long tar
getindex, [out] iunknown tar
get ); [prop
get] hresult tar
gets([in] long maxtar
gets, [out, size_is(maxtar
gets), length_is( ntar
gets)] iunknown tar
gets, [out] long ntar
gets ); methods localizedrelationtype() returns a localized version of the relation type.
... [prop
get] hresult localizedrelationtype( [out] bstr localizedrelationtype ); parameters localizedrelationtype return value s_ok.
... ntar
gets() returns the number of tar
gets() for this relation.
...And 10 more matches
nsIDOMElement
inherits from: nsidomnode last changed in gecko 1.7 method overview domstring
getattribute(in domstring name); nsidomattr
getattributenode(in domstring name); nsidomattr
getattributenodens(in domstring namespaceuri, in domstring localname); domstring
getattributens(in domstring namespaceuri, in domstring localname); nsidomnodelist
getelementsbytagname(in domstring name); nsidomnodelist
getelementsbytagnamens(in domstring namespaceuri, in domstring localname); boolean hasattribute(in domstring name); boolean hasattributens(in domstring namespaceuri, in domstring localname); void removeattribute(in domstring name) nsidomattr removeattributenode(in...
... methods
getattribute()
get an attribute value.
... domstring
getattribute( in domstring name ); parameters name attribute name return value a domstring containing the attribute value.
...And 10 more matches
nsIINIParser
nsiutf8stringenumerator
getkeys(in autf8string asection); nsiutf8stringenumerator
getsections(); autf8string
getstring(in autf8string asection, in autf8string akey); methods
getkeys() returns an nsiutf8stringenumerator providing the keys available within the specified section of the ini file.
... nsiutf8stringenumerator
getkeys( in autf8string asection ); parameters asection the name of the section whose keys you wish to enumerate.
...
getsections() returns an nsiutf8stringenumerator providing a list of the sections available within the ini file.
...And 10 more matches
nsILocalFileMac
inherits from: nsilocalfile last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview cfurlref
getcfurl(); native code only!
... fsref
getfsref(); native code only!
... fsspec
getfsspec(); native code only!
...And 10 more matches
nsIMsgDatabase
firefox 3) inherits from: nsidbchangeannouncer method overview void open(in nsilocalfile afoldername, in boolean acreate, in boolean aleaveinvaliddb); void forcefolderdbclosed(in nsimsgfolder afolder); void close(in boolean aforcecommit); void commit(in nsmsgdbcommit committype); void forceclosed(); void clearcachedhdrs; void resethdrcachesize(in unsigned long size); nsimsgdbhdr
getmsghdrforkey(in nsmsgkey key); nsimsgdbhdr
getmsghdrformessageid(in string messageid); boolean containskey(in nsmsgkey key); nsimsgdbhdr createnewhdr(in nsmsgkey key); void addnewhdrtodb(in nsimsgdbhdr newhdr, in boolean notify); nsimsgdbhdr copyhdrfromexistinghdr(in nsmsgkey key, in nsimsgdbhdr existinghdr, in boolean addhdrtodb); void listallkeys(in nsmsgkeyarrayref outputkeys); nati...
... nsisimpleenumerator enumeratemessages(); nsisimpleenumerator enumeratethreads(); void synccounts; nsimsgthread
getthreadcontainingmsghdr(in nsimsgdbhdr msghdr); void markhdrread(in nsimsgdbhdr msghdr, in boolean bread, in nsidbchangelistener instigator); void markhdrreplied(in nsimsgdbhdr msghdr, in boolean breplied, in nsidbchangelistener instigator); void markhdrmarked(in nsimsgdbhdr msghdr, in boolean mark,in nsidbchangelistener instigator); void markmdnneeded(in nsmsgkey key, in boolean bneeded,in nsidbchangelistener instigator); boolean ismdnneeded(in nsmsgkey key); void markmdnsent(in nsmsgkey key, in boolean bneeded, in nsidbchangelistener instigator); boolean ismdnsent(in nsmsgkey key); void markread(in nsmsgkey key, in boolean bread, in nsidbchan...
...operty, in string avalue); void markimapdeleted(in nsmsgkey key, in boolean deleted, in nsidbchangelistener instigator); void applyretentionsettings(in nsimsgretentionsettings amsgretentionsettings, in boolean adeleteviafolder); boolean hasnew(); void clearnewlist(in boolean notify); void addtonewlist(in nsmsgkey key); void startbatch(); void endbatch(); nsimsgofflineimapoperation
getofflineopforkey(in nsmsgkey messagekey, in boolean create); void removeofflineop(in nsimsgofflineimapoperation op); nsisimpleenumerator enumerateofflineops(); void listallofflineopids(in nsmsgkeyarrayptr offlineopids); native code only!
...And 10 more matches
Basic animations - Web APIs
probably the biggest limitation is, that once a shape
gets drawn, it stays that way.
... var sun = new image(); var moon = new image(); var earth = new image(); function init() { sun.src = 'https://mdn.mozillademos.org/files/1456/canvas_sun.png'; moon.src = 'https://mdn.mozillademos.org/files/1443/canvas_moon.png'; earth.src = 'https://mdn.mozillademos.org/files/1429/canvas_earth.png'; window.requestanimationframe(draw); } function draw() { var ctx = document.
getelementbyid('canvas').
getcontext('2d'); ctx.globalcompositeoperation = 'destination-over'; ctx.clearrect(0, 0, 300, 300); // clear canvas ctx.fillstyle = 'rgba(0, 0, 0, 0.4)'; ctx.strokestyle = 'rgba(0, 153, 255, 0.4)'; ctx.save(); ctx.translate(150, 150); // earth var time = new date(); ctx.rotate(((2 * math.pi) / 60) * time.
getseconds() + ((2 * math.pi) / 60000) * time.
getmi...
...lliseconds()); ctx.translate(105, 0); ctx.fillrect(0, -12, 40, 24); // shadow ctx.drawimage(earth, -12, -12); // moon ctx.save(); ctx.rotate(((2 * math.pi) / 6) * time.
getseconds() + ((2 * math.pi) / 6000) * time.
getmilliseconds()); ctx.translate(0, 28.5); ctx.drawimage(moon, -3.5, -3.5); ctx.restore(); ctx.restore(); ctx.beginpath(); ctx.arc(150, 150, 105, 0, math.pi * 2, false); // earth orbit ctx.stroke(); ctx.drawimage(sun, 0, 0, 300, 300); window.requestanimationframe(draw); } init(); <canvas id="canvas" width="300" height="300"></canvas> screenshotlive sample an animated clock this example draws an animated clock, showing your current time.
...And 10 more matches
DirectoryEntrySync - Web APIs
if you try to create a directory using a full path that includes parent directories that do not exist yet, you
get an error.
... example the
getfile() method returns a fileentrysync, which represents a file in the file system.
... var fileentry = fs.root.
getfile('seekrits.txt', {create: true}); the
getdirectory() method returns a directoryentrysync, which represents a file in the file system.
...And 10 more matches
FileSystemEntrySync - Web APIs
basic concepts the filesystementrysync interface includes methods that you would expect for manipulating files and directories, but it also include a really handy method for
getting a url of the entry: tourl().
... method overview metadata
getmetadata () raises (fileexception); filesystementrysync moveto (in directoryentrysync parent, optional domstring newname) raises (fileexception); filesystementrysync copyto(in directoryentrysync parent, optional domstring newname) raises (fileexception); domstring tourl(); void remove() raises (fileexception); directoryentrysync
getparent(); attr...
... methods
getmetadata() look up metadata about this entry.
...And 10 more matches
Microdata DOM API - Web APIs
the document.
getitems(typenames) method provides access to the top-level microdata items.
...
getitems( [ types ] ) returns a nodelist of the elements in the document that create items, that are not part of other items, and that are of the types given in the argument, if any are listed.
... the document.
getitems(typenames) method takes a string that contains an unordered set of unique space-separated tokens that are case-sensitive, representing types.
...And 10 more matches
SVGTextContentElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180"...
...And 10 more matches
Using the Web Animations API - Web APIs
bring the pieces to
gether now it’s time to bring them both to
gether with the element.animate() method: document.
getelementbyid("alice").animate( alicetumbling, alicetiming ) and boom: the animation starts playing (see the finished version on codepen).
...instead of making objects for keyframes and timing properties, we could just pass their values in directly, like so: document.
getelementbyid("alice").animate( [ { transform: 'rotate(0) translate3d(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.3}, { transform: 'rotate(360deg) translate3d(-50%, -50%, 0)', color: '#000' } ], { duration: 3000, iterations: infinity } ); what’s more, if we only wanted to specify the duration of the animation and not its iterations (by default, animations iterate once), we could pass in the milliseconds alone: document.
getelementbyid("alice").animate( [ { transform: 'rotate(0) translate...
... pausing and playing animations we’ll talk more about alice’s animation later, but for now, let’s look closer at the cupcake’s animation: var nommingcake = document.
getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); the element.animate() method will immediately run after it is called.
...And 10 more matches
Web applications and ARIA FAQ - Accessibility
aria provides a means to make web applications and wid
gets more accessible to a diverse range of users, including those who use assistive technologies such as screen readers or magnifiers.
...aria enables dynamic, javascript-driven applications and wid
gets to interoperate with a variety of desktop-based assistive technologies.
... for more information about how to create accessible wid
gets with aria, see the overview of accessible web applications and wid
gets.
...And 10 more matches
Event reference
each event is represented by an object which is based on the event interface, and may have additional custom fields and/or functions used to
get additional information about what happened.
... dragenter a dragged element or text selection enters a valid drop tar
get.
... dragleave a dragged element or text selection leaves a valid drop tar
get.
...And 10 more matches
WeakRef - JavaScript
a weakref object lets you hold a weak reference to another object, without preventing that object from
getting garbage-collected.
... description a weakref object contains a weak reference to an object, which is called its tar
get or referent.
...if that happens, you can't
get the object from a weak reference anymore.
...And 10 more matches
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
he following, inside your html document: <svg height="0"> <mask id="mask-1"> <lineargradient id="gradient-1" y2="1"> <stop stop-color="white" offset="0"/> <stop stop-opacity="0" offset="1"/> </lineargradient> <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/> </mask> </svg> .tar
get { mask: url(#mask-1); } p { width: 300px; border: 1px solid #000; display: inline-block; } note that in the css, the mask is specified using a url to the id #mask-1, which is the id of the svg mask specified below it.
... applying the svg effect to (x)html is accomplished by assigning the tar
get class defined above to an element, like this: <p class="tar
get" style="background:lime;"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
...</p> <p> lorem ipsum dolor sit amet, consectetur adipisicing <b class="tar
get">elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b> ut enim ad minim veniam.
...And 10 more matches
Interacting with page scripts - Archive of obsolete content
with unsafewindow you can see javascript objects that have been defined by page scripts, and if a page script has modified the behavior of native dom functions, you'll
get the modified version of them as well.
...any of them, even setters and
getters, could have been redefined by a page script.
... expose objects to page scripts until firefox 30, you could use unsafewindow to perform the reverse procedure, and make objects defined in content scripts available to page scripts: // content-script.js unsafewindow.contentscriptobject = {"greeting" : "hello from add-on"}; // page-script.js var button = document.
getelementbyid("show-content-script-var"); button.addeventlistener("click", function() { // access object defined by content script console.log(window.contentscriptobject.greeting); // "hello from add-on" }, false); after firefox 30, you can still do this for primitive values, but can no longer do it for objects.
...And 9 more matches
page-mod - Archive of obsolete content
so you can rewrite the above code like this: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscriptfile: "./my-script.js" }); unless your content script is extremely simple and consists only of a static string, don't use contentscript: if you do, you may have problems
getting your add-on approved on amo.
... /lib/main.js: var tag = "p"; var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscriptfile: data.url("element-
getter.js"), onattach: function(worker) { worker.port.emit("
getelements", tag); worker.port.on("gotelement", function(elementcontent) { console.log(elementcontent); }); } }); /data/element-
getter.js: self.port.on("
getelements", function(tag) { var elements = document.
getelementsbytagname(tag); for (var i = 0; i < elements.length; i++) { self.port.emit("gotelement", ele...
...ments[i].innerhtml); } }); when the user loads a document hosted at "mozilla.org": the content script "element-
getter.js" is attached to the document and runs.
...And 9 more matches
core/promise - Archive of obsolete content
instead of structuring our programs into logical black boxes: function blackbox(a, b) { var c = assemble(a); return combine(b, c); } we're forced into continuation passing style, involving lots of machinery: function spha
getti(a, b, callback) { assemble(a, function continuewith(error, c) { if (error) callback(error); else combine(b, c, callback); }); } this style also makes doing things in sequence hard: wid
get.on('click', function onclick() { promptuserfortwitterhandle(function continuewith(error, handle) { if (error) return ui.displayerror(error); twitter.
gettweetsfor(handle, funtion continu...
...ewith(error, tweets) { if (error) return ui.displayerror(error); ui.showtweets(tweets); }); }); }); doing things in parallel is even harder: var tweets, answers, checkins; twitter.
gettweetsfor(user, function continuewith(result) { tweets = result; somethingfinished(); }); stackoverflow.
getanswersfor(question, function continuewith(result) { answers = result; somethingfinished(); }); foursquare.
getcheckinsby(user, function continuewith(result) { checkins=result; somethingfinished(); }); var finished = 0; function somethingfinished() { if (++finished === 3) ui.show(tweets, answers, checkins); } this also makes error handling quite an adventure.
... in the add-on sdk we follow commonjs promises/a specification and model a promise as an object with a then method, which can be used to
get the eventual return (fulfillment) value or thrown exception (rejection): foo().then(function success(value) { // ...
...And 9 more matches
window/utils - Archive of obsolete content
globals functions
getmostrecentbrowserwindow()
get the topmost browser window, as an nsidomwindow instance.
...
getinnerid(window) returns the id of the specified window's current inner window.
...
getouterid(window) returns the id of the specified window's outer window.
...And 9 more matches
Extension Versioning, Update and Compatibility - Archive of obsolete content
how applications determine compatibility when installing add-ons applications look at the tar
getapplication entries in the add-on's install.rdf.
... if the application has a tar
getapplication entry but it is for an incompatible version then the application will retrieve updated compatibility information from the add-on's updateurl.
... if the install.rdf contains any tar
getplatform entries then the platform of the currently running application must be listed or the installation will be rejected.
...And 9 more matches
Drag and Drop JavaScript Wrapper - Archive of obsolete content
getsupportedflavours() this function should return a list of flavors that the object being dragged over can accept.
...for elements that can have objects dropped on them, you should define ondragover, ondrop and
getsupportedflavours (and, if desired, ondragexit).
...that way, a drop tar
get can accept the flavor it finds most suitable.
...And 9 more matches
Embedding Mozilla in a Java Application using JavaXPCOM - Archive of obsolete content
first, the java application must find a suitable xulrunner installation: mozilla mozilla = mozilla.
getinstance(); greversionrange[] range = new greversionrange[1]; range[0] = new greversionrange("1.8.0", true, "1.9", false); // work with trunk nightly version 1.9a1 ^^ try { file grepath = mozilla.
getgrepathwithproperties(range, null); locationprovider locprovider = new locationprovider(grepath); mozilla.initembedding(grepath, grepath, locprovider); } catch (filenotfoundexception ...
... if your code cannot find the gre and keeps throwing filenotfoundexceptions during the
getgrepathwithproperties(...) call, check whether you already registered the gre on your system: gre registration the initembedding method kicks off the embedding process, allowing the java application to work with xpcom and mozilla.
...the mozilla class provides several methods to facilitate this, such as
getservicemanager,
getcomponentmanager, and newlocalfile.
...And 9 more matches
JavaScript Client API - Archive of obsolete content
record piece of information that
gets synchronized.
... you may find it useful to write
getters and setters for various properties of your record implementation.
... the skeleton of a sample record implementation: function foorecord(collection, id) { cryptowrapper.call(this, collection, id); } foorecord.prototype = { __proto__: cryptowrapper.prototype, _logname: "record.foo", ttl: foo_ttl, // optional
get bar() this.cleartext.bar, set bar(value) { this.cleartext.bar = value; },
get baz() this.cleartext.baz, set baz(value) { this.cleartext.baz = value; } }; to save all that typing for declaring the
getters and setters, you can also use utils.defer
getset: function foorecord(collection, id) { cryptowrapper.call(this, collection, id); } foorecord.prototype = { __proto__: cryptowrapper.prototype, _logname: "record.foo", ttl: foo_ttl // optional }; utils.defer
getset(foorec, "cleartext", ["bar", "baz"]); the store...
...And 9 more matches
Using XPInstall to Install Plugins - Archive of obsolete content
this step will involve the use of the initinstall api call to start everything off, and also the
getfolder api call, which helps to locate the current browser's plugin directory.
...once again, this step involves calls to
getfolder to locate a "well known" directory in which to install to as a secondary install location.
... on windows: write windows registry keys that netscape gecko browsers (that
get installed after the current browser) can parse to discover where the plugin is installed on the machine.
...And 9 more matches
Custom toolbar button - Archive of obsolete content
copy the following content, making sure that you scroll to
get all of it.
...illa.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest" em:name="custom button" em:description="my custom toolbar button" em:creator="my name" em:id="custom-toolbar-button@example.com" em:version="1.0" em:homepageurl="http://developer.mozilla.org/en/docs/custom_toolbar_button" em:iconurl="chrome://custombutton/content/icon.png" > <em:tar
getapplication><!-- firefox --> <description em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" em:minversion="1.4" em:maxversion="*" /> </em:tar
getapplication> <em:tar
getapplication><!-- thunderbird --> <description em:id="{3550f703-e582-4d05-9a08-453d09bdfdc6}" em:minversion="1.5" em:maxversion="51.0" /> </em:tar
getapplication> ...
... <em:tar
getapplication><!-- sunbird --> <description em:id="{718e30fb-e89b-41dd-9da7-e25a45638b28}" em:minversion="0.2.9" em:maxversion="99" /> </em:tar
getapplication> <em:file> <description about="urn:mozilla:extension:custombutton" em:package="content/custombutton/" /> </em:file> </description> </rdf> optionally customize the file by changing the name, description and creator.
...And 9 more matches
Property Files - Archive of obsolete content
however, a script does not
get parsed for entities.
...the element has a number of functions which can be used to
get strings from the property file and
get other locale information.
...use a chrome url to read a file from the locale: <stringbundleset id="stringbundleset"> <stringbundle id="strings" src="chrome://myplugin/locale/strings.properties"/> </stringbundleset> like other non-displayed elements, you should declare all your stringbundles inside a stringbundleset element so that they are all kept to
gether.
...And 9 more matches
Using Remote XUL - Archive of obsolete content
the remote xul manager extension lets you manage this whitelist, which is maintained using nsipermissionmanager, by creating entries of type "allowxulxbl", like this: components.classes["@mozilla.org/permissionmanager;1"] .
getservice(components.interfaces.nsipermissionmanager) .add(uri, 'allowxulxbl', components.interfaces.nsipermissionmanager.allow_action); xul (pronounced like "zool"), which is short for xml-based user interface language, is an xml-based language for describing application interfaces.
... it contains elements for all common ui wid
gets (menus, buttons, toolbars, etc.) and many sophisticated ones (trees, browsers, color pickers).
... xul's navigation-oriented wid
gets, like toolbars, menus, and trees, are a better way to provide web site navigation because they can fit a lot of navigation into a small space, render quickly, and work well.
...And 9 more matches
menulist - Archive of obsolete content
utes accesskey, crop, disableautoselect, disabled, editable, focused, image, label, oncommand, open, preference, readonly, sizetopopup, tabindex, value properties accessibletype, crop, description, disableautoselect, disabled, editable, editor, image, inputfield, itemcount, label, menuboxobject, menupopup, open, selectedindex, selecteditem, tabindex, value methods appenditem, contains,
getindexofitem,
getitematindex, insertitemat, removeallitems, removeitemat, select examples <menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option 3" value="3"/> <menuitem label="option 4" value="4"/> </menupopup> </menulist> attributes accesskey type: character this should be set to a character...
...for those elements, setattribute("value", myvalue) and
getattribute("value") do not access or affect the contents displayed to the user.
... crop type: string
gets and sets the value of the crop attribute.
...And 9 more matches
NPN_PostURL - Archive of obsolete content
syntax #include <npapi.h> nperror npn_posturl(npp instance, const char *url, const char *tar
get, uint32 len, const char *buf, npbool file); parameters the function has the following parameters: instance pointer to the current plug-in instance.
... tar
get display tar
get, specified by the plug-in.
...for values, see npn_
geturl.
...And 9 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
if (document.all) { // ie4 height = document.body.offsetheight; } else if (document.layers) { // nn4 height = window.innerheight; } else { // other height = 0; } with the introduction of the w3c dom, the standard method document.
getelementbyid became available in internet explorer 5 and later in netscape 6 (gecko).
...if (document.all) { // ie4 height = document.body.offsetheight; } else if (document.layers) { // nn4 height = window.innerheight; } else if (document.
getelementbyid) { // they think this is gecko // but could be wrong!
... height = window.innerheight; } else { // other height = 0; } the approach is incorrect since it assumes that the only other browser besides internet explorer 5+ that implements document.
getelementbyid is gecko.
...And 9 more matches
Practical positioning examples - Learn web development
prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css.) objective: to
get an idea of the practicalities of positioning a tabbed info-box the first example we'll look at is a classic tabbed info box — a very common feature used when you want to pack a lot of information into a small area.
...check it out to
get an idea of what you will be building in this section of the article.
...nullam e
get tincidunt metus.
...And 9 more matches
JavaScript basics - Learn web development
previous overview:
getting started with the web next javascript is a programming language that adds interactivity to your website.
...this article helps you
get started with javascript and furthers your understanding of what is possible.
... however,
getting comfortable with javascript is more challenging than
getting comfortable with html and css.
...And 9 more matches
Creating hyperlinks - Learn web development
prerequisites: basic html familiarity, as covered in
getting started with html.
... objective: to learn how to implement a hyperlink effectively, and link multiple files to
gether.
... anatomy of a link a basic link is created by wrapping the text or other content, see block level links, inside an <a> element and using the href attribute, also known as a hypertext reference, or tar
get, that contains the web address.
...And 9 more matches
Manipulating documents - Learn web development
imagine if a web site could
get access to your stored passwords or other sensitive information, and log into websites as if it were you?
...you can use this object to return and manipulate information on the html and css that comprises the document, for example
get a reference to an element in the dom, change its text content, apply new styles to it, create new elements and add them to the current element as children, or even delete it alto
gether.
... there are older methods available for grabbing element references, such as: document.
getelementbyid(), which selects an element with a given id attribute value, e.g.
...And 9 more matches
Introduction to client-side frameworks - Learn web development
users write papers, manage their bud
gets, stream music, watch movies, and communicate with others over great distances instantaneously, with text, audio or video chat.
...a framework is a library that offers opinions about how software
gets built.
... because react and reactdom are so often used to
gether, react is colloquially understood as a javascript framework.
...And 9 more matches
Multiple Firefox profiles
using the profiles windows if you want to have the profile manager to pop up each time you start firefox, so you can choose a profile, you will need to edit the "tar
get" of the launch icon.
... when the properties dialog box pops up, you should see a "tar
get" text field that you can edit, and it should show the current file path.
... if you want individual icons to launch specific profiles, you will need to edit the "tar
get" of each icon.
...And 9 more matches
Message manager overview
if you load a frame script using the global frame message manager, the script
gets loaded separately into every open tab: three times, in the diagram above.
... its most important functions and attributes are: childcount : contains the number of children (typically, browser windows)
getchildat() :
get the child at the given index loadframescript() : load a frame script into every tab in the browser broadcastasyncmessage() : send a message to frame scripts addmessagelistener() : start listening to a specific message from all frame scripts removemessagelistener() : stop listening to a specific message interfaces nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster how to access ...
... access it using components.classes: // chrome script let globalmm = cc["@mozilla.org/globalmessagemanager;1"] .
getservice(ci.nsimessagelistenermanager); you can also access it as the mm property of services.jsm, if you are in the parent process.
...And 9 more matches
Embedding Tips
get thensiwebnavigation interface on your webbrowser and call the loaduri method with the appropriate uri and flags.
... obtain the nsiclipboardcommands interface from the appropriate web browser object via nsiserviceprovider::
getinterface (or the do_
getinterface() helper method).
... again, use the webbrowser persist object, but specify a remote location as the tar
get uri.
...And 9 more matches
HTML parser threading
nshtml5streamparser is the nsistreamlistener implementation obtained by calling nsistreamlistener* nshtml5parser::
getstreamlistener().
...passing data to the parser thread nshtml5streamparser
gets some of its methods called on the main thread and some called on the parser thread.
...attribute values nsstrings are deleted by the attribute holder when it
gets deleted.
...And 9 more matches
NSS Sample Code Sample1
int generatekeys(); //
gets the server's public key (wrapping key) to // send to another server.
... // // the servers must be started int comparekeys(server *peer); // create a server - the name distiguish the keys in the // shared database in this example server(const char *servername); ~server(); private: int
getprivatekey(seckeyprivatekey **prvkey); int
getpublickey(seckeypublickey **pubkey); int wrapkey(pk11symkey *key, seckeypublickey *pubkey, secitem **data); // export raw key (unwrapped) do not use int rawexportkey(pk11symkey *key, secitem **data); char *mservername; // these items represent data that might be stored // in files or in a configuration file secitem *mwrappedenckey; ...
... rv =
getprivatekey(&prvkey); if (rv == 0 && prvkey) goto done; rv = 0; // these could be parameters to the init function rsaparams.keysizeinbits = 1024; rsaparams.pe = 65537; slot = pk11_
getinternalkeyslot(); if (!slot) { rv = 1; goto done; } prvkey = pk11_generatekeypair(slot, ckm_rsa_pkcs_key_pair_gen, &rsaparams, &pubkey, pr_true, pr_true, 0); if (!prvkey) { rv = 1;...
...And 9 more matches
NSS Sample Code Utilities_1
this code shows the following: extract seed from noise file read der encoding from a file extract the password from a text file
get the module password print as ascii or hexadecimal sample code #include <prlog.h> #include <termios.h> #include <base64.h> #include <unistd.h> #include <sys/stat.h> #include <prprf.h> #include "util.h" /* * these utility functions are adapted from those found in * the sectool library used by the nss security tools and * other nss test applications.
... pr_fprintf(out, "%02x:", data[i]); column += 3; } else { pr_fprintf(out, "%02x", data[i]); column += 2; break; } if (column > 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* *
getdigit */ int
getdigit(char c) { if (c == 0) { return -1; } if (c <= '9' && c >= '0') { return c - '0'; } if (c <= 'f' && c >= 'a') { return c - 'a' + 0xa; } if (c <= 'f' && c >= 'a') { return c - 'a' + 0xa; } return -1; } /* * hextobuf */ int hextobuf(unsigned char *instring, secitem *outbuf, prbool ishexdata) { int len = ...
...port_alloc(outlen) : port_alloc(len); if (!outbuf->data) { return -1; } if (ishexdata) { while (*instring) { if ((*instring == '\n') || (*instring == ':')) { instring++; continue; } digit1 =
getdigit(*instring++); digit2 =
getdigit(*instring++); if ((digit1 == -1) || (digit2 == -1)) { port_free(outbuf->data); outbuf->data = null; return -1; } outbuf->data[truelen++] = digit1 << 4 | digit2; } } else { while (*instring) { if (*instring == '\n') { ...
...And 9 more matches
PKCS11 FAQ
if so, is there a way to
get the certificate from an external token into nss's internal certificate database?
... nss
gets the value of the cka_label attribute from the token.
... will nss
get the user's ca certificate via pkcs #11 and push it into the ca certificate database or is the ca certificate database expected to obtain the ca certificate by some other means?
...And 9 more matches
Property cache
when recording a
getprop, the jit needs to know the result type before the interpreter executes the instruction.
... it is crucial that jit and interpreter
get the same answer; possible pitfalls include native
getters and resolve hooks.
... the opcodes that take advantage of the property cache, as of june 2009, are:
getprop,
get{x,this,arg,local}prop, and length; name; setprop, bindname, and setname; callprop and callname; and {inc,dec}name and name{inc,dec}.
...And 9 more matches
Querying Places
use nsinavhistoryservice.
getnewquery() and nsinavhistoryservice.
getnewqueryoptions() to retrieve empty objects.
... the defaults for these objects will result in a query that returns all of your browser history in a flat list: chromeutils.definemodule
getter(this, "placesutils", "resource://gre/modules/placesutils.jsm"); // no query options set will
get all history, sorted in database order, // which is nsinavhistoryqueryoptions.sort_by_none.
... let options = placesutils.history.
getnewqueryoptions(); // no query parameters will return everything let query = placesutils.history.
getnewquery(); // execute the query let result = placesutils.history.executequery(query, options); result types nsinavhistoryqueryoptions has a resulttype property that allows configuration of the grouping and level of detail to be returned in the results.
...And 9 more matches
Accessing the Windows Registry Using XPCOM
first, you must use createinstance() to
get an object implementing this interface, not
getservice().
...you can check the type of a value using the method
getvaluetype().
... function readregistryvalue(wrk, value) { switch (wrk.
getvaluetype(value)) { case wrk.type_string: return wrk.readstringvalue(value); case wrk.type_binary: return wrk.readbinaryvalue(value); case wrk.type_int: return wrk.readintvalue(value); case wrk.type_int64: return wrk.readint64value(value); } // unknown type return null; } writing registry values writing registry values is quite similar to reading.
...And 9 more matches
Using XPCOM Components
the snippet in
getting the cookiemanager component in javascript shows how the remove() method from the xpcom cookiemanager component can be called from javascript:
getting the cookiemanager component in javascript // xpconnect to cookiemanager //
get the cookie manager component in javascript var cmgr = components.classes["@mozilla.org/cookiemanager;1"] .
getservice(); cmgr = cmgr.queryinterf...
...scriptability, this ability to
get and use xpcom components from javascript and other languages for which xpconnect bindings have been created, is a core feature of xpcom.
... once you use the interface to
get to the component, you can ask the component what other interfaces it supports.
...And 9 more matches
XPCOM Stream Guide
the spout controls how much water you can
get out of the tank at a time.
...winputstream(); string (8-bit characters) nsstringstream @mozilla.org/io/string-input-stream;1 nsistringinputstream stream.setdata(data, length); file nsfileinputstream @mozilla.org/network/file-input-stream;1 nsifileinputstream stream.init(file, ioflags, perm, behaviorflags); zip nsjarinputstream n/a nsiinputstream zipreader.
getinputstream(zipentry); similarly, each of these implements nsioutputstream.
... primitive output streams type native class contract id interface how to bind to a data tar
get generic nsstoragestream @mozilla.org/storagestream;1 nsistoragestream stream.
getoutputstream(); // returns nsioutputstream file nsfileoutputstream @mozilla.org/network/file-output-stream;1 nsifileoutputstream stream.init(file, ioflags, perm, behaviorflags); file nssafefileoutputstream @mozilla.org/network/safe-file-output-stream;1 nsisafefileoutputstream, nsifileoutputstream stream.init(file, ioflags, perm, behaviorflags); channels have streams too any implementation of nsichannel will have an input stream as well, but unless you own the channel, you shouldn't try to read from the input st...
...And 9 more matches
Components.utils.exportFunction
the exported function does not have to be added to the less privileged code's global window object: it can be exported to any object in the tar
get scope.
... syntax components.utils.exportfunction(func, tar
getscope[, options]); parameters func : function the function to export.
... tar
getscope : object the object to attach the function to.
...And 9 more matches
IAccessibleTableCell
1.0 66 introduced gecko 1.9.2 inherits from: iunknown last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview [prop
get] hresult columnextent([out] long ncolumnsspanned ); [prop
get] hresult columnheadercells([out, size_is(, ncolumnheadercells,)] iunknown cellaccessibles, [out] long ncolumnheadercells ); [prop
get] hresult columnindex([out] long columnindex ); [prop
get] hresult isselected([out] boolean isselected ); [prop
get] hresult rowcolumnextents([out] long row, [out] long column, [out] long rowextents, [out] long columnextents, [out] boolean isselected ); [prop
get] hresult rowextent([out]...
... long nrowsspanned ); [prop
get] hresult rowheadercells([out, size_is(, nrowheadercells,)] iunknown cellaccessibles, [out] long nrowheadercells ); [prop
get] hresult rowindex([out] long rowindex ); [prop
get] hresult table([out] iunknown table ); methods columnextent() returns the number of columns occupied by this cell accessible.
...[prop
get] hresult columnextent( [out] long ncolumnsspanned ); parameters ncolumnsspanned returns the 1 based column extent of the specified cell.
...And 9 more matches
nsIDownloadManager
to
get the service, use: var downloadmanager = components.classes["@mozilla.org/download-manager;1"] .
getservice(components.interfaces.nsidownloadmanager); method overview nsidownload adddownload(in short adownloadtype, in nsiuri asource, in nsiuri atar
get, in astring adisplayname, in nsimimeinfo amimeinfo, in prtime astarttime, in nsilocalfile atempfile, in nsicancela...
...ble acancelable, in boolean aisprivate); void addlistener(in nsidownloadprogresslistener alistener); void canceldownload(in unsigned long aid); void cleanup(); void endbatchupdate(); obsolete since gecko 1.9.1 void flush(); obsolete since gecko 1.8 nsidownload
getdownload(in unsigned long aid); void onclose(); obsolete since gecko 1.9.1 void open(in nsidomwindow aparent, in nsidownload adownload); obsolete since gecko 1.9.1 void openprogressdialogfor(in nsidownload adownload, in nsidomwindow aparent, in boolean acanceldownloadonclose); obsolete since gecko 1.9.1 void pausedownload(in unsigned long aid); void removedownload(in unsigned long aid); void removedownloadsbytimeframe(in lon...
... download_finished 1 download completed including any processing of the tar
get file.
...And 9 more matches
nsILocaleService
to use this service, use: var localeservice = components.classes["@mozilla.org/intl/nslocaleservice;1"] .
getservice(components.interfaces.nsilocaleservice); method overview nsilocale
getapplicationlocale(); astring
getlocalecomponentforuseragent(); nsilocale
getlocalefromacceptlanguage(in string acceptlanguage); nsilocale
getsystemlocale(); nsilocale newlocale(in astring alocale); nsilocale newlocaleobject(in nsilocaledefinition localedefinition); ob...
...solete since gecko 1.9 methods
getapplicationlocale()
gets the user preference for locale from the operating system.
...this method returns something similar to
getsystemlocale.
...And 9 more matches
nsISHEntry
nsdocshelleditordataptr for
geteditordata(); violates the xpcom interface guidelines nsicontentviewer
getanycontentviewer(out nsishentry ownerentry); void
getscrollposition(out long x, out long y); void
getviewerbounds(in nsintrect bounds); native code only!
... void syncpresentationstate(); attributes attribute type description cachekey nsisupports set and
get the cache key for the entry.
... owner nsisupports
get the owner, if any, that was associated with the channel that the document that was loaded to create this history entry came from.
...And 9 more matches
nsIScriptableIO
file and stream guide: [ nsiscriptableio | accessing files |
getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes).
...for example: io.
getfile("profile", "cookies.txt"); from an xpcom component, however, you will need to
get a reference as with other components: var scriptableio = components.classes["@mozilla.org/io/scriptable-io;1"] .
getservice(); scriptableio.
getfile("profile", "cookies.txt"); method overview nsifile
getfile(in astring alocation, in astring afilename); ...
...nsifile
getfilewithpath(in astring afilepath); nsisupports newinputstream(in nsivariant abase, in astring amode, [optional] in astring acharset, [optional] in astring areplacechar, [optional] in unsigned long abuffersize); nsisupports newoutputstream(in nsivariant abase, in astring amode, [optional] in astring acharset, [optional] in astring areplacechar, [optional] in unsigned long abuffersize, [optional] in unsigned long apermissions); nsiuri newuri(in nsivariant auri); methods
getfile() retrieves a reference to a file or directory on disk.
...And 9 more matches
nsISocketTransport
to create an instance, call nsisockettransportservice.createtransport() method overview prnetaddr
getpeeraddr(); native code only!
... prnetaddr
getselfaddr(); native code only!
... unsigned long
gettimeout(in unsigned long atype); boolean isalive(); void settimeout(in unsigned long atype, in unsigned long avalue); attributes attribute type description connectionflags unsigned long a bitmask that can be used to modify underlying behavior of the socket connection.
...And 9 more matches
Debugger.Script - Firefox Developer Tools
(if more than one debugger instance is debugging the same code, each debugger
gets a separate debugger.script instance for a given script.
...
getalloffsets() if the instance refers to a jsscript, return an arrayl describing the relationship between bytecode instruction offsets and source code positions in this script.l is sparse, and indexed by source line number.
... a[i] = i*i; calling
getalloffsets() on that code might yield an array like this: [[0], [5, 20], , [10]] this array indicates that: the first line’s code starts at offset 0 in the script; the for statement head has two entry points at offsets 5 and 20 (for the initialization, which is performed only once, and the loop test, which is performed at the start of each iteration); the third line has no code; and the fourth line begins...
...And 9 more matches
Introduction to the DOM - Web APIs
for example, the standard dom specifies that the
getelementsbytagname method in the code below must return a list of all the <p> elements in the document: const paragraphs = document.
getelementsbytagname("p"); // paragraphs[0] is the first <p> element // paragraphs[1] is the second <p> element, etc.
... the modern dom is built using multiple apis that work to
gether.
...though we focus exclusively on javascript in this reference documentation, implementations of the dom can be built for any language, as this python example demonstrates: # python dom example import xml.dom.minidom as m doc = m.parse(r"c:\projects\py\chap1.xml") doc.nodename # dom property of document object p_list = doc.
getelementsbytagname("para") for more information on what technologies are involved in writing javascript on the web, see javascript technologies overview.
...And 9 more matches
Using the MediaStream Recording API - Web APIs
when used with navigator.mediadevices.
getusermedia(), it provides an easy way to record from the user's input devices and instantly use the result in web apps.
... both audio and video may be recorded, separately or to
gether.
...if you are not interested in css and want to
get straight to the javascript, skip to the basic app setup section.
...And 9 more matches
A basic 2D WebGL animation example - Web APIs
let uscalingfactor; let uglobalcolor; let urotationvector; let avertexposition; // animation timing let previoustime = 0.0; let degreespersecond = 90.0; initializing the program is handled through a load event handler called startup(): window.addeventlistener("load", startup, false); function startup() { glcanvas = document.
getelementbyid("glcanvas"); gl = glcanvas.
getcontext("webgl"); const shaderset = [ { type: gl.vertex_shader, id: "vertex-shader" }, { type: gl.fragment_shader, id: "fragment-shader" } ]; shaderprogram = buildshaderprogram(shaderset); aspectratio = glcanvas.width/glcanvas.height; currentrotation = [0, 1]; currentscale = [1.0, aspectratio]; ve...
...loat32array([ -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5 ]); vertexbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, vertexbuffer); gl.bufferdata(gl.array_buffer, vertexarray, gl.static_draw); vertexnumcomponents = 2; vertexcount = vertexarray.length/vertexnumcomponents; currentangle = 0.0; rotationrate = 6; animatescene(); } after
getting the webgl context, gl, we need to begin by building the shader program.
...since the two axes aren't the same length, if we don't adjust the values of one of the two axes, the square will
get stretched out in one direction or the other.
...And 9 more matches
Writing a WebSocket server in C# - Web APIs
in() { tcplistener server = new tcplistener(ipaddress.parse("127.0.0.1"), 80); server.start(); console.writeline("server has started on 127.0.0.1:80.{0}waiting for a connection...", environment.newline); tcpclient client = server.accepttcpclient(); console.writeline("a client connected."); } } tcpclient methods: system.net.sockets.networkstream
getstream()
gets the stream which is the communication channel.
... tcpclient client = server.accepttcpclient(); console.writeline("a client connected."); networkstream stream = client.
getstream(); //enter to an infinite cycle to be able to handle every change in stream while (true) { while (!stream.dataavailable); byte[] bytes = new byte[client.available]; stream.read(bytes, 0, bytes.length); } handshaking when a client connects to a server, it sends a
get request to upgrade the connection to a websocket from a simple http request.
... this sample code can detect a
get from the client.
...And 9 more matches
ARIA: application role - Accessibility
description the application role indicates to assistive technologies that this part of the web content contains elements that do not conform to any other known html element or wai-aria wid
get.
... any sort of special interpretation of html structures and wid
gets should be suspended, and control should be completely handed over to the browser and web application to handle mouse, keyboard, or touch interaction.
...to be able to interact with a web page, a standard set of wid
gets is recognized that, when pressing a certain key (usually the enter key) this mode is switched off.
...And 9 more matches
ARIA: grid role - Accessibility
the grid role is for a wid
get that contains one or more rows of cells.
... <button id="1b" tabindex="-1">1b</button> </td> <!-- more columns --> </tr> <tr> <th scope="row">aisle 2</th> <td tabindex="-1"> <button id="2a" tabindex="-1">2a</button> </td> <td tabindex="-1"> <button id="2b" tabindex="-1">2b</button> </td> <!-- more columns --> </tr> </tbody> </table> description a grid wid
get contains one or more rows with one or more cells of thematically related interactive content.
...uses fall into two categories: presenting tabular information (data grids) and grouping other wid
gets (layout grids).
...And 9 more matches
HTTP response status codes - HTTP
the meaning of the success depends on the http method:
get: the resource has been fetched and is transmitted in the message body.
... 226 im used (http delta encoding) the server has fulfilled a
get request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance.
... 303 see other the server sent this response to direct the client to
get the requested resource at another uri with a
get request.
...And 9 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
the most common host environment is the browser, but javascript interpreters can also be found in a huge list of other places, including adobe acrobat, adobe photoshop, svg images, yahoo's wid
get engine, server-side environments such as node.js, nosql databases like the open source apache couchdb, embedded computers, complete desktop environments like gnome (one of the most popular guis for gnu/linux operating systems), and others.
...and date and regexp, which are objects that you
get for free.
...unless you're certain of your string format, you can
get surprising results on those older browsers: parseint('010'); // 8 parseint('0x10'); // 16 here, we see the parseint() function treat the first string as octal due to the leading 0, and the second string as hexadecimal due to the leading "0x".
...And 9 more matches
Functions - JavaScript
see also the exhaustive reference chapter about javascript functions to
get to know the details.
...a non-primitive value, such as array or a user-defined object) as a parameter and the function changes the object's properties, that change is visible outside the function, as shown in the following example: function myfunc(theobject) { theobject.make = 'toyota'; } var mycar = {make: 'honda', model: 'accord', year: 1998}; var x, y; x = mycar.make; // x
gets the value "honda" myfunc(mycar); y = mycar.make; // y
gets the value "toyota" // (the make property was changed by the function) function expressions while the function declaration above is syntactically a statement, functions can also be created by a function expression.
...for example, the function square could have been defined as: const square = function(number) { return number * number } var x = square(4) // x
gets the value 16 however, a name can be provided with a function expression.
...And 9 more matches
Numbers and dates - JavaScript
decimal numbers 1234567890 42 // caution when using leading zeros: 0888 // 888 parsed as decimal 0777 // parsed as octal in non-strict mode (511 in decimal) note that decimal literals can start with a zero (0) followed by another decimal digit, but if every digit after the leading 0 is smaller than 8, the number
gets parsed as an octal number.
...the date object has a large number of methods for setting,
getting, and manipulating dates.
... "
get" methods, for
getting date and time values from date objects.
...And 9 more matches
Function.prototype.bind() - JavaScript
syntax let boundfunc = func.bind(thisarg[, arg1[, arg2[, ...argn]]]) parameters thisarg the value to be passed as the this parameter to the tar
get function func when the bound function is called.
... a bound function has the following internal properties: [[boundtar
getfunction]] the wrapped function object [[boundthis]] the value that is always passed as this value when calling the wrapped function.
... when a bound function is called, it calls internal method [[call]] on [[boundtar
getfunction]], with following arguments call(boundthis, ...args).
...And 9 more matches
Proxy() constructor - JavaScript
syntax new proxy(tar
get, handler) parameters tar
get a tar
get object to wrap with proxy.
...this constructor takes two mandatory arguments: tar
get is the object for which you want to create the proxy handler is the object that defines the custom behavior of the proxy.
... an empty handler will create a proxy that behaves, in almost all respects, exactly like the tar
get.
...And 9 more matches
Reflect.construct() - JavaScript
it is equivalent to calling new tar
get(...args).
... syntax reflect.construct(tar
get, argumentslist[, newtar
get]) parameters tar
get the tar
get function to call.
... argumentslist an array-like object specifying the arguments with which tar
get should be called.
...And 9 more matches
Codecs used by WebRTC - Web media technologies
specifying and configuring codecs
getting the supported codecs because a given browser and platform may have different availability among the potential codecs—and may have multiple profiles or levels supported for a given codec—the first step when configuring codecs for an rtcpeerconnection is to
get the list of available codecs.
... to do this, you first have to establish a connection on which to
get the list.
...the most efficient way is to use the static method rtcrtpsender.
getcapabilities() (or the equivalent rtcrtpreceiver.
getcapabilities() for a receiver), specifying the type of media as the input parameter.
...And 9 more matches
Using templates and slots - Web Components
let's look at a trivial quick example: <template id="my-paragraph"> <p>my paragraph</p> </template> this won't appear in your page until you grab a reference to it with javascript and then append it to the dom, using something like the following: let template = document.
getelementbyid('my-paragraph'); let templatecontent = template.content; document.body.appendchild(templatecontent); although trivial, you can already start to see how this could be useful.
...we'll call it <my-paragraph>: customelements.define('my-paragraph', class extends htmlelement { constructor() { super(); let template = document.
getelementbyid('my-paragraph'); let templatecontent = template.content; const shadowroot = this.attachshadow({mode: 'open'}) .appendchild(templatecontent.clonenode(true)); } } ); the key point to note here is that we append a clone of the template content to the shadow root, created using the node.clonenode() method.
... the following set of code snippets show how to use <slot> to
gether with <template> and some javascript to: create a <element-details> element with named slots in its shadow root design the <element-details> element in such a way that, when used in documents, it is rendered from composing the element’s content to
gether with content from its shadow root—that is, pieces of the element’s content are used to fill in named slots in its shadow root note ...
...And 9 more matches
Storing annotations - Archive of obsolete content
warning: this tutorial relies on the since-removed wid
get api and no longer works with firefox.
... the wid
get api is deprecated from firefox 29 onwards.
...in particular, for a simple button, try the action button or toggle button apis, and for a more complex wid
get try the toolbar or sidebar apis.
...And 8 more matches
Bookmarks - Archive of obsolete content
firefox 2 and earlier creating a new bookmark var win = mybrowser.contentwindow; //
get the bookmarks service const bmsvc = components.classes["@mozilla.org/browser/bookmarks-service;1"] .
getservice(components.interfaces.nsibookmarksservice); // create the bookmark bmsvc.createbookmarkincontainer(win.document.title, // bookmark name win.location.href.tostring(), // uri of the bookmark null, // shortcut win.document.title, // description win.document.characterset, // charset null, // postdata bookmarksservice.
getbookmarkstoolbarfolder(), // bookmark folder ...
... initiating the bookmarks service as is the case with nearly all interfaces, before you can use the bookmarks service, you need to
get access to it: var bmsvc = components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .
getservice(components.interfaces.nsinavbookmarksservice); creating a bookmark folder creating a new bookmark folder is done using the nsinavbookmarksservice.createfolder() method.
... var ios = components.classes["@mozilla.org/network/io-service;1"] .
getservice(components.interfaces.nsiioservice); var uri = ios.newuri("http://google.com/", null, null); var newbkmkid = bmsvc.insertbookmark(newfolderid, uri, bmsvc.default_index, ""); this example instantiates the nsiioservice and uses it to create an nsiuri referring to the google web site, then calls nsinavbookmarksservice.insertbookmark() to create a new bookmark to google, placing it at the en...
...And 8 more matches
Canvas code snippets - Archive of obsolete content
code usable from web content
getting the number of pixels of a certain color in a canvas the following function will return the number of pixels in a canvas that have the rgb color of r, g and b.
... function
getpixelamount(canvas, r, g, b) { var cx = canvas.
getcontext('2d'); var pixels = cx.
getimagedata(0, 0, canvas.width, canvas.height); var all = pixels.data.length; var amount = 0; for (i = 0; i < all; i += 4) { if (pixels.data[i] === r && pixels.data[i + 1] === g && pixels.data[i + 2] === b) { amount++; } } return amount; };
getting the color of a pixel in a canvas this following snippet returns an object with the rgba values of the pixel at position x and y of the canvas.
... function
getpixelcolour(canvas, x, y) { var cx = canvas.
getcontext('2d'); var pixel = cx.
getimagedata(x, y, 1, 1); return { r: pixel.data[0], g: pixel.data[1], b: pixel.data[2], a: pixel.data[3] }; } chaining methods this class provides jquery-style chained access to 2d context methods and properties.
...And 8 more matches
JavaScript Object Management - Archive of obsolete content
*/ init : function() { this.obsservice = cc["@mozilla.org/observer-service;1"].
getservice(ci.nsiobserverservice); } }; 〈namespace〉.init(); }; js objects can also be treated as string-indexed arrays: // equivalent.
...this is an odd, but powerful feature that comes in handy at times when things
get complicated.
... */ init : function(aevent) { this._stringbundle = document.
getelementbyid("xulschoolhello-string-bundle"); // you can make changes to the window dom here.
...And 8 more matches
Setting Up a Development Environment - Archive of obsolete content
« previousnext »
getting the right tools there are 3 tools that we think are essential for effective add-on development (or any kind of development, really): a source code editor, a source control system, and a build system.
...that is more than what you can
get with most other editors, so we recommend you to give it a try.
...after setting up make, you should be able to open a command line window, run "make -ver", and
get the installed version of make as output.
...And 8 more matches
The Essentials of an Extension - Archive of obsolete content
<em:tar
getapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>4.0</em:minversion> <em:maxversion>10.*</em:maxversion> </description> </em:tar
getapplication> this node specifies the tar
get application and tar
get versions for the extension, specifically firefox, from version 4 up to version 10.
... sayhello : function(aevent) { let stringbundle = document.
getelementbyid("xulschoolhello-string-bundle"); let message = stringbundle.
getstring("xulschoolhello.greeting.label"); window.alert(message); } and, finally, this is our function declaration.
...first we
get a reference of the stringbundle element in the document.
...And 8 more matches
Using Dependent Libraries In Extension Components - Archive of obsolete content
}; // component.dll on windows, libcomponent.so on linux static char krealcomponent[] = moz_dll_prefix "component" moz_dll_suffix; nsresult ns
getmodule(nsicomponentmanager* acompmgr, nsifile* alocation, nsimodule* *aresult) { nsresult rv; // this is not the real component.
... we want to load the dependent libraries // of the real component, then the component itself, and call ns
getmodule on // the component.
... // assume that we're in <extensiondir>/components, and we want to find // <extensiondir>/libraries nscomptr<nsifile> libraries; rv = alocation->
getparent(
getter_addrefs(libraries)); if (ns_failed(rv)) return rv; nscomptr<nsilocalfile> library(do_queryinterface(libraries)); if (!library) return ns_error_unexpected; library->setnativeleafname(ns_literal_cstring("libraries")); library->appendnative(ns_literal_cstring("dummy")); // loop through and load dependent libraries for (char const *const *dependent = kdependentlibraries; *dependent; ++dependent) { library->setnativeleafname(nsdependentcstring(*dependent)); prlibrary *lib; library->load(&lib); // 1) we don't care if this failed!
...And 8 more matches
JXON - Archive of obsolete content
note: if you are using an instance of xmlhttprequest in order to retrieve your xml file, please use the yourrequest.responsexml property to
get a parsed xml document.
... jxontree.prototype.valueof = function () { return this.keyvalue; }; jxontree.prototype.tostring = function () { return string(this.keyvalue); }; jxontree.prototype.
getitem = function (nitem) { if (nlength === 0) { return null; } var ncount = 0; for (var skey in this) { if (ncount === nitem) { return this[skey]; } ncount++; } return null; }; jxontree.prototype.
getattribute = function (nattrid) { if (nattrlen === 0 || nattrid + 1 > nattrlen) { return null; } var nattr = 0; for (var sattrname in this.keyattributes) { if (nattr === nattrid) { return t...
...|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| \*/ function parsetext (svalue) { if (/^\s*$/.test(svalue)) { return null; } if (/^(?:true|false)$/i.test(svalue)) { return svalue.tolowercase() === "true"; } if (isfinite(svalue)) { return parsefloat(svalue); } if (isfinite(date.parse(svalue))) { return new date(svalue); } return svalue; } function
getjxontree (oxmlparent) { var vresult = /* put here the default value for empty nodes!
...And 8 more matches
Code snippets - Archive of obsolete content
let mainwindow = window.queryinterface(components.interfaces.nsiinterfacerequestor) .
getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsidocshelltreeitem) .roottreeitem .queryinterface(components.interfaces.nsiinterfacerequestor) .
getinterface(components.interfaces.nsidomwindow); // obtain a reference to sync's tabs "engine." let tabsengine = weave.
...service.enginemanager.
get("tabs"); // iterate over each client having data.
... for each (let client in tabsengine.
getallclients()) { for each (let tab in client.tabs) { let url = tab.urlhistory[0]; // load the tab via the tabbed browser api.
...And 8 more matches
Modularization techniques - Archive of obsolete content
a static object would chose to ignore reference counts alto
gether.
...or those who like gory details, their structure is this: struct nsid { pruint32 m0; pruint16 m1, m2; pruint8 m3[8]; }; frequently you see them represented as strings, like this: {221ffe10-ae3c-11d1-b66c-00805f8a2676} to initialize an id struct you declare them like this: id = {0x221ffe10, 0xae3c, 0x11d1, {0xb6, 0x6c, 0x00, 0x80, 0x5f, 0x8a, 0x26, 0x76}}; why the b66c couplet
gets broken up and grouped with the last set of bytes is probably a footnote somewhere.
... #include "nsifactory.h" // {d3944dd0-ae1a-11d1-b66c-00805f8a2676} #define ns_sample_cid \ {0xd3944dd0, 0xae1a, 0x11d1, \ {0xb6, 0x6c, 0x00, 0x80, 0x5f, 0x8a, 0x26, 0x76}} extern nsresult
getsamplefactory(nsifactory **aresult); file nssample.cpp nssample.cpp contains both the declaration and implementation of our sample class, and the declaration and implementation of our class factory.
...And 8 more matches
Accessing Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files |
getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes).
...to
get a reference to a file object use nsiscriptableio.
getfile().
...var file = io.
getfile("profile", "sample.txt"); the nsiscriptableio object is a global object always available within an application or extension which provides a number of useful functions for dealing with files.
...And 8 more matches
Working With Directories - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files |
getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes).
...a reference to a directory may be created in the same way as with a file by using nsiscriptableio.
getfile().
...var dir1 = io.
getfile("home", ""); var dir2 = io.
getfile("desktop", "myfiles"); to refer to a subdirectory, rather than using a path, use nsifile.append() to build up a path.
...And 8 more matches
More Event Handlers - Archive of obsolete content
we already saw the event's tar
get property in the last section.
...a similar property currenttar
get holds the element that is currently having its event listeners handled.
... in the example below, currenttar
get is always the vbox, whereas tar
get would be the specific element, either the button or checkbox, that was activated.
...And 8 more matches
Styling a Tree - Archive of obsolete content
setting properties for the custom view for trees with a custom view script, you can set properties by supplying the functions
getrowproperties(),
getcolumnproperties() and
getcellproperties() in the view.
...the function
getcolumnproperties() also supplies the corresponding treecol element for the column.
...
getrowproperties : function(row,prop){}
getcolumnproperties : function(column,columnelement,prop){}
getcellproperties : function(row,column,prop){} from gecko 22 you can return a string of space-separated property names from these functions.
...And 8 more matches
Tree Selection - Archive of obsolete content
« previousnext » the section will describe how to
get and set the selected items in a tree.
...
getting the selected tree items each item in a tree (that corresponds to treeitem element, if using content tree view) may be selected individually.
...<tree id="treeset" onselect="alert('you selected something!');"> tree indices the tree has a property currentindex, which can be used to
get the currently selected item, where the first row is 0.
...And 8 more matches
XML - Archive of obsolete content
using a combination of xul's ready-made wid
gets (e.g., menubar, scrollbar, progressmeter, and so on) and xul's incorporation of such standards as html4, dom1/2, and cascading stylesheets, you can design any interface that you can imagine, using any number of different features, tools, and methodologies.
... every xul wid
get must use close tags to be well-formed.
... xul is made out of xml you don't need to know all about xml in order to use xul, but you may want to read through this article to
get a sense of xul's pedigree as a specialized markup language.
...And 8 more matches
menuitem - Archive of obsolete content
use hasattribute() to determine whether this attribute is set instead of
getattribute().
...for those elements, setattribute("value", myvalue) and
getattribute("value") do not access or affect the contents displayed to the user.
... accesskey type: character
gets and sets the value of the accesskey attribute.
...And 8 more matches
preference - Archive of obsolete content
object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.tar
get.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> readonly type: boolean if set to true, then the user cannot change the value of the element.
... disabled type: boolean
gets and sets the value of the disabled attribute.
...(but note bug 451025.) inverted type: boolean
gets and sets the value of the inverted attribute.
...And 8 more matches
tab - Archive of obsolete content
if the user has turned on the "don't load tabs until selected" preference, the pending attribute is set on tabs until they
get loaded.
... properties accesskey type: character
gets and sets the value of the accesskey attribute.
... command type: element id
gets and sets the value of the command attribute.
...And 8 more matches
Mozilla XForms User Interface - Archive of obsolete content
the set of "xforms user interface" elements exist to aid form authors in combining host language markup and xforms markup to
gether in order to build user interfaces.
... appearance - the value provided by the form author gives a hint to the processor as to which wid
get to use to represent the xforms control.
...generally speaking, the main purpose for these values is to reflect how much space (screen real estate) the displayed wid
get will take.
...And 8 more matches
Plug-in Development Overview - Gecko Plugin API Reference
to determine the mime types and file extensions that the plug-in handles, the browser loads each library and calls into the np_
getmimedescription entry point.
... npp_
getvalue is called after the plug-in is initialized to
get the scripting interface while np_
getvalue is called during initialization to retrieve the plug-in's name and description, which will appear in the navigator.plugins dom object which is used to populate about:plugins.
...if nothing is found there, gecko checks for an np_
getmimedescription entry point, and will use the information returned by this function.
...And 8 more matches
Positioning - Learn web development
static positioning static positioning is the default that every element
gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here." to demonstrate this, and
get your example set up for future sections, first add a class of positioned to the second <p> in the html: <p class="positioned"> ...
... if you now save and refresh, you'll
get a result something like this: <h1>relative positioning</h1> <p>i am a basic block level element.
...auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } first of all, note that the gap where the positioned element should be in the document flow is no longer there — the first and third elements have closed to
gether like it no longer exists!
...And 8 more matches
From object to iframe — other embedding technologies - Learn web development
previous overview: multimedia and embedding next by now you should really be
getting the hang of embedding things into your web pages, including images, video and audio.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in
getting started with html) and the previous articles in this module.
...if you
get really stuck, press the show solution button to see an answer.
...And 8 more matches
Third-party APIs - Learn web development
note: you might want to just
get all our code examples at once, in which case you can then just search the repo for the example files you need in each section.
... you'll find a line similar to the following in the mapquest api example: l.mapquest.key = 'your-api-key-here'; this line specifies an api or developer key to use in your application — the developer of the application must apply to
get a key, and then include it in their code to be allowed access to the api's functionality.
... note: if you have trouble
getting the example to work, check your code against our finished version — see expanded-example.html (also see it running live here).
...And 8 more matches
React interactivity: Events and state - Learn web development
update it as follows: function handlesubmit(e) { e.preventdefault(); props.addtask("say hello!"); } clicking on the "add" button in your browser will prove that the addtask() callback function works, but it'd be nice if we could
get the alert to show us what we're typing in our input field!
...we can do this inside handlechange() by reading e.tar
get.value.
... e.tar
get represents the element that fired the change event — that’s our input.
...And 8 more matches
Implementing feature detection - Learn web development
therefore, you can detect whether the browser supports geolocation or not by using something like the following: if ("geolocation" in navigator) { navigator.geolocation.
getcurrentposition(function(position) { // show the location on a map, perhaps using the google maps api }); } else { // give the user a choice of static maps instead perhaps } it is probably better to use an established feature detection library however, rather than writing your own all the time.
... note: if you have trouble
getting this to work, you can compare it to our css-feature-detect-finished.html code (see also the live version).
... note: often such an approach is overkill for a minor feature detection problem — you can often
get away with using multiple vendor prefixes and fallback properties, as described in css fallback behavior and handling css prefixes.
...And 8 more matches
Handling common HTML and CSS problems - Learn web development
if you have a wid
get, make sure it has a distinct class, and then start the selectors that select elements inside the wid
get with this class, so conflicts are less likely.
...these allows you to paste your code into a window, and it will flag up any errors with crosses, which can then be hovered to
get an error message informing you what the problem is.
...supporting platforms provide special ui wid
gets when these input types are used, such as a calendar wid
get for entering dates.
...And 8 more matches
Accessibility API cross-reference
column n/a n/a n/a the heading of a table's column columnheader column_header column_header, table_column_header columnheader <th scope=col> edit control with drop down list box, different from droplist combobox combo_box combo_box combobox abstract role - a form of wid
get that performs an action but does not receive input data.
... complementary <aside> n/a but <div> or even <p> have been suggested for this purpose a wid
get that may contain navigable descendants or owned children.
... grid a composite wid
get containing a collection of one or more rows with one or more cells where some or all cells in the grid are focusable by using methods of two-dimensional navigation, such as directional arrow keys, e.g.
...And 8 more matches
Makefile - variables
garbage a "clean tar
get" macro containing a list of files to remove.
... garbage_dirs a "clean tar
get" macro containing a list of directories to remove.
... module module_name no_dist_install inhibit generating and copying exports/install tar
gets into $(moz_objdir)/dist/install.
...And 8 more matches
Eclipse CDT
since it's a pain to install them and keep them up to date we do not recommend
getting eclipse this way.) increase eclipse's memory limits!
... to
get a list of autocomplete options in an editor tab, start typing the name of an identifier and then type ctrl-space.
... it's not obvious, but you can
get a gdb prompt in the console so that you can type gdb commands directly.
...And 8 more matches
WebRequest.jsm
listener argument name type description url string tar
get of the request.
... listener argument name type description url string tar
get of the request.
... method string the http method to be used (
get, post, etc).
...And 8 more matches
Mozilla Development Strategies
make sure documentation
gets updated if the bug you're fixing is likely to require an update to developer documentation once it's fixed, be sure to add the dev-doc-needed keyword to the bug (or ask someone to do it, if you don't have editbugs privileges on bugzilla).
...they're giving you a second chance to
get it right before it becomes a bug that affects users.
...maybe the problem can be turned into an assert, or fixed alto
gether.
...And 8 more matches
Encrypt Decrypt MAC Keys As Session Objects
eneratesymkey(pk11slotinfo *slot, ck_mechanism_type mechanism, int keysize, secitem *keyid, secupwdata *pwdata) { secstatus rv; pk11symkey *key; if (pk11_needlogin(slot)) { rv = pk11_authenticate(slot, pr_true, pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_
gettokenname(slot)); return null; } } /* generate the symmetric key */ key = pk11_tokenkeygen(slot, mechanism, null, keysize, keyid, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_...
...ey(pk11slotinfo *slot, ck_mechanism_type mechanism, secitem *keybuf, secupwdata *pwdata) { secstatus rv; pk11symkey *key; if (pk11_needlogin(slot)) { rv = pk11_authenticate(slot, pr_true, pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_
gettokenname(slot)); if (slot) { pk11_freeslot(slot); } return null; } } key = pk11_findfixedkey(slot, mechanism, keybuf, 0); if (!key) { pr_fprintf(pr_stderr, "pk11_findfixedkey failed (err %d)\n", pr_
geterror()); pk11_freeslot(slot); return null; } return ke...
...shex(pr_stderr, macitem->data, macitem->len); pr_fprintf(pr_stderr, "computed : "); printashex(pr_stderr, newmac, newmaclen); rv = secfailure; } cleanup: if (ctxmac) { pk11_destroycontext(ctxmac, pr_true); } if (ctxenc) { pk11_destroycontext(ctxenc, pr_true); } if (outfile) { pr_close(outfile); } return rv; } /* *
gets iv and ckaids from header file */ secstatus
getivandckaidsfromheader(const char *cipherfilename, secitem *ivitem, secitem *enckeyitem, secitem *mackeyitem) { secstatus rv; /* open intermediate file, read in header,
get iv and cka_ids of two keys * from it */ rv = readfromheaderfile(cipherfilename, iv, ivitem, pr_true); if (rv != secsuccess) { ...
...And 8 more matches
Encrypt and decrypt MAC using token
eneratesymkey(pk11slotinfo *slot, ck_mechanism_type mechanism, int keysize, secitem *keyid, secupwdata *pwdata) { secstatus rv; pk11symkey *key; if (pk11_needlogin(slot)) { rv = pk11_authenticate(slot, pr_true, pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_
gettokenname(slot)); return null; } } /* generate the symmetric key */ key = pk11_tokenkeygen(slot, mechanism, null, keysize, keyid, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_...
...ey(pk11slotinfo *slot, ck_mechanism_type mechanism, secitem *keybuf, secupwdata *pwdata) { secstatus rv; pk11symkey *key; if (pk11_needlogin(slot)) { rv = pk11_authenticate(slot, pr_true, pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_
gettokenname(slot)); if (slot) { pk11_freeslot(slot); } return null; } } key = pk11_findfixedkey(slot, mechanism, keybuf, 0); if (!key) { pr_fprintf(pr_stderr, "pk11_findfixedkey failed (err %d)\n", pr_
geterror()); pk11_freeslot(slot); return null; } return ke...
...shex(pr_stderr, macitem->data, macitem->len); pr_fprintf(pr_stderr, "computed : "); printashex(pr_stderr, newmac, newmaclen); rv = secfailure; } cleanup: if (ctxmac) { pk11_destroycontext(ctxmac, pr_true); } if (ctxenc) { pk11_destroycontext(ctxenc, pr_true); } if (outfile) { pr_close(outfile); } return rv; } /* *
gets iv and ckaids from header file */ secstatus
getivandckaidsfromheader(const char *cipherfilename, secitem *ivitem, secitem *enckeyitem, secitem *mackeyitem) { secstatus rv; /* open intermediate file, read in header,
get iv and cka_ids of two keys * from it */ rv = readfromheaderfile(cipherfilename, iv, ivitem, pr_true); if (rv != secsuccess) { ...
...And 8 more matches
JSS Provider Notes
when you call
getinstance() on a jca class, the jss provider checks the current per-thread default token (by calling cryptomanager.
getthreadtoken()) and instructs the new object to use that token for cryptographic operations.
... the per-thread default token setting is only consulted inside
getinstance().
... the following example shows how you can specify which token is used for various jca operations: // lookup pkcs #11 tokens cryptomanager manager = cryptomanager.
getinstance(); cryptotoken tokena = manager.
gettokenbyname("tokena"); cryptotoken tokenb = manager.
gettokenbyname("tokenb"); // create an rsa keypairgenerator using tokena manager.setthreadtoken(tokena); keypairgenerator rsakpg = keypairgenerator.
getinstance("rsa", "mozilla-jss"); // create a dsa keypairgenerator using tokenb manager.setthreadtoken(tokenb); keypairgenerator dsakpg = keypairgenerat...
...And 8 more matches
Mozilla-JSS JCA Provider notes
when you call
getinstance() on a jca class, the jss provider checks the current per-thread default token (by calling cryptomanager.
getthreadtoken()) and instructs the new object to use that token for cryptographic operations.
... the per-thread default token setting is only consulted inside
getinstance().
...the following example shows how you can specify which token is used for various jca operations: // lookup pkcs #11 tokens cryptomanager manager = cryptomanager.
getinstance(); cryptotoken tokena = manager.
gettokenbyname("tokena"); cryptotoken tokenb = manager.
gettokenbyname("tokenb"); // create an rsa keypairgenerator using tokena manager.setthreadtoken(tokena); keypairgenerator rsakpg = keypairgenerator.
getinstance("mozilla-jss", "rsa"); // create a dsa keypairgenerator using tokenb manager.setthreadtoken(tokenb); keypairgenerator dsakpg = keypairgenerat...
...And 8 more matches
NSS_3.12_release_notes.html
go to the subdirectory for your platform, dbg (debug) or opt (optimized), to
get the tar.gz or zip file.
... the tar.gz or zip file expands to an nss-3.12 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr 4.7.1 binary distributions to
get the nspr 4.7.1 header files and shared libraries, which nss 3.12 requires.
...see cert.h) cert_encodeinhibitanyextension (see cert.h) cert_encodenoticereference (see cert.h) cert_encodepolicyconstraintsextension (see cert.h) cert_encodepolicymappingextension (see cert.h) cert_encodesubjectkeyid (see certdb/cert.h) cert_encodeusernotice (see cert.h) cert_findcrlentryreasonexten (see cert.h) cert_findcrlnumberexten (see cert.h) cert_findnameconstraintsexten (see cert.h) cert_
getclassicocspdisabledpolicy (see cert.h) cert_
getclassicocspenabledhardfailurepolicy (see cert.h) cert_
getclassicocspenabledsoftfailurepolicy (see cert.h) cert_
getpkixverifynistrevocationpolicy (see cert.h) cert_
getusepkixforvalidation (see cert.h) cert_
getvaliddnspatternsfromcert (see cert.h) cert_newtempcertificate (see cert.h) cert_setocsptimeout (see certhigh/ocsp.h) cert_setusepkixforvalidation...
...And 8 more matches
sslcrt.html
validating certificates manipulating certificates
getting certificate information comparing secitem objects validating certificates cert_verifycertnow cert_verifycertname cert_checkcertvalidtimes nss_cmpcertchainwcanames cert_verifycertnow checks that the current date is within the certificate's validity period and that the ca signature on the certificate is valid.
...use pr_
geterror to obtain the error code.
...use pr_
geterror to obtain the error code.
...And 8 more matches
SpiderMonkey Build Documentation
and of course, you'll need to
get the spidermonkey source code.
... note: if you are on mac and
getting an error similar to "checking whether the c compiler (gcc-4.2 ) works...
...start-shell-msvc2013.bat or start-shell-msvc2013-x64.bat) determines whether the compiler toolchain will tar
get 32-bit or 64-bit builds.
...And 8 more matches
Introduction to the JavaScript shell
to
get the spidermonkey javascript shell, see the spidermonkey build documentation or download a compiled binary for your platform from the nightly builds.
...you can use it as an interactive shell, in which you type javascript code at a prompt and
get instant gratification, which is handy for experimenting or testing new features.
... after following the build documentation and installing the built shell using make install, you can run the shell in interactive mode using the command: js [ if you
get " symbol lookup error: ./js: undefined symbol: pr_setcurrentthreadname" e.g.
...And 8 more matches
Using the Places annotation service
creating the annotation service the annotation contract id is @mozilla.org/browser/annotation-service;1 var annotationservice = components.classes["@mozilla.org/browser/annotation-service;1"] .
getservice(components.interfaces.nsiannotationservice); note that the annotation service is not thread-safe.
...also, we may add functions to
get all of "your" annotations matching a given namespace.
... var ioservice = components.classes["@mozilla.org/network/io-service;1"] .
getservice(components.interfaces.nsiioservice); var uri = ioservice.newuri("http://www.mozilla.org/", null, null); annotationservice.setpageannotation(uri, "my_extension/some_annotation", "this is the annotation value", 0, 0); retrieving annotations there are corresponding
getters for the setters above (see nsiannotationservice.idl for the exact declarations): from c++:
getpageannotationstr...
...And 8 more matches
Fun With XBL and XPConnect
introduction this article describes an application of xbl in which a simple xpcom interface is made accessible to a xul wid
get.
...once the regular xul textfield wid
get is bound to this interface, it calls the auto complete function of the object using regular javascript.
... the basic model of interaction is as follows: binding to the xpcom object the wid
get holds onto an xpcom object that is the auto complete engine that will perform our auto complete lookups.
...And 8 more matches
An Overview of XPCOM
these pieces, known as components, are then assembled back to
gether at runtime.
...when two or more related components are grouped to
gether in a binary library, the library is referred to as a module.
...the network library, for example, consists of components for each of the protocols, http, ftp, and others, which are bundled to
gether and linked into a single library.
...And 8 more matches
Finishing the Component
* * users of the service manager must first obtain a pointer to the * global service manager by calling ns_
getservicemanager.
... after that, * they can request specific services by calling
getservice.
... copying interfaces into your build environment to
get and implement interfaces that are not part of gecko in your component, simply create a new directory in the gecko sdk named unfrozen.
...And 8 more matches
mozIStorageStatement
method overview void initialize(in mozistorageconnection adbconnection, in autf8string asqlstatement); obsolete since gecko 1.9.1 void finalize(); mozistoragestatement clone(); autf8string
getparametername(in unsigned long aparamindex); unsigned long
getparameterindex(in autf8string aname); autf8string
getcolumnname(in unsigned long acolumnindex); unsigned long
getcolumnindex(in autf8string aname); void reset(); astring escapestringforlike(in astring avalue, in wchar aescapechar); void bindparameters(in mozistoragebindingparamsarray...
...
getparametername() obtains the name of the parameter for the specified index.
... autf8string
getparametername( in unsigned long aparamindex ); parameters aparamindex the zero-based numerical index for the parameter to be bound.
...And 8 more matches
nsIControllers
to create an instance, use: var controllers = components.classes["@mozilla.org/xul/xul-controllers;1"] .createinstance(components.interfaces.nsicontrollers); method overview void appendcontroller(in nsicontroller controller); nsicontroller
getcontrollerat(in unsigned long index); nsicontroller
getcontrollerbyid(in unsigned long controllerid); unsigned long
getcontrollercount(); nsicontroller
getcontrollerforcommand(in string command); unsigned long
getcontrollerid(in nsicontroller controller); void insertcontrollerat(in unsigned long index, in nsicontroller controller); void removecontroller(in nsicontroller controller); ...
... exceptions thrown ns_error_out_of_memory
getcontrollerat() returns the controller instance at the given position.
... nsicontroller
getcontrollerat( in unsigned long index ); parameters index the position of the wanted controller.
...And 8 more matches
nsIFileProtocolHandler
inherits from: nsiprotocolhandler last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview nsifile
getfilefromurlspec(in autf8string url); autf8string
geturlspecfromactualfile(in nsifile file); autf8string
geturlspecfromdir(in nsifile file); autf8string
geturlspecfromfile(in nsifile file); nsiuri newfileuri(in nsifile afile); nsiuri readurlfile(in nsifile file); methods
getfilefromurlspec() converts the url string into the corresponding nsifile if possible.
...nsifile
getfilefromurlspec( in autf8string url ); parameters url the url string to convert.
...
geturlspecfromactualfile() converts the nsifile to the corresponding url string.
...And 8 more matches
nsIIdleService
wid
get/nsiidleservice.idlscriptable the idle service lets you monitor how long the user has been 'idle', that is they have not used their mouse or keyboard.
... 1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 16 (firefox 16 / thunderbird 16 / seamonkey 2.13) you can
get the idle time directly, but in most cases you will want to register an observer for a predefined interval.
... the observer will
get an 'idle' notification when the user is idle for that interval (or longer), and receive a 'back' (gecko 3 to 15) or 'active' (gecko 16+) notification when the user starts using their computer again.
...And 8 more matches
nsIPlacesView
method overview nsinavhistoryresultnode[]
getdragableselection(); nsinavhistoryresultnode[][]
getremovableselectionranges(); nsinavhistoryresult
getresult(); nsinavhistorycontainerresultnode
getresultnode(); nsinavhistoryresultnode[]
getselectionnodes(); void selectall(); attributes attribute type description hasselection boolean whether or not there are selec...
... methods
getdragableselection() returns an array of selected nsinavhistoryresultnode objects that can be dragged from the view.
... nsinavhistoryresultnode[]
getdragableselection(); parameters none.
...And 8 more matches
Setting HTTP request headers
(in our example, our made up http header is x-hello and not hello because we correctly added the x- in front of our name.) no longer the case: http://tools.ietf.org/html/rfc6648 notifications the question that may be coming to your mind right now is, how do you
get the nsihttpchannel when an http request is made.
...in particular, to
get the nsihttpchannel just before the http request is made we need to observe the "http-on-modify-request" topic.
... (and yes, "http-on-modify-request" is a string.) note: there are many topics, besides just "http-on-modify-request", that you can
get notifications about, for example "http-on-examine-response" and "xpcom-shutdown".
...And 8 more matches
Creating a Custom Column
the following step through will
get you well on the road to creating your own columns and populating them with custom data.
...
getting started in this example we will be developing a small extension that will be adding a column that will display the "reply-to:" field of an email (if it exists, it if often not set).
...don't for
get to add in a splitter before the column to ensure that the user can easily resize and drag our column around.
...And 8 more matches
Plug-in Development Overview - Plugins
to determine the mime types and file extensions that the plug-in handles, the browser loads each library and calls into the np_
getmimedescription entry point.
... npp_
getvalue is called after the plug-in is initialized to
get the scripting interface while np_
getvalue is called during initialization to retrieve the plug-in's name and description, which will appear in the navigator.plugins dom object which is used to populate about:plugins.
...if nothing is found there, gecko checks for an np_
getmimedescription entry point, and will use the information returned by this function.
...And 8 more matches
Debugger.Object - Firefox Developer Tools
the referent's properties do not appear directly as properties of the debugger.object instance; the debugger can access them only through methods like debugger.object.prototype.
getownpropertydescriptor and debugger.object.prototype.defineproperty, ensuring that the debugger will not inadvertently invoke the referent's
getters and setters.
... if more than one debugger instance is debugging the same code, each debugger
gets a separate debugger.object instance for a given object.
... by convention, host annotation objects have a string-valued "type" property that, taken to
gether with the object's class, indicate what sort of thing the referent is.
...And 8 more matches
Drawing shapes with canvas - Web APIs
« previousnext » now that we have set up our canvas environment, we can
get into the details of how to draw on the canvas.
... rectangular shape example <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var canvas = document.
getelementbyid('canvas'); if (canvas.
getcontext) { var ctx = canvas.
getcontext('2d'); ctx.fillrect(25, 25, 100, 100); ctx.clearrect(45, 45, 60, 60); ctx.strokerect(50, 50, 50, 50); } } this example's output is shown below.
...internally, paths are stored as a list of sub-paths (lines, arcs, etc) which to
gether form a shape.
...And 8 more matches
Examples of web and XML development using the DOM - Web APIs
example 1: height and width the following example shows the use of the height and width properties alongside images of varying dimensions: <!doctype html> <html lang="en"> <head> <title>width/height example</title> <script> function init() { var arrimages = new array(3); arrimages[0] = document.
getelementbyid("image1"); arrimages[1] = document.
getelementbyid("image2"); arrimages[2] = document.
getelementbyid("image3"); var objoutput = document.
getelementbyid("output"); var strhtml = "<ul>"; for (var i = 0; i < arrimages.length; i++) { strhtml += "<li>image" + (i+1) + ": height=" + arrimages[i].height + ", width=" + arrimages[i].width + ", s...
...height, width, but style="height: 50px; width: 500px;" <img id="image3" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" style="height: 50px; width: 500px;"> </p> <div id="output"> </div> </body> </html> example 2: image attributes <!doctype html> <html lang="en"> <head> <title>modifying an image border</title> <script> function setborderwidth(width) { document.
getelementbyid("img1").style.borderwidth = width + "px"; } </script> </head> <body> <p> <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100" height="100" alt="border test"> </p> <form name="formname"> <input type="button" value="make border 20px-wide" onclick="setborderwidth(20);" /> <input type="button" value="make border 5px-wide" onclick="setbo...
... <!doctype html> <html lang="en"> <head> <title>changing color and font-size example</title> <script> function chan
getext() { var p = document.
getelementbyid("pid"); p.style.color = "blue" p.style.fontsize = "18pt" } </script> </head> <body> <p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> <form> <p><input value="rec" type="button" onclick="chan
getext();" /></p> </form> </body> </html> example 4: using stylesheets the stylesheets property on the document object returns...
...And 8 more matches
Using files from web applications - Web APIs
accessing the first selected file using a classical dom selector: const selectedfile = document.
getelementbyid('input').files[0]; accessing selected file(s) on a change event it is also possible (but not mandatory) to access the filelist through the change event.
... you need to use eventtar
get.addeventlistener() to add the change event listener, like this: const inputelement = document.
getelementbyid("input"); inputelement.addeventlistener("change", handlefiles, false); function handlefiles() { const filelist = this.files; /* now you can work with the file list */ }
getting information about selected file(s) the filelist object provided by the dom lists all of the files selected by the user, each specified as a file object.
... let soutput = nbytes + " bytes"; // optional code for multiples approximation const amultiples = ["kib", "mib", "gib", "tib", "pib", "eib", "zib", "yib"]; for (nmultiple = 0, napprox = nbytes / 1024; napprox > 1; napprox /= 1024, nmultiple++) { soutput = napprox.tofixed(3) + " " + amultiples[nmultiple] + " (" + nbytes + " bytes)"; } // end of optional code document.
getelementbyid("filenum").innerhtml = nfiles; document.
getelementbyid("filesize").innerhtml = soutput; } document.
getelementbyid("uploadinput").addeventlistener("change", updatesize, false); </script> </body> </html> using hidden file input elements using the click() method you can hide the admittedly ugly file <input> element and present your own interface for opening the file picker a...
...And 8 more matches
HTMLFormElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlformelement" tar
get="_top"><rect x="341" y="65" width="150" ...
...And 8 more matches
IDBIndex - Web APIs
methods inherits from: eventtar
get idbindex.count() returns an idbrequest object, and in a separate thread, returns the number of records within a key range.
... idbindex.
get() returns an idbrequest object, and, in a separate thread, finds either the value in the referenced object store that corresponds to the given key or the first corresponding value, if key is an idbkeyrange.
... idbindex.
getkey() returns an idbrequest object, and, in a separate thread, finds either the given key or the primary key, if key is an idbkeyrange.
...And 8 more matches
Recording a media element - Web APIs
while the article using the mediastream recording api demonstrates using the mediarecorder interface to capture a mediastream generated by a hardware device, as returned by navigator.mediadevices.
getusermedia(), you can also use an html media element (namely <audio> or <video>) as the source of the mediastream to be recorded.
...note that the autoplay attribute is used so that as soon as the stream starts to arrive from the camera, it immediately
gets displayed, and the muted attribute is specified to ensure that the sound from the user's microphone isn't output to their speakers, causing an ugly feedback loop.
... let preview = document.
getelementbyid("preview"); let recording = document.
getelementbyid("recording"); let startbutton = document.
getelementbyid("startbutton"); let stopbutton = document.
getelementbyid("stopbutton"); let downloadbutton = document.
getelementbyid("downloadbutton"); let logelement = document.
getelementbyid("log"); let recordingtimems = 5000; most of these are references to elements we need to work with.
...And 8 more matches
Node - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties in addition to the properties below, node inherits properties from its parent, eventtar
get.
...this has been replaced by node.
getrootnode().
...And 8 more matches
Using Performance Timeline - Web APIs
to
gether, these interfaces can be used to help identify an application's performance bottlenecks.
... performance extensions performance timeline extends the performance object with three methods that provide different mechanisms to
get a set of performance records (metrics), depending on the specified filter criteria.
... the following example show the usage of these methods
getentries(),
getentriesbyname() and
getentriesbytype().
...And 8 more matches
Adding 2D content to a WebGL context - Web APIs
drawing the scene the most important thing to understand before we
get started is that even though we're only rendering a square plane object in this example, we're still drawing in 3d space.
...to
gether, a set of vertex and fragment shaders is called a shader program.
...its job is to determine the color of that pixel by figuring out which texel (that is, the pixel from within the shape's texture) to apply to the pixel,
getting that texel's color, then applying the appropriate lighting to the color.
...And 8 more matches
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
however you make the determination, once these roles are assigned to the two peers, they can then work to
gether to manage signaling in a way that doesn't deadlock and doesn't require a lot of extra code to manage.
... const constraints = { audio: true, video: true }; const config = { iceservers: [{ urls: "stun:stun.mystunserver.tld" }] }; const selfvideo = document.queryselector("video.selfview"); const remotevideo = document.queryselector("video.remoteview"); const signaler = new signalingchannel(); const pc = new rtcpeerconnection(config); this code also
gets the <video> elements using the classes "selfview" and "remoteview"; these will contain, respectively, the local user's self-view and the view of the incoming stream from the remote peer.
... async function start() { try { const stream = await navigator.mediadevices.
getusermedia(constraints); for (const track of stream.
gettracks()) { pc.addtrack(track, stream); } selfvideo.srcobject = stream; } catch(err) { console.error(err); } } this isn't appreciably different from older webrtc connection establishment code.
...And 8 more matches
Writing WebSocket servers - Web APIs
for example, let's assume that your server is listening on example.com, port 8000, and your socket server responds to
get requests at example.com/chat.
...the client will send a pretty standard http request with headers that looks like this (the http version must be 1.1 or greater, and the method must be
get):
get /chat http/1.1 host: example.com:8000 upgrade: websocket connection: upgrade sec-websocket-key: dghlihnhbxbszsbub25jzq== sec-websocket-version: 13 the client can solicit extensions and/or subprotocols here; see miscellaneous for details.
...to
get it, concatenate the client's sec-websocket-key and the string "258eafa5-e914-47da-95ca-c5ab0dc85b11" to
gether (it's a "magic string"), take the sha-1 hash of the result, and return the base64 encoding of that hash.
...And 8 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
let's create a simple one so we
get used to the methods we need to create an envelope with the web audio api.
...you can fetch a file and decode it into a buffer (we'll
get to that later on in the tutorial), or you can create an empty buffer and fill it with your own data.
...we can use the baseaudiocontext.samplerate property for this: const buffersize = audioctx.samplerate * noiselength; const buffer = audioctx.createbuffer(1, buffersize, audioctx.samplerate); now we can fill it with random numbers between -1 and 1: let data = buffer.
getchanneldata(0); //
get data // fill the buffer with noise for (let i = 0; i < buffersize; i++) { data[i] = math.random() * 2 - 1; } note: why -1 to 1?
...And 8 more matches
Basic concepts behind Web Audio API - Web APIs
basic audio operations are performed with audio nodes, which are linked to
gether to form an audio routing graph.
... each input or output is composed of one or more audio channels, which to
gether represent a specific audio layout.
... note: to
get a time in seconds from a frame count, simply divide the number of frames by the sample rate.
...And 8 more matches
Web Audio API - Web APIs
basic audio operations are performed with audio nodes, which are linked to
gether to form an audio routing graph.
...in fact, sound files are just recordings of sound intensities themselves, which come in from microphones or electric instruments, and
get mixed down into a single, complicated wave.
... timing is controlled with high precision and low latency, allowing developers to write code that responds accurately to events and is able to tar
get specific samples, even at a high sample rate.
...And 8 more matches
Window.pageYOffset - Web APIs
nullam vitae lorem non augue mattis cursus.</p> <p>maecenas nec tortor tincidunt, sollicitudin mi e
get, fermentum turpis.
... vestibulum ac ante et libero efficitur faucibus id e
get ex.
...fusce ligula leo, consectetur ac ante e
get, gravida laoreet purus.
...And 8 more matches
window.postMessage() - Web APIs
broadly, one window may obtain a reference to another (e.g., via tar
getwindow = window.opener), and then dispatch a messageevent on it with tar
getwindow.postmessage().
... syntax tar
getwindow.postmessage(message, tar
getorigin, [transfer]); tar
getwindow a reference to the window that will receive the message.
...[1] tar
getorigin specifies what the origin of tar
getwindow must be for the event to be dispatched, either as the literal string "*" (indicating no preference) or as a uri.
...And 8 more matches
Audio and Video Delivery - Developer guides
web audio api var context; var request; var source; try { context = new audiocontext(); request = new xmlhttprequest(); request.open("
get","http://jplayer.org/audio/mp3/riomez-01-sleep_to
gether.mp3",true); request.responsetype = "arraybuffer"; request.onload = function() { context.decodeaudiodata(request.response, function(buffer) { source = context.createbuffersource(); source.buffer = buffer; source.connect(context.destination); // auto play source.start(0); // start was prev...
...
getusermedia / stream api it's also possible to retrieve a live stream from a webcam and/or microphone using
getusermedia and the stream api.
... to grab the stream from your webcam, first set up a <video> element: <video id="webcam" width="480" height="360"></video> next, if supported connect the webcam source to the video element: if (navigator.mediadevices) { navigator.mediadevices.
getusermedia({ video: true, audio: false }) .then(function onsuccess(stream) { var video = document.
getelementbyid('webcam'); video.autoplay = true; video.srcobject = stream; }) .catch(function onerror() { alert('there has been a problem retreiving the streams - are you running on file:/// or did you disallow access?'); }); } else { alert('
getusermedia is not supported in th...
...And 8 more matches
<a>: The Anchor element - HTML: Hypertext Markup Language
tar
get where to display the linked url, as the name for a browsing context (a tab, window, or <iframe>).
... note: when using tar
get, add rel="noreferrer noopener" to avoid exploitation of the window.opener api; note: in newer browser versions (e.g.
... firefox 79+) setting tar
get="_blank" on <a> elements implicitly provides the same rel behavior as setting rel="noopener".
...And 8 more matches
<details>: The Details disclosure element - HTML: Hypertext Markup Language
the html details element (<details>) creates a disclosure wid
get in which information is visible only when the wid
get is toggled into an "open" state.
... a disclosure wid
get is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle.
... if the first child of the <details> element is a <summary>, the contents of the <summary> element are used as the label for the disclosure wid
get.
...And 8 more matches
Redirections in HTTP - HTTP
code text method handling typical use case 301 moved permanently
get methods unchanged.
... others may or may not be changed to
get.[1] reorganization of a web site.
... reorganization of a web site, with non-
get links/operations.
...And 8 more matches
Closures - JavaScript
a closure is the combination of a function bundled to
gether (enclosed) with references to its surrounding state (the lexical environment).
... document.
getelementbyid('size-12').onclick = size12; document.
getelementbyid('size-14').onclick = size14; document.
getelementbyid('size-16').onclick = size16; <a href="#" id="size-12">12</a> <a href="#" id="size-14">14</a> <a href="#" id="size-16">16</a> run the code using jsfiddle.
... <p id="help">helpful notes will appear here</p> <p>e-mail: <input type="text" id="email" name="email"></p> <p>name: <input type="text" id="name" name="name"></p> <p>age: <input type="text" id="age" name="age"></p> function showhelp(help) { document.
getelementbyid('help').innerhtml = help; } function setuphelp() { var helptext = [ {'id': 'email', 'help': 'your e-mail address'}, {'id': 'name', 'help': 'your full name'}, {'id': 'age', 'help': 'your age (you must be over 16)'} ]; for (var i = 0; i < helptext.length; i++) { var item = helptext[i]; document.
getelementbyid(item.id).onfocus = function() { showh...
...And 8 more matches
Promise - JavaScript
handlefulfilled(value) { /*...*/; return nextvalue; } handlerejection(reason) { /*...*/; throw nextreason; } handlerejection(reason) { /*...*/; return nextvalue; } the returned nextvalue can be another promise object, in which case the promise
gets dynamically inserted into the chain.
... the promises of a chain are nested like russian dolls, but
get popped like the top of a stack.
... the example function tethered
getnumber() shows that a promise generator will utilize reject() while setting up an asynchronous call, or within the call-back, or both.
...And 8 more matches
Performance fundamentals - Web Performance
all other things being equal, code optimized for some tar
get besides user-perceived performance (hereafter upp) loses when competing against code optimized for upp.
...of course, it's by no means pointless to optimize other metrics, but real upp tar
gets come first.
... responsiveness is important simply because people
get frustrated and angry when they're ignored.
...And 8 more matches
href - SVG: Scalable Vector Graphics
value <url> default value none animatable yes animate, animatemotion, animatetransform, set for the <animate>, <animatemotion>, <animatetransform>, and <set>, href defines a url referring to the element which is the tar
get of this animation element and which therefore will be modified over time.
... the url must point to exactly one tar
get element which is capable of being the tar
get of the given animation element.
... if the url points to multiple tar
get elements, if the given tar
get element is not capable of being a tar
get of the given animation element, or if the given tar
get element is not part of the current document, then the animation element will not affect any tar
get element.
...And 8 more matches
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
when you
get to that point, the amount of markup you have to sift through to find anything becomes ridiculous.
...resizing the browser window often resulted in one column
getting pushed to the bottom of another.
...both of these put to
gether weren't enough to dissuade me from the advantages of positioning over floats.
...And 7 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
data loader component this component is a simple javascript function that sets the src attribute of the hidden iframe, causing it to load an url (i.e., by establishing a request on the server side): /* triggers the iframe to retrieve new data */ function retrievedata() { bridgeframe.src = dataurl; } once a web page is loaded into the iframe, the data binder will be able to
get the data from the iframe's page and set the data into the main page's context.
...here, iframecallback is considered the data binder, so it is responsible for
getting the content from the iframe and putting it in the proper repository in the page's context.
... note the following piece of code: function iframecallback(doc) { /* copies the data in the iframe to the main page */ mydata = doc.
getelementbyid("mydata"); tickerdiv.innerhtml = mydata.innerhtml; } the callback is called with the parameter doc, which is a reference to the iframe's document).
...And 7 more matches
Drag and Drop Example - Archive of obsolete content
xul doesn't handle it and just ignores it, but we can still retrieve it with the dom's
getattribute function.
...var listobserver = { ondragstart: function (event, transferdata, action) { var txt = event.tar
get.
getattribute("elem"); transferdata.data = new transferdata(); transferdata.data.adddataforflavour("text/unicode", txt); } } one function has been defined, ondragstart, which will be called by the nsdraganddrop object when necessary.
...the elem attribute is retrieved from the tar
get of the drag event.
...And 7 more matches
Monitoring downloads - Archive of obsolete content
in particular, it needs to
get an instance of the download manager's nsidownloadmanager interface and create the database into which its data will be stored.
... onload: function() { // initialization code this.initialized = true; this.strings = document.
getelementbyid("downloadlogger-strings"); this.dlmgr = components.classes["@mozilla.org/download-manager;1"] .
getservice(components.interfaces.nsidownloadmanager); this.dlmgr.addlistener(downloadlogger); // open the database, placing its file in the profile directory this.dbfile = components.classes["@mozilla.org/file/directory_service;1"] .
getservice(components.interfaces.nsiproperties) .
get("profd", components.interfaces.nsifile); this.dbfile.append("downloadlogger.sqlite"); //
get access to the storage service and open the database this.storageservice = components.classes["@mozilla.org/storage/s...
...ervice;1"] .
getservice(components.interfaces.mozistorageservice); var dbconn = this.storageservice.opendatabase(this.dbfile); // now create the table; if it already exists, this fails, but we don't care!
...And 7 more matches
XPJS Components Proposal - Archive of obsolete content
just as with native component modules each of these .js files will be expected to have the functions: nsregisterself ns
getfactory nsunregisterself (optional) nscanunload (optional) each .js file might implement one or more components.
... we will have one native module - called the xpjsmanager - which holds this system to
gether.
...the component manager will load up the xpjsmanager's module and call the native ns
getfactory it finds there.
...And 7 more matches
Commands - Archive of obsolete content
in addition, text fields and other wid
gets have a number of commands which they already support that you can invoke.
... first, it moves all your operations onto commands which can all be grouped to
gether in one section of the xul file.
... this means that code is all to
gether and not scattered throughout the ui code.
...And 7 more matches
Manipulating Lists - Archive of obsolete content
here is an example: example 1 : source view <script> function additem(){ document.
getelementbyid('thelist').appenditem("thursday", "thu"); } </script> <listbox id="thelist"/> <button label="add" oncommand="additem();"/> the appenditem() takes two arguments, the label, in this case 'thursday', and a value 'thu'.
...
getting the selected item these two properties are commonly inspected during a select event, as in the following example: example 2 : source view <listbox id="thelist" onselect="alert(this.selecteditem.label);"> <listitem label="short"/> <listitem label="medium"/> <listitem label="tall"/> </listbox> the select event is fired for a listbox when an item in the list is selected.
...however, to
get the selected item, use the tabbox's selectedtab property instead.
...And 7 more matches
XUL Event Propagation - Archive of obsolete content
the availability of event listeners is also somewhat pre-determined, though xul provide generalized event listeners (i.e., oncommand event listeners) for most of the elements in the wid
get hierarchy.
...where event bubbling propagates an event from its tar
get up higher into the node hiearchy, event capturing intercepts an event before it is received by other elements, even by the event tar
get itself.
... the wid
get hierarchy consider the following xul file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="events" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" oncommand="alert('window handler')"> <vbox> <vbox style="background-color: lightgrey;" oncommand="alert('box handler')"> <menu class="menu" label="file" oncommand="alert('menu handler')"> <menupopup> <menuitem oncommand="alert(...
...And 7 more matches
checkbox - Archive of obsolete content
use hasattribute() to determine whether this attribute is set instead of
getattribute().
... properties accesskey type: character
gets and sets the value of the accesskey attribute.
... checked type: boolean
gets and sets the value of the checked attribute.
...And 7 more matches
menuseparator - Archive of obsolete content
for those elements, setattribute("value", myvalue) and
getattribute("value") do not access or affect the contents displayed to the user.
... accesskey type: character
gets and sets the value of the accesskey attribute.
... command type: element id
gets and sets the value of the command attribute.
...And 7 more matches
radio - Archive of obsolete content
radio buttons are almost always listed to
gether in groups.
...for those elements, setattribute("value", myvalue) and
getattribute("value") do not access or affect the contents displayed to the user.
... properties accesskey type: character
gets and sets the value of the accesskey attribute.
...And 7 more matches
Introduction to Public-Key Cryptography - Archive of obsolete content
to
get a driver's license, you typically apply to a government agency, such as the department of motor vehicles, which verifies your identity, your ability to drive, your address, and other information before issuing the license.
... to
get a student id, you apply to a school or college, which performs different checks (such as whether you have paid your tuition) before issuing the id.
... to
get a library card, you may need to provide only your name and a utility bill with your address on it.
...And 7 more matches
CSS and JavaScript accessibility best practices - Learn web development
links hyperlinks — the way you
get to new places on the web: <p>visit the <a href="https://www.mozilla.org">mozilla homepage</a>.</p> some very simple link styling is shown below: a { color: #ff0000; } a:hover, a:visited, a:focus { color: #a60000; text-decoration: none; } a:active { color: #000000; background-color: #a60000; } the standard link conventions are underlined and a different color (default: blue) in the...
...something should definitely happen when states change, and you shouldn't
get rid of the pointer cursor or the outline — both are very important accessibility aids for those using keyboard controls.
... most of the css you'll write for forms will be for sizing the elements, lining up labels and inputs, and
getting them looking neat and tidy.
...And 7 more matches
Mobile accessibility - Learn web development
note: you can
get to your home screen at any time by swiping up and left in a smooth motion.
... to
get to these menus: access the global menu by quickly swiping down, and then right.
...to enter the text of the url: select the url bar by swiping left/right till you
get to it, and then double-tapping.
...And 7 more matches
Client-side form validation - Learn web development
if it
gets to the server and is then rejected, a noticeable delay is caused by a round trip to the server and then back to the client-side to tell the user to fix their data.
...you'll
get messages such as: "this field is required" (you can't leave this field blank).
...there are three main reasons: we want to
get the right data, in the right format.
...And 7 more matches
The HTML5 input types - Learn web development
we cover this in an advanced tutorial: how to build custom form wid
gets.
... client-side validation as you can see above, email, along with other newer input types, provides built-in client-side error validation — performed by the browser before the data
gets sent to the server.
... html date controls are available to handle this specific kind of data, providing calendar wid
gets and making the data uniform.
...And 7 more matches
HTML forms in legacy browsers - Learn web development
let go of css one of the big issues with html forms is styling form wid
gets with css.
...for example, the input of color type looks different in safari, chrome and firefox browser, but the color picker wid
get is the same in all browsers on a device as it opens up the operating system's native color picker.
...if you alter a property, that may impact the appearance of the wid
get in unexpected ways.
...And 7 more matches
Fetching data from the server - Learn web development
this is extremely wasteful and results in a poor user experience, especially as pages
get larger and more complex.
...we'll just use the
get method here and set the url as our url variable.
... add this below your previous line: request.open('
get', url); next, we'll set the type of response we are expecting — which is defined by the request's responsetype property — as text.
...And 7 more matches
Server-side web frameworks - Learn web development
objective: to understand how web frameworks can simplify development/maintenance of server-side code and to
get readers thinking about selecting a framework for their own development.
... # django view function from django.http import httpresponse def index(request): #
get an httprequest (request) # perform operations using information from the request.
...an http
get request to
get files or data from the server may encode what data is required in url parameters or within the url structure.
...And 7 more matches
Ember interactivity: Events, classes and state - Learn web development
update the content to the following: import component from '@glimmer/component'; import { action } from '@ember/object'; export default class headercomponent extends component { @action onkeydown({ tar
get, key }) { let text = tar
get.value.trim(); let hasvalue = boolean(text); if (key === 'enter' && hasvalue) { alert(text); tar
get.value = '' } } } the @action decorator is the only ember-specific code here (aside from extending from the component superclass, and the ember-specific items we are importing using javascript module syntax) — the rest of the file is vani...
... and just like before, the add() function that will be called from the template
gets annotated with the @action decorator to bind it to the class instance.
...in the todolist component, we'll want to
get the todos out of the service, and render a todo component for each todo.
...And 7 more matches
Framework main features - Learn web development
javascript lets us use the + operator to concatenate strings to
gether, so this function would technically still work if a and b were strings — it just might not give you the result you'd expect.
...suppose you're building a website for an online magazine, and you need to be sure that each contributing writer
gets credit for their work.
... components in components one key benefit of component-based ui architecture is that components can be composed to
gether.
...And 7 more matches
Componentizing our React app - Learn web development
defining our first component defining a component can seem tricky until you have some practice, but the gist is: if it represents an obvious "chunk" of your app, it's probably a component if it
gets reused often, it's probably a component.
... once you're confident that your component is
getting its props, you can replace every occurrence of eat with your name prop.
... putting all that to
gether, your todo() function should read like this: export default function todo(props) { return ( <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> {props.name} </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">{props.name}</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">{props.name}</span> </button> <...
...And 7 more matches
Application Translation with Mercurial
required tools build pre-requisites first,
get the required programs to compile mozilla applications like firefox and thunderbird from build instructions.
...
getting the current texts in english and your locale obtaining the english texts with the source code
get the source code by downloading the following file: firefox desktop or firefox for android: download the mozilla-<branch>.hg file (e.g.
... enabling mercurial queues (revertable patches) some time will pass between the moment in which you start the localization, finish it, test it, improve it, upload it for review and
get review (maybe not approved on first try).
...And 7 more matches
NSS API Guidelines
nss api guidelines newsgroup: mozilla.dev.tech.crypto introduction this document describes how the nss code is organized, the libraries that
get built from the nss sources, and guidelines for writing nss code.
... "module" headers are for things used only within a specific subset of nss; things which would have been "static" if we had combined separate c source files to
gether.
...(frees are allowed.) the arena_destructor_list preprocessor definition, and the code it encloses, are an effort to make the following work to
gether: arenas, letting you allocate stuff and then removing them all at once lazy creation of pure-memory objects from asn.1 blobs, for example use of nsspkixcertificate doesn't drag all the code in for all constituent objects, unless they're actually being used our agressive pointer-tracking facility all these are useful, but they don't combine well.
...And 7 more matches
EncDecMAC using token object - sample 3
attribute\n"); return rv; } return rv; } /* * generate a symmetric key */ pk11symkey * generatesymkey(pk11slotinfo *slot, ck_mechanism_type mechanism, int keysize, secitem *keyid, secupwdata *pwdata) { secstatus rv; pk11symkey *key; if (pk11_needlogin(slot)) { rv = pk11_authenticate(slot, pr_true, pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_
gettokenname(slot)); return null; } } /* generate the symmetric key */ key = pk11_tokenkeygen(slot, mechanism, null, keysize, keyid, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk1...
..._destroycontext(ctxenc, pr_true); } return rv; } /* * find the key for the given mechanism */ pk11symkey* findkey(pk11slotinfo *slot, ck_mechanism_type mechanism, secitem *keybuf, secupwdata *pwdata) { secstatus rv; pk11symkey *key; if (pk11_needlogin(slot)) { rv = pk11_authenticate(slot, pr_true, pwdata); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not authenticate to token %s.\n", pk11_
gettokenname(slot)); if (slot) { pk11_freeslot(slot); } return null; } } key = pk11_findfixedkey(slot, mechanism, keybuf, 0); if (!key) { pr_fprintf(pr_stderr, "pk11_findfixedkey failed (err %d)\n", pr_
geterror()); pk11_freeslot(slot); return null; } return key; } /* * decrypt and verify mac */ secstatus decryptandverifymac(const char* outfilename, char *encryptedfilename, secitem *citem, secitem *ma...
...f(pr_stderr, "check mac : failure\n"); pr_fprintf(pr_stderr, "extracted : "); printashex(pr_stderr, macitem->data, macitem->len); pr_fprintf(pr_stderr, "computed : "); printashex(pr_stderr, newmac, newmaclen); rv = secfailure; } cleanup: if (ctxmac) { pk11_destroycontext(ctxmac, pr_true); } if (ctxenc) { pk11_destroycontext(ctxenc, pr_true); } if (outfile) { pr_close(outfile); } return rv; } /* *
gets iv and ckaids from header file */ secstatus
getivandckaidsfromheader(const char *cipherfilename, secitem *ivitem, secitem *enckeyitem, secitem *mackeyitem) { secstatus rv; /* open intermediate file, read in header,
get iv and cka_ids of two keys * from it */ rv = readfromheaderfile(cipherfilename, iv, ivitem, pr_true); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not retrieve iv from cip...
...And 7 more matches
SpiderMonkey 1.8.5
getters and setters of type jspropertyop took an id parameter of type jsval.
...many
getters and setters simply ignore the id anyway; if the value is needed, use js_idtovalue.
... js_
getstringbytes and js_
getstringchars are gone.
...And 7 more matches
Manipulating bookmarks using Places
initiating the bookmarks service as is the case with nearly all interfaces, before you can use the bookmarks service, you need to
get access to it: var bmsvc = components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .
getservice(components.interfaces.nsinavbookmarksservice); creating a bookmark folder creating a new bookmark folder is done using the nsinavbookmarksservice.createfolder() method.
... var ios = components.classes["@mozilla.org/network/io-service;1"] .
getservice(components.interfaces.nsiioservice); var uri = ios.newuri("http://google.com/", null, null); var newbkmkid = bmsvc.insertbookmark(newfolderid, uri, bmsvc.default_index, ""); this example instantiates the nsiioservice and uses it to create an nsiuri referring to the google web site, then calls nsinavbookmarksservice.insertbookmark() to create a new bookmark to google, placing it at the en...
... finding bookmark items if you know the uri of a site and wish to find all bookmarks that link to it, you can use the nsinavbookmarksservice.
getbookmarkidsforuri() method.
...And 7 more matches
Using the Places history service
nsinavhistoryservice: complex query functions, more fine-grained
getters and setters.
...new visits
get the same session id as their referrer.
... creating the history service the places history service's contract id is "@mozilla.org/browser/nav-history-service;1": var historyservice = components.classes["@mozilla.org/browser/nav-history-service;1"] .
getservice(components.interfaces.nsinavhistoryservice); it also responds to the old contract id for url bar autocomplete "@mozilla.org/autocomplete/search;1?name=history" and the contract id for the old history system (since it is backwards-compatible) "@mozilla.org/browser/global-history;2".
...And 7 more matches
nsIAccessNode
accessible/public/nsiaccessnode.idlscriptable an interface used by in-process accessibility clients to
get style, window, markup and other information about a dom node.
... method overview nsiaccessnode
getchildnodeat(in long childnum); obsolete since gecko 2.0 nsidomcssprimitivevalue
getcomputedstylecssvalue(in domstring pseudoelt, in domstring propertyname); domstring
getcomputedstylevalue(in domstring pseudoelt, in domstring propertyname); void scrollto(in unsigned long ascrolltype); void scrolltopoint(in unsigned long acoordinatetype, in long ax, in long ay)...
... methods
getchildnodeat() obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)
get the nth child of this node.
...And 7 more matches
nsIEditorIMESupport
obsolete since gecko 2.0 void endcomposition(); obsolete since gecko 2.0 void forcecompositionend(); void
getpreferredimestate(out unsigned long astate); native code only!
... void
getquerycaretrect(in nsquerycaretrecteventreplyptr areply); native code only!
... obsolete since gecko 1.9.1 void
getreconversionstring(in nsreconversioneventreplyptr areply); native code only!
...And 7 more matches
nsIInstallLocation
you can
get the install location of a particular add-on using nsiextensionmanager interface: var il = components.classes["@mozilla.org/extensions/manager;1"] .
getservice(components.interfaces.nsiextensionmanager) .
getinstalllocation("add-on id") method overview astring
getidforlocation(in nsifile file); nsifile
getitemfile(in astring id, in astring path); nsifile...
...
getitemlocation(in astring id); nsifile
getstagefile(in astring id); boolean itemismanagedindependently(in astring id); void removefile(in nsifile file); nsifile stagefile(in nsifile file, in astring id); attributes attribute type description canaccess boolean whether or not the user can write to the install location with the current access privileges.
... constant value description priority_app_profile 0 priority_app_system_user 10 priority_xre_system_user 100 priority_app_system_global 1000 priority_xre_system_global 10000 methods
getidforlocation() retrieves the guid for an item at the specified location.
...And 7 more matches
nsILoginManagerStorage
method overview void addlogin(in nsilogininfo alogin); unsigned long countlogins(in astring ahostname, in astring aactionurl, in astring ahttprealm); void findlogins(out unsigned long count, in astring ahostname, in astring aactionurl, in astring ahttprealm, [retval, array, size_is(count)] out nsilogininfo logins); void
getalldisabledhosts([optional] out unsigned long count, [retval, array, size_is(count)] out wstring hostnames); void
getallencryptedlogins([optional] out unsigned long count, [retval, array, size_is(count)] out nsilogininfo logins); void
getalllogins([optional] out unsigned long count, [retval, array, size_is(count)] out nsilogininfo logins); boolean
getloginsavingenabled(in astring ahost); ...
...
getalldisabledhosts() implement this method to return a list of all hosts for which password saving is disabled.
... void
getalldisabledhosts( out unsigned long count, optional [retval, array, size_is(count)] out wstring hostnames ); parameters count optional return in this parameter the number of disabled hostnames returned in the hostnames parameter.
...And 7 more matches
nsIMicrosummaryService
gecko 1.8 obsolete gecko 6.0 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) implemented by: @mozilla.org/microsummary/service;1 as a service: var microsummaryservice = components.classes["@mozilla.org/microsummary/service;1"] .
getservice(components.interfaces.nsimicrosummaryservice); method overview void addgenerator(in nsiuri generatoruri); nsimicrosummary createmicrosummary(in nsiuri pageuri, in nsiuri generatoruri); nsisimpleenumerator
getbookmarks(); nsimicrosummarygenerator
getgenerator(in nsiuri generatoruri); nsimicrosummaryset
getmicrosummaries(in nsiuri pageuri, in l...
...ong long bookmarkid); nsimicrosummary
getmicrosummary(in long long bookmarkid); boolean hasmicrosummary(in long long bookmarkid); nsimicrosummarygenerator installgenerator(in nsidomdocument xmldefinition); boolean ismicrosummary(in long long bookmarkid, in nsimicrosummary microsummary); nsimicrosummary refreshmicrosummary(in long long bookmarkid); void removemicrosummary(in long long bookmarkid); void setmicrosummary(in long long bookmarkid, in nsimicrosummary microsummary); methods addgenerator() install the microsummary generator from the resource at the supplied uri.
...
getbookmarks()
get the set of bookmarks with microsummaries.
...And 7 more matches
nsIMsgIdentity
inherits from: nsisupports method overview void clearallvalues(); void copy(in nsimsgidentity identity); astring
getunicharattribute(in string name); void setunicharattribute(in string name, in astring value); acstring
getcharattribute(in string name); void setcharattribute(in string name, in acstring value); boolean
getboolattribute(in string name); void setboolattribute(in string name, in boolean value); long
getintattribute(in string name); void setintattribute(in ...
... void copy(in nsimsgidentity identity); parameters identity
getunicharattribute()
getter for unicode attributes.
... astring
getunicharattribute(in string name); parameters name setunicharattribute() setter for unicode attributes.
...And 7 more matches
nsIPromptService
to
get an instance, use: var promptservice = components.classes["@mozilla.org/embedcomp/prompt-service;1"] .
getservice(components.interfaces.nsipromptservice); method overview void alert(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext); void alertcheck(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, in wstring acheck...
... var prompts = components.classes["@mozilla.org/embedcomp/prompt-service;1"] .
getservice(components.interfaces.nsipromptservice); prompts.alert(null, "title of this dialog", "hello!
... var prompts = components.classes["@mozilla.org/embedcomp/prompt-service;1"] .
getservice(components.interfaces.nsipromptservice); var check = {value: false}; // default the checkbox to false prompts.alertcheck(null, "title of this dialog", "hello!
...And 7 more matches
nsITransferable
wid
get/nsitransferable.idlscriptable a container for typed data that can be transferred from one place or owner to another, possibly involving format conversion.
... inherits from: nsisupports last changed in gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10) implemented by: @mozilla.org/wid
get/transferable;1.
... to create an instance, use: var transferable = components.classes["@mozilla.org/wid
get/transferable;1"] .createinstance(components.interfaces.nsitransferable); it's important to note that a flavor, which specifies a type of data the transferable supports, is represented by a null-terminated string indicating the mime type of the format supported by the flavor.
...And 7 more matches
nsIAbCard/Thunderbird3
iversaryyear, anniversarymonth, anniversaryday birthyear, birthmonth, birthday webpage1 (work), webpage2 (home) custom1, custom2, custom3, custom4 notes integral properties: lastmodifieddate popularityindex prefermailformat (see nsiabprefermailformat) boolean properties: allowremotecontent inherits from: nsiabitem method overview nsivariant
getproperty(in autf8string name, in nsivariant defaultvalue); [noscript] astring
getpropertyasastring(in string name); [noscript] autf8string
getpropertyasautf8string(in string name); [noscript] pruint32
getpropertyasuint32(in string name); [noscript] boolean
getpropertyasbool(in string name); void setproperty(in autf8string name, in nsivariant value); ...
... firstname astring shorthand for
getproperty and setproperty.
... lastname astring shorthand for
getproperty and setproperty.
...And 7 more matches
Weak reference
// it's easy to
get a weak reference...
... nsweakptr weakptr = do_
getweakreference(afooptr); // ...
... nsresult nsobservable::addobserver( nsiobserver* aobserver ) { mobserver =
getter_addrefs( ns_
getweakreference(aobserver) ); // ...or append this to the list of observers return ns_ok; } nsresult nsobservable::notifyobservers( nsimessage* amessage ) { nscomptr<nsiobserver> observer = do_queryreferent(mobserver); if ( observer ) observer->noticemessage(amessage); else mobserver = 0; // or remove this observer from the list, he's g...
...And 7 more matches
Xray vision
so in the example above, chrome code calling the content's window.confirm() would
get the original version of confirm(), not the redefined version.
... how you
get xray vision privileged code automatically
gets xray vision whenever it accesses objects belonging to less-privileged code.
...any of them, even setters and
getters, could have been redefined by untrusted code.
...And 7 more matches
Index
the following preferences are supported to control how this
gets logged: 30 gloda examples thunderbird 3, thunderbird this page provides some examples for using gloda.
...this may seem like a lot of infrastructure just to read messages from a flat file, but it allows us to do it asynchronously, and to have reading local messages fit into the same kind of mechanisms that reading nntp and imap messages do - running urls,
getting onstart/stoprunningurl notifications when the url starts/stops, etc.
...xul is an xml grammar that provides user interface wid
gets like buttons, menus, toolbars, trees etc.
...And 7 more matches
Demo Addon
if (id.email) info.emails.push(id.email); } data.push(info); } first, we use fixiterator() here to
get all accounts in your profile.
... to
get the the server name, we access the incomingserver property of our account, which is a nsimsgincomingserver object.
... from this, we
get its name and type.
...And 7 more matches
Type conversion
declare("somecfunction", ctypes.default_abi, ctypes.void_t, ctypes.char.ptr); somecfunction(buffer); // here ctypes.char.array(10)() is converted to ctypes.char.ptr type implicit conversion can be tested in the following way: var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.bool } ])(); mystruct.v = 1; console.log(mystruct.v.tostring()); // 'true' boolean type tar
get type source converted value ctypes.bool js boolean src js number (0 or 1) if src == 0: false if src == 1: true var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.bool } ])(); mystruct.v = true; console.log(mystruct.v.tostring()); // 'true' mystruct.v = false; console.log(mystruct.v.tostring()); // 'false' mystruct.v = 1; console.log...
...(mystruct.v.tostring()); // 'true' mystruct.v = 0; console.log(mystruct.v.tostring()); // 'false' mystruct.v = 10; // throws error mystruct.v = "a"; // throws error integer types tar
get type source converted value ctypes.char16_t js string (only if its length == 1) src.charcodeat(0) any integer types js number (only if fits to the size) src js boolean if src == true: 1 if src == false: 0 var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.char16_t } ])(); mystruct.v = 0x41; console.log(mystruct.v.tostring()); // "a" mystruct.v = true; console.log(mystruct.v.tostring()); // "\x01" mystruct.v = "x"; console.log(mystruct.v.tostring()); // "x" mystruct.v = "xx"; // thro...
...ws error var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.int16_t } ])(); mystruct.v = 0x41; console.log(mystruct.v.tostring()); // 65 mystruct.v = true; console.log(mystruct.v.tostring()); // 1 mystruct.v = "x"; // throws error integer/float types are implicitly convertible if any data of source type could be representable in the tar
get type.
...And 7 more matches
Gecko Plugin API Reference - Plugins
g-in display nesting rules for html elements using the appropriate attributes using the embed element for plug-in display using custom embed attributes plug-in references plug-in development overview writing plug-ins registering plug-ins ms windows unix mac os x drawing a plug-in instance handling memory sending and receiving streams working with urls
getting version and ui information displaying messages on the status line making plug-ins scriptable building plug-ins building, platforms, and compilers building carbonized plug-ins for mac os x type libraries installing plug-ins native installers xpi plug-ins installations plug-in installation and the windows registry initialization and destruction initializ...
...ation instance creation instance destruction shutdown initialize and shutdown example drawing and event handling the npwindow structure drawing plug-ins printing the plug-in setting the window
getting information windowed plug-ins mac os windows unix event handling for windowed plug-ins windowless plug-ins specifying that a plug-in is windowless invalidating the drawing area forcing a paint message making a plug-in opaque making a plug-in transparent creating pop-up menus and dialog boxes event handling for windowless plug-ins streams receiving a stream telling the plug-in when a stream is created telling the plug-in when a stream is deleted finding out how much data the plug-in can accept writing the strea...
...m to the plug-in sending the stream in random-access mode sending the stream in file mode sending a stream creating a stream pushing data into the stream deleting the stream example of sending a stream urls
getting urls
getting the url and displaying the page posting urls posting data to an http server uploading files to an ftp server sending mail memory allocating and freeing memory mac os flushing memory (mac os only) version, ui, and status information displaying a status line message
getting agent information
getting the current version finding out if a feature exists reloading a plug-in plug-in side plug-in api this chapter describes methods in the plug-in api that are available from the plug-in object.
...And 7 more matches
Pixel manipulation with canvas - Web APIs
for example, to read the blue component's value from the pixel at column 200, row 50 in the image, you would do the following: bluecomponent = imagedata.data[((50 * (imagedata.width * 4)) + (200 * 4)) + 2]; if given a set of coordinates (x and y), you may end up doing something like this: var xcoord = 50; var ycoord = 100; var canvaswidth = 1024; function
getcolorindicesforcoord(x, y, width) { var red = y * (width * 4) + x * 4; return [red, red + 1, red + 2, red + 3]; } var colorindices =
getcolorindicesforcoord(xcoord, ycoord, canvaswidth); var redindex = colorindices[0]; var greenindex = colorindices[1]; var blueindex = colorindices[2]; var alphaindex = colorindices[3]; var redforcoord = imagedata.data[redindex]; var greenforcoord = imagedata...
....data[greenindex]; var blueforcoord = imagedata.data[blueindex]; var alphaforcoord = imagedata.data[alphaindex]; or, if es2015 is appropriate: const xcoord = 50; const ycoord = 100; const canvaswidth = 1024; const
getcolorindicesforcoord = (x, y, width) => { const red = y * (width * 4) + x * 4; return [red, red + 1, red + 2, red + 3]; }; const colorindices =
getcolorindicesforcoord(xcoord, ycoord, canvaswidth); const [redindex, greenindex, blueindex, alphaindex] = colorindices; you may also access the size of the pixel array in bytes by reading the uint8clampedarray.length attribute: var numbytes = imagedata.data.length; creating an imagedata object to create a new, blank imagedata object, you should use the createimagedata() method.
... var myimagedata = ctx.createimagedata(anotherimagedata);
getting the pixel data for a context to obtain an imagedata object containing a copy of the pixel data for a canvas context, you can use the
getimagedata() method: var myimagedata = ctx.
getimagedata(left, top, width, height); this method returns an imagedata object representing the pixel data for the area of the canvas whose corners are represented by the points (left,top), (left+width, top), (lef...
...And 7 more matches
The HTML DOM API - Web APIs
nodes may be strictly organizational, providing a means for grouping other nodes to
gether or for providing a point at which a hierarchy can be constructed; other nodes may represent visible components of a document.
... each node is based on the node interface, which provides properties for
getting information about the node as well as methods for creating, deleting, and organizing nodes within the dom.
...htmlcanvaselement augments the htmlelement type by adding properties such as height and methods like
getcontext() to provide canvas-specific features.
...And 7 more matches
Recommended Drag Types - Web APIs
it is recommended to always add data of the text/plain type as a fallback for applications or drop tar
gets that do not support other types, unless there is no logical text alternative.
... var url = event.datatransfer.
getdata("url"); you may also see data with the mozilla-specific type text/x-moz-url.
...similarly, when retrieving the data, you must use the moz
getdataat() method.
...And 7 more matches
IntersectionObserver - Web APIs
the intersectionobserver interface of the intersection observer api provides a way to asynchronously observe changes in the intersection of a tar
get element with an ancestor element or with a top-level document's viewport.
...the configuration cannot be changed once the intersectionobserver is created, so a given observer object is only useful for watching for specific changes in degree of visibility; however, you can watch multiple tar
get elements with the same observer.
... constructor intersectionobserver.intersectionobserver() creates a new intersectionobserver object which will execute a specified callback function when it detects that a tar
get element's visibility has crossed one or more thresholds.
...And 7 more matches
Using readable streams - Web APIs
the body mixin now includes the body property, which is a simple
getter exposing the body contents as a readable stream.
...this is done using the readablestream.
getreader() method: // fetch the original image fetch('./tortoise.png') // retrieve its body as readablestream .then(response => response.body) .then(body => { const reader = body.
getreader(); invoking this method creates a reader and locks it to the stream — no other reader may read this stream until this reader is released, e.g.
... also note that the previous example can be reduced by one step, as response.body is synchronous and so doesn't need the promise: // fetch the original image fetch('./tortoise.png') // retrieve its body as readablestream .then(response => { const reader = response.body.
getreader(); reading the stream now you’ve got your reader attached, you can read data chunks out of the stream using the readablestreamdefaultreader.read() method.
...And 7 more matches
SubtleCrypto.unwrapKey() - Web APIs
*/ function bytestoarraybuffer(bytes) { const bytesasarraybuffer = new arraybuffer(bytes.length); const bytesuint8 = new uint8array(bytesasarraybuffer); bytesuint8.set(bytes); return bytesasarraybuffer; } /*
get some key material to use as input to the derivekey method.
...*/ function
getkeymaterial() { let password = window.prompt("enter your password"); let enc = new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* derive an aes-kw key using pbkdf2.
... */ async function
getunwrappingkey() { // 1.
...And 7 more matches
TouchEvent - Web APIs
touches are represented by the touch object; each touch is described by a position, size and shape, amount of pressure, and tar
get element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/uievent" tar
get="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/touchevent" tar
get="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">touchevent</text></a></svg></div> ...
...And 7 more matches
Using the User Timing API - Web APIs
the following examples shows how to use each of these methods (performance.
getentries(), performance.
getentriesbytype(entrytype), and performance.
getentriesbyname(name, entrytype) ) to retrieve one or more marks.
... function display_marks(ev) { if (performance.
getentries === undefined) { log("display marks: performance.
getentries not supported", 0); return; } log("display marks", 0); // display each mark using
getentries() var entries = performance.
getentries(); var j=0; for (var i=0; i < entries.length; i++) { if (entries[i].entrytype == "mark") { if (j == 0) { log("=
getentries()", 0); j++ } log("...
... [" + i + "] = " + entries[i].name, 0); } } // display each mark using
getentriesbytype() entries = performance.
getentriesbytype("mark"); for (var i=0; i < entries.length; i++) { if (i == 0) log("=
getentriesbytype('mark')", 0); log("...
...And 7 more matches
Using Web Workers - Web APIs
thus, using the window shortcut to
get the current global scope (instead of self) within a worker will return an error.
...in this section we'll discuss the javascript found in our basic dedicated worker example (run dedicated worker): this allows you to enter two numbers to be multiplied to
gether.
... the numbers are sent to a dedicated worker, multiplied to
gether, and the result is returned to the page and displayed.
...And 7 more matches
ARIA: switch role - Accessibility
the aria switch role is functionally identical to the checkbox role, except that instead of representing "checked" and "unchecked" states, which are fairly generic in meaning, the switch role represents the states "on" and "off." this example creates a wid
get and assigns the aria switch role to it.
... assistive technologies may choose to represent switch wid
gets with a specialized presentation to reflect the notion of an on/off switch.
... associated aria roles, states, and properties aria-checked attribute the aria-checked attribute is required when using the switch role, as it represents the current state of the wid
get that the switch role is applied to.
...And 7 more matches
Border-radius generator - CSS: Cascading Style Sheets
er */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parseint(e.tar
get.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); subscribe(obj.topic, function(value) { input.value = value + obj.unit; }); return input; } var slidercomponent = function slidercomponent(obj, sign) { var slider = document.createelement('div'); var startx = null; var start_value = 0; slider.addeventliste...
..., slidermotion); document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }); var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resize"; var delta = (e.clientx - startx) / obj.sensivity | 0; var value = delta * obj.step + start_value; setvalue(obj.topic, value); } return slider; } var inputslider = function(node) { var min = node.
getattribute('data-min') | 0; var max = node.
getattribute('data-max') | 0; var step = node.
getattribute('data-step') | 0; var value = node.
getattribute('data-value') | 0; var topic = node.
getattribute('data-topic'); var unit = node.
getattribute('data-unit'); var name = node.
getattribute('data-info'); var sensivity = node.
getattribute('data-sensivity') | 0; this.min = min; this.ma...
...lue; setvalue(topic, slider.value); } var setmin = function setmin(topic, value) { var slider = sliders[topic]; if (slider === undefined) return; slider.min = value; setvalue(topic, slider.value); } var setunit = function setunit(topic, unit) { var slider = sliders[topic]; if (slider === undefined) return; slider.unit = unit; setvalue(topic, slider.value); } var
getnode = function
getnode(topic) { return sliders[topic].node; } var subscribe = function subscribe(topic, callback) { if (subscribers[topic] === undefined) subscribers[topic] = []; subscribers[topic].push(callback); } var unsubscribe = function unsubscribe(topic, callback) { subscribers[topic].indexof(callback); subscribers[topic].splice(index, 1); } var notify = function not...
...And 7 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
this outline is different from the border in that it doesn't
get space set aside for it in the document (so it may overlap other content).
...this is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix to
gether, or how bright to make the color.
... now that you have a grey paint and a perfectly vivid color, you need to mix them to
gether.
...And 7 more matches
<input type="image"> - HTML: Hypertext Markup Language
supported common attributes alt, src, width, height, formaction, formenctype, formmethod, formnovalidate, formtar
get idl attributes none.
...ate string to display when the image can't be shown formaction the url to which to submit the data formenctype the encoding method to use when submitting the form data formmethod the http method to use when submitting the form formnovalidate a boolean which, if present, indicates that the form shouldn't be validated before submission formtar
get a string indicating a browsing context from where to load the results of submitting the form height the height, in css pixels, at which to draw the image src the url from which to load the image width the width, in css pixels, at which to draw the image alt the alt attribute provides an alternate string to use as the button's label if the image canno...
...permitted values are:
get a url is constructed by starting with the url given by the formaction or action attribute, appending a question mark ("?") character, then appending the form's data, encoded as described by formenctype or the form's enctype attribute.
...And 7 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
additionally, for http request methods that can cause side-effects on server data (in particular, http methods other than
get, or post with certain mime types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with the http options request method, and then, upon "approval" from the server, sending the actual request.
...a “simple request” is one that meets all the following conditions: one of the allowed methods:
get head post apart from the headers automatically set by the user agent (for example, connection, user-agent, or the other headers defined in the fetch spec as a “forbidden header name”), the only headers which are allowed to be manually set are those which the fetch spec defines as a “cors-safelisted request-header”, which are: accept accept-language content-language cont...
...code of this sort might be used in javascript deployed on foo.example: const xhr = new xmlhttprequest(); const url = 'https://bar.other/resources/public-data/'; xhr.open('
get', url); xhr.onreadystatechange = somehandler; xhr.send(); this performs a simple exchange between the client and the server, using cors headers to handle the privileges: let's look at what the browser will send to the server in this case, and let's see how the server responds:
get /resources/public-data/ http/1.1 host: bar.other user-agent: mozilla/5.0 (macintosh; intel mac os x 10.14; rv:7...
...And 7 more matches
Example - SVG: Scalable Vector Graphics
combined, we
get this very natural-looking behavior.
... first, each mote tries to move towards the cursor, and second each mote tries to move away from the average mote position. combined, we
get this very natural looking behavior.
... </p> <div> (c) 2006 <a id='emailme' href='#'>nick johnson</a> <script type='text/javascript'> <![cdata[ // foil spam bots var email = '@riovia.net'; email ='nick' + email; document.
getelementbyid('emailme').href = 'mailto:'+email; ]]> </script> this software is free for you to use in any way whatsoever, and comes with no warranty at all.
...And 7 more matches
Private Properties - Archive of obsolete content
to make a private property readable/writable from any function, it's common to define
getter/setter functions for the property, respectively: point.prototype.
getx = function () { return this._x; }; point.prototype.setx = function (x) { this._x = x; }; point.prototype.
gety = function () { return this._y; }; point.prototype.sety = function (y) { this._y = y; }; the above technique is simple and clearly expresses intent.
... using closures another common technique, is to define private properties as variables and their
getter and setter functions as a closure over these variables: function point(_x, _y) { this.
getx = function () { return _x; }; this.setx = function (x) { _x = x; }; this.
gety = function () { return _y; }; this.sety = function (y) { _y = y; }; } note that this technique requires member functions that need access to private properties to be defined on the object itself, instead of its prototype.
... the advantage of this technique is that it offers more protection: there is no way for the user to access a private property, except by using its
getter or setter function.
...And 6 more matches
context-menu - Archive of obsolete content
rather, create your item only once and supply a context that matches the tar
get url.
...menu items for each add-on will be grouped to
gether automatically.
... this item implements the aforementioned search example: var cm = require("sdk/context-menu"); cm.item({ label: "search google", context: cm.selectioncontext(), contentscript: 'self.on("context", function () {' + ' var text = window.
getselection().tostring();' + ' if (text.length > 20)' + ' text = text.substr(0, 20) + "...";' + ' return "search google for " + text;' + '});' }); the "context" listener
gets the window's current selection, truncating it if it's too long, and includes it in the returned string.
...And 6 more matches
l10n - Archive of obsolete content
globals functions
get(identifier, count, placeholder1...n) this function takes a string parameter which it uses as an identifier to look up and return a localized string in the locale currently set for firefox.
... the
gettext tools uses "_" for the name of the function that retrieves localized strings.
... for compatibility with tools that expect this syntax, you can assign this function to "_": var _ = require("sdk/l10n").
get; given a .properties file for the current locale containing an entry like: hello_string= hello!
...And 6 more matches
places/bookmarks - Archive of obsolete content
query properties are and'd to
gether within a single query object, but are or'd to
gether across multiple query objects.
... let { search, unsorted } = require("sdk/places/bookmarks"); // simple query with one object search( { query: "firefox" }, { sort: "title" } ).on("end", function (results) { // results matching any bookmark that has "firefox" // in its url, title or tag, sorted by title }); // multiple queries are or'd to
gether search( [{ query: "firefox" }, { group: unsorted, tags: ["mozilla"] }], { sort: "title" } ).on("end", function (results) { // our first query is the same as the simple query above; // all of those results are also returned here.
... since multiple // queries are or'd to
gether, we also
get bookmarks that // match the second query.
...And 6 more matches
jpm - Archive of obsolete content
see also jpm tutorial for
getting started.
... installing npm there are two ways to
get npm.
...for example, in an ubuntu or debian terminal window, enter sudo apt-
get install nodejs nodejs-legacy npm.
...And 6 more matches
Overview - Archive of obsolete content
warning: this tutorial relies on the since-removed wid
get api and no longer works with firefox.
... the wid
get api is deprecated from firefox 29 onwards.
...in particular, for a simple button, try the action button or toggle button apis, and for a more complex wid
get try the toolbar or sidebar apis.
...And 6 more matches
Creating Reusable Modules - Archive of obsolete content
the documentation for that interface includes an example which we can adapt like this: var {cc, ci} = require("chrome"); function promptforfile() { const nsifilepicker = ci.nsifilepicker; var fp = cc["@mozilla.org/filepicker;1"] .createinstance(nsifilepicker); var window = require("sdk/window/utils").
getmostrecentbrowserwindow(); fp.init(window, "select a file", nsifilepicker.modeopen); fp.appendfilters(nsifilepicker.filterall | nsifilepicker.filtertext); var rv = fp.show(); if (rv == nsifilepicker.returnok || rv == nsifilepicker.returnreplace) { var file = fp.file; //
get the path as string.
...stance(ci.nsifileinputstream); // open for reading istream.init(f, 0x01, 0444, 0); var ch = cc["@mozilla.org/security/hash;1"] .createinstance(ci.nsicryptohash); // we want to use the md5 algorithm ch.init(ch.md5); // this tells updatefromstream to read the entire file const pr_uint32_max = 0xffffffff; ch.updatefromstream(istream, pr_uint32_max); // pass false here to
get binary data back var hash = ch.finish(false); // convert the binary hash data to a hex string.
... var s = array.from(hash, (c, i) => tohexstring(hash.charcodeat(i))).join(""); return s; } putting it to
gether the complete add-on adds a button to firefox: when the user clicks the button, we ask them to select a file, compute the hash, and log the hash to the console: var {cc, ci} = require("chrome"); // return the two-digit hexadecimal code for a byte function tohexstring(charcode) { return ("0" + charcode.tostring(16)).slice(-2); } function md5file(path) { var f = cc["@mozilla.org/file/local;1"] .createinstance(ci.nsilocalfile); f.initwithpath(path); var istream = cc["@mozilla.org/network/file-input-stream;1"] .createinstance(ci.nsifileinputstream); // open for reading istream.init(f, 0x01, 0444, 0); var ch = cc["@mozilla.org/security...
...And 6 more matches
Tutorials - Archive of obsolete content
getting started installation how to install the jpm tool, which you will use for developing add-ons.
... troubleshooting some pointers for fixing common problems and
getting more help.
...
getting started walkthrough of creating a simple add-on with the sdk, using jpm.
...And 6 more matches
HTML to DOM - Archive of obsolete content
safely parsing simple html to dom when using xmlhttprequest to
get the html of a remote webpage, it is often advantageous to turn that html string into dom for easier manipulation.
... function htmlparser(ahtmlstring){ var html = document.implementation.createdocument("http://www.w3.org/1999/xhtml", "html", null), body = document.createelementns("http://www.w3.org/1999/xhtml", "body"); html.documentelement.appendchild(body); body.appendchild(components.classes["@mozilla.org/feed-unescapehtml;1"] .
getservice(components.interfaces.nsiscriptableunescapehtml) .parsefragment(ahtmlstring, false, null, body)); return body; } it works by creating a content-level (this is safer than chrome-level) <div> in the current page, then parsing the html fragment and attaching that fragment to the <div>.
...the returned <body> object is of type element here is a sample that counts the number of paragraphs in a string: var dompars = htmlparser('<p>foo</p><p>bar</p>'); alert(dompars.
getelementsbytagname('p').length); if htmlparser() returns the element name html (instead of body), you have all document object with its complete functions list, therefore you can retrieve info within div tag like this: var dompars = htmlparser("<div id='userinfo'>john was a mediocre programmer, but people liked him <strong>anyway</strong>.</div>"); alert(dompars.
getelementbyid('userinfo').innerhtml); to parse a complete html page, load it into an iframe whose type is content (not chrome).
...And 6 more matches
Windows - Archive of obsolete content
however, window.open() returns a window object for content, not for the browser window itself, so you should
get the chrome window first.
... example window.open(); //this open a pop-up window that could be "blocked" client-side //the following code generate an error as describe in the following warning box var wm = components.classes["@mozilla.org/appshell/window-mediator;1"] .
getservice(components.interfaces.nsiwindowmediator); var newwindow = wm.
getmostrecentwindow("navigator:browser"); var b = newwindow.gbrowser; the code generate a typeerror from firefox console.
...you could improve this code by checking the event.tar
get element and only setting the startpos if the element matches some criteria.
...And 6 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
setting the image for a toolbar button is done with css: #xulschoolhello-hello-world-button { list-style-image: url("chrome://xulschoolhello/skin/hello-world.png"); } it's not really that simple to set the image for a toolbar button, because we need to consider the appearance of the button on different systems, and also consider the different button states, but we'll
get into that further ahead.
...if your file is
getting too big, you should look into optimizing your images.
...to
get the region that corresponds to a specific state of an icon, the -moz-image-region css property is used.
...And 6 more matches
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
this handles actually going out and
getting the data.
... it also handles determining the mime type of the data, which is used to decide who
gets the data.
... bird's eye view <map id="loaddiagrammap" name="loaddiagrammap"><area alt="(13) docontent()" coords="534,239,715,300" href="#nsiexternalhelperappservice::docontent"> <area alt="(10)
getcategoryentry()" coords="575,418,821,418,821,455,629,455,629,484,575,484" href="#categorymanager" shape="poly"> <area alt="(12)" coords="539,133,583,163" href="#stream-converter"> <area alt="(11)" coords="485,133,537,163" href="#contenthandler"> <area alt="(9)" coords="445,132,484,165" href="#nsdocumentopeninfo::dispatchcontent"> <area alt="(8)" coords="405,133,439,162" href="#onstartrequest-innar...
...And 6 more matches
Repackaging Firefox - Archive of obsolete content
important legal considerations before you
get started, it is very important to know and abide by the legal requirements for distributing firefox.
...
getting started now, on to the technical details.
... the following diagram represents an overview of the process and the pieces involved: you will need the following to
get started: a macintosh computer (even for repackaging windows or linux only); it may be either powerpc or intel based.
...And 6 more matches
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
it is one very long line ending in path—make sure that you
get all of it: components.classes["@mozilla.org/file/directory_service;1"].
getservice( components.interfaces.nsiproperties).
get("achrom", components.interfaces.nsifile).path in the javascript console window, paste the code in the field near the top.
... explanation: the chrome directory contains program files that are part of seamonkey itself, to
gether with other files that are provided by extensions.
... copy the following content, making sure that you scroll to
get all of it.
...And 6 more matches
scale - Archive of obsolete content
for those elements, setattribute("value", myvalue) and
getattribute("value") do not access or affect the contents displayed to the user.
... properties disabled type: boolean
gets and sets the value of the disabled attribute.
... increment type: integer
gets and sets the value of the increment attribute.
...And 6 more matches
Using the W3C DOM - Archive of obsolete content
w3c dom standards are well supported by modern browsers, however the standards are moving tar
get so support for newer features should be tested before use.
... accessing elements with the w3c dom the basic method for referencing elements in an html page is document.
getelementbyid().
...for example, the following short sample dynamically sets the left margin of a <div> element with an id of "inset" to half an inch: // in the html: <div id="inset">sample text</div> document.
getelementbyid("inset").style.marginleft = ".5in"; note: internet explorer 5 through 7 have a flawed implementation of
getelementbyid(), which returns the first element with a matching name or id (id versus name when using
getelementbyid, msdn:
getelementbyid method).
...And 6 more matches
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
it is assumed that you have already downloaded, extracted, and consumed the necessary documentation to
get up and running with some basic rhino scripts.
... listing 1 - querying a mysql database from rhino // import the java sql packages importpackage( java.sql ); // load the mysql driver java.lang.class.forname( "com.mysql.jdbc.driver" ); // create connection to the database var conn = drivermanager.
getconnection( "jdbc:mysql://localhost/rhino", "urhino", "prhino" ); // create a statement handle var stmt = conn.createstatement(); //
get a resultset var rs = stmt.executequery( "select * from employee" ); //
get the metadata from the resultset var meta = rs.
getmetadata(); // loop over the records, dump out column names and values while( rs.next() ) { for( var i = 1; i <= meta.
getcolumncount()...
...; i++ ) { print( meta.
getcolumnname( i ) + ": " + rs.
getobject( i ) + "\n" ); } print( "----------\n" ); } // cleanup rs.close(); stmt.close(); conn.close(); this code starts off by using a rhino function named importpackage which is just like using the import statement in java.
...And 6 more matches
XUL Parser in Python - Archive of obsolete content
v.00001 to celebrate activestate's recent announcement about support for perl and python in mozilla, i have put to
gether this little python script that parses your local xul and builds a list of all the xul elements and their attributes in an html page.
... with new wid
gets and attributes landing all the time, i wanted to
get some quicker way of looking at the xul--at particular builds, at particular wid
gets, at which elements had which attributes, etc.
... as i adapt the script in these ways and try to further generalize the actual code as i
get time, i will make it available here.
...And 6 more matches
What is accessibility? - Learn web development
it is a good idea to familiarise yourself with screen readers; you should also set up a screen reader and have a play around with it, to
get an idea of how it works.
... the way this usually affects web development work is the requirement that controls be accessible by the keyboard — we'll discuss keyboard accessibility in later articles in the module, but it is a good idea to try out some websites using just the keyboard to see how you
get on.
... when planning your project, factor accessibility testing into your testing regime, just like testing for any other important tar
get audience segment (e.g.
...And 6 more matches
Type, class, and ID selectors - Learn web development
the universal selector the universal selector is indicated by an asterisk (*) and selects everything in the document (or inside the parent element if it is being chained to
gether with another element and a descendant combinator).
...this means that instead of the default styling added by the browser, which spaces out headings and paragraphs with margins, everything is close to
gether and we can't see the different paragraphs easily.
... tar
geting classes on particular elements you can create a selector that will tar
get specific elements with the class applied.
...And 6 more matches
Test your skills: Links - Learn web development
if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
... you'll
get a bonus point if you also set it so that the subject line of the email is automatically filled in as "question about whales".
... note: the first link in the example has the tar
get="_blank" attribute set on it, so that when you click on it, it opens the page in a new tab.
...And 6 more matches
What’s in the head? Metadata in HTML - Learn web development
prerequisites: basic html familiarity, as covered in
getting started with html.
...in the above example, the head is quite small: <head> <meta charset="utf-8"> <title>my test page</title> </head> in larger pages however, the head can
get quite full.
...let's
get started.
...And 6 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
it then runs the function once per second using setinterval(), creating the effect of a digital clock that updates once per second (see this live, and also see the source): function displaytime() { let date = new date(); let time = date.tolocaletimestring(); document.
getelementbyid('demo').textcontent = time; } const createclock = setinterval(displaytime, 1000); just like settimeout(), setinterval() returns an identifying value you can use later when you need to clear the interval.
...you'll probably want a way to stop such tasks, otherwise you may end up
getting errors when the browser can't complete any further versions of the task, or if the animation being handled by the task has finished.
...a more accurate way would be to run starttime = date.now() to
get a timestamp of exactly when the user clicked the start button, and then do date.now() - starttime to
get the number of milliseconds after the start button was clicked.
...And 6 more matches
Introduction to events - Learn web development
note: event handlers are sometimes called event listeners — they are pretty much interchangeable for our purposes, although strictly speaking, they work to
gether.
...for example, let's rewrite our random color example again slightly: function bgchange(e) { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; e.tar
get.style.backgroundcolor = rndcol; console.log(e); } btn.addeventlistener('click', bgchange); note: you can find the full source code for this example on github (also see it running live).
... here you can see we are including an event object, e, in the function, and in the function setting a background color style on e.tar
get — which is the button itself.
...And 6 more matches
A first splash into JavaScript - Learn web development
you need to start thinking like a programmer — this generally involves looking at descriptions of what your program needs to do, working out what code features are needed to achieve those things, and how to make them work to
gether.
...the more you code, the better you'll
get at it.
... the place where we'll be adding all our code is inside the <script> element at the bottom of the html: <script> // your javascript goes here </script> adding variables to store our data let's
get started.
...And 6 more matches
Basic math in JavaScript — numbers and operators - Learn web development
but none of us can deny that math is a fundamental part of life that we can't
get very far without.
... before you start to
get worried about your brain melting, stop right there!
...enter the below two lines as shown: typeof myint; typeof myfloat; you should
get "number" returned in both cases — this makes things a lot easier for us than if different numbers had different data types, and we had to deal with them in different ways.
...And 6 more matches
Useful string methods - Learn web development
to retrieve the last character of any string, we could use the following line, combining this technique with the length property we looked at above: browsertype[browsertype.length-1]; the length of "mozilla" is 7, but because the count starts at 0, the character position is 6; using length-1
gets us the last character.
...so you'd have to actually write this: browsertype = browsertype.replace('moz','van'); active learning examples in this section we'll
get you to try your hand at writing some string manipulation code.
... each example comes with a "reset" button, which you can use to reset the code if you make a mistake and can't
get it working again, and a "show solution" button you can press to see a potential answer if you
get really stuck.
...And 6 more matches
Storing the information you need — Variables - Learn web development
in this article, we will
get down to the real basics, looking at how to work with the most basic building blocks of javascript — variables.
... you may not fully understand the syntax we are using (yet!), but you should be able to
get the idea — if we didn't have variables available, we'd have to implement a giant code block that checked what the entered name was, and then display the appropriate message for any name.
... note: in javascript, all code instructions should end with a semi-colon (;) — your code may work correctly for single lines, but probably won't when you are writing multiple lines of code to
gether.
...And 6 more matches
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
here we'll
get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e.
... connecting the behavior in the footer to
get the footer working, we need to implement the following thre areas of functionality: a pending todo counter.
... in todo-data.js, add the following
getter underneath the existing all()
getter to define what the incomplete todos actually are:
get incomplete() { return this.todos.filter(todo => { return todo.iscompleted === false; }); } using array.filter(), we declare that "incomplete" todos are ones that have iscompleted equal to false.
...And 6 more matches
Componentizing our Svelte app - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to
get to the current app state, run cd mdn-svelte-tutorial/04-componentizing-our-app or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/04-componentizing-our-app remember to run npm install && npm run dev to start your app in development mode.
...a component is a reusable, self-contained block of code that encapsulates html, css and javascript that belong to
gether, written into a .svelte file.
... in this article we will concentrate on creating the filterbutton and todo components; we'll
get to the others in future articles.
...And 6 more matches
Dynamic behavior in Svelte: working with variables and props - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to
get to the current app state, run cd mdn-svelte-tutorial/03-adding-dynamic-behavior or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/03-adding-dynamic-behavior remember to run npm install && npm run dev to start your app in development mode.
... replace the existing <ul> element with the following simplified version to
get an idea of how it works: <ul> {#each todos as todo, index (todo.id)} <li> <input type="checkbox" checked={todo.completed}/> {index}.
...we are
getting there.
...And 6 more matches
Deploying our app - Learn web development
if all is well, we
get a live change deployed automatically.
...this step isn't necessary, but it is a good best practice to
get into the habit of setting up — across all our projects, we can then rely on npm run build to always do the complete build step, without needing to remember the specific build command arguments for each project.
... committing changes to github this section will
get you over the line to storing your code in a git repository, but it is a far cry from a git tutorial.
...And 6 more matches
Client-side tooling overview - Learn web development
objective: to understand what types of client-side tooling there are, and how to find tools and
get help with them.
... from time to time, even the most experienced of web developers
get stuck on a tooling problem; it is possible to waste hours attempting to
get a tooling pipeline working before even touching a single line of application code.
... bundlers/packagers these are tools that
get your code ready for production, for example by “tree-shaking” to make sure only the parts of your code libraries that you are actually using are put into your final production code, or "minifying" to remove all the whitespace in your production code, making it as small as possible before it is uploaded to a server.
...And 6 more matches
Overview of Mozilla embedding APIs
to
gether, these two services provide a centralized point for gaining access to all of the public mozilla interfaces.
... ns_
getglobalcomponentmanager this function returns an instance of the component manager service.
... do_
getinterface this function simplfies retrieving interfaces via the nsiinterfacerequestor::
getinterface(...) method.
...And 6 more matches
Download
launchwhensucceeded boolean if this property is true when the download finishes successfully, the tar
get file will be opened or executed automatically.
... launcherpath string local file path of the application to be used to launch the tar
get file, or null if the file should be launched with the default application associated with the contenttype property or the extension of the tar
get file.
... tar
get read only downloadtar
get tar
get of this download.
...And 6 more matches
Interfacing with the Add-on Repository
you an use the code module to
get lists of add-ons and even install new add-ons.
... enabling the recommendation feature in current builds of firefox 4, the recommendation api doesn't work because the preference for the url to query to
get recommended add-ons is not included by default; see bug 628785.
... to make the service work for the time being, you can use code like this when your extension starts up: var prefsservice = components.classes["@mozilla.org/preferences-service;1"] .
getservice(components.interfaces.nsiprefservice); var prefbranch = prefsservice.
getbranch("extensions."); var recurl = ""; try { recurl = prefbranch.
getcharpref("
getaddons.recommended.url"); } catch(e) { recurl = ""; } if (recurl == "") { prefbranch.setcharpref("
getaddons.recommended.url", "https://services.addons.mozilla.org/%locale%/%app%/api/%api_version%/list/recommended/all/%max_results%/%os%/%version%?src=firefox"); prefsservice.savepreffile(null); } this fetches the value of the extensions.
getaddons.recommended.url preference, and, if the preference d...
...And 6 more matches
DMD
look at the "trigger" section below to see the full list of ways to
get a dmd report once you have it activated.
... note that stack information you
get will likely be less detailed, due to being unable to symbolicate.
... you will be able to
get function names, but not line numbers.
...And 6 more matches
NSS 3.31 release notes
new functions in cert.h cert_
getcertisperm - retrieve the permanent storage status attribute of a certificate in a thread safe way.
... cert_
getcertistemp - retrieve the temporary storage status attribute of a certificate in a thread safe way.
... pk11_
getmoduleuri - retrieve the uri of the given module.
...And 6 more matches
OLD SSL Reference
chapter 2, "
getting started with ssl" illustrates their use in sample client and server applications.
... initialization initializing caches configuration communication functions used by callbacks cleanup chapter 2
getting started with ssl this chapter describes how to set up your environment, including certificate and key databases, to run the nss sample code.
... ssl initialization functions nss_init nss_initreadwrite nss_nodb_init ssl_optionsetdefault ssl_option
getdefault ssl_cipherprefsetdefault ssl_cipherpref
getdefault ssl_clearsessioncache ssl_configserversessionidcache initializing multi-processing with a shared ssl server cache ssl_configmpserversidcache ssl_inheritmpserversidcache ssl export po...
...And 6 more matches
sslintro.html
chapter 2, "
getting started with ssl" illustrates their use in sample client and server applications.
... pr_
getsocketoption.
...records the tar
get server url for comparison with the url specified by the server certificate.
...And 6 more matches
GC Rooting Guide
e template class (gecko uses the template versions): template class typedef js::rooted<js::value> js::rootedvalue js::rooted<jsobject*> js::rootedobject js::rooted<jsstring*> js::rootedstring js::rooted<jsscript*> js::rootedscript js::rooted<jsid> js::rootedid for example, instead of this: jsobject* localobj = js_
getobjectofsomesort(cx); you would write this: js::rootedobject localobj(cx, js_
getobjectofsomesort(cx)); spidermonkey makes it easy to remember to use js::rooted<t> types instead of a raw pointer because all of the api methods that may gc take a js::handle<t>, as described below, and js::rooted<t> autoconverts to js::handle<t> but a bare pointer does not.
...blehandle<js::value> js::mutablehandlevalue js::mutablehandle<jsobject*> js::mutablehandleobject js::mutablehandle<jsstring*> js::mutablehandlestring js::mutablehandle<jsscript*> js::mutablehandlescript js::mutablehandle<jsid> js::mutablehandleid js::mutablehandle<t> should be used for all out-parameters, for example instead of: bool maybe
getvalue(jscontext *cx, js::value* valueout) { // ...
... if (!waserror) *valueout = resultvalue; return waserror; } void otherfunction(jscontext *cx) { js::value value; bool success = maybe
getvalue(cx, &value); // ...
...And 6 more matches
Garbage collection
the write barrier is a piece of code that runs just before a pointer store occurs and records just enough information to make sure that live objects don't
get collected.
...one way would be to make sure that every object that was live at the beginning of the incremental gc
gets marked.
...the key observation is that the only way an object can
get 'lost' and not marked is if all pointers to the object are overwritten.
...And 6 more matches
JS_DefinePropertyWithTinyId
syntax jsbool js_definepropertywithtinyid( jscontext *cx, jsobject *obj, const char *name, int8 tinyid, jsval value, jspropertyop
getter, jspropertyop setter, unsigned int attrs); jsbool js_defineucpropertywithtinyid( jscontext *cx, jsobject *obj, const jschar *name, size_t namelen, int8 tinyid, jsval value, jspropertyop
getter, jspropertyop setter, unsigned int attrs); name type description cx jscontext * the context in which to define the property.
... tinyid int8 8-bit id to aid in sharing
getter and setter callbacks among properties.
...
getter jspropertyop
getproperty method for retrieving the current property value.
...And 6 more matches
Retrieving part of the bookmarks tree
get the query and options objects all querying is done through the history service.
... first, you need to
get an empty query and options objects from the history service: var historyservice = components.classes["@mozilla.org/browser/nav-history-service;1"] .
getservice(components.interfaces.nsinavhistoryservice); var options = historyservice.
getnewqueryoptions(); var query = historyservice.
getnewquery(); find the folder you want to
get known folder ids are retrieved from the bookmarks service.
...you can also
get folder ids from a previous query.
...And 6 more matches
XPCOM changes in Gecko 2.0
chrome.manifest: # the {classid} here must match the classid in mycomponent.js component {e6b866e3-41b2-4f05-a4d2-3d4bde0f7ef8} components/mycomponent.js contract @foobar/mycomponent;1 {e6b866e3-41b2-4f05-a4d2-3d4bde0f7ef8} category profile-after-change mycomponent @foobar/mycomponent;1 the javascript code no longer exports a ns
getmodule() function.
... it now must export a ns
getfactory() function, which accepts a class id (cid) as a parameter.
...const ns
getfactory = xpcomutils.generatens
getfactory([mycomponent]); a component may implement backwards compatibility with gecko 1.9.2 by dynamically detecting which symbols are exported by xpcomutils.jsm and exporting the correct function: /** * xpcomutils.generatens
getfactory was introduced in mozilla 2 (firefox 4, seamonkey 2.1).
...And 6 more matches
nsIAppShellService
inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by: @mozilla.org/appshell/appshellservice;1 as a service: var appshellservice = components.classes["@mozilla.org/appshell/appshellservice;1"] .
getservice(components.interfaces.nsiappshellservice); method overview void closetoplevelwindow(in nsixulwindow awindow); obsolete since gecko 1.8 void createhiddenwindow(in nsiappshell aappshell); native code only!
...stroyhiddenwindow(); void doprofilestartup(in nsicmdlineservice acmdlineservice, in boolean caninteract); obsolete since gecko 1.8 void ensure1window(in nsicmdlineservice acmdlineservice); obsolete since gecko 1.8 void enterlastwindowclosingsurvivalarea(); obsolete since gecko 1.8 void exitlastwindowclosingsurvivalarea(); obsolete since gecko 1.8 void
gethiddenwindowandjscontext(out nsidomwindow ahiddendomwindow, out jscontext ajscontext); native code only!
... nativeappsupport nsinativeappsupport
getter for "native application support." read only.
...And 6 more matches
nsICacheEntryDescriptor
inherits from: nsicacheentryinfo last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void close(); void doom(); void doomandfailpendingrequests(in nsresult status); string
getmetadataelement(in string key); void markvalid(); nsiinputstream openinputstream(in unsigned long offset); nsioutputstream openoutputstream(in unsigned long offset); void setdatasize(in unsigned long size); void setexpirationtime(in pruint32 expirationtime); void setmetadataelement(in string key, in string value); void visitmetadata(in nsicachemetadatavisitor visitor); attributes attribute type description accessgranted nscacheaccessmode ge...
... cacheelement nsisupports
get or set the cache data element.
... file nsifile
get the disk file associated with the cache entry.
...And 6 more matches
nsICategoryManager
to use this service, use: var categorymanager = components.classes["@mozilla.org/categorymanager;1"] .
getservice(components.interfaces.nsicategorymanager); method overview string addcategoryentry(in string acategory, in string aentry, in string avalue, in boolean apersist, in boolean areplace); void deletecategory(in string acategory); void deletecategoryentry(in string acategory, in string aentry, in boolean apersist); nsisimpleenumerator enumeratecategories();...
... nsisimpleenumerator enumeratecategory(in string acategory); string
getcategoryentry(in string acategory, in string aentry); methods addcategoryentry() this method sets the value for the given entry on the given category.
...
getcategoryentry()
get the value for the given category's entry.
...And 6 more matches
nsIContentPrefService
to create an instance, use: var contentprefservice = components.classes["@mozilla.org/content-pref/service;1"] .
getservice(components.interfaces.nsicontentprefservice); method overview void addobserver(in astring aname, in nsicontentprefobserver aobserver); nsivariant
getpref(in nsivariant agroup, in astring aname, [optional] in nsicontentprefcallback acallback); nsipropertybag2
getprefs(in nsivariant agroup); nsipropertybag2
getprefsbyname(in astring aname); bool...
...
getpref() returns the value of a preference saved for a particular site.
... nsivariant
getpref( in nsivariant agroup, in astring aname, in nsicontentprefcallback acallback optional ); parameters agroup the group for which to retrieve a preference; this may be specified as either a uri or as a string; in either case, the group consists of all sites matching the hostname portion of the specified uri.
...And 6 more matches
nsIDBFolderInfo
= components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.nsidbfolderinfo); method overview long andflags(in long flags); void changeexpungedbytes(in long delta); void changenummessages(in long delta); void changenumunreadmessages(in long delta); boolean
getbooleanproperty(in string propertyname, in boolean defaultvalue); void
getcharacterset(out acstring charset, out boolean overriden); void
getcharactersetoverride(out boolean charactersetoverride); obsolete since gecko 1.8 string
getcharptrcharacterset(); string
getcharptrproperty(in string propertyname); void
getlocale...
...obsolete since gecko 1.8 void
getmailboxname(in nsstring boxname); native code only!
... obsolete since gecko 1.8 astring
getproperty(in string propertyname); nsidbfolderinfo
gettransferinfo(); unsigned long
getuint32property(in string propertyname, in unsigned long defaultvalue); void initfromtransferinfo(in nsidbfolderinfo transferinfo); long orflags(in long flags); void setbooleanproperty(in string propertyname, in boolean apropertyvalue); void setcharacterset(in string charset); void setcharactersetoverride(in boolean charactersetoverride); obsolete since gecko 1.8 void setcharptrproperty(in string apropertyname, in string apropertyvalue); void sethighwater(in nsmsgkey highwater, in boolean force); voi...
...And 6 more matches
nsIExternalProtocolService
method overview boolean externalprotocolhandlerexists(in string aprotocolscheme); astring
getapplicationdescription(in autf8string ascheme); nsihandlerinfo
getprotocolhandlerinfo(in acstring aprotocolscheme); nsihandlerinfo
getprotocolhandlerinfofromos(in acstring aprotocolscheme, out boolean afound); boolean isexposedprotocol(in string aprotocolscheme); void loaduri(in nsiuri auri, [optional] in nsiinterfacerequestor awindowcontext); void loadurl(in nsiuri aurl); void set...
...
getapplicationdescription()
gets a human-readable description for the application responsible for handling a specific protocol.
... astring
getapplicationdescription( in autf8string ascheme ); parameters ascheme the scheme to look up.
...And 6 more matches
nsIMsgCustomColumnHandler
you must implement: nsitreeview.iseditable() nsitreeview.
getcellproperties() nsitreeview.
getimagesrc() nsitreeview.
getcelltext() nsitreeview.cyclecell() nsimsgcustomcolumnhandler.
getsortstringforrow() nsimsgcustomcolumnhandler.
getsortlongforrow() nsimsgcustomcolumnhandler.isstring() and optionally: nsitreeview.
getrowproperties() from c++ you must implement all of nsitreeview and nsimsgcustomcolumnhandler.
... example implementation an example javascript implementation that does nothing: var columnhandler = { iseditable: function(arow, acol) {return false;}, cyclecell: function(arow, acol) { },
getcelltext: function(arow, acol) { },
getsortstringforrow: function(ahdr) { return ""; }, isstring: function() {return true;},
getcellproperties: function(arow, acol, aprops) { },
getrowproperties: function(arow, aprops) { },
getimagesrc: function(arow, acol) {return null;},
getsortlongforrow: function(ahdr) {return 0;} } to attach it use the nsimsgdbview.addcolumnhandler() method (recall gdbview is the global nsimsgdbview in thunderbird): gdbview.addcolumnhandler("newcolumn", columnhandler); after which it can be retrieved using the nsimsgdbview.
getco...
...lumnhandler() method: var handler = gdbview.
getcolumnhandler("newcolumn"); and removed using the nsimsgdbview.removecolumnhandler() method: gdbview.removecolumnhandler("newcolumn"); method overview astring
getsortstringforrow(in nsimsgdbhdr ahdr); unsigned long
getsortlongforrow(in nsimsgdbhdr ahdr); boolean isstring(); methods
getsortstringforrow() if the column displays a string, this will return the string that the column should be sorted by.
...And 6 more matches
nsIMsgIncomingServer
thod overview void clearallvalues(); void cleartemporaryreturnreceiptsfilter(); void closecachedconnections(); void configuretemporaryfilters(in nsimsgfilterlist filterlist); void configuretemporaryreturnreceiptsfilter(in nsimsgfilterlist filterlist); obsolete since gecko 1.8 void displayofflinemsg(in nsimsgwindow awindow); boolean equals(in nsimsgincomingserver server); void for
getpassword(); void for
getsessionpassword(); astring generateprettynameformigration(); boolean
getboolattribute(in string name); boolean
getboolvalue(in string attr); acstring
getcharattribute(in string name); acstring
getcharvalue(in string attr); nsilocalfile
getfilevalue(in string relpref, in string abspref); nsimsgfilterlist
getfilterlist(in nsimsgwindow amsgwindow); long
getint...
...attribute(in string name); long
getintvalue(in string attr); nsimsgfolder
getmsgfolderfromuri(in nsimsgfolder afolderresource, in acstring auri); void
getnewmessages(in nsimsgfolder afolder, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener); acstring
getpasswordwithui(in astring apromptstring, in astring aprompttitle, in nsimsgwindow amsgwindow, out boolean okayvalue); astring
getunicharattribute(in string name); astring
getunicharvalue(in string attr); boolean isnewhdrduplicate(in nsimsgdbhdr anewhdr); void onuserorhostnamechanged(in acstring oldname, in acstring newname); void performbiff(in nsimsgwindow amsgwindow); void performexpand(in nsimsgwindow amsgwindow); void removefiles(); void setboolattribute(in string name, in boolean value); void setboolv...
...exception missing description displayofflinemsg() void displayofflinemsg( in nsimsgwindow awindow ); parameters awindow missing description exceptions thrown missing exception missing description equals() boolean equals( in nsimsgincomingserver server ); parameters server missing description return value missing description exceptions thrown missing exception missing description for
getpassword() void for
getpassword(); parameters none.
...And 6 more matches
nsIMsgMessageService
message(in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener, in string acharsetoverride, out nsiuri aurl); void openattachment(in string acontenttype, in string afilename, in string aurl, in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener); void savemessa
getodisk(in string amessageuri, in nsifilespec afile, in boolean ageneratedummyenvelope, in nsiurllistener aurllistener, out nsiuri aurl, in boolean canonicallineending, in nsimsgwindow amsgwindow); void
geturlforuri(in string amessageuri, out nsiuri aurl, in nsimsgwindow amsgwindow); void displaymessageforprinting(in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwin...
... savemessa
getodisk() when you want to spool a message out to a file on disk.
... void savemessa
getodisk(in string amessageuri, in nsifilespec afile, in boolean ageneratedummyenvelope, in nsiurllistener aurllistener, out nsiuri aurl, in boolean canonicallineending, in nsimsgwindow amsgwindow); parameters amessageuri url representing the message to spool out to disk.
...And 6 more matches
nsIPrincipal
inherits from: nsiserializable last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) for details on principals, how they work, and how to
get the appropriate one, see security check basics.
... boolean equals(in nsiprincipal other); jsprincipals
getjsprincipals(in jscontext cx); native code only!
... void
getpreferences(out string prefbranch, out string id, out string subjectname, out string grantedlist, out string deniedlist, out boolean istrusted); boolean iscapabilityenabled(in string capability, in voidptr annotation); native code only!
...And 6 more matches
nsITextInputProcessor
createinstance(components.interfaces.nsitextinputprocessor); next, you need to
get the rights to create composition or dispatch keyboard events with begininputtransaction() or begininputtransactionfortests(): if (!tip.begininputtransaction(window, callback)) { return; } if begininputtransaction() or begininputtransactionfortests() returns false, it means that another instance of nsitextinputprocessor has composition on the window or is dispatching an event.
...boolean commitcomposition([optional] in nsidomkeyevent adomkeyevent, [optional] in unsigned long akeyflags); boolean commitcompositionwith(in domstring acommitstring, [optional] in nsidomkeyevent adomkeyevent, [optional] in unsigned long akeyflags); boolean flushpendingcomposition([optional] in nsidomkeyevent adomkeyevent, [optional] in unsigned long akeyflags); boolean
getmodifierstate(in domstring amodifierkeyname); boolean keydown([optional] in nsidomkeyevent adomkeyevent, [optional] in unsigned long akeyflags); boolean keyup([optional] in nsidomkeyevent adomkeyevent, [optional] in unsigned long akeyflags); void setcaretinpendingcomposition(in unsigned long aoffset); void setpendingcompositionstring(in domstring astring); ...
...this tries to
get the rights to create composition on the window.
...And 6 more matches
nsITransactionList
inherits from: nsisupports last changed in gecko 1.7 method overview nsitransactionlist
getchildlistforitem(in long aindex); nsitransaction
getitem(in long aindex); long
getnumchildrenforitem(in long aindex); boolean itemisbatch(in long aindex); attributes attribute type description numitems long the number of transactions contained in this list.
... methods
getchildlistforitem() returns the list of children associated with the item at aindex.
...nsitransactionlist
getchildlistforitem( in long aindex ); parameters aindex the index of the item in the list.
...And 6 more matches
nsIZipWriter
void addentrydirectory(in autf8string azipentry, in prtime amodtime, in boolean aqueue); void addentryfile(in autf8string azipentry, in print32 acompression, in nsifile afile, in boolean aqueue); void addentrystream(in autf8string azipentry, in prtime amodtime, in print32 acompression, in nsiinputstream astream, in boolean aqueue); void close(); nsizipentry
getentry(in autf8string azipentry); boolean hasentry(in autf8string azipentry); void open(in nsifile afile, in print32 aioflags); void processqueue(in nsirequestobserver aobserver, in nsisupports acontext); void removeentry(in autf8string azipentry, in boolean aqueue); attributes attribute type description comment acstring
gets...
... achannel the channel from which to
get the data.
... afile the file from which to
get the data and modification time.
...And 6 more matches
Frequently Asked Questions
if you're looking here just to learn about nscomptrs, you'll
get a better introduction in the
getting started guide.
... comparing an nscomptr to a raw xpcom interface pointer declaring an nscomptr to a forward-declared class not linking to xpcom not including nscomptr.h different settings of nscap_feature_debug_ptr_types runtime errors ns_assertion "queryinterface needed" may be caused by a class that derives from a given interface, when you for
getting to also specify the interface name in the ns_impl_isupports / ns_impl_threadsafe_isupports macro.
...for debugging purposes you can write printf("%x\n", mynscomptr.
get()); how do i...
...And 6 more matches
Xptcall Porting Guide
the tree mozilla/xpcom/reflect/xptcall +--public // exported headers +--src // core source | \--md // platform specific parts | +--mac // mac ppc | +--unix // all unix | \--win32 // win32 | +--test // simple tests to
get started \--tests // full tests via api porters are free to create subdirectories under the base md directory for their given platforms and to integrate into the build system as appropriate for their platform.
...these are discriminated unions describing the type and value of each parameter of the tar
get function.
... ns_imethod
getinterfaceinfo(nsiinterfaceinfo** info) = 0; // call this method and return result ns_imethod callmethod(pruint16 methodindex, const nsxptmethodinfo* info, nsxptcminivariant* params) = 0; }; code that wishes to make use of this stubs functionality (such as xpconnect) implement a class which inherits from nsxptcstubbase and implements the...
...And 6 more matches
AnalyserNode - Web APIs
nterface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" tar
get="_top"><rect x="151" y="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="241,25 251,20 251,30 241,25" stroke="#d4dde4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/analysernode" tar
get="_top"><rect x="281" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="341" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">analysernode...
... analysernode.mindecibels is a double value representing the minimum power value in the scaling range for the fft analysis data, for conversion to unsigned byte values — basically, this specifies the minimum value for the range of results when using
getbytefrequencydata().
...And 6 more matches
Advanced animations - Web APIs
« previousnext » in the last chapter we made some basic animations and got to know ways to
get things moving.
... var canvas = document.
getelementbyid('canvas'); var ctx = canvas.
getcontext('2d'); var ball = { x: 100, y: 100, radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; ball.draw(); nothing special here, the ball is actually a simple circle and
gets drawn with t...
...the ball
gets moving by adding a velocity vector to the position.
...And 6 more matches
Basic usage of canvas - Web APIs
the <canvas> element has a method called
getcontext(), used to obtain the rendering context and its drawing functions.
...
getcontext() takes one parameter, the type of context.
... for 2d graphics, such as those covered by this tutorial, you specify "2d" to
get a canvasrenderingcontext2d.
...And 6 more matches
Event.eventPhase - Web APIs
event.capturing_phase 1 the event is being propagated through the tar
get's ancestor objects.
... this process starts with the window, then document, then the htmlhtmlelement, and so on through the elements until the tar
get's parent is reached.
... event listeners registered for capture mode when eventtar
get.addeventlistener() was called are triggered during this phase.
...And 6 more matches
Event - Web APIs
it can also be triggered programmatically, such as by calling the htmlelement.click() method of an element, or by defining the event, then sending it to a specified tar
get using eventtar
get.dispatchevent().
...event-handlers are usually connected (or "attached") to various html elements (such as <button>, <div>, <span>, etc.) using eventtar
get.addeventlistener(), and this generally replaces using the old html event handler attributes.
...ontfaceloadevent customevent devicelightevent devicemotionevent deviceorientationevent deviceproximityevent domtransactionevent dragevent editingbeforeinputevent errorevent fetchevent focusevent gamepadevent hashchangeevent idbversionchangeevent inputevent keyboardevent mediastreamevent messageevent mouseevent mutationevent offlineaudiocompletionevent overconstrainederror pa
getransitionevent paymentrequestupdateevent pointerevent popstateevent progressevent relatedevent rtcdatachannelevent rtcidentityerrorevent rtcidentityevent rtcpeerconnectioniceevent sensorevent storageevent svgevent svgzoomevent timeevent touchevent trackevent transitionevent uievent userproximityevent webglcontextevent wheelevent constructor event() creates an event obje...
...And 6 more matches
IDBObjectStore - Web APIs
idbobjectstore.
get() returns an idbrequest object, and, in a separate thread, returns the store object store selected by the specified key.
... idbobjectstore.
getkey() returns an idbrequest object, and, in a separate thread retrieves and returns the record key for the object in the object stored matching the specified parameter.
... idbobjectstore.
getall() returns an idbrequest object retrieves all objects in the object store matching the specified parameter or all objects in the store if no parameters are given.
...And 6 more matches
KeyframeEffect - Web APIs
properties keyframeeffect.tar
get gets and sets the element, or originating element of the pseudo-element, being animated by this object.
... this may be null for animations that do not tar
get a specific element or pseudo-element.
... keyframeeffect.pseudoelement
gets and sets the selector of the pseudo-element being animated by this object.
...And 6 more matches
MouseEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/uievent" tar
get="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mouseevent" tar
get="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mouseevent</text></a></svg></div> ...
... mouseevent.offsetx read only the x coordinate of the mouse pointer relative to the position of the padding edge of the tar
get node.
...And 6 more matches
SVGPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180"...
...And 6 more matches
SpeechSynthesisUtterance - Web APIs
properties speechsynthesisutterance also inherits properties from its parent interface, eventtar
get.
... speechsynthesisutterance.lang
gets and sets the language of the utterance.
... speechsynthesisutterance.pitch
gets and sets the pitch at which the utterance will be spoken at.
...And 6 more matches
WebGLRenderingContext.texImage2D() - Web APIs
syntax // webgl1: void gl.teximage2d(tar
get, level, internalformat, width, height, border, format, type, arraybufferview?
... pixels); void gl.teximage2d(tar
get, level, internalformat, format, type, imagedata?
... pixels); void gl.teximage2d(tar
get, level, internalformat, format, type, htmlimageelement?
...And 6 more matches
WebGLRenderingContext.texSubImage2D() - Web APIs
syntax // webgl 1: void gl.texsubimage2d(tar
get, level, xoffset, yoffset, width, height, format, type, arraybufferview?
... pixels); void gl.texsubimage2d(tar
get, level, xoffset, yoffset, format, type, imagedata?
... pixels); void gl.texsubimage2d(tar
get, level, xoffset, yoffset, format, type, htmlimageelement?
...And 6 more matches
Migrating from webkitAudioContext - Web APIs
note: there is a library called webkitaudiocontext monkeypatch, which automatically fixes some of these changes to make most code tar
getting webkitaudiocontext to work on the standards based audiocontext out of the box, but it currently doesn't handle all of the cases below.
... the example below shows old code which downloads an audio file over the network, and then decoded it using createbuffer(): var xhr = new xmlhttprequest(); xhr.open("
get", "/path/to/audio.ogg", true); xhr.responsetype = "arraybuffer"; xhr.send(); xhr.onload = function() { var decodedbuffer = context.createbuffer(xhr.response, false); if (decodedbuffer) { // decoding was successful, do something useful with the audio buffer } else { alert("decoding the audio buffer failed"); } }; converting this code to use decodeaudiodata() is relatively simple,...
... as can be seen below: var xhr = new xmlhttprequest(); xhr.open("
get", "/path/to/audio.ogg", true); xhr.responsetype = "arraybuffer"; xhr.send(); xhr.onload = function() { context.decodeaudiodata(xhr.response, function onsuccess(decodedbuffer) { // decoding was successful, do something useful with the audio buffer }, function onfailure() { alert("decoding the audio buffer failed"); }); }; note that the decodeaudiodata() method is asynchronous, which means that it will return immediately, and then when the decoding finishes, one of the success or failure callback functions will
get called depending on whether the audio decoding was successful.
...And 6 more matches
Example and tutorial: Simple synth keyboard - Web APIs
in our case, we
get each key's frequency from a table, but it could be calculated algorithmically as well.
...if we want the frequency for the note g# in octave 1, we simply use notefreq[1]["g#"] and
get the value 51.9 as a result.
...for each octave, we use object.entries() to
get a list of the notes in that octave.
...And 6 more matches
ARIA - Accessibility
it supplements html so that interactions and wid
gets commonly used in applications can be passed to assistive technologies when there is not otherwise a mechanism.
... for example, aria enables accessible navigation landmarks in html4, javascript wid
gets, form hints and error messages, live content updates, and more.
... many of these wid
gets were later incorporated into html5, and developers should prefer using the correct semantic html element over using aria, if such an element exists.
...And 6 more matches
Using media queries - CSS: Cascading Style Sheets
to tar
get specific media for the <style>, <link>, <source>, and other html elements with the media= attribute.
... and the and operator is used for combining multiple media features to
gether into a single media query, requiring each chained feature to return true in order for the query to be true.
... tar
geting media types media types describe the general category of a given device.
...And 6 more matches
Specificity - CSS: Cascading Style Sheets
specificity only applies when the same element is tar
geted by multiple declarations.
... as per css rules, directly tar
geted elements will always take precedence over rules which an element inherits from its ancestor.
...by indicating one or more elements before the element you're selecting, the rule becomes more specific and
gets higher priority: <div id="test"> <span>text</span> </div> div#test span { color: green; } div span { color: blue; } span { color: red; } no matter the order, text will be green because that rule is most specific.
...And 6 more matches
HTML attribute reference - HTML: Hypertext Markup Language
formmethod <button>, <input> if the button/input is a submit button (type="submit"), this attribute sets the submission method to use during form submission (
get, post, etc.).
... formtar
get <button>, <input> if the button/input is a submit button (type="submit"), this attribute specifies the browsing context (for example, tab, window, or inline frame) in which to display the response that is received after submitting the form.
... if this attribute is specified, it overrides the tar
get attribute of the button's form owner.
...And 6 more matches
<input type="range"> - HTML: Hypertext Markup Language
because this kind of wid
get is imprecise, it shouldn't typically be used unless the control's exact value isn't important.
... value a domstring containing the string representation of the selected numeric value; use valueasnumber to
get the value as a number.
... note: the following input attributes do not apply to the input range: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtar
get, height, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size, src, and width.
...And 6 more matches
HTTP Messages - HTTP
their start-line contain three elements: an http method, a verb (like
get, put or post) or a noun (like head or options), that describes the action to be performed.
... for example,
get indicates that a resource should be fetched or post means that data is pushed to the server (creating or modifying a resource, or generating a temporary document to send back).
... the request tar
get, usually a url, or the absolute path of the protocol, port, and domain are usually characterized by the request context.
...And 6 more matches
Details of the object model - JavaScript
a prototype-based language has the notion of a prototypical object, an object used as a template from which to
get the initial properties for a new object.
...if you add a property to an object that is used as the prototype for a set of objects, the objects for which it is the prototype also
get the new property.
... this section shows how to use very simple (and comparatively inflexible) definitions to demonstrate how to
get the inheritance to work.
...And 6 more matches
Inheritance and the prototype chain - JavaScript
since ecmascript 2015, the [[prototype]] is accessed using the accessors object.
getprototypeof() and object.setprototypeof().
...the only exception to the
getting and setting behavior rules is when there is an inherited property with a
getter or a setter.
... 'use strict'; class polygon { constructor(height, width) { this.height = height; this.width = width; } } class square extends polygon { constructor(sidelength) { super(sidelength, sidelength); }
get area() { return this.height * this.width; } set sidelength(newlength) { this.height = newlength; this.width = newlength; } } var square = new square(2); performance the lookup time for properties that are high up on the prototype chain can have a negative impact on the performance, and this may be significant in the code where performance is critical.
...And 6 more matches
Map - JavaScript
let contacts = new map() contacts.set('jessie', {phone: "213-555-1234", address: "123 n 1st ave"}) contacts.has('jessie') // true contacts.
get('hilary') // undefined contacts.set('hilary', {phone: "617-555-4321", address: "321 s 2nd st"}) contacts.
get('jessie') // {phone: "213-555-1234", address: "123 n 1st ave"} contacts.delete('raymond') // false contacts.delete('jessie') // true console.log(contacts.size) // 1 constructor map() creates a new map object.
... static properties
get map[@@species] the constructor function that is used to create derived objects.
... map.prototype.
get(key) returns the value associated to the key, or undefined if there is none.
...And 6 more matches
handler.construct() - JavaScript
in order for the new operation to be valid on the resulting proxy object, the tar
get used to initialize the proxy must itself have a [[construct]] internal method (i.e.
... new tar
get must be valid).
... syntax const p = new proxy(tar
get, { construct: function(tar
get, argumentslist, newtar
get) { } }); parameters the following parameters are passed to the construct() method.
...And 6 more matches
this - JavaScript
// in web browsers, the window object is also the global object: console.log(this === window); // true a = 37; console.log(window.a); // 37 this.b = "mdn"; console.log(window.b) // "mdn" console.log(b) // "mdn" note: you can always easily
get the global object using the global globalthis property, regardless of the current context in which your code is running.
...all non-static methods within the class are added to the prototype of this: class example { constructor() { const proto = object.
getprototypeof(this); console.log(object.
getownpropertynames(proto)); } first(){} second(){} static third(){} } new example(); // ['constructor', 'first', 'second'] note: static methods are not properties of this.
... this with a
getter or setter again, the same notion holds true when a function is invoked from a
getter or a setter.
...And 6 more matches
Digital audio concepts - Web media technologies
the shorter the wavelength (the closer to
gether the crests of the wave are), the higher the frequency (or pitch) of the sound that's produced.
...by chaining all the samples to
gether, you can approximately represent the original wave, as seen in the diagram below.
... the more often you take samples of the original audio, the closer to the original you can
get.
...And 6 more matches
Web Performance
that means not running all your startup code in a single event handler on the app's main thread.performance bud
getsa performance bud
get is a limit to prevent regressions.
...this article explains what latency is, how it impacts performance, how to measure latency, and how to reduce it.using dns-prefetchdns-prefetch is an attempt to resolve domain names before resources
get requested.
... this could be a file loaded later or link tar
get a user tries to follow.
...And 6 more matches
Using custom elements - Web Components
one of the key features of the web components standard is the ability to create custom elements that encapsulate your functionality on an html page, rather than having to make do with a long, nested batch of elements that to
gether provide a custom page feature.
...this.
getattribute('img') : 'img/default.png'; const info = wrapper.appendchild(document.createelement('span')); info.setattribute('class','info'); // take attribute content and put it inside the info span info.textcontent = this.
getattribute('data-text'); // create some css to apply to the shadow dom const style = document.createelement('style'); style.textcontent = '.wrapper {' + // css truncated for b...
...which attributes to notice change for is specified in a static
get observedattributes method let's look at an example of these in use.
...And 6 more matches
XUL Migration Guide - Archive of obsolete content
next, we'll look at some of the main tasks involved in migrating: working with content scripts using the sdk's supported apis how to go beyond the supported apis when necessary, by: using third party modules using the sdk's low-level apis
getting direct access to xpcom finally, we'll walk through a simple example.
...if the supported apis do what you need, they're the best option: you
get the benefits of compatibility across firefox releases and of the sdk's security model.
...here's a really simple example add-on that modifies the browser chrome using window/utils: function removeforwardbutton() { var window = require("sdk/window/utils").
getmostrecentbrowserwindow(); var forward = window.document.
getelementbyid('forward-button'); var parent = window.document.
getelementbyid('urlbar-container'); parent.removechild(forward); } require("sdk/ui/button/action").actionbutton({ id: "remove-forward-button", label: "remove forward button", icon: "./icon-16.png", onclick: removeforwardbutton }); there are more useful examples o...
...And 5 more matches
dev/panel - Archive of obsolete content
note that at the moment you can't debug remote tar
gets (for example, firefox os, the firefox os simulator, or firefox for android) using tools developed with this api.
...with the dev/panel module, you can create your own panels in the toolbox: the panel
gets a tab in the toolbox toolbar which enables the user to open it: you specify the panel's content and behavior using html, css, and javascript.
...however, it can receive messages from the add-on that created it, and the add-on can pass it the debuggee so it can communicate with the debugger server the developer tools are tar
geting.
...And 5 more matches
platform/xpcom - Archive of obsolete content
you can just use require("chrome") to
get direct access to the components object, and access xpcom objects from there.
...
getservice(ci.nsiobserverservice); var starobserver = class({ extends: unknown, interfaces: [ 'nsiobserver' ], topic: '*', register: function register() { observerservice.addobserver(this, this.topic, false); }, unregister: function() { observerservice.removeobserver(this, this.topic); }, observe: function observe(subject, topic, data) { console.log('star observer:', sub...
... var { class } = require('sdk/core/heritage'); var { unknown, factory } = require('sdk/platform/xpcom'); var { cc, ci } = require('chrome'); var contractid = '@me.org/helloworld'; // define a component var helloworld = class({ extends: unknown,
get wrappedjsobject() this, hello: function() {return 'hello world';} }); // create and register the factory var factory = factory({ contract: contractid, component: helloworld }); // xpcom clients can retrieve and use this new // component in the normal way var wrapper = cc[contractid].createinstance(ci.nsisupports); var helloworld = wrapper.wrappedjsobject; console.log(helloworld.hello()); ...
...And 5 more matches
Style System Overview - Archive of obsolete content
the cascade stylesetimpl manages the different origins of rules in the cascade (ua, user, author) style set
gets the nsistyleruleprocessor implementations from the style sheets, and the css stylesheets force one cssruleprocessor per origin (rather than one per stylesheet).
... a struct for a style context can be obtained through nsistylecontext::
getstyledata.
... nsiframe::
getstyledata does the same thing for the frame's mstylecontext member, and the global ::
getstyledata is a typesafe helper that doesn't require the style struct id.
...And 5 more matches
Java in Firefox Extensions - Archive of obsolete content
r privileges, the basic procedure is: download and include http://simile.mit.edu/repository/jav...nsionutils.jar within your extension (you can also build your own from the source files at http://simile.mit.edu/repository/jav...xtensionutils/ ) build and add references leading to this jar and all other jars in your extension within an array of java.net.url's, pass to java.net.urlclassloader to
get a class loader, and finally pass the classloader and array to a function which gives the necessary privileges: // this function will be called to give the necessary privileges to your jar files // however, the policy never comes into play, because // (1) adding permissions doesn't add to the policy itself, and // (2) addurl alone does not set the grant codebase function policyadd (loader,...
...the policy try changing it to //edu.mit.simile.javafirefoxextensionutils.urlsetpolicy var str = 'edu.mit.simile.javafirefoxextensionutils.urlsetpolicy'; var policyclass = java.lang.class.forname( str, true, loader ); var policy = policyclass.newinstance(); policy.setouterpolicy(java.security.policy.
getpolicy()); java.security.policy.setpolicy(policy); policy.addpermission(new java.security.allpermission()); for (var j=0; j < urls.length; j++) { policy.addurl(urls[j]); } }catch(e) { alert(e+'::'+e.linenumber); } } //
get extension folder installation path...
... (this works in firefox 3.x, for firefox 4.x use addonmanager.
getaddonbyid) var extensionpath = components.classes["@mozilla.org/extensions/manager;1"].
...And 5 more matches
How to Write and Land Nanojit Patches - Archive of obsolete content
but don't push that update, as that should only be done by a member of that public repo.] once it passes testing, file the patch to bugzilla (file a bug under the "nanojit" component in the "core" product) and
get a review.
... for tracemonkey, use the "make update-nanojit" tar
get (it requires that mercurial's "convert" extension be enabled; add "hgext.convert =" to your .hgrc file under "[extensions]").
... it will also generate a commit that updates the nanojit-import-rev file in your tar
get repository; this file records which commits have been copied over from nanojit.
...And 5 more matches
IO - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files |
getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes).
...files and streams this section describes how to access and
get information about files, read from files and create and write files.
...to
get a reference to a file object use nsiscriptableio.
getfile().
...And 5 more matches
How to implement a custom XUL query processor component - Archive of obsolete content
e id this._id = math.random(100000).tostring(); } templateresult.prototype = { queryinterface: xpcomutils.generateqi([components.interfaces.nsixultemplateresult]), // private storage _data: null, // right now our results are flat lists, so no containing/recursion take place iscontainer: false, isempty: true, mayprocesschildren: false, resource: null, type: "simple-item",
get id() { return this._id; }, // return the value of that bound variable such as ?name
getbindingfor: function(avar) { // strip off the ?
... from the beginning of the name var name = avar.tostring().slice(1); return this._data[name]; }, // return an object instead of a string for convenient comparison purposes // or null to say just use string value
getbindingobjectfor: function(avar) { return null; }, // called when a rule matches this item.
...g used by the builder hasbeenremoved: function() { } }; // basic wrapper for nsisimpleenumerator function templateresultset(aarrayofdata) { this._index = 0; this._array = aarrayofdata; } templateresultset.prototype = { queryinterface: xpcomutils.generateqi([components.interfaces.nsisimpleenumerator]), hasmoreelements: function() { return this._index < this._array.length; },
getnext: function() { return new templateresult(this._array[this._index++]); } }; // the query processor class - implements nsixultemplatequeryprocessor function templatequeryprocessor() { // our basic list of data this._data = [ {name: "mark", age: 36, hair: "brown", eye: "brown"}, {name: "bill", age: 25, hair: "red", eye: "black"}, {name: ...
...And 5 more matches
Install Scripts - Archive of obsolete content
no files
get copied until step three.
...when a new component is installed, the registry
gets updated.
...instead, you specify an identifier of a known directory and
get subdirectories of it.
...And 5 more matches
Skinning XUL Files by Hand - Archive of obsolete content
this article can help you
get started understanding skins and creating skins for xul.
...to keep your xul looking consistent and to avoid breaking skins alto
gether (when your styles have some dependency on a part of the global skin that changes, such as an image), use the style rules in the global skin by importing it into your stylesheet with the following instruction: @import url("chrome://global/skin/"); refer to the document writing skinnable xul and css for guidelines on how to make your skins friendly to the global skin, to xul, and to mozilla.
...after these, the global skin defines styles for some of the xul wid
gets: statusbar, statusbarpanel and so on.
...And 5 more matches
XUL accessibility guidelines - Archive of obsolete content
users can also refer back to the title to
get a sense of where they are located.
...by default, xul menus, labels, and other wid
gets
get their font, size, and color settings from the user settings specified in the operating system.
... interactive elements avoid small tar
gets, which are difficult to see and click on.
...And 5 more matches
notification - Archive of obsolete content
for those elements, setattribute("value", myvalue) and
getattribute("value") do not access or affect the contents displayed to the user.
... image type: image url
gets and sets the value of the image attribute.
... label type: string
gets and sets the value of the label attribute.
...And 5 more matches
prefpane - Archive of obsolete content
image type: image url
gets and sets the value of the image attribute.
... label type: string
gets and sets the value of the label attribute.
... src type: url
gets and sets the value of the src attribute.
...And 5 more matches
prefwindow - Archive of obsolete content
each pane will usually group to
gether a set of related preferences.
... attributes buttonalign, buttondir, buttonorient, buttonpack, buttons, defaultbutton, lastselected, onbeforeaccept, ondialogaccept, ondialogcancel, ondialogdisclosure, ondialoghelp, onload, onunload, title, type properties buttons, currentpane, defaultbutton, lastselected, preferencepanes, type methods acceptdialog, addpane, canceldialog, centerwindowonscreen,
getbutton, opensubdialog, openwindow, showpane examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="saveoptions" label="backups"> <preferences> <preference id="pref-backup" name="myapp.mybackups" type="bool"/> <preference id="pref-backupdurati...
... type type: string
gets and sets the value of the type attribute.
...And 5 more matches
radiogroup - Archive of obsolete content
attributes disabled, focused, preference, tabindex, value properties accessibletype, disabled, focuseditem, itemcount, selectedindex, selecteditem, tabindex, value methods appenditem, checkadjacentelement,
getindexofitem,
getitematindex, insertitemat, removeitemat examples <radiogroup> <radio id="orange" label="red"/> <radio id="violet" label="green" selected="true"/> <radio id="yellow" label="blue"/> </radiogroup> attributes disabled type: boolean indicates whether the element is disabled or not.
...for those elements, setattribute("value", myvalue) and
getattribute("value") do not access or affect the contents displayed to the user.
... disabled type: boolean
gets and sets the value of the disabled attribute.
...And 5 more matches
richlistitem - Archive of obsolete content
for those elements, setattribute("value", myvalue) and
getattribute("value") do not access or affect the contents displayed to the user.
... control type: element id
gets and sets the value of the control attribute.
... disabled type: boolean
gets and sets the value of the disabled attribute.
...And 5 more matches
tabs - Archive of obsolete content
attributes closebutton, disableclose, disabled, onclosetab, onnewtab, onselect, setfocus, selectedindex, tabbox, tabindex, tooltiptextnew, value, properties accessibletype, disabled, itemcount, selectedindex, selecteditem, tabindex, value, methods advanceselectedtab, appenditem,
getindexofitem,
getitematindex, insertitemat, removeitemat examples (example needed) attributes closebutton obsolete since gecko 1.9.2 type: boolean if this attribute is set to true, the tabs row will have a "new tab" button and "close" button on the ends.
... selectedindex type: integer
gets and sets the index of the currently selected panel.
... disabled type: boolean
gets and sets the value of the disabled attribute.
...And 5 more matches
Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
in most cases, developers of xulrunner applications can download an existing sdk and follow the instructions in
getting started with xulrunner.
...you'll
get a warm fuzzy feeling from mastering the complex but very powerful mozilla build system.
... and all that furniture you smash in the meantime makes great kindling to
get you through those cold winter nights.
...And 5 more matches
JSException - Archive of obsolete content
method summary the netscape.javascript.jsexception class has the following methods:
getwrappedexception instance method
getwrappedexception.
...
getwrappedexceptiontype instance method
getwrappedexceptiontype returns the int mapping of the type of the wrappedexception object.
...the
getwrappedexception method was not available.
...And 5 more matches
Using the Right Markup to Invoke Plugins - Archive of obsolete content
here is an example of this usage, once again for the macromedia flash plugin: <object type="application/x-shockwave-flash" data="javascript-to-flash.swf" width="366" height="142" id="myflash"> <param name="movie" value="javascript-to-flash.swf" /> <param name="quality" value="high" /> <param name="swliveconnect" value="true" /> <p>you need flash --
get the latest version from <a href= "http://www.macromedia.com/downloads/">here.</a></p> </object> in the above example, application/x-shockwave-flash is the flash mime type, and will invoke the netscape-specific flash architecture in mozilla-based browsers.
...future netscape browsers based on mozilla source code will allow the use of a special param element to specify where to
get plugins that are not present, but this feature is not available in netscape 7.
...lash.swf" /> <param name="quality" value="high" /> <param name="swliveconnect" value="true" /> <object type="application/x-shockwave-flash" data="javascript-to-flash.swf" width="366" height="142" id="myflashnscp"> <param name="movie" value="javascript-to-flash.swf" /> <param name="quality" value="high" /> <param name="swliveconnect" value="true" /> <p>you need flash --
get the latest version from <a href="http://www.macromedia.com/downloads/"> here.</a></p> </object> </object> web authors have to specify anobtainment mechanism in mozilla-based browsers -- the browser won't automatically retrieve plugins that are missing if you don't specify where to
get the plugin from using the codebase attribute.
...And 5 more matches
Advanced styling effects - Learn web development
prerequisites: html basics (study introduction to html) and an idea of how css works (study css first steps.) objective: to
get an idea about how to use some of the advanced styling effects available in modern browsers.
... a simple box shadow let's look at a simple example to
get things started.
...icle> p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .multiple { box-shadow: 1px 1px 1px black, 2px 2px 1px black, 3px 3px 1px red, 4px 4px 1px red, 5px 5px 1px black, 6px 6px 1px black; } now we
get this result: we've done something fun here by creating a raised box with multiple coloured layers, but you could use it in any way you want, for example to create a more realistic look with shadows based on multiple light sources.
...And 5 more matches
Other form controls - Learn web development
note: you can find a slightly more interesting example of text area usage in the example we put to
gether in the first article of the series (see the source code also).
... the <option> elements can be nested inside <optgroup> elements to create visually associated groups of values: <select id="groups" name="groups"> <optgroup label="fruits"> <option>banana</option> <option selected>cherry</option> <option>lemon</option> </optgroup> <optgroup label="ve
getables"> <option>carrot</option> <option>eggplant</option> <option>potato</option> </optgroup> </select> on the <optgroup> element, the value of the label attribute is displayed before the values of the nested options.
... <select id="multi" name="multi" multiple size="2"> <optgroup label="fruits"> <option>banana</option> <option selected>cherry</option> <option>lemon</option> </optgroup> <optgroup label="ve
getables"> <option>carrot</option> <option>eggplant</option> <option>potato</option> </optgroup> </select> note: in the case of multiple choice select boxes, you'll notice that the select box no longer displays the values as drop-down content — instead, all values are displayed at once in a list, with the optional size attribute determining the height of the wid
get.
...And 5 more matches
Web forms — Working with user data - Learn web development
we have put to
gether a course that includes all the essential information you need to work towards your goal.
...
get started prerequisites before starting this module, you should at least work through our introduction to html.
... the above text is a good indicator as to why we've put web forms into its own standalone module, rather than trying to mix bits of it into the html, css, and javascript topic areas — form elements are more complex than most other html elements, and they also require a close marriage of related css and javascript techniques to
get the most out of them.
...And 5 more matches
Front-end web developer - Learn web development
if you are not sure if front-end web development is for you, and/or you want a gentle introduction before starting a longer and more complete course, work through our
getting started with the web module first.
...
getting help we have tried to make learning front-end web development as comfortable as possible, but you will probably still
get stuck because you don't understand something, or some code is just not working.
...we all
get stuck, whether we are beginner or professional web developers.
...And 5 more matches
HTML basics - Learn web development
previous overview:
getting started with the web next html (hypertext markup language) is the code that is used to structure a web page and its content.
... the element: the opening tag, the closing tag and the content to
gether comprise the element.
...the class attribute allows you to give the element a non-unique identifier that can be used to tar
get it (and any other elements with the same class value) with style information and other things.
...And 5 more matches
Adding vector graphics to the Web - Learn web development
the vector image however continues to look nice and crisp, because no matter what size it is, the algorithms are used to work out the shapes in the image, with the values simply being scaled as it
gets bigger.
...k over the top of your image.) as a simple example, the following code creates a circle and a rectangle: <svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="black" /> <circle cx="150" cy="100" r="90" fill="blue" /> </svg> this creates the following output: from the example above, you may
get the impression that svg is easy to handcode.
... yes, you can handcode simple svg in a text editor, but for a complex image this quickly starts to
get very difficult.
...And 5 more matches
HTML table basics - Learn web development
overview: tables next this article
gets you started with html tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group to
gether all the cells in a column for styling purposes.
... we won't focus on css in this module, but we have provided a minimal css stylesheet for you to use that will make your tables more readable than the default you
get without any styling.
... you can find the stylesheet here, and you can also find an html template that applies the stylesheet — these to
gether will give you a good starting point for experimenting with html tables.
...And 5 more matches
Looping code - Learn web development
canvas { display: block; } body { margin: 0; } button { position: absolute; top: 5px; left: 5px; } </style> </head> <body> <button>update</button> <canvas></canvas> <script> const btn = document.queryselector('button'); const canvas = document.queryselector('canvas'); const ctx = canvas.
getcontext('2d'); let width = document.documentelement.clientwidth; let height = document.documentelement.clientheight; canvas.width = width; canvas.height = height; function random(number) { return math.floor(math.random()*number); } function draw() { ctx.clearrect(0,0,width,height); for (let i = 0; i < 100; i++) { ctx.beginpath(); ct...
... you should
get the basic idea — we are using a loop to run 100 iterations of this code, each one of which draws a circle in a random position on the page.
... if we weren't using a loop here, we'd have to repeat the following code for every circle we wanted to draw: ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); this would
get very boring and difficult to maintain very quickly.
...And 5 more matches
Video and Audio APIs - Learn web development
if you don't specify this, you
get no playback controls: this is not as immediately useful for video playback, but it does have advantages.
... our finished example will look (and function) something like the following:
getting started to
get started with this example, download our media-player-start.zip and unzip it into a new directory on your hard drive.
...just for fun, we are providing two reporting mechanisms — a <span> containing the elapsed time in minutes and seconds, and an extra <div> that we will use to create a horizontal indicator bar that
gets longer as the time elapses.
...And 5 more matches
Website security - Learn web development
if the tar
get user clicks this "interesting link", the script will be executed when the search results are displayed.
... as discussed earlier, this gives the attacker all the information they need to enter the site as the tar
get user, potentially making purchases as the user or sharing their contact information.
... while the data from post or
get requests is the most common source of xss vulnerabilities, any data from the browser is potentially vulnerable, such as cookie data rendered by the browser, or user files that are uploaded and displayed.
...And 5 more matches
Communicating with frame scripts
where absolutely necessary, frame scripts can pass wrappers called cross process object wrappers (also known as cpows) to chrome, and chrome can use these wrappers to
get synchronous access to content objects.
... the example below sends a message named "my-e10s-extension-message", with a data payload containing details and tag properties, and exposes the event.tar
get object as a cpow: // frame script addeventlistener("click", function (event) { sendasyncmessage("my-addon@me.org:my-e10s-extension-message", { details : "they clicked", tag : event.tar
get.tagname }, { tar
get : event.tar
get }); }, false); to receive messages from content, a chrome script needs to add a message listener using the message manager's addmessagelistener() api.
... tar
get the xul <browser> element from which this message was sent.
...And 5 more matches
Performance
key points to keep in mind scripts registered during addon startup
get executed during session restore.
... frame scripts also
get executed on non-restored tabs.
...and since frame scripts
get evaluated for each tab this means new function objects
get instantiated, new constants
get computed, block scopes must be set up etc.
...And 5 more matches
Implementing QueryInterface
if ( !ainstanceptr ) return ns_error_null_pointer; nsisupports* foundinterface; if ( aiid.equals(nscomtypeinfo<nsix>::
getiid()) ) foundinterface = ns_static_cast(nsix*, this); else if ( aiid.equals(nscomtypeinfo<nsiy>::
getiid()) ) foundinterface = ns_static_cast(nsiy*, this); // ...as many cases as needed...
... else if ( aiid.equals(nscomtypeinfo<nsisupports>::
getiid()) ) foundinterface = ns_static_cast(nsisupports*, ns_static_cast(nsix*, this)); // i (may) have multiple |nsisupports| in me, // so first i cast to a specific base to avoid ambiguity else foundinterface = 0; nsresult status; if ( !foundinterface ) status = ns_nointerface; else { ns_addref(foundinterface); status = ns_ok; } *ainstanceptr = foundinterface; return status; } what's so good about it?
... it addrefs the resulting interface, not this, thus following the com-correct way (particularly important in aggregation) it uses nscomtypeinfo<t>::
getiid() instead of ktiid thus saving a global declaration and global space it uses c 's static_cast, via ns_static_cast, which detects errors when you can't really
get to the desired interface.
...And 5 more matches
Investigating leaks using DMD heap scan mode
you need to
get a shutdown cc log and a dmd log, for a single run.
...this can come in handy during the manual analysis phase later, to
get evidence to support your hunches.
...the allowed values here are the same as those returned by xre_
getprocesstype(), so adjust as needed.
...And 5 more matches
A guide to searching crash reports
searching the search form you can
get to the search page by clicking on the "super search" link near the toolbar at the top right of any page in crash-stats.
... the default search: signature facet if you click on the "search" button, you will
get results like the ones in the following screenshot.
... after clicking on "search" we
get results like those in the following screenshot.
...And 5 more matches
nss tech note1
void* dest is a pointer to the tar
get area.
...it is only needed if the template instructs the decoder to save some data, such as for primitive component types, or for some modifiers where noted.when needed, it tells the decoder where in the tar
get data to save the current component.
...if templates are nested, the offset applies to the location of the current component within the tar
get component, typically the decoded sequence.
...And 5 more matches
S/MIME functions
function name/documentation source code nss versions nss_cmscontentinfo_
getbulkkey mxr 3.2 and later nss_cmscontentinfo_
getbulkkeysize mxr 3.2 and later nss_cmscontentinfo_
getcontent mxr 3.2 and later nss_cmscontentinfo_
getcontentencalgtag mxr 3.2 and later nss_cmscontentinfo_
getcontenttypetag mxr 3.2 and later nss_cmscontentinfo_set...
...ss_cmsdigestcontext_startmultiple mxr 3.2 and later nss_cmsdigestcontext_startsingle mxr 3.2 and later nss_cmsdigestcontext_update mxr 3.2 and later nss_cmsdigesteddata_create mxr 3.2 and later nss_cmsdigesteddata_destroy mxr 3.2 and later nss_cmsdigesteddata_
getcontentinfo mxr 3.2 and later nss_cmsderencode mxr 3.2 and later nss_cmsencoder_cancel mxr 3.2 and later nss_cmsencoder_finish mxr 3.2 and later nss_cmsencoder_start mxr 3.2 and later nss_cmsencoder_update mxr 3.2 and later nss_cmse...
...ncrypteddata_create mxr 3.2 and later nss_cmsencrypteddata_destroy mxr 3.2 and later nss_cmsencrypteddata_
getcontentinfo mxr 3.2 and later nss_cmsenvelopeddata_addrecipient mxr 3.2 and later nss_cmsenvelopeddata_create mxr 3.2 and later nss_cmsenvelopeddata_destroy mxr 3.2 and later nss_cmsenvelopeddata_
getcontentinfo mxr 3.2 and later nss_cmsmessage_contentlevel mxr 3.2 and later nss_cmsmessage_contentlevelcount mxr 3.2 and later nss_cmsmessage_copy mxr 3.2 and later nss_cmsmessage_create mxr 3.2 and late...
...And 5 more matches
Necko walkthrough
receive response
get a callback to each of these: nsistreamlistener::onstartrequest (header info) nsistreamlistener::ondataavailable (data in single or multiple chunks) nsistreamlistener::onstoprequest (no more data from http) this all happens on the main thread, in a non-blocking fashion: make your request on the main thread, then carry on and
get the async response later, also on ...
...hed to dns thread pool) some other things nshttpchannel::connect might to a speculativeconnect (pre open tcp socket) nshttpchannel::continueconnect some cache stuff nshttpchannel::setuptransaction creates new nshttptransaction, and inits it with mrequesthead (the request headers) and muploadstream (which was created from the request data in channel setup)
gets an nsiasyncinputstream (for the response; corresponds to the nspipeinputstream for the response stream pipe) passes it to nsinputstreampump nshttpchannel::ghttphandler->initiatetransaction (called from connect) this is the global nshttphandler object, which adds the transaction to the nshttpconnectionmgr (one of these per nshttphandler).
...nspipeinputstream::asyncwait), with tar
get thread set to the current thread, i.e.
...And 5 more matches
JIT Optimization Outcomes
this failure mode is unlikely and occurs if the tar
get object is obtained in some roundabout way.
... accessnotdense accessnotsimdobject the observed type of the tar
get of the property access doesn't guarantee that it is an simd object.
... accessnottypedobject the observed type of the tar
get of the property access doesn't guarantee that it is a typedobject.
...And 5 more matches
JSClass
syntax struct jsclass { const char *name; uint32_t flags; /* optional since spidermonkey 37 */ jspropertyop addproperty; jsdeletepropertyop delproperty; jspropertyop
getproperty; jsstrictpropertyop setproperty; jsenumerateop enumerate; jsresolveop resolve; jsconvertop convert; /* obsolete since spidermonkey 44 */ /* optional since spidermonkey 25 */ jsfinalizeop finalize; /* optional */ jsclassinternal reserved0; /* obsolete since spidermonkey 13 */ jscheckaccessop checkaccess; ...
...
getproperty jspropertyop a hook called when
getting a property.
... this is the default
getter for the class.
...And 5 more matches
JS_PSGS
syntax #define js_psg(name,
getter, flags) ...
... #define js_psgs(name,
getter, setter, flags) ...
... #define js_self_hosted_
get(name,
gettername, flags) ...
...And 5 more matches
Secure Development Guidelines
egister being executed; can’t be modified directly introduction: gaining control (2) eip is modified using call or jump instructions attacks usually rely on obtaining control over the eip otherwise the attacker can try to control memory pointed to by an existing function pointer a vulnerability is required to modify the eip or sensitive memory saved return addr or function pointer
get altered introduction: gaining control (3) common issues used to gain control buffer overflows format string bugs integer overflows/underflows writing secure code: input validation input validation most vulnerabilities are a result of un-validated input always perform input validation could save you without knowing it examples: if it doesn’t have to be negati...
...p; → & < → < > → > " → " ' → ' url encoding % encoding java/vbscript escaping depends on the context; in a single-quoted string, escaping ' would suffice sql injection occurs when un-trusted input is mixed with a sql string sql is a language used to interact with databases code injection attack that is similar to xss but tar
geted at sql rather than html and javascript if input is mixed with sql, it could itself become an sql instruction and be used to: query data from the database (passwords) insert value into the database (a user account) change application logic based on results returned by the database sql injection: example snprintf(str, sizeof(str), "select * from account where name =...
...'%s'", name); sqlite3_exec(db, str, null, null, null); sql injection: prevention use parameterized queries insert a marker for every piece of dynamic content so data does not
get mixed with sql instructions example: sqlite3_stmt *stmt; char *str = "select * from account where name='?'"; sqlite3_prepare_v2(db, str, strlen(str), &stmt, null); sqlite3_bind_text(stmt, 1, name, strlen(name), sqlite_transient); sqlite3_step(stmt); sqlite3_finalize(p_stmt); writing secure code: arithmetic issues integer overflows/underflows overflows occur when an arithmetic operation attempts to create a numeric value that is larger than can be represented within the available storage space max + 1 will be 0 and 0 – 1 will be max!
...And 5 more matches
imgIRequest
inherits from: nsirequest last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) method overview void cancelandfor
getobserver(in nsresult astatus); imgirequest clone(in imgidecoderobserver aobserver); void decrementanimationconsumers(); imgirequest
getstaticrequest(); void incrementanimationconsumers(); void lockimage(); void requestdecode(); void unlockimage(); attributes attribute type description corsmode long the cors mode that this image was loaded with.
... cors_anonymous 2 cors_use_credentials 3 methods cancelandfor
getobserver() cancels this request as in nsirequest.cancel(); further, also nulls out decoderobserver so it
gets no further notifications from us.
...note that cancel() is asynchronous, which means that some time after you call it, the listener/observer will
get an onstoprequest().
...And 5 more matches
mozIAsyncFavicons
method overview void
getfaviconurlforpage(in nsiuri apageuri, in nsifavicondatacallback acallback); void
getfavicondataforpage(in nsiuri apageuri, in nsifavicondatacallback acallback); void setandfetchfaviconforpage(in nsiuri apageuri, in nsiuri afaviconuri, in boolean aforcereload, in unsigned long afaviconloadtype, [optional] in nsifavicondatacallback acallback); void re...
...placefavicondata(in nsiuri afaviconuri, [const,array,size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amimetype, [optional] in prtime aexpiration); void replacefavicondatafromdataurl(in nsiuri afaviconuri, in astring adataurl, [optional] in prtime aexpiration); methods
getfaviconurlforpage() retrieve the url of the favicon for the given page.
... void
getfaviconurlforpage( in nsiuri apageuri, in nsifavicondatacallback acallback ); parameters apageuri uri of the page whose favicon's url we're looking up.
...And 5 more matches
mozIJSSubScriptLoader
to
get this service, use: var mozijssubscriptloader = components.classes["@mozilla.org/moz/jssubscript-loader;1"] .
getservice(components.interfaces.mozijssubscriptloader); note: see components.utils.import for another way to import javascript code.
... method overview jsval loadsubscript(in string url, in object tar
getobj optional, in string charset optional); jsval loadsubscriptwithoptions(in string url, in object options); methods loadsubscript() synchronously loads and executes the script from the specified url.
... the loaded script is executed with the principal associated with the tar
get object.
...And 5 more matches
nsIAccessibleDocument
you can also
get one from nsiaccessnode.
getaccessibledocument() or nsiaccessibleevent.
getaccessibledocument() method overview nsiaccessible
getaccessibleinparentchain(in nsidomnode adomnode, in boolean acancreate); obsolete since gecko 2.0 nsiaccessnode
getcachedaccessnode(in voidptr auniqueid); native code only!
... obsolete since gecko 2.0 astring
getnamespaceuriforid(in short namespaceid); attributes attribute type description caretaccessible nsiaccessible read only.
... methods
getaccessibleinparentchain() obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) returns the first accessible parent of a dom node.
...And 5 more matches
nsICacheEntryInfo
inherits from: nsisupports last changed in gecko 1.7 method overview boolean isstreambased(); attributes attribute type description clientid string
get the client id associated with this cache entry.
... datasize unsigned long
get the cache entry data size.
... deviceid string
get the id for the device that stores this cache entry.
...And 5 more matches
nsIClassInfo
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsisupports
gethelperforlanguage(in pruint32 language); void
getinterfaces(out pruint32 count, [array, size_is(count), retval] out nsiidptr array); attributes attribute type description classdescription string a human readable string naming the class, or null.
...if the flags attribute has the singleton bit set, then the value of this attribute specifies a classid through which this class can be accessed as a service using nsiservicemanager.
getservice().
...if the flags attribute has the singleton bit set, then the value of this attribute specifies a classid through which this class can be accessed as a service using nsiservicemanager.
getservice().
...And 5 more matches
nsIConsoleService
inherits from: nsisupports last changed in gecko 19 (firefox 19 / thunderbird 19 / seamonkey 2.16) implemented by: @mozilla.org/consoleservice;1 as a service: var consoleservice = components.classes["@mozilla.org/consoleservice;1"] .
getservice(components.interfaces.nsiconsoleservice); method overview void
getmessagearray([array, size_is(count)] out nsiconsolemessage messages, out uint32_t count);obsolete since gecko 19 void
getmessagearray([optional] out uint32_t count, [retval, array, size_is(count)] out nsiconsolemessage messages); void logmessage(in nsiconsolemessage message); void logstringm...
...essage(in wstring message); void registerlistener(in nsiconsolelistener listener); void reset(); void unregisterlistener(in nsiconsolelistener listener); methods
getmessagearray() to obtain an array of all logged messages.
... void
getmessagearray( [array, size_is(count)] out nsiconsolemessage messages, out pruint32 count ); parameters messages an array of logged messages.
...And 5 more matches
nsICookieService
netwerk/cookie/public/nsicookieservice.idlscriptable provides methods for setting and
getting cookies in the context of a page load.
... var cookiesvc = components.classes["@mozilla.org/cookieservice;1"] .
getservice(components.interfaces.nsicookieservice); notifications this service broadcasts the following notifications when the cookie list is changed, or a cookie is rejected: topic subject data cookie-changed broadcast whenever the cookie list changes in some way.
... method overview string
getcookiestring(in nsiuri auri, in nsichannel achannel); string
getcookiestringfromhttp(in nsiuri auri, in nsiuri afirsturi, in nsichannel achannel); void setcookiestring(in nsiuri auri, in nsiprompt aprompt, in string acookie, in nsichannel achannel); void setcookiestringfromhttp(in nsiuri auri, in nsiuri afirsturi, in nsiprompt aprompt, in string acookie, in string aserve...
...And 5 more matches
nsIDOMWindow
method overview nsidomcssstyledeclaration
getcomputedstyle(in nsidomelement elt, [optional] in domstring pseudoelt); nsiselection
getselection(); void scrollby(in long xscrolldif, in long yscrolldif); void scrollbylines(in long numlines); void scrollbypages(in long numpages); void scrollto(in long xscroll, in long yscroll); void sizetocontent(); attributes attribute t...
...ype description applicationcache nsidomofflineresourcelist
get the application cache object for this window.
... name domstring
get or set the name of this window.
...And 5 more matches
nsIEnvironment
getservice(components.interfaces.nsienvironment); method overview void set(in astring aname, in astring avalue); astring
get(in astring aname); boolean exists(in astring aname); methods set() set the value of an environment variable.
...
get()
get the value of an environment variable.
... astring
get( in astring aname ); parameters aname the variable name to retrieve.
...And 5 more matches
nsIIOService
implemented by @mozilla.org/network/io-service;1 as a service: var ioservice = components.classes["@mozilla.org/network/io-service;1"] .
getservice(components.interfaces.nsiioservice); method overview boolean allowport(in long aport, in string ascheme); acstring extractscheme(in autf8string urlstring); unsigned long
getprotocolflags(in string ascheme); nsiprotocolhandler
getprotocolhandler(in string ascheme); nsichannel newchannel(in autf8string aspec, in string aorigincharset, in nsiuri...
...
getprotocolflags() returns the protocol flags for a given scheme.
... unsigned long
getprotocolflags( in string ascheme ); parameters ascheme the scheme for which to
get the protocol flags.
...And 5 more matches
nsILivemarkService
to use this service, use: var livemarkservice = components.classes["@mozilla.org/browser/livemark-service;2"] .
getservice(components.interfaces.nsilivemarkservice); method overview long long createlivemark(in long long folder, in astring name, in nsiuri siteuri, in nsiuri feeduri, in long index); long long createlivemarkfolderonly(in long long folder, in astring name, in nsiuri siteuri, in nsiuri feeduri, in long index); nsiuri
getfeeduri(in long long container); long l...
...ong
getlivemarkidforfeeduri(in nsiuri afeeduri); nsiuri
getsiteuri(in long long container); boolean islivemark(in long long folder); void reloadalllivemarks(); void reloadlivemarkfolder(in long long folderid); void setfeeduri(in long long container, in nsiuri feeduri); void setsiteuri(in long long container, in nsiuri siteuri); void start(); void stopupdatelivemarks(); methods createlivemark() creates a new livemark.
...
getfeeduri() this method retrieves the uri of the syndication feed associated with a livemark container.
...And 5 more matches
nsILoginManager
to create an instance, use: var loginmanager = components.classes["@mozilla.org/login-manager;1"] .
getservice(components.interfaces.nsiloginmanager); method overview void addlogin(in nsilogininfo alogin); nsiautocompleteresult autocompletesearch(in astring asearchstring, in nsiautocompleteresult apreviousresult, in nsidomhtmlinputelement aelement); unsigned long countlogins(in astring ahostname, in astring aactionurl, in astring ahttprealm); boolean fillform(...
...in nsidomhtmlformelement aform); void findlogins(out unsigned long count, in astring ahostname, in astring aactionurl, in astring ahttprealm, [retval, array, size_is(count)] out nsilogininfo logins); void
getalldisabledhosts([optional] out unsigned long count, [retval, array, size_is(count)] out wstring hostnames); void
getalllogins([optional] out unsigned long count, [retval, array, size_is(count)] out nsilogininfo logins); boolean
getloginsavingenabled(in astring ahost); void modifylogin(in nsilogininfo oldlogin, in nsisupports newlogindata); void removealllogins(); void removelogin(in nsilogininfo alogin); void searchlogins(out unsigned long count, in nsipropertybag matchdata, [retval, array, size_is(count)] out nsilo...
... example this method can be called from javascript like this: var logins = myloginmgr.findlogins({}, 'https://bugzilla.mozilla.org', '', '', {});
getalldisabledhosts() returns a list of all hosts for which login saving is disabled.
...And 5 more matches
nsINavHistoryQuery
all parameters are anded to
gether.
...this is important because, if the user has their profile on a networked drive, query latency can be non-negligible method overview nsinavhistoryquery clone(); void
getfolders([optional ]out unsigned long count, [retval,array,size_is(count)] out long long folders); void
gettransitions([optional] out unsigned long count, [retval,array,size_is(count)] out unsigned long transitions); void setfolders([const,array, size_is(foldercount)] in long long folders, in unsigned long foldercount); void settransitions([const,array, size_is(count)] in unsigned long tra...
...this allows place queries to be returned (which might include bookmark folders -- use the bookmark service's
getfolderuri) as well as anything else that may have been tagged with an annotation.
...And 5 more matches
nsIPushService
implemented by @mozilla.org/push/service;1 as a service: const pushservice = components.classes["@mozilla.org/push/service;1"] .
getservice(components.interfaces.nsipushservice); method overview void subscribe(in domstring scope, in nsiprincipal principal, in nsipushsubscriptioncallback callback); void
getsubscription(in domstring scope, in nsiprincipal principal, in nsipushsubscriptioncallback callback); void unsubscribe(in domstring scope, in nsiprincipal principal, in nsiunsubscriberesultcallba...
... example const { classes: cc, interfaces: ci, utils: cu } = components; const scriptsecuritymanager = cc["@mozilla.org/scriptsecuritymanager;1"] .
getservice(ci.nsiscriptsecuritymanager); const pushservice = cc["@mozilla.org/push/service;1"] .
getservice(ci.nsipushservice); pushservice.subscribe( "chrome://my-module/push", scriptsecuritymanager.
getsystemprincipal(), (code, subscription) => { if (!components.issuccesscode(code)) { cu.reporterror("error creating subscription: " + code); return; } ...
... subscription.endpoint; subscription.
getkey("p256dh"); subscription.
getkey("auth"); } );
getsubscription() fetches an existing subscription.
...And 5 more matches
nsIWinTaskbar
wid
get/public/nsiwintaskbar.idlscriptable represents a service that exposes the apis provided by the microsoft windows taskbar.
...among these is the addition of the method
getoverlayiconcontroller().
...to create an instance, use: var wintaskbar = components.classes["@mozilla.org/windows-taskbar;1"] .
getservice(components.interfaces.nsiwintaskbar); method overview nsijumplistbuilder createjumplistbuilder(); nsitaskbartabpreview createtaskbartabpreview(in nsidocshell shell, in nsitaskbarpreviewcontroller controller); nsitaskbarprogress
gettaskbarprogress(in nsidocshell shell); nsitaskbarwindowpreview
gettaskbarwindowpreview(in nsidocshell shell); void setgroupidforwindow(in nsidomwindow aparent, in astring aidentifier); attributes attribute type description available boolean ...
...And 5 more matches
nsIWindowsRegKey
method overview void close(); void create(in unsigned long rootkey, in astring relpath, in unsigned long mode); nsiwindowsregkey createchild(in astring relpath, in unsigned long mode); astring
getchildname(in unsigned long index); astring
getvaluename(in unsigned long index); unsigned long
getvaluetype(in astring name); boolean haschanged(); boolean haschild(in astring name); boolean hasvalue(in astring name); boolean iswatching(); void open(in unsigned long rootkey, in astring relpath, in unsigned long mode); nsiwindo...
...it is still possible to enumerate values that have other types (that is,
getvaluetype() may return a type not defined below).
...
getchildname() this method returns the name of the n'th child key.
...And 5 more matches
Using nsIDirectoryService
this implementation will allow you to
get(), set(), define(), and undefine() nsifile.
...
getting a location: most developers need to find where a file or directory is located.
...second, you must acquire the implementation and call
get() passing the known string key.
...And 5 more matches
Mail and RDF
this allows each template-based wid
get to maintain view/window-specific data with each datasource.
...in the document's onload= handler the datasources are attached to their respective wid
gets by setting the database property on each rdf template's parent element.
...information for this column is queried when the tree's rdf template calls the folder datasource's
gettar
get() method.
...And 5 more matches
Using COM from js-ctypes
from iunknown */ void* queryinterface; void* addref; ulong (__stdcall *release)(struct myispvoice*); /* end inherit from iunknown */ /* start inherit from ispnotifysource */ void* setnotifysink; void* setnotifywindowmessage; void* setnotifycallbackfunction; void* setnotifycallbackinterface; void* setnotifywin32event; void* waitfornotifyevent; void*
getnotifyeventhandle; /* end inherit from ispnotifysource */ /* start inherit from ispeventsource */ void* setinterest; void*
getevents; void*
getinfo; /* end inherit from ispeventsource */ /* start ispvoice */ void* setoutput; void*
getoutputobjecttoken; void*
getoutputstream; void* pause; void* resume; void* setvoice; void*
getvoice; hresu...
...lt (__stdcall *speak)(struct myispvoice*, lpcwstr pwcs, dword dwflags, ulong* pulstreamnumber); void* speakstream; void*
getstatus; void* skip; void* setpriority; void*
getpriority; void* setalertboundary; void*
getalertboundary; void* setrate; void*
getrate; void* setvolume; void*
getvolume; void* waituntildone; void* setsyncspeaktimeout; void*
getsyncspeaktimeout; void* speakcompleteevent; void* isuisupported; void* displayui; /* end ispvoice */ }; int main(void) { if (succeeded(coinitialize(null))) { struct myispvoice* pvoice = null; hresult hr = cocreateinstance(&clsid_spvoice, null, clsctx_all, &iid_ispvoice, (void**)&pvoice...
... inherit from ispnotifysource // can set to ctypes.voidptr_t if arent going to use it { 'setnotifysink': ctypes.voidptr_t }, { 'setnotifywindowmessage': ctypes.voidptr_t }, { 'setnotifycallbackfunction': ctypes.voidptr_t }, { 'setnotifycallbackinterface': ctypes.voidptr_t }, { 'setnotifywin32event': ctypes.voidptr_t }, { 'waitfornotifyevent': ctypes.voidptr_t }, { '
getnotifyeventhandle': ctypes.voidptr_t }, // end inherit from ispnotifysource // start inherit from ispeventsource { 'setinterest': ctypes.voidptr_t }, { '
getevents': ctypes.voidptr_t }, { '
getinfo': ctypes.voidptr_t }, // end inherit from ispeventsource // start ispvoice { 'setoutput': ctypes.voidptr_t }, { '
getoutputobjecttoken': ctypes.voidptr_t }, { '
getou...
...And 5 more matches
Streams - Plugins
np_asfileonly: this plug-in
gets full random access to the data using platform-specific file operations.
... note: a plug-in can also use the npn_
geturl method to request a stream for an arbitrary url.
...if the plug-in
gets 10000 bytes from the browser in a subsequent call to npp_write, the plug-in should copy the first 8192 bytes from the browser's buffer into its own buffer and return 8192 (the number of bytes actually consumed) from npp_write.
...And 5 more matches
Index - Firefox Developer Tools
the referent’s properties do not appear directly as properties of the debugger.object instance; the debugger can access them only through methods like debugger.object.prototype.
getownpropertydescriptor and debugger.object.prototype.defineproperty, ensuring that the debugger will not inadvertently invoke the referent’s
getters and setters.
...the referent's properties do not appear directly as properties of the debugger.object instance; the debugger can access them only through methods like debugger.object.prototype.
getownpropertydescriptor and debugger.object.prototype.defineproperty, ensuring that the debugger will not inadvertently invoke the referent's
getters and setters.
... 44 tree map view the tree map view provides a visual representation of the snapshot, that helps you quickly
get an idea of which objects are using the most memory.
...And 5 more matches
Background Tasks API - Web APIs
getting the most out of idle callbacks because idle callbacks are intended to give your code a way to cooperate with the event loop to ensure that the system is utilized to its full potential without over-tasking it, resulting in lag or other performance problems, you should be thoughtful about how you go about using them.
...while the browser, your code, and the web in general will continue to run normally if you go over the specified time limit (even if you go way over it), the time restriction is intended to ensure that you leave the system enough time to finish the current pass through the event loop and
get on to the next one without causing other code to stutter or animation effects to lag.
... let totaltaskcountelem = document.
getelementbyid("totaltaskcount"); let currenttasknumberelem = document.
getelementbyid("currenttasknumber"); let progressbarelem = document.
getelementbyid("progress"); let startbuttonelem = document.
getelementbyid("startbutton"); let logelem = document.
getelementbyid("log"); next we have variables which reference the dom elements we need to interact with.
...And 5 more matches
BiquadFilterNode - Web APIs
frequencies lower than the frequency
get a boost, or an attenuation; frequencies over it are unchanged.
... the upper limit of the frequencies
getting a boost or an attenuation.
...frequencies higher than the frequency
get a boost or an attenuation; frequencies lower than it are unchanged.
...And 5 more matches
Using dynamic styling information - Web APIs
to
get to the style objects from the document, you can use the document.stylesheets property and access the individual objects by index (e.g., document.stylesheets[0] is the first stylesheet defined for the document, etc.).
... modify an element's style the element style property (see also the section "dom style object" below) can also be used to
get and set the styles on an element.
... <html> <head> <title>simple style example</title> <script type="text/javascript"> function alterstyle(elem) { elem.style.background = 'green'; } function resetstyle(elemid) { elem = document.
getelementbyid(elemid); elem.style.background = 'white'; } </script> <style type="text/css"> #p1 { border: solid blue 2px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'.
...And 5 more matches
CanvasRenderingContext2D - Web APIs
basic example to
get a canvasrenderingcontext2d instance, you must first have an html <canvas> element to work with: <canvas id="my-house" width="300" height="300"></canvas> to
get the canvas' 2d rendering context, call
getcontext() on the <canvas> element, supplying '2d' as the argument: const canvas = document.
getelementbyid('my-house'); const ctx = canvas.
getcontext('2d'); with the context in hand, you can draw anything you like.
... canvasrenderingcontext2d.
getlinedash() returns the current line dash pattern array containing an even number of non-negative numbers.
... canvasrenderingcontext2d.
gettransform retrieves the current transformation matrix being applied to the context.
...And 5 more matches
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
in fact, much of our source code is full of these whitespace characters, and we only tend to
get rid of it in a production build step to reduce code download sizes.
... inside this context, whitespace character processing can be summarized as follows: first, all spaces and tabs immediately before and after a line break are ignored so, if we take our example markup from before and apply this first rule, we
get: <h1>◦◦◦hello⏎ <span>◦world!</span>⇥◦◦</h1> next, all tab characters are handled as space characters, so the example becomes: <h1>◦◦◦hello⏎ <span>◦world!</span>◦◦◦</h1> next, line breaks are converted to spaces: <h1>◦◦◦hello◦<span>◦world!</span>◦◦◦</h1> after that, any space immediately following another space (even across...
... two separate inline elements) is ignored, so we end up with: <h1>◦hello◦<span>world!</span>◦</h1> and finally, sequences of spaces at the beginning and end of a line are removed, so we finally
get this: <h1>hello◦<span>world!</span></h1> this is why people visiting the web page will simply see the phrase "hello world!" nicely written at the top of the page, rather than a weirdly indented "hello" followed but an even more weirdly indented "world!" on the line below that.
...And 5 more matches
Using the Frame Timing API - Web APIs
a frame rate of 60 fps (frames per second) for a 60 hz refresh rate is a common tar
get for a good responsive user experience.
... function create_frame_observer() { if (window.performanceobserver === undefined) return; // register the performance observer var observe_frame = new performanceobserver(function(list) { // log the frame entries var perfentries = list.
getentriesbytype("frame"); for (var i=0; i < perfentries.length; i++) { console.log("obs #1: [" + i + "] = " + perfentries[i].name); } }); // only observe 'frame' events observe_frame.observe({entrytypes: ['frame']}); } function init () { create_frame_observer(); var obs = new performanceobserver(frame_observer_2); obs.observe({entrytypes: ['frame']}); } function frame_ob...
...server_2(list) { // log the frame entries var perfentries = list.
getentriesbytype("frame"); for (var i=0; i < perfentries.length; i++) { console.log("obs #2: [" + i + "] = " + perfentries[i].name); } } <body onload="init(event)"> when the browser adds a new "frame" entry to the performance timeline, both of the observer callbacks will be invoked.
...And 5 more matches
HTMLCanvasElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlcanvaselement" tar
get="_top"><rect x="321" y="65" width="170...
...And 5 more matches
HTMLInputElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlinputelement" tar
get="_top"><rect x="331" y="65" width="160"...
...And 5 more matches
Ajax navigation example - Web APIs
first_page.php: <?php $page_title = "first page"; $as_json = false; if (isset($_
get["view_as"]) && $_
get["view_as"] == "json") { $as_json = true; ob_start(); } else { ?> <!doctype html> <html> <head> <?php include "include/header.php"; echo "<title>" .
..."</title>"; ?> </head> <body> <?php include "include/before_content.php"; ?> <p>this paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> <div id="ajax-content"> <?php } ?> <p>this is the content of <strong>first_page.php</strong>.</p> <?php if ($as_json) { echo json_encode(array("page" => $page_title, "content" => ob_
get_clean())); } else { ?> </div> <p>this paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> <?php include "include/after_content.php"; echo "</body>\n</html>"; } ?> second_page.php: <?php $page_title = "second page"; $as_json = false; if (isset($_
get["view_as"]) && $_
get["view_as"] == "json") { $as_json = tru...
..."</title>"; ?> </head> <body> <?php include "include/before_content.php"; ?> <p>this paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p> <div id="ajax-content"> <?php } ?> <p>this is the content of <strong>second_page.php</strong>.</p> <?php if ($as_json) { echo json_encode(array("page" => $page_title, "content" => ob_
get_clean())); } else { ?> </div> <p>this paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p> <?php include "include/after_content.php"; echo "</body>\n</html>"; } ?> third_page.php: <?php $page_title = "third page"; $page_content = "<p>this is the content of <strong>third_page.php</strong>.
...And 5 more matches
Checking when a deadline is due - Web APIs
on browsers that support type="number", you
get a nice little up and down arrow number picker.
... on mobile platforms you tend to
get a numeric keypad for entering data, which is helpful.
... on others you just
get a standard text input, which is okay.
...And 5 more matches
IntersectionObserver.IntersectionObserver() - Web APIs
syntax var observer = new intersectionobserver(callback[, options]); parameters callback a function which is called when the percentage of the tar
get element is visible crosses a threshold.
...you can provide any combination of the following options: root an element or document object which is an ancestor of the intended tar
get, whose bounding rectangle will be considered the viewport.
... any part of the tar
get not visible in the visible area of the root is not considered visible.
...And 5 more matches
MediaStreamConstraints.audio - Web APIs
the mediastreamconstraints dictionary's audio property is used to indicate what kind of audio track, if any, should be included in the mediastream returned by a call to
getusermedia().
... true | false | mediatrackconstraints; value the value of the audio property can be specified as either of two types: boolean if a boolean value is specified, it simply indicates whether or not an audio track should be included in the returned stream; if it's true, an audio track is included; if no audio source is available or if permission is not given to use the audio source, the call to
getusermedia() will fail.
...see security in mediadevices.
getusermedia() for details and examples on how to configure this.
...And 5 more matches
Page Visibility API - Web APIs
bud
get-based background timeout throttling is now available in modern browsers (firefox 58+, chrome 57+), placing an additional limit on background timer cpu usage.
... this operates in a similar way across modern browsers, with the details being as follows: in firefox, windows in background tabs each have their own time bud
get in milliseconds — a max and a min value of +50 ms and -150 ms, respectively.
... chrome is very similar except that the bud
get is specified in seconds.
...And 5 more matches
RTCIceTransport - Web APIs
properties the rtcicetransport interface inherits properties from its parent, eventtar
get.
... methods also includes methods from eventtar
get, the parent interface.
...
getlocalcandidates() returns an array of rtcicecandidate objects, each describing one of the ice candidates that have been gathered so far for the local device.
...And 5 more matches
RTCRemoteOutboundRtpStreamStats.localId - Web APIs
to
gether, these two objects provide statistics about the inbound and outbound sides of the same synchronization source (ssrc).
... networkteststart() this function simply calls the rtcpeerconnection method
getstats() to request an rtcstatsreport and store it in the variable startreport.
... let startreport; async function networkteststart(pc) { if (pc) { startreport = await pc.
getstats(); } } given an rtcpeerconnection, pc, this calls its
getstats() method to obtain a statistics report object, which it stores in startreport for use once the end-of-test data has been collected by networkteststop().
...And 5 more matches
SVGAnimationElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" tar
get="_top"><rect x="291" y="65" width="190...
...And 5 more matches
SubtleCrypto.verify() - Web APIs
*/ function
getmessageencoding() { const messagebox = document.queryselector(".rsassa-pkcs1 #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } /* fetch the encoded message-to-sign and verify it against the stored signature.
...*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".rsassa-pkcs1 .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded =
getmessageencoding(); let result = await window.crypto.subtle.verify( "rsassa-pkcs1-v1_5", publickey, signature, encoded ); signaturevalue.classlist.add(result ?
...*/ function
getmessageencoding() { const messagebox = document.queryselector(".rsa-pss #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } /* fetch the encoded message-to-sign and verify it against the stored signature.
...And 5 more matches
Using Touch Events - Web APIs
a touch point's properties include a unique identifier, the touch point's tar
get element as well as the x and y coordinates of the touch point's position relative to the viewport, page, and screen.
... tar
gettouches - a list of the touch points on the tar
get dom element.
... to
gether, these interfaces define a relatively low-level set of features, yet they support many kinds of touch-based interaction, including the familiar multi-touch gestures such as multi-finger swipe, rotation, pinch and zoom.
...And 5 more matches
Touch events - Web APIs
function startup() { var el = document.
getelementbyid("canvas"); el.addeventlistener("touchstart", handlestart, false); el.addeventlistener("touchend", handleend, false); el.addeventlistener("touchcancel", handlecancel, false); el.addeventlistener("touchmove", handlemove, false); } document.addeventlistener("domcontentloaded", startup); this simply sets up all the event listeners for our <canvas> element so we can handle the tou...
... function handlestart(evt) { evt.preventdefault(); console.log("touchstart."); var el = document.
getelementbyid("canvas"); var ctx = el.
getcontext("2d"); var touches = evt.changedtouches; for (var i = 0; i < touches.length; i++) { console.log("touchstart:" + i + "..."); ongoingtouches.push(copytouch(touches[i])); var color = colorfortouch(touches[i]); ctx.beginpath(); ctx.arc(touches[i].pagex, touches[i].pagey, 4, 0, 2 * math.pi, false); // a circle at the start ctx.fillstyle = color; ctx.fill(); c...
...then we
get the context and pull the list of changed touch points out of the event's touchevent.changedtouches property.
...And 5 more matches
WebGL2RenderingContext.texSubImage3D() - Web APIs
syntax void gl.texsubimage3d(tar
get, level, xoffset, yoffset, zoffset, width, height, depth, format, type, arraybufferview?
... srcdata, optional srcoffset); void gl.texsubimage3d(tar
get, level, xoffset, yoffset, zoffset, width, height, depth, format, type, imagebitmap?
... pixels); void gl.texsubimage3d(tar
get, level, xoffset, yoffset, zoffset, width, height, depth, format, type, imagedata?
...And 5 more matches
Matrix math for the web - Web APIs
2r1 = matrix[ 6], c3r1 = matrix[ 7]; let c0r2 = matrix[ 8], c1r2 = matrix[ 9], c2r2 = matrix[10], c3r2 = matrix[11]; let c0r3 = matrix[12], c1r3 = matrix[13], c2r3 = matrix[14], c3r3 = matrix[15]; // now set some simple names for the point let x = point[0]; let y = point[1]; let z = point[2]; let w = point[3]; // multiply the point against each part of the 1st column, then add to
gether let resultx = (x * c0r0) + (y * c0r1) + (z * c0r2) + (w * c0r3); // multiply the point against each part of the 2nd column, then add to
gether let resulty = (x * c1r0) + (y * c1r1) + (z * c1r2) + (w * c1r3); // multiply the point against each part of the 3rd column, then add to
gether let resultz = (x * c2r0) + (y * c2r1) + (z * c2r2) + (w * c2r3); // multiply the point against ea...
...ch part of the 4th column, then add to
gether let resultw = (x * c3r0) + (y * c3r1) + (z * c3r2) + (w * c3r3); return [resultx, resulty, resultz, resultw]; } now using the function above we can multiply a point by the matrix.
... multiplying two matrices in addition to multiplying a matrix and a point to
gether, you can also multiply two matrices to
gether.
...And 5 more matches
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
the senders for a given connection can be obtained by calling rtcpeerconnection.
getsenders().
...a connection's receivers can be obtained by calling rtcpeerconnection.
getreceivers().
...these are returned by the rtcpeerconnection.
gettransceivers() method, and each mid and transceiver share a one-to-one relationship, with the mid being unique for each rtcpeerconnection.
...And 5 more matches
Using the Web Speech API - Web APIs
it has a
getter so it can be accessed like an array — so the first [0] returns the speechrecognitionresult at position 0.
...these also have
getters so they can be accessed like arrays — the second [0] therefore returns the speechrecognitionalternative at position 0.
... we then return its transcript property to
get a string containing the individual recognised result as a string, set the background color to that color, and report the color recognised as a diagnostic message in the ui.
...And 5 more matches
Using CSS animations - CSS: Cascading Style Sheets
so for example, fadeinout
gets a duration of 2.5s and moveleft300px
gets a duration of 5s.
... we’ve now got to the end of the available duration values, so we start from the beginning again — bounce therefore
gets a duration of 2.5s.
... animation-name: fadeinout, moveleft300px, bounce; animation-duration: 2.5s, 5s; animation-iteration-count: 2, 1; using animation events you can
get additional control over animations — as well as useful information about them — by making use of animation events.
...And 5 more matches
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
a first look our three properties control the following aspects of a flex item's flexibility: flex-grow: how much of the positive free space does this item
get?
...it
gets as big as it possibly can be, taking no soft-wrapping opportunities.
...this is a newer keyword and has less browser support, however you can always
get the same effect by using auto as the flex-basis and ensuring that your item does not have a width set, in order that it will be auto-sized.
...And 5 more matches
Evolution of HTTP - HTTP
http/0.9 is extremely simple: requests consist of a single line and start with the only possible method
get followed by the path to the resource (not the url as both the protocol, server, and port are unnecessary once connected to the server).
...
get /mypage.html the response is extremely simple too: it only consisted of the file itself.
... http/1.0 – building extensibility http/0.9 was very limited and both browsers and servers quickly extended it to be more versatile: versioning information is now sent within each request (http/1.0 is appended to the
get line) a status code line is also sent at the beginning of the response, allowing the browser itself to understand the success or failure of the request and to adapt its behavior in consequence (like in updating or using its local cache in a specific way) the notion of http headers has been introduced, both for the requests and the responses, allowing metadata to be transmitted and making the pr...
...And 5 more matches
Feature-Policy - HTTP
when this policy is disabled, the promise returned by navigator.
getbattery() will reject with a notallowederror domexception.
...when this policy is disabled, the promise returned by
getusermedia() will reject with a notallowederror domexception.
... display-capture controls whether or not the current document is permitted to use the
getdisplaymedia() method to capture screen contents.
...And 5 more matches
HTTP request methods - HTTP
get the
get method requests a representation of the specified resource.
... requests using
get should only retrieve data.
... head the head method asks for a response identical to that of a
get request, but without the response body.
...And 5 more matches
Regular expressions - JavaScript
use the constructor function when you know the regular expression pattern will be changing, or you don't know the pattern and are
getting it from another source, such as user input.
...for example, the pattern /abc/ matches character combinations in strings only when the exact sequence "abc" occurs (all characters to
gether and in that order).
...these flags can be used separately or to
gether in any order, and are included as part of the regular expression.
...And 5 more matches
Object - JavaScript
static methods object.assign() copies the values of all enumerable own properties from one or more source objects to a tar
get object.
... object.
getownpropertydescriptor() returns a property descriptor for a named property on an object.
... object.
getownpropertydescriptors() returns an object containing all own property descriptors for an object.
...And 5 more matches
Promise.prototype.then() - JavaScript
if a handler function: returns a value, the promise returned by then
gets resolved with the returned value as its value.
... doesn't return anything, the promise returned by then
gets resolved with an undefined value.
... throws an error, the promise returned by then
gets rejected with the thrown error as its value.
...And 5 more matches
handler.defineProperty() - JavaScript
syntax const p = new proxy(tar
get, { defineproperty: function(tar
get, property, descriptor) { } }); parameters the following parameters are passed to the defineproperty() method.
... tar
get the tar
get object.
... interceptions this trap can intercept these operations: object.defineproperty() reflect.defineproperty() invariants if the following invariants are violated, the proxy will throw a typeerror: a property cannot be added, if the tar
get object is not extensible.
...And 5 more matches
handler.ownKeys() - JavaScript
syntax const p = new proxy(tar
get, { ownkeys: function(tar
get) { } }); parameters the following parameter is passed to the ownkeys() method.
... tar
get the tar
get object.
... interceptions this trap can intercept these operations: object.
getownpropertynames() object.
getownpropertysymbols() object.keys() reflect.ownkeys() invariants if the following invariants are violated, the proxy will throw a typeerror: the result of ownkeys() must be an array.
...And 5 more matches
Authoring MathML - MathML
for example the following function verifies the mathml support by testing the mspace element (you may replace mspace with mpadded): function hasmathmlsupport() { var div = document.createelement("div"), box; div.innerhtml = "<math><mspace height='23px' width='77px'/></math>"; document.body.appendchild(div); box = div.firstchild.firstchild.
getboundingclientrect(); document.body.removechild(div); return math.abs(box.height - 23) <= 1 && math.abs(box.width - 77) <= 1; } alternatively, the following ua string sniffing will allow to detect the rendering engines with native mathml support (gecko and webkit).
... note that ua string sniffing is not the most reliable method and might break from version to version: var ua = navigator.useragent; var isgecko = ua.indexof("gecko") > -1 && ua.indexof("khtml") === -1 && ua.indexof('trident') === -1; var iswebkit = ua.indexof('applewebkit') > -1 && ua.indexof('chrome') === -1; mathematical fonts in order to
get a good layout or to allow different style, it's important to have mathematical fonts available.
...see this github repository to
get woff fonts and sample css stylesheets to use on your web site and check its test page.
...And 5 more matches
Navigation and resource timings - Web Performance
you can also create marks: performance.
getentriesbytype('navigation').foreach((navigation) => { console.dir(navigation); }); performance.
getentriesbytype('resource').foreach((resource) => { console.dir(resource); }); performance.
getentriesbytype('mark').foreach((mark) => { console.dir(mark); }); performance.
getentriesbytype("measure").foreach((measure) => { console.dir(measure); }); performance.
getentriesbytype('paint').foreac...
...h((paint) => { console.dir(paint); }); performance.
getentriesbytype('frame').foreach((frame) => { console.dir(frame); }); in supporting browsers, you can use performance.
getentriesbytype('paint') to query the measure for first-paint and first-contentful-paint.
... we use performance.
getentriesbytype('navigation') and performance.
getentriesbytype('resource') to query the navigation and resource timings respectively.
...And 5 more matches
Mobile first - Progressive web apps (PWAs)
this means that mobiles (often the tar
get devices with the least available memory, bandwidth or processing power available) can be given an experience suitable for them as quickly as possible, and as free as possible of extraneous information.
...the concept is the same regardless of the tar
get device — you want to provide a mechanism for users to search for things and
get to different views/pages of the application — but because mobile screens are so much smaller, a reasonable desktop navigation can spoil the experience by filling up most of the initial view of the app, covering up the content.
... there several ways to solve the problem of navigation
getting in the way on mobile, a few of which i'll discuss here.
...And 5 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
you don't
get caught in the situation of having to bring out more new site versions as more new browsers and platforms come out, and adjust code as feature support in existing browsers changes.
... we've written a simple-but-fun prototype for an application called snapshot, which takes a video stream from your webcam (using
getusermedia()) then allows you to capture stills from that video stream (using html5 <canvas>), and save them to a gallery.
...note that
getusermedia() is an experimental technology, which currently only works in google chrome and firefox desktop.
...And 5 more matches
Using the WebAssembly JavaScript API - WebAssembly
as we’ve said elsewhere, webassembly doesn’t aim to replace javascript; the two instead can work to
gether, drawing on each other’s strengths.
... webassembly memory exposes its bytes by simply providing a buffer
getter/setter that returns an arraybuffer.
... note: since an arraybuffer’s bytelength is immutable, after a successful memory.prototype.grow() operation the buffer
getter will return a new arraybuffer object (with the new bytelength) and any previous arraybuffer objects become “detached”, or disconnected from the underlying memory they previously pointed to.
...And 5 more matches
Content Scripts - Archive of obsolete content
but the main add-on code doesn't
get direct access to web content.
... instead, sdk add-ons need to factor the code that
gets access to web content into separate scripts that are called content scripts.
...so you can rewrite the above main.js code like this: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscriptfile: "./content-script.js" }); unless your content script is extremely simple and consists only of a static string, don't use contentscript: if you do, you may have problems
getting your add-on approved on amo.
...And 4 more matches
request - Archive of obsolete content
for
get and head requests, the query string (content) will be appended to the url.
...to force the response to be interpreted as latin-1, use overridemimetype: var request = require("sdk/request").request; var quijote = request({ url: "http://www.latin1files.org/quijote.txt", overridemimetype: "text/plain; charset=latin1", oncomplete: function (response) { console.log(response.text); } }); quijote.
get(); anonymous boolean if true, the request will be sent without cookies or authentication headers.
... request the request object is used to make
get, head, post, put, or delete network requests.
...And 4 more matches
selection - Archive of obsolete content
get and set text and html selections in the current web page.
...nt discontiguous selections as html: var selection = require("sdk/selection"); if (!selection.iscontiguous) { for (var subselection in selection) { console.log(subselection.html); } } surround html selections with delimiters: var selection = require("sdk/selection"); selection.on('select', function () { selection.html = "\\\" + selection.html + "///"; }); globals properties text
gets or sets the current selection as plain text.
...
getting the selection when there is no current selection returns null.
...And 4 more matches
system - Archive of obsolete content
usage querying your environment using the system module you can access environment variables (such as path), find out which operating system your add-on is running on and
get information about the host application (for example, firefox or fennec), such as its version.
... pathfor(id) firefox enables you to
get the path to certain "special" directories, such as the desktop or the profile directory.
... for the full list of "special" directories and their ids, see "
getting_files in special directories".
...And 4 more matches
/loader - Archive of obsolete content
this feature may be used in a few different ways: to expose an api that doesn't have a js file with an implementation or is written in an incompatible format such as jsm: let { loader } = require('toolkit/loader'); let loader = loader({ modules: { // require('net/utils') will
get netutil.jsm 'net/utils': cu.import('resource:///modules/netutil.jsm', {}) } }); each loader instance comes with a set of built-in pseudo modules that are described in detail in the built-in modules section.
...these modules don't share scope and
get their own set of built-ins (object, array, string ...).
... all to
gether all of these options can be combined to configure the loader for a specific use case.
...And 4 more matches
preferences/service - Archive of obsolete content
this enables add-ons to
get and set system-wide settings.
... example: var name = "extensions.checkcompatibility.nightly"; require("sdk/preferences/service").set(name, false);
get(name, defaultvalue)
gets the application preference name.
... example: var name = "extensions.checkcompatibility.nightly"; var nightlycompatchk = require("sdk/preferences/service").
get(name); has(name) parameters name : string preference name.
...And 4 more matches
ui/button/toggle - Archive of obsolete content
when a button is checked it
gets a "pressed" look in the user interface (note that the "pressed" look currently does not work in mac os x).
...this will cause the button to generate the click event: var { togglebutton } = require('sdk/ui/button/toggle'); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" }, onclick: function(state) { console.log("you clicked '" + state.label + "'"); } }); button.click(); state()
get or set the button's state for a specific window or tab.
...this is an alternative way to set or
get the global state.
...And 4 more matches
Localization - Archive of obsolete content
now whenever your javascript or html asks the localization system for the translation of the hello_id identifier, it will
get the correct translation for the current locale.
...ributes are supported: accesskey alt label title placeholder further the localization of the aria attributes aria-label, aria-valuetext and aria-moz-hint are supported with the same aliases as on firefox os: arialabel ariavaluetext ariamozhint using localized strings in javascript to reference localized strings from your main add-on code, you do this: var _ = require("sdk/l10n").
get; console.log(_("hello_id")); assigning to "_" in particular is not required, but is a convention from the
gettext tools and will make it possible to work with existing tools that expect "_" to indicate localizable strings.
... import the l10n module, and assign its
get function to "_" (underscore).
...And 4 more matches
Forms related code snippets - Archive of obsolete content
|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| \*/ (function () { function datepicker (otar
get) { const otable = document.createelement("table"), ohrow = document.createelement("tr"), othead = document.createelement("thead"), ocapt = document.createelement("caption"), odecryear = document.createelement("span"), oincryear = document.createelement("span"), odecrmonth = document.createelement("span"), oincrmonth = document.createelement("span"); var n...
...id = ainstances.length, oth; this.tar
get = otar
get; this.display = document.createelement("span"); this.current = new date(); this.container = otable; this.display.classname = sprefs + "-current-month"; this.id = nid; otable.classname = sprefs + "-calendar"; otable.id = sprefs + "-cal-" + nid; odecryear.classname = sprefs + "-decrease-year"; odecrmonth.classname = sprefs + "-decrease-month"; oincrmonth.classname = sprefs + "-increase-month"; oincryear.classname = sprefs + "-increase-year"; odecryear.innerhtml = "\u00ab"; /* « */ odecrmonth.innerhtml = "\u003c"; /* < */ oincrmonth.innerhtml = "\u003e"; /* > */ oincryear.innerhtml = "\u00bb"; /* » */ odecryear.id = sprefs + "-decr-year-" + nid; odecrmonth...
... oth.innerhtml = sdays[nthid]; ohrow.appendchild(oth); } othead.appendchild(ohrow); ocapt.appendchild(odecryear); ocapt.appendchild(odecrmonth); ocapt.appendchild(oincryear); ocapt.appendchild(oincrmonth); ocapt.appendchild(this.display); this.container.appendchild(ocapt); this.container.appendchild(othead); this.current.setdate(1); this.writedays(); otar
get.onclick = function () { if (otable.parentnode) { otable.parentnode.removechild(otable); return; } otable.style.zindex = nzindex++; otable.style.position = "absolute"; otable.style.left = otar
get.offsetleft + "px"; otable.style.top = (otar
get.offsettop + otar
get.offsetheight) + "px"; otar
get.parentnode.insertbefore(otable, otar
get); }; ...
...And 4 more matches
Connecting to Remote Content - Archive of obsolete content
let url = "http://www.example.com/"; let request = components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"] .createinstance(components.interfaces.nsixmlhttprequest); request.onload = function(aevent) { window.alert("response text: " + aevent.tar
get.responsetext); }; request.onerror = function(aevent) { window.alert("error status: " + aevent.tar
get.status); }; request.open("
get", url, true); request.send(null); in this example we demonstrate how to make a xmlhttprequest call in asynchronous mode.
...in both cases aevent.tar
get is an nsixmlhttprequest.
...the http request method can be "
get", "post" or "put".
...And 4 more matches
Custom XUL Elements with XBL - Archive of obsolete content
on the other hand, if your bindings are small and have a strong relationship with each other, it makes sense to keep them to
gether.
... <content> <xul:hbox> <xul:image class="xulshoolhello-person-image" xbl:inherits="src=image" /> <xul:vbox flex="1"> <xul:label xbl:inherits="value=name" /> <xul:description xbl:inherits="value=greeting" /> </xul:vbox> <xul:vbox> <xul:button label="&xulshoolhello.remove.label;" accesskey="&xulshoolhello.remove.accesskey;" oncommand="document.
getbindingparent(this).remove(event);" /> </xul:vbox> </xul:hbox> </content> our element is very simple, displaying an image, a couple of text lines and a button.
... the oncommand attribute of the button has some code you've probably never seen before: document.
getbindingparent(this).
...And 4 more matches
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
event listeners can be defined on the given nodes by passing functions rather than strings to on* attributes: var href = "http://www.google.com/"; var text = "google"; var nodes = {}; document.documentelement.appendchild( jsontodom(["xul:hbox", {}, ["div", {}, ["a", { href: href, key: "link", onclick: function (event) { alert(event.tar
get.href); } }, text], ["span", { class: "stuff" }, "stuff"]]], document, nodes)); alert(nodes.link); function addentrytopopup(menupopup, doc, chromewindow) { var newitem = doc.createelement("menuitem"); newitem.setattribute("value", "testvalue"); newitem.setattribute("label", "another popup menu item"); menupopup.appendchild(newi...
... type: "menu", label: "test button label", tooltiptext: "test button tooltip", removable: true, key: "mytestbutton123" }, [ "menupopup", { onpopupshowing: function(event) { addentrytopopup(this, document, window); } }, null ] ]; var capturednodes = {}; var toolbox = doc.
getelementbyid("navigator-toolbox"); var palette = toolbox.palette; var domfragment = jsontodom(jsontemplatebtn, document, capturednodes); palette.appendchild(domfragment); alert("capturednodes contains any created nodes that have optionally been captured (for later convenient javascript access) by giving them a 'key' attribute; for example: " + capturednodes.mytestbutton123); another example thi...
... var href = "http://www.google.com/"; var text = "google"; $("body").append( $("<div>", { class: "foo" }) .append($("<a>", { href: href, text: text }) .click(function (event) { alert(event.tar
get.href) })) .append($("<span>").text("foo"))); innerhtml with html escaping this method is a last resort which should be used only as a temporary measure in established code bases.
...And 4 more matches
Local Storage - Archive of obsolete content
getlocaldirectory : function() { let directoryservice = cc["@mozilla.org/file/directory_service;1"].
...
getservice(ci.nsiproperties); // this is a reference to the profile dir (profd) now.
... let localdir = directoryservice.
get("profd", ci.nsifile); localdir.append("xulschool"); if (!localdir.exists() || !localdir.isdirectory()) { // read and write permissions to owner and group, read-only for others.
...And 4 more matches
User Notifications and Alerts - Archive of obsolete content
or they will just
get rid of your add-on.
... notification boxes are very easy to create, and are very customizable: let nb = gbrowser.
getnotificationbox(); let acceptbutton = new object(); let declinebutton = new object(); let message = this._bundle.
getstring("xulschoolhello.friendmessage.label"); let that = this; acceptbutton.label = this._bundle.
getstring("xulschoolhello.acceptbutton.label"); acceptbutton.accesskey = this._bundle.
getstring("xulschoolhello.acceptbutton.accesskey"); acceptbutton.popup = null; acceptbutton.ca...
...in this case we don't pass any arguments to
getnotificationbox so that we
get the notification box that corresponds to the tab currently on display.
...And 4 more matches
Session store API - Archive of obsolete content
in order to properly restore your extension's state when a tab is restored, it needs to use the session store api's settabvalue() method to save any data it will need in order to restore its state, and then call
gettabvalue() to retrieve the previous setting when the tab is restored.
...if your extension wants to be able to restore data when tabs are restored, you can install a listener like this: function myextensionhandlerestore(aevent) { var tab = event.originaltar
get; /* the tab being restored */ var uri = tab.linkedbrowser.contentdocument.location; /* the tab's uri */ components.classes["@mozilla.org/consoleservice;1"] .
getservice(components.interfaces.nsiconsoleservice) .logstringmessage("restoring tab: " + uri); }; document.addeventlistener("sstabrestoring", myextensionhandlerestore, false); simply replace the contents of the function myexten...
...you can determine which tab is being restored by looking at the event's originaltar
get field.
...And 4 more matches
Signing an XPI - Archive of obsolete content
get network security services 1.
...in my case it's c:\apps\nss-3.11.4\
get netscape portable runtime 1.
... you will be prompted for the nss certificate database password - don't for
get it!
...And 4 more matches
Using microformats - Archive of obsolete content
get() returns an array of microformat objects corresponding to the microformats found that match specified criteria.
... var microformatsarray = microformats.
get(name, rootelement, options, tar
getarray); parameters name the name of the microformat to find.
... tar
getarray optional.
...And 4 more matches
Mozilla Application Framework in Detail - Archive of obsolete content
javascript, considered by many to be the best scripting language ever designed is ideal for specifying the behavior of your interface wid
gets.
...what this means to you as the developer is this: you can take advantage of skills you already have with xml or web technologies to design and implement anything from a simple text editor to a comprehensive ide - complete with all of the interface wid
gets that you would find in virtually any major application framework.
... unlike many other application frameworks, you are not limited to the wid
get set we provide, nor limited to the "look and feel" of the native os.
...And 4 more matches
Reading textual data - Archive of obsolete content
using the system character encoding may work (xxx insert text how to
get it), or again the default character encoding from preferences.
...
getservice(components.interfaces.nsiutf8converterservice); var data = utf8converter.converturispectoutf8 (str, "utf-8"); gecko 1.8 and newer reading strings starting with gecko 1.8 (seamonkey 1.0, firefox 1.5), you can use nsiconverterinputstream to read strings from a stream (nsiinputstream).
...(components.interfaces.nsiconverterinputstream); is.init(fis, charset, 1024, replacementchar); now you can read string from is: var str = {}; var numchars = is.readstring(4096, str); if (numchars != 0 /* eof */) var read_string = str.value; to read the entire stream and do something with the data: var str = {}; while (is.readstring(4096, str) != 0) { processdata(str.value); } don't for
get to close the stream when you're done with it (is.close()).
...And 4 more matches
Supporting private browsing mode - Archive of obsolete content
var pbs = components.classes["@mozilla.org/privatebrowsing;1"] .
getservice(components.interfaces.nsiprivatebrowsingservice); var inprivatebrowsingmode = pbs.privatebrowsingenabled; if (!inprivatebrowsingmode) { /* save private information */ } in the above example, we only save the user's private information if not in private browsing mode.
...let docroot = document.documentelement; if (docroot.hasattribute("privatebrowsingmode")) { // private browsing mode is enabled } if (docroot.
getattribute("privatebrowsingmode") == "temporary") { // private browsing mode is temporary } if (docroot.
getattribute("privatebrowsingmode") == "permanent") { // private browsing mode is permanent for this session } turning private browsing on and off extensions can turn private browsing mode on and off by manipulating the value of the privatebrowsingenabled attribute.
... var pbs = components.classes["@mozilla.org/privatebrowsing;1"] .
getservice(components.interfaces.nsiprivatebrowsingservice); var oldprivatemode = pbs.privatebrowsingmode; pbs.privatebrowsingenabled = true; /* this is all private */ pbs.privatebrowsingenabled = oldprivatemode; in this example, we save the current state of the private browsing mode setting in the oldprivatemode variable, then turn on private browsing by setting its value to true.
...And 4 more matches
DOM Interfaces - Archive of obsolete content
idl definition interface nsidomdocumentxbl { nodelist
getanonymousnodes(in element elt); element
getanonymouselementbyattribute(in element elt, in domstring attrname, in domstring attrvalue); element
getbindingparent(in node node); void loadbindingdocument(in domstring documenturl); }; methods
getanonymousnodes the
getanonymousnodes method retrieves the anonymous children of the specified element.
... return value nodelist - the return value of
getanonymousnodes is a nodelist that represents the children of an element after insertion points from its own binding have been applied.
...
getanonymouselementbyattribute the
getanonymouselementbyattribute methods retrieves an anonymous descendant with a specified attribute value.
...And 4 more matches
Sorting and filtering a custom tree view - Archive of obsolete content
k="sort(this)" class="sortdirectionindicator"/> <splitter class="tree-splitter"/> <treecol id="weapon" label="weapon" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator"/> </treecols> <treechildren id="tree-children"/> </tree> </window> sort.js var table = null; var data = null; var tree; var filtertext = ""; function init() { tree = document.
getelementbyid("tree"); loadtable(); } //this function is called every time the tree is sorted, filtered, or reloaded function loadtable() { //remember scroll position.
... this is useful if this is an editable table //to prevent the user from losing the row they edited var topvisiblerow = null; if (table) { topvisiblerow =
gettopvisiblerow(); } if (data == null) { //put object loading code here.
...element) { //we'll match on every property for (var i in element) { if (prepareforcomparison(element[i]).indexof(filtertext) != -1) { table.push(element); break; } } }); } sort(); //restore scroll position if (topvisiblerow) { settopvisiblerow(topvisiblerow); } } //generic custom tree view stuff function treeview(table) { this.rowcount = table.length; this.
getcelltext = function(row, col) { return table[row][col.id]; }; this.
getcellvalue = function(row, col) { return table[row][col.id]; }; this.settree = function(treebox) { this.treebox = treebox; }; this.iseditable = function(row, col) { return col.editable; }; this.iscontainer = function(row){ return false; }; this.isseparator = function(row){ return false; }; this.issorted = functi...
...And 4 more matches
Adding Event Handlers - Archive of obsolete content
in the tar
get phase, the event is sent to the tar
get xul element.
... example 2 : source view <vbox oncommand="alert(event.tar
get.tagname);"> <button label="ok"/> <checkbox label="show images"/> </vbox> in this example, the command event will bubble up from the button or checkbox to the vbox, where it is handled.
...this is used to
get specific information about the event.
...And 4 more matches
Focus and Selection - Archive of obsolete content
example 2 : source view <script> function displayfocus(){ var elem=document.
getelementbyid('sbar'); elem.setattribute('value','enter your phone number.'); } </script> <textbox id="tbox1"/> <textbox id="tbox2" onfocus="displayfocus();"/> <description id="sbar" value=""/> the focus event, when it occurs, will call the displayfocus function.
...
getting the currently focused element the currently focused element is held by an object called a command dispatcher, of which there is only one for the window.
...from there, you can
get the focused element with the dispatcher's focusedelement property.
...And 4 more matches
Templates - Archive of obsolete content
mozilla provides a bookmarks datasource so it can be used to
get the data.
... this example will only
get the top-level bookmarks (or bookmark folders) as we're going to create buttons.
...you'll notice that the buttons in the example
get updated instantly.
...And 4 more matches
Trees - Archive of obsolete content
the tree is unique in that the body of the tree consists only of a single wid
get which draws all of the data in the tree.
...when it comes time to display a cell, the tree wid
get will call out to this tree view to determine what to display, which in turn will be drawn by the tree.
...for instance, the
getcelltext() function will be called to
get the label for a particular cell in the tree.
...And 4 more matches
Using nsIXULAppInfo - Archive of obsolete content
getting nsixulappinfo to
get a component implementing nsixulappinfo use this code: var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .
getservice(components.interfaces.nsixulappinfo); (for explanation see this creating xpcom article.)
getting application information after you obtained the app info component, you can read its properties to
get the application...
... const firefox_id = "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}"; const thunderbird_id = "{3550f703-e582-4d05-9a08-453d09bdfdc6}"; const seamonkey_id = "{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}"; var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .
getservice(components.interfaces.nsixulappinfo); if(appinfo.id == firefox_id) { // running under firefox } else if(appinfo.id == thunderbird_id) { // running under thunderbird } else if(appinfo.id == seamonkey_id) { // running under seamonkey } else { // another app } note: you could also use nsixulappinfo.name, which is a human-readable name for the application, such as "firefox", "thunder...
... example 1: checking firefox version // assuming we're running under firefox var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .
getservice(components.interfaces.nsixulappinfo); var versionchecker = components.classes["@mozilla.org/xpcom/version-comparator;1"] .
getservice(components.interfaces.nsiversioncomparator); if(versionchecker.compare(appinfo.version, "1.5") >= 0) { // running under firefox 1.5 or later } see nsiversioncomparator for details example 2: dealing with nightlies var appi...
...And 4 more matches
description - Archive of obsolete content
</description> this is a long section of text that will not word wrap <description value="this is a long section of text that will not word wrap"> </description> this is a long section of dynamically controlled text that will word wrap <description id="desc" style="width: 300px"></description> document.
getelementbyid('desc').textcontent = "this is a long section of dynamic message text that will word wrap"; attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute.
...for those elements, setattribute("value", myvalue) and
getattribute("value") do not access or affect the contents displayed to the user.
... crop type: string
gets and sets the value of the crop attribute.
...And 4 more matches
Debugging a XULRunner Application - Archive of obsolete content
the easiest way to debug a xulrunner application is to
get the system to tell you what's wrong!
... /* debugging prefs */ pref("browser.dom.window.dump.enabled", true); pref("javascript.options.showinconsole", true); pref("javascript.options.strict", true); pref("nglayout.debug.disable_xul_cache", true); pref("nglayout.debug.disable_xul_fastload", true); don't for
get to change these preferences back to their defaults when you've finished debugging; leaving them as-is can significantly harm performance and usability.
... jsdump(str) (function defined below) will output str as a "message" with a speech bubble icon next to it: function jsdump(str) { components.classes['@mozilla.org/consoleservice;1'] .
getservice(components.interfaces.nsiconsoleservice) .logstringmessage(str); } for more information about the error console see the error console and browser console article.
...And 4 more matches
NPN NewStream - Archive of obsolete content
syntax #include <npapi.h> nperror npn_newstream(npp instance, npmimetype type, const char* tar
get, npstream** stream); parameters the function has the following parameters: instance pointer to current plug-in instance.
... tar
get name of the tar
get window or frame, or one of several special tar
get names.
... for values, see npn_
geturl.
...And 4 more matches
Writing a plugin for Mac OS X - Archive of obsolete content
getting started if you check out the mozilla source code in mac os x, you can simply open basicplugin.xcodeproj in xcode, click build, and you're done.
... notes and tips this section provides some additional information that may be helpful if you're trying to
get a plugin building on your own.
... the plugin also communicates its bundle type in that file, under the key cfbundlepacka
getype; the type is 'brpl'.
...And 4 more matches
XEmbed Extension for Mozilla Plugins - Archive of obsolete content
in your plugin instance npp_
getvalue call you need to make sure that you support the new nppvpluginneedsxembed value.
... hosting using gtk2.x included below are a couple of code snippits that should help you
get started as well as some hints on building a successful plugin.
...since the gtkplug is just a container, you can add your own wid
gets at your leisure with the packing you prefer.
...And 4 more matches
Browser Feature Detection - Archive of obsolete content
document.createcomment() true true true document.createcdatasection() true false true document.createprocessinginstruction() true false true document.createattribute() true true true document.createentityreference()obsolete since gecko 7 (method present but only returns null: bug 9850) false false document.
getelementsbytagname() true true true dom core level 2 support for properties/methods in document name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 document.doctype true true true document.implementation true true true document.documentelement true true true document.createelement() true true true ...
...tetextnode() true true true document.createcomment() true true true document.createcdatasection() true false true document.createprocessinginstruction() true false true document.createattribute() true true true document.createentityreference()obsolete since gecko 7 true false false document.
getelementsbytagname() true true true document.importnode() true false true document.createelementns() true false true document.createattributens() true false true document.
getelementsbytagnamens() true false true document.
getelementbyid() true true true dom level 1 html support for properties...
... opera 8.54 - 9.01 document.documentelement true true true document.createelement() true true true document.createdocumentfragment() true true true document.createtextnode() true true true document.createcomment() true true true document.createattribute() true true true document.
getelementsbytagname() true true true document.title true true true document.referrer true true true document.domain true true true document.url true true true document.body true true true document.images true true true document.applets true true true documen...
...And 4 more matches
JSObject - Archive of obsolete content
getmember retrieves the value of a property of a javascript object.
...
getslot retrieves the value of an array element of a javascript object.
... the netscape.javascript.jsobject class has the following static method:
getwindow
gets a jsobject for the window containing the given applet.
...And 4 more matches
Mozilla XForms Specials - Archive of obsolete content
instead you will have to use the following normal classes instead: xf-value xf-repeat-item xf-repeat-index for example, to tar
get the value element of an input control use: @namespace xf url("http://www.w3.org/2002/xforms"); xf|input .xf-value { ...
...in the mozilla xforms extension we added a
getinstancedocuments() function to the model which returns all the model's instance documents.
...
getting to instance element from a data node in the xforms 1.0 specification there is no way to
get to the instance element from an instance data node.
...And 4 more matches
Obsolete: XPCOM-based scripting for NPAPI plugins - Archive of obsolete content
the old plugin api call npp_
getvalue is used to retrieve this information from the plugin.
...two new cases for the above mentioned new variables should be added to the plugin implementation of npp_
getvalue (see example 3).
... ns_imethod
getflags(pruint32 *aflags) {*aflags = nsiclassinfo::plugin_object | nsiclassinfo::dom_object; return ns_ok;} ns_imethod
getimplementationlanguage(pruint32 *aimplementationlanguage) {*aimplementationlanguage = nsiprogramminglanguage::cplusplus; return ns_ok;} // the rest of the methods can safely return error codes...
...And 4 more matches
Common causes of memory leaks in extensions - Extensions
for example, in xul overlay code: var contentwindows = []; function inbrowserxuloverlay(contentwindow) { // for
getting or failing to pop the content window thing again contentwindows.push(contentwindow); } this will keep the content window compartments alive until the browser window is closed.
... for example: var windows = []; function injavascriptcodemodule(window) { // for
getting or failing to pop the window again windows.push(window); } both of these cases can happen if you for
get to declare local variables with var or let, which means they end up belonging to the global scope.
...consider the following example code that could be part of your browser.xul overlay: gbrowser.addeventlistener("domcontentloaded", function(evt) { var contentdoc = evt.originaltar
get; var i = 0; // refresh the title once each second setinterval(function() { contentdoc.title = ++i; }, 1000); }, false); one would normally expect that the interval (or timer) would be destroyed as soon as the document unloads, in the same way that event listeners are automatically destroyed.
...And 4 more matches
Audio for Web games - Game development
although the situation is soon going to
get better with the adoption of the web audio api, the current most widely-supported method — using the vanilla <audio> element — leads to patchy results on mobile devices.
... let's add some javascript to make this work: var myaudio = document.
getelementbyid('myaudio'); var buttons = document.
getelementsbytagname('button'); var stoptime = 0; for (var i = 0; i < buttons.length; i++) { buttons[i].addeventlistener('click', function() { myaudio.currenttime = this.
getattribute("data-start"); stoptime = this.
getattribute("data-stop"); myaudio.play(); }, false); } myaudio.addeventlistener('timeupdate', function() { if (this.cu...
...music is an important part of the gaming experience and depending on the type of game you are making you may wish to invest significant effort into
getting it right.
...And 4 more matches
Accessible multimedia - Learn web development
before moving onto creating our button functionality, let's remove the native controls so they don't
get in the way of our custom controls.
...we can
get this to toggle between play and pause with a simple conditional function, like the following.
... as with most things in life, you tend to
get what you pay for; different services will vary in accuracy and time taken to produce the transcript.
...And 4 more matches
Fundamental CSS comprehension - Learn web development
starting point to
get this assessment started, you should: go and grab the html file for the exercise, and the associated image file, and save them in a new directory on your local computer.
... note: if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
... new rulesets you need to write: write a ruleset that tar
gets both the card header, and card footer, giving them both a computed total height of 50px (including a content height of 30px and padding of 10px on all sides.) but express it in ems.
...And 4 more matches
CSS values and units - Learn web development
you might
get confused between css data types and html elements too, as they both use angle brackets, but this is unlikely — they are used in very different contexts.
...change this value to 1.5em and you will see that the font size of all the elements increases, but only the last item will
get wider, as the width is relative to that font size.
... after following the instructions above, try playing with the values in other ways, to see what you
get.
...And 4 more matches
Styling links - Learn web development
this is because if the real links were included, clicking on them would break the examples (you'd end up with an error, or a page loaded in the embedded example that you couldn't
get back from.) # just links to the current page.
... now let's add some more information to
get this styled properly: body { width: 300px; margin: 0 auto; font-size: 1.2rem; font-family: sans-serif; } p { line-height: 1.4; } a { outline: none; text-decoration: none; padding: 2px 1px 0; } a:link { color: #265301; } a:visited { color: #437a16; } a:focus { border-bottom: 1px solid; background: #bae498; } a:hover { border-bottom: 1px solid; background: #cdfeaa...
...; } a:active { background: #265301; color: #cdfeaa; } we'll also provide some sample html to apply the css to: <p>there are several browsers available, such as <a href="#">mozilla firefox</a>, <a href="#">google chrome</a>, and <a href="#">microsoft edge</a>.</p> putting the two to
gether gives us this result: so what did we do here?
...And 4 more matches
Sending forms through JavaScript - Learn web development
the formdata object can be used to build form data for transmission, or to
get the data within a form element to manage how it's sent.
...it" value="send me!"> </form> but javascript takes over the form: window.addeventlistener( "load", function () { function senddata() { const xhr = new xmlhttprequest(); // bind the formdata object and the form element const fd = new formdata( form ); // define what happens on successful data submission xhr.addeventlistener( "load", function(event) { alert( event.tar
get.responsetext ); } ); // define what happens in case of error xhr.addeventlistener( "error", function( event ) { alert( 'oops!
... const form = document.
getelementbyid( "myform" ); // ...and take over its submit event.
...And 4 more matches
Your first form - Learn web development
a web form's html is made up of one or more form controls (sometimes called wid
gets), plus some additional elements to help structure the overall form — they are often referred to as html forms.
... the method attribute defines which http method to send the data with (usually
get or post).
... in terms of html code we need something like the following to implement these form wid
gets: <form action="/my-handling-form-page" method="post"> <ul> <li> <label for="name">name:</label> <input type="text" id="name" name="user_name"> </li> <li> <label for="mail">e-mail:</label> <input type="email" id="mail" name="user_email"> </li> <li> <label for="msg">message:</label> <textarea id="msg" name="user_message"></textarea> </li> </ul> </form> updat...
...And 4 more matches
Debugging HTML - Learn web development
prerequisites: html familiarity, as covered in, for example,
getting started with html, html text fundamentals, and creating hyperlinks.
...however, error messages can quickly
get more complicated and less easy to interpret as programs
get bigger, and even simple cases can look a little intimidating to someone who doesn't know anything about rust.
...browsers have built-in rules to state how to interpret incorrectly written markup, so you'll
get something running, even if it is not what you expected.
...And 4 more matches
Introducing asynchronous JavaScript - Learn web development
why is this difficult to
get to work using synchronous code?
...let's look at another example that loads a resource via the xmlhttprequest api (run it live, and see the source): function loadasset(url, type, callback) { let xhr = new xmlhttprequest(); xhr.open('
get', url); xhr.responsetype = type; xhr.onload = function() { callback(xhr.response); }; xhr.send(); } function displayimage(blob) { let objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); } loadasset('coffee.jpg', 'blob', displayimage); here we create a displayimage() function that simpl...
...in essence, it's the browser's way of saying "i promise to
get back to you with the answer as soon as i can," hence the name "promise." this concept can take practice to
get used to; it feels a little like schrödinger's cat in action.
...And 4 more matches
Introduction to web APIs - Learn web development
the facebook suite of apis enables you to use various parts of the facebook ecosystem to benefit your app, for example by providing app login using facebook login, accepting in-app payments, rolling out tar
getted ad campaigns, etc.
...erve to toggle between play and pause when the button is pressed and reset the display back to the beginning when the song has finished playing: // play/pause audio playbtn.addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } // if track is stopped, play it if (this.
getattribute('class') === 'paused') { audioelement.play(); this.setattribute('class', 'playing'); this.textcontent = 'pause' // if track is playing, stop it } else if (this.
getattribute('class') === 'playing') { audioelement.pause(); this.setattribute('class', 'paused'); this.textcontent = 'play'; } }); // if track ends audioelement.addeventlis...
... using the audiocontext.creategain() method, which can be used to adjust the volume of audio fed through it, and create another event handler that changes the value of the audio graph's gain (volume) whenever the slider value is changed: const gainnode = audioctx.creategain(); volumeslider.addeventlistener('input', function() { gainnode.gain.value = this.value; }); the final thing to do to
get this to work is to connect the different nodes in the audio graph up, which is done using the audionode.connect() method available on every node type: audiosource.connect(gainnode).connect(audioctx.destination); the audio starts in the source, which is then connected to the gain node so the audio's volume can be adjusted.
...And 4 more matches
Test your skills: Math - Learn web development
if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
...you will have to create four numeric values, then add the first two to
gether, then subtract the fourth from the third, then multiply the two secondary results to
gether to
get a result of 48.
... add the first two variables to
gether and store the result in another variable.
...And 4 more matches
Working with JSON - Learn web development
for example: superheroes.hometown superheroes['active'] to access data further down the hierarchy, you simply have to chain the required property names and array indexes to
gether.
...
getting started to begin with, make local copies of our heroes.html and style.css files.
...add the following line: request.open('
get', requesturl); this takes at least two parameters — there are other optional parameters available.
...And 4 more matches
Object-oriented JavaScript for beginners - Learn web development
we say simplistic, because oop can quickly
get very complicated, and giving it a full treatment now would probably confuse more than help.
...there are lots of things you could know about a person (their address, height, shoe size, dna profile, passport number, significant personality traits ...) , but in this case we are only interested in showing their name, age, gender, and interests, and we also want to be able to write a short introduction about them based on this data, and
get them to say hello.
... creating our finished constructor the example we looked at above was only a simple example to
get us started.
...And 4 more matches
The business case for web performance - Learn web development
objective: to gain confidence in working with clients and management to
get them to make web performance a priority.
... performance bud
gets setting a web performance bud
get can help you make sure the team stays on track in keeping the site and help prevent regressions.
... a performance bud
get is a set of limits that are set to specify limits, such as maximum number of http requests allowed, the maximum total size of all the assets combined, the minimum allowable fps on a specific device, etc, that must be maintained.
...And 4 more matches
Deployment and next steps - Learn web development
in this final article we will look at how to deploy your application and
get it online, and also share some of the resources that you should go on to, to continue your svelte learning journey.
... code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to
get to the current app state, run cd mdn-svelte-tutorial/08-next-steps or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/08-next-steps remember to run npm install && npm run dev to start your app in development mode.
...you might
get a warning, but you can ignore this for now.
...And 4 more matches
Adding a new todo form: Vue events, methods, and models - Learn web development
binding data to inputs with v-model next up, we need a way to
get the value from the form's <input> so we can add the new to-do item to our todoitems data list.
... to use both the .lazy modifier and the .trim modifier to
gether, we can chain them, e.g.
...vue templates also
get converted to lowercase, which means vue templates cannot listen for events named with capital letters.
...And 4 more matches
Cross browser testing - Learn web development
we look at identifying your tar
get audience (e.g.
... we have put to
gether a course that includes all the essential information you need to work towards your goal.
...
get started prerequisites you should really learn the basics of the core html, css, and javascript languages first before attempting to use the tools detailed here.
...And 4 more matches
Git and GitHub - Learn web development
different team members will commonly want to create their own separate versions of the code (called branches in git), work on a new feature in that version, and then
get it merged in a controlled manner (in github we use pull requests) with the master version when they are done with it.
... we have put to
gether a course that includes all the essential information you need to work towards your goal.
...
get started prerequisites to use git and github, you need: a desktop computer with git installed on it (see the git downloads page).
...And 4 more matches
HTTP logging
launch the browser and
get it into whatever state you need to be in just before your bug occurs.
... this is because firefox now uses multiple processes, and each process
gets its own log file.
... note that this approach winds up logging the whole browser history, so files can
get rather large (they compress well :) setting environment variables differs by operating system.
...And 4 more matches
Simple Instantbird build
build prerequisites hardware requirements: while you can build instantbird on older hardware it can take quite a bit of time to compile on slower machines, and having 8gb of ram is recommended (though you can probably still
get away with 4gb).
... windows build prerequisites gnu/linux build prerequisites mac os x build prerequisites tip: after completing setup for your os, and before you
get the source, you can opt to add the progressextension to your mercurial.ini (for windows) or .hgrc (for *nix / mac) file.
...
get the source note: on windows, you won't be able to build the instantbird source code if it's under a directory with spaces in the path (e.g., don't use "documents and settings").
...And 4 more matches
Contributing to the Mozilla code base
if you have any difficulties
getting involved or finding answers to your questions, please come and ask your questions in our chatroom, where we can help you
get started.
... we know even before you start contributing that
getting set up to work on firefox and finding a bug that's a good fit for your skills can be a challenge.
...if you're having any trouble following this documentation, or hit a barrier you can't
get around, please contact mike hoye at mhoye@mozilla.com.
...And 4 more matches
Cross Process Object Wrappers
for example, this frame script sends a dom node to chrome when the user clicks it, as the clicked property of the third argument: // frame script addeventlistener("click", function (event) { sendasyncmessage("my-e10s-extension-message", {}, { clicked : event.tar
get }); }, false); in the chrome script, the dom node is now accessible through a cross process object wrapper, as a property of the objects property of the message.
... the chrome script can
get and set the wrapped object's properties and call its functions: // chrome script windowmm.addmessagelistener("my-e10s-extension-message", handlemessage); function handlemessage(message) { let wrapper = message.objects.clicked; console.log(wrapper.innerhtml); wrapper.innerhtml = "<h2>modified by chrome!</h2>" wrapper.setattribute("align", "center"); } auto-generated cpows add-ons that have not declared themselves multiprocess compatible are set up with a number of compatibility shims.
...*/ var button = content.document.
getelementbyid("click-me"); button.addeventlistener("mouseover", function (event) { sendasyncmessage("my-addon-message", {}, { element : event.tar
get }); }, false); // chrome script /* load the frame script, then listen for the message.
...And 4 more matches
Limitations of chrome scripts
you'll
get the shims for your add-on by default, unless you set the multiprocesscompatible flag in your add-on's install manifest.
...observers for these topics
get content objects as the asubject argument to observe(), so notifications are not sent to the chrome process.
...if you do, you'll
get an error.
...And 4 more matches
Implementing Download Resuming
introduction various protocols support
getting partial files.
... this means that if a download was interrupted, it can be resumed from that point on, rather than re
getting the whole file.
...the expected way to use it is this: for all downloads that happen,
get the entityid from the channel, and store it for later use.
...And 4 more matches
NetUtil.jsm
method overview nsiasyncstreamcopier asynccopy(nsiinputstream asource, nsioutputstream asink, [optional] acallback) void asyncfetch(asource, acallback) nsichannel newchannel(awhattoload, [optional] aorigincharset, [optional] nsiuri abaseuri) nsiuri newuri(atar
get, [optional] aorigincharset, [optional] nsiuri abaseuri) string readinputstreamtostring(ainputstream, acount, aoptions) attributes attribute type description ioservice nsiioservice returns a reference to nsiioservice.
...
getservice(ci.nsiproperties).
...
get("tmpd", ci.nsifile); file.append("test-file.tmp"); file.createunique(ci.nsifile.normal_file_type, 0666); // then, we need an output stream to our output file.
...And 4 more matches
Bootstrapping a new locale
if you are interested in localizing thunderbird 3, seamonkey 2 or other mozilla projects based on gecko 1.9.1 you'll need to follow the instructions on
getting the source-code of the comm-central repository.
...la-1.9.x/dom/locales/ ab-cd/dom cp -r mozilla-1.9.x/editor/locales/ ab-cd/editor cp -r mozilla-1.9.x/extensions/reporter/locales/chrome ab-cd/extensions cp -r mozilla-1.9.x/netwerk/locales/ ab-cd/netwerk cp -r mozilla-1.9.x/other-licenses/branding/firefox/locales/ ab-cd/other-licenses cp -r mozilla-1.9.x/security/manager/locales/ ab-cd/security cp -r mozilla-1.9.x/toolkit/locales/ ab-cd/toolkit
getting started change your directory to the new working directory so you are in the ~/[your working directory]/[ab-cd]/ path and can start localizing.
... (read more about tools at l10n:tools.) after you have downloaded your editor of choice, type the following command in the same path from above (~/ab-cd/browser/chrome/browser) $ edit ab-cd/browser/chrome/browser/aboutcerterror.dtd read the top of the file to
get any context on how to translate contained in the notes written by the developers or l10n-drivers.
...And 4 more matches
Localizing with Mercurial
# debian/ubuntu $ apt-
get install mercurial # fedora $ yum install mercurial # gentoo $ emerge mercurial # arch linux $ pacman -s mercurial # opensolaris $ pkg install sunwmercurial if you prefer a graphical interface, you can download and install mercurialeclipse here.
... when you
get the comm-central repository, this will include the mozilla-central repository as well.
... here's how to
get (or clone) your en-us source files for the first time: run the following command in the command line to
get the source en-us files for firefox: hg clone https://hg.mozilla.org/mozilla-central/ this will create a clone of the mozilla-central repository in the directory mozilla-central.
...And 4 more matches
Gecko Profiler FAQ
this can change some performance characteristics, but is a decent way to
get a sense of which parts of a large function are expensive.
... another approach to
get more precision is also raising the sampling frequency to sub-millisecond ranges (it won’t work on windows.) high frequency sampling may also be an area where native profilers are a useful alternative tool to try.
...some functions (reflow, painting, js excecution) insert the url of the associated document into the call stack frame, so you can
get a rough idea, but we don’t have instrumentation at the tab/document/eventqueue level.
...And 4 more matches
L20n Javascript API
l20n javascript api var ctx = l20n.
getcontext(); ctx.linkresource('./locales/strings.l20n'); ctx.requestlocales(); when you freeze the context by calling requestlocales, the resource files will be retrieved, parsed and compiled.
... you can listen to the ready event (emitted by the context instance when all the resources have been compiled) and use ctx.
getsync and ctx.
getentitysync to
get translations synchronously.
... ctx.registerlocalenegotiator(function(available, requested, deflocale, callback) { yourapp.
getallavailablelanguages(function(allavailable) { var fallbackchain = yourapp.intersect(allavailable, requested); cb(fallbackchain); }); }); ctx.requestlocales(...requestedlocales: string?) specify the user's preferred locales for the context instance to negotiate against and freeze the context instance.
...And 4 more matches
Threads
joining a thread provides definitive proof that the tar
get thread has terminated and has finished with both the resources to which the thread has access and the resources of the thread itself.
... creating, joining, and identifying threads controlling thread priorities interrupting and yielding setting global thread concurrency
getting a thread's scope creating, joining, and identifying threads pr_createthread creates a new thread.
... pr_
getcurrentthread returns the current thread object for the currently running code.
...And 4 more matches
Cryptography functions
3.2 and later pk11_generatekeypairwithflags mxr 3.10.2 and later pk11_generatekeypairwithopflags mxr 3.12 and later pk11_generatenewparam mxr 3.2 and later pk11_generaterandom mxr 3.2 and later pk11_generaterandomonslot mxr 3.11 and later pk11_
getalltokens mxr 3.2 and later pk11_
getallslotsforcert mxr 3.12 and later pk11_
getbestkeylength mxr 3.2 and later pk11_
getbestslot mxr 3.2 and later pk11_
getbestslotmultiple mxr 3.2 and later pk11_
getbestwrapmechanism mxr 3.2 and later ...
... pk11_
getblocksize mxr 3.2 and later pk11_
getcertfromprivatekey mxr 3.9.3 and later pk11_
getcurrentwrapindex mxr 3.2 and later pk11_
getdefaultarray mxr 3.8 and later pk11_
getdefaultflags mxr 3.8 and later pk11_
getdisabledreason mxr 3.8 and later pk11_
getfirstsafe mxr 3.2 and later pk11_
getinternalkeyslot mxr 3.2 and later pk11_
getinternalslot mxr 3.2 and later pk11_
getkeygen mxr 3.4 and later pk11_
getkeylength mxr 3.2 and later pk11_
getkeystrength mxr 3.2 and later ...
... pk11_
getmechanism mxr 3.2 and later pk11_
getminimumpwdlength mxr 3.4 and later pk11_
getmodinfo mxr 3.6 and later pk11_
getmodule mxr 3.3 and later pk11_
getmoduleid mxr 3.2 and later pk11_
getnextgenericobject mxr 3.9.2 and later pk11_
getnextsafe mxr 3.4 and later pk11_
getnextsymkey mxr 3.4 and later pk11_
getpadmechanism mxr 3.4 and later pk11_
getpbecryptomechanism mxr 3.12 and later pk11_
getpbeiv mxr 3.6 and later pk11_
getpqgparamsfromprivatekey mxr 3.4 and later ...
...And 4 more matches
JSS FAQ
once jss initialized, i can't
get anymore instances with certificatefactory.
getinstance(x.509)?
... ssl_
getclientauthdatahook sets a callback to return the local certificate for ssl client auth.
... sslclientcertificateselectioncallback is analogous to ssl_
getclientauthdatahook.
...And 4 more matches
Scripting Java
so the previous example could be even shorter: js> java [javapackage java] we can access java classes simply by stepping down the package hierarchy: js> java.io.file [javaclass java.io.file] if your scripts access a lot of different java classes, it can
get awkward to use the full package name of the class every time.
...this works just as in java, with the use of the new operator: js> new java.util.date() thu jan 24 16:18:17 est 2002 if we store the new object in a javascript variable, we can then call methods on it: js> f = new java.io.file("test.txt") test.txt js> f.exists() true js> f.
getname() test.txt static methods and fields can be accessed from the class object itself: js> java.lang.math.pi 3.141592653589793 js> java.lang.math.cos(0) 1 in javascript, unlike java, the method by itself is an object and can be evaluated as well as being called.
...a javabean property foo is defined by the methods
getfoo and setfoo.
...And 4 more matches
JS::PersistentRooted
syntax js::persistentrooted<t> var; // added in spidermonkey 38 js::persistentrooted<t> var(cx); js::persistentrooted<t> var(cx, initial); js::persistentrooted<t> var(rt); js::persistentrooted<t> var(rt, initial); name type description cx jscontext * the context to
get the runtime in which to add the root rt jsruntime * the runtime in which to add the root.
...added in spidermonkey 38 t&
get() returns ptr.
... const t&
get() const operator const t&() const const t& operator->() const t* address() returns a pointer to ptr.
...And 4 more matches
Using the Places livemark service
initiating the livemark service before using the livemark service, you need to obtain an instance: var livemarkservice = components.classes["@mozilla.org/browser/livemark-service;2"] .
getservice(components.interfaces.nsilivemarkservice); creating a new livemark the nsilivemarkservice.createlivemark() method creates a new livemark.
...
getservice(components.interfaces.nsinavbookmarksservice); var root = bmsvc.bookmarksmenufolder; // item id of the bookmarks menu var newlvmkid = livemarkservice.createlivemarkfolderonly(bmsvc, root, "livemark name", uri("http://example.com/"), uri("http://example.com/rss.xml"), ...
... determine whether a folder is a livemark you can use the nsilivemarkservice.islivemark() method to determine whether or not a given folder is a livemark container: if (livemarkservice.islivemark(folderid)) { // it's a livemark } else { // it's not a livemark } accessing the container's site uri the nsilivemarkservice.
getsiteuri() method lets you obtain the nsiuri of the website associated with a livemark container.
...And 4 more matches
Component Internals
a component in the xpcom framework when you build a component or module and compile it into a library, it must export a single method named ns
getmodule.
... this ns
getmodule function is the entry point for accessing the library.
... it
gets called during registration and unregistration of the component, and when xpcom wants to discover what interfaces or classes the module/library implements.
...And 4 more matches
Components.utils.cloneInto
it returns a reference to the clone: var clonedobject = cloneinto(myobject, tar
getwindow); you can then assign the clone to an object in the tar
get scope as an expando property, and scripts running in that scope can access it: tar
getwindow.foo = clonedobject; in this way privileged code, such as an add-on, can share an object with less-privileged code like a normal web page script.
... syntax components.utils.cloneinto(obj, tar
getscope[, options]); parameters obj : object the object to clone.
... tar
getscope : object the object to attach the object to.
...And 4 more matches
Components.utils
if the parameter is passed, the runnable will be dispatch in the compartment of the parameter, which affects which error reporter
gets called.
...
getcomponentsforscope() this seemingly-paradoxical api allows privileged code to explicitly give unprivileged code a reference to its own components object (whereas it's normally hidden away on a scope chain visible only to xbl methods).
... see also specialpowers.
getcomponents.
...And 4 more matches
nsAdoptingCString
take the value of what's given, and make what's given for
get its value.
...method overview constructors operator= operator const char* operator[]
get find rfind rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii...
... lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar base classes nsxpidlcstring data members no public members.
...And 4 more matches
nsAdoptingString
take the value of what's given, and make what's given for
get its value.
...method overview constructors operator= operator const prunichar* operator[]
get find rfind rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lo...
...wercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar base classes nsxpidlstring data members no public members.
...And 4 more matches
nsXPIDLCString
class declaration nstxpidlstring extends nststring such that: (1) mdata can be null (2) objects of this type can be automatically cast to |const chart*| (3)
getter_copies method is supported to adopt data allocated with ns_alloc, such as "out string" parameters in xpidl.
... names: nsxpidlstring for wide characters nsxpidlcstring for narrow characters method overview constructors operator const char* operator[] operator=
get find rfind rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercasee...
...qualsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar base classes nscstring data members no public members.
...And 4 more matches
nsXPIDLString
class declaration nstxpidlstring extends nststring such that: (1) mdata can be null (2) objects of this type can be automatically cast to |const chart*| (3)
getter_copies method is supported to adopt data allocated with ns_alloc, such as "out string" parameters in xpidl.
... names: nsxpidlstring for wide characters nsxpidlcstring for narrow characters method overview constructors operator const prunichar* operator[] operator=
get find rfind rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsas...
...cii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar base classes nsstring data members no public members.
...And 4 more matches
IAccessibleAction
method overview [prop
get] hresult description([in] long actionindex, [out] bstr description ); hresult doaction([in] long actionindex ); [prop
get] hresult keybinding([in] long actionindex, [in] long nmaxbindings, [out, size_is(,nmaxbindings), length_is(, nbindings)] bstr keybindings, [out] long nbindings ); [prop
get] hresult localizedname([in] long actionindex, [out] bstr localizedname ); hresult nactions([out,re...
...tval] long nactions ); [prop
get] hresult name([in] long actionindex, [out] bstr name ); methods description() returns a description of the specified action of the object.
... [prop
get] hresult description( [in] long actionindex, [out] bstr description ); parameters actionindex 0 based index specifying which action's description to return.
...And 4 more matches
nsIAccessibleHyperText
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview nsiaccessiblehyperlink
getlink(in long linkindex); long
getlinkindex(in long charindex); long
getselectedlinkindex(); obsolete since gecko 1.9 attributes attribute type description linkcount long the number of links contained within this hypertext object.
...note: renamed from links in gecko 1.9 methods
getlink() retrieves the nsiaccessiblehyperlink object at the given link index.
... nsiaccessiblehyperlink
getlink( in long linkindex ); parameters linkindex 0-based index of the link that is to be retrieved.
...And 4 more matches
nsIApplicationCacheService
9.1 inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void cacheopportunistically(in nsiapplicationcache cache, in acstring key); nsiapplicationcache chooseapplicationcache(in acstring key); nsiapplicationcache createapplicationcache(in acstring group); void deactivategroup(in acstring group); nsiapplicationcache
getactivecache(in acstring group); nsiapplicationcache
getapplicationcache(in acstring clientid); void
getgroups([optional] out unsigned long count, [array, size_is(count), retval] out string groupids); methods cacheopportunistically() flags the specified key as one that should be cached opportunistically.
...
getactivecache() returns the currently active cache object for a cache group.
... nsiapplicationcache
getactivecache( in acstring group ); parameters group the cache group for which to return an application cache.
...And 4 more matches
nsIComponentManager
method overview void addbootstrappedmanifestlocation(in nsilocalfile alocation); void createinstance(in nscidref aclass, in nsisupports adelegate, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); void createinstancebycontractid(in string acontractid, in nsisupports adelegate, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); void
getclassobject(in nscidref aclass, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); void
getclassobjectbycontractid(in string acontractid, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); void removebootstrappedmanifestlocation(in nsilocalfile alocation); methods addbootstrappedmanifestlocation() loads a "bootstrapped" chrome.manifest file fro...
... if you're tar
geting gecko 10 or higher there should be no need to call this method, since the bootstrapped add-on's chrome.manifest is loaded automatically now.
...unlike
getservice, this returns a new instance each time it is called.
...And 4 more matches
nsIContentViewer
create an instance, use: var contentviewer = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.nsicontentviewer); method overview void clearhistoryentry(); void close(in nsishentry historyentry); void destroy(); [noscript,notxpcom,nostdcall] nsiviewptr findcontainerview(); void
getbounds(in nsintrectref abounds); native code only!
... [noscript,notxpcom] nsidocumentptr
getdocument(); void hide(); void init(in nsiwid
getptr aparentwid
get, [const] in nsintrectref abounds); native code only!
...e(in boolean apagemode, in nsiprintsettings aprintsettings); void show(); void stop(); void unload(); obsolete since gecko 1.8 attributes attribute type description container nsisupports domdocument nsidomdocument enablerendering boolean obsolete since gecko 2.0 historyentry nsishentry
get the history entry that this viewer will save itself into when destroyed.
...And 4 more matches
nsIDragSession
wid
get/public/nsidragsession.idlscriptable provides support for interacting with an ongoing drag session during a drag and drop operation.
... inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void
getdata( in nsitransferable atransferable, in unsigned long aitemindex ); boolean isdataflavorsupported( in string adataflavor ); attributes attribute type description candrop boolean set the current state of the drag, whether it can be dropped or not.
... usually the tar
get "frame" sets this so the native system can render the correct feedback.
...And 4 more matches
nsIErrorService
inherits from: nsisupports last changed in gecko 1.7 implemented by: @mozilla.org/xpcom/error-service;1 method overview string
geterrorstringbundle(in short errormodule); string
geterrorstringbundlekey(in nsresult error); void registererrorstringbundle(in short errormodule, in string stringbundleurl); void registererrorstringbundlekey(in nsresult error, in string stringbundlekey); void unregistererrorstringbundle(in short errormodule); void unregistererrorstringbundlekey(in nsresult erro...
...r); methods
geterrorstringbundle() retrieves a string bundle url for an error module.
... string
geterrorstringbundle( in short errormodule ); parameters errormodule the module for which the string bundle is registered.
...And 4 more matches
nsIFilePicker
wid
get/nsifilepicker.idlscriptable the file picker component is used to display standard user interface for selecting files and directories, as well as for selecting destinations for, and naming, new files.
... mode
getfolder 2 select a folder/directory.
...you may or multiple filters to
gether; for example filterall | filterhtml.
...And 4 more matches
nsIHttpChannelInternal
66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void
getrequestversion(out unsigned long major, out unsigned long minor); void
getresponseversion(out unsigned long major, out unsigned long minor); void httpupgrade(in acstring aprotocolname, in nsihttpupgradelistener alistener); void setcookie(in string acookieheader); void setupfallbackchannel(in string afallbackkey); attributes attribute type description canceled boolean returns true if and only if ...
... proxyinfo nsiproxyinfo
get the proxy info in use by the channel.
... methods
getrequestversion()
gets the request's major and minor version numbers.
...And 4 more matches
nsIProtocolProxyService
to access the service use: var pps = components.classes["@mozilla.org/network/protocol-proxy-service;1"] .
getservice(components.interfaces.nsiprotocolproxyservice); method overview deprecated since gecko 18 nsiproxyinfo resolve(in nsiuri auri, in unsigned long aflags); nsicancelable asyncresolve(in nsiuri auri, in unsigned long aflags,in nsiprotocolproxycallback acallback); nsiproxyinfo newproxyinfo(in acstring atype, in autf8string ahost,in long aport, in unsigned long aflags,...
... in unsigned long afailovertimeout, in nsiproxyinfo afailoverproxy); nsiproxyinfo
getfailoverforproxy(in nsiproxyinfo aproxyinfo, in nsiuri auri, in nsresult areason); void registerfilter(in nsiprotocolproxyfilter afilter, in unsigned long aposition); void unregisterfilter(in nsiprotocolproxyfilter afilter); constants constant value description resolve_non_blocking 1<<0 this flag may be passed to the resolve method to request that it fail instead of block the calling thread.
... if this proxy is unavailable,
getfailoverforproxy() may be called to determine the correct secondary proxy to be used.
...And 4 more matches
nsIScreen
wid
get/nsiscreen.idlscriptable this interface provides information about a display screen.
...implemented by: @mozilla.org/gfx/screenmanager;1 as a service: var screen = components.classes["@mozilla.org/gfx/screenmanager;1"] .
getservice(components.interfaces.nsiscreen); method overview void
getavailrect(out long left, out long top, out long width, out long height); void
getrect(out long left, out long top, out long width, out long height); void lockminimumbrightness(in unsigned long brightness); void unlockminimumbrightness(in unsigned long brightness); attributes attribute type description colordepth long the screen's color depth; this ...
... methods
getavailrect() returns a rectangle indicating the portion of the screen that is available for use.
...And 4 more matches
nsISelectionController
void charactermove(in boolean forward, in boolean extend); boolean checkvisibility(in nsidomnode node, in short startoffset, in short endoffset); void completemove(in boolean forward, in boolean extend); void completescroll(in boolean forward); boolean
getcaretenabled(); short
getdisplayselection(); nsiselection
getselection(in short type); void intralinemove(in boolean forward, in boolean extend); void linemove(in boolean forward, in boolean extend); void pagemove(in boolean forward, in boolean extend); void repaintselection(in short type); ...
...
getcaretenabled()
gets the current state of the caret, as set by setcaretenabled().
... boolean
getcaretenabled(); parameters none.
...And 4 more matches
nsIServiceManager
inherits from: nsisupports last changed in gecko 1.0 method overview void
getservice(in nscidref aclass, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); void
getservicebycontractid(in string acontractid, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); boolean isserviceinstantiated(in nscidref aclass, in nsiidref aiid); boolean isserviceinstantiatedbycontractid(in string acontractid, in nsiidref aiid); methods
getservice() this method returns a reference to a particular xpcom se...
... void
getservice( in nscidref aclass, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result ); parameters aclass the classid of the service that is being requested.
...
getservicebycontractid() this method returns a reference to a particular xpcom service given the contractid of the service.
...And 4 more matches
nsITransactionManager
inherits from: nsisupports last changed in gecko 1.7 method overview void addlistener(in nsitransactionlistener alistener); void beginbatch(); void clear(); void dotransaction(in nsitransaction atransaction); void endbatch(); nsitransactionlist
getredolist(); nsitransactionlist
getundolist(); nsitransaction peekredostack(); nsitransaction peekundostack(); void redotransaction(); void removelistener(in nsitransactionlistener alistener); void undotransaction(); attributes attribute type description maxtransactioncount long sets the maximum number of transaction items the transaction manager will maintain at any time.
... beginbatch() turns on the transaction manager's batch mode, forcing all transactions executed by the transaction manager's dotransaction() method to be aggregated to
gether until endbatch() is called.
... this mode allows an application to execute and group to
gether several independent transactions so they can be undone with a single call to undotransaction().
...And 4 more matches
nsITreeSelection
layout/xul/base/src/tree/public/nsitreeselection.idlscriptable this interface is used by the tree wid
get to
get information about what is selected.
... inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void adjustselection(in long index, in long count); void clearrange(in long startindex, in long endindex); void clearselection(); void
getrangeat(in long i, out long min, out long max); long
getrangecount(); void invalidateselection(); void invertselection(); boolean isselected(in long index); void rangedselect(in long startindex, in long endindex, in boolean augment); void select(in long index); void selectall(); void timedselect(in long index, in long delay); void toggleselect(in long index); attributes attribute type description count long the number of r...
... tree nsitreeboxobject the tree wid
get for this selection.
...And 4 more matches
nsIWebBrowserPersist
persist_flags_append_to_file 32768 append the downloaded data to the tar
get file.
... afile tar
get local file.
... afile tar
get local file.
...And 4 more matches
nsIXULTemplateResult
the value for a particular variable may be retrieved using the
getbindingfor() and
getbindingobjectfor() methods.
... method overview astring
getbindingfor(in nsiatom avar); nsisupports
getbindingobjectfor(in nsiatom avar); void hasbeenremoved(); void rulematched(in nsisupports aquery, in nsidomnode arulenode); attributes attribute type description id astring id of the result.
... methods
getbindingfor()
get the string representation of the value of a variable for this result.
...And 4 more matches
Creating a gloda message query
you can find the file, which includes doxygen markup of sorts, here: https://hg.mozilla.org/comm-central/file/tip/mailnews/db/gloda/modules/gloda.js components.utils.import("resource:///modules/gloda/public.js"); create the query let query = gloda.newquery(gloda.noun_message); add constraints to the query each constraint function takes one or more arguments which are "or"ed to
gether.
...constraints are "and"ed to
gether.
...the folder may be a glodafolder instance (retrieved via gloda.
getfolderforfolder, which takes an nsimsgfolder) or an nsimsgfolder instance.
...And 4 more matches
Gloda examples
a) show all messages in a conversation regardless of the folder in which they are stored, b) search messages by subject assuming that you have a message (glodamessage) in the conversation already, this is straight forward using glodamessage.conversation.
getmessagescollection() alistener = { /* called when new items are returned by the database query or freshly indexed */ onitemsadded: function _onitemsadded(aitems, acollection) { }, /* called when items that are already in our collection
get re-indexed */ onitemsmodified: function _onitemsmodified(aitems, acollection) { }, /* called when items that are in our collection ...
...n _onitemsremoved(aitems, acollection) { }, /* called when our database query completes */ onquerycompleted: function _onquerycompleted(conversation_coll) { try { for (var conv in conversation_coll) { //do something with the conversation here alert(conv.subject); } } catch (e) {} } } glodamessage.conversation.
getmessagescollection(alistener) alternatively if you need to
get a conversation based on the subject, you need to do a query (using the same listener as above).
... query=gloda.newquery(gloda.noun_conversation); query.subjectmatches("gloda makes searching easy"); query.
getcollection(alistener) search messages by tags searches for all messages having any (or several) of all tags defined in tb let query = gloda.newquery(gloda.noun_message); let tagarray = mailservices.tags.
getalltags({}); query.tags(...tagarray); let collection = query.
getcollection(mylistener); search messages by daterange searches for all messages within a date range id_q=gloda.newquery(gloda.noun_message); // define a date range form yesterday to now id_q.daterange([new date() - 86400000, new date()]); var mylistener = { /* called wh...
...And 4 more matches
Activity Manager examples
// step 1: adding a process into the activity manager const nsiap = components.interfaces.nsiactivityprocess; const nsiae = components.interfaces.nsiactivityevent; const nsiam = components.interfaces.nsiactivitymanager; let gactivitymanager = components.classes["@mozilla.org/activity-manager;1"].
getservice(nsiam); let process = components.classes["@mozilla.org/activity-process;1"].createinstance(nsiap); // assuming folder is an instance of nsimsgfolder interface // localization is omitted, initiator is not provided process.init("processing folder: " + folder.prettiestname, null); // note that we don't define a custom icon, default process icon // will be used process.contextty...
...} canceljunkprocess.prototype = { cancel: function(aactivity) { let initiator = aactivity.initiator; if (initiator) { let folder = aactivity.
getsubjects({})[0]; ....
...//////////////////////// //// undo handler implementation class mycopyeventundo : public nsiactivityundohandler { public: ns_decl_isupports ns_decl_nsiactivityundohandler mycopyeventundo() {} private: ~mycopyeventundo() {} }; ns_impl_isupports1(mycopyeventundo, nsiactivityundohandler) ns_imethodimp mycopyeventundo::undo(nsiactivityevent *event, nsresult *result) { nsresult rv; //
get the subjects of this copy event pruint32 length; nsivariant **subjectlist; rv = event->
getsubjects(&length, &subjectlist); if(ns_failed(rv)) return rv; // first subject in the list is the source folder in this particular case nscomptr<nsimsgfolder> folder = do_queryinterface(subjectlist[0]); //
get the initiator nsivariant *initiator; event->
getinitiator(&initiator); if...
...And 4 more matches
Working with data
// lets create an array of long's var my = ctypes.long.array()([1, 2, 3, 4]); my.tostring(); // this outputs to browser console: `"ctypes.long.array(4)([ctypes.int64("1"), ctypes.int64("2"), ctypes.int64("3"), ctypes.int64("4")])"` my.addressofelement(1).contents; // this outputs `int64 { }` my.addressofelement(1).contents.tostring(); // outputs: `"2"` // now this is how to
get the array of long's cast to array of int's var mycasted = ctypes.cast(my.address(), ctypes.int.array(my.length).ptr).contents; mycasted.tostring(); // this outputs to browser console: `"ctypes.int.array(4)([1, 2, 3, 4])"` mycasted.addressofelement(1).contents; // this outputs `2` mycasted.addressofelement(1).contents.tostring(); // outputs: `"2"` source of this, and to see wrong ways of castin...
...you can always
get a pointer to the c value using the cdata object's address() method.
...they
get converted automatically for you.
...And 4 more matches
Browser Console - Firefox Developer Tools
console.jsm to use the console api from a traditional or bootstrapped add-on,
get it from the console module.
... here is an example on how to clear the contents of the browser console: components.utils.import("resource://devtools/shared/loader.jsm"); var hudservice = devtools.require("devtools/client/webconsole/hudservice"); var hud = hudservice.
getbrowserconsole(); hud.jsterm.clearoutput(true); if you would like to access the content document of the browser console this can be done with the hudservice.
... this example here makes it so that when you mouse over the "clear" button it will clear the browser console: components.utils.import("resource://devtools/shared/loader.jsm"); var hudservice = devtools.require("devtools/client/webconsole/hudservice"); var hud = hudservice.
getbrowserconsole(); var clearbtn = hud.chromewindow.document.queryselector('.webconsole-clear-console-button'); clearbtn.addeventlistener('mouseover', function() { hud.jsterm.clearoutput(true); }, false); bonus features available for add-on sdk add-ons, the console api is available automatically.
...And 4 more matches
Work with animations - Firefox Developer Tools
this article covers three tools you can use to visualize and edit animations: the animation inspector editing @keyframes editing timing functions animation inspector the page inspector's animations view displays animations in the page synchronized along a timeline, with a draggable wid
get you can use to move to any point in the timeline and see the page at that point.
... to the left of the selector is a "tar
get" icon ().
... finally, if you click inside the bar at the top of the timeline, you
get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when.
...And 4 more matches
Storage Inspector - Firefox Developer Tools
storage inspector user interface the storage inspector ui is split into three main components: storage tree table wid
get sidebar storage tree the storage tree lists all the storage types that the storage inspector can inspect: under each type, objects are organized by origin.
...the tree is live, so if a new origin
gets added (by adding an iframe, for example), it will be added to each storage type automatically.
... clicking on a tree item will display detailed information about that item in the table wid
get on the right.
...And 4 more matches
Animation - Web APIs
animation.effect
gets and sets the animationeffectreadonly associated with this animation.
... animation.id
gets and sets the string used to identify the animation.
... animation.playbackrate
gets or sets the playback rate of the animation.
...And 4 more matches
BatteryManager - Web APIs
the batterymanager interface provides ways to
get information about the system's battery charge level.
... the navigator.
getbattery() method returns a battery promise that is resolved in a batterymanager interface which you can use to interact with the battery status api.
... methods inherited from eventtar
get: eventtar
get.addeventlistener() registers an event handler of a specific event type on the eventtar
get.
...And 4 more matches
BiquadFilterNode.type - Web APIs
frequencies lower than the frequency
get a boost, or an attenuation; frequencies over it are unchanged.
... the upper limit of the frequencies
getting a boost or an attenuation.
...frequencies higher than the frequency
get a boost or an attenuation; frequencies lower than it are unchanged.
...And 4 more matches
EXT_disjoint_timer_query - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... in webgl 2, the
getqueryobject was renamed to
getqueryparameter.
... ext.query_counter_bits_ext a glint indicating the number of bits used to hold the query result for the given tar
get.
...And 4 more matches
Element.scrollHeight - Web APIs
if you need a fractional value, use element.
getboundingclientrect().
... element.scrollheight - element.scrolltop === element.clientheight when the container does not scroll, but has overflowing children, these checks determine if the container can scroll: window.
getcomputedstyle(element).overflowy === 'visible' window.
getcomputedstyle(element).overflowy !== 'hidden' scrollheight demo associated with the onscroll event, this equivalence can be useful to determine whether a user has read a text or not (see also the element.scrolltop and element.clientheight properties).
...sed mi odio, ullamcorper e
get mattis id, malesuada vitae libero.
...And 4 more matches
FileHandle API - Web APIs
perform read and write operations to read or write within a handled file, it is required to
get a lockedfile.
... //
get a lockedfile object from the handle var myfile = myfilehandle.open('readwrite'); // start a writing operation var writing = myfile.append('some content'); writing.onsuccess = function () { console.log('writing operation successful'); } writing.onerror = function () { console.log('something goes wrong in the writing process: ' + this.error); } reading it's possible to directly write the ...
...this information (as well as the date of its last modification) can be retrieved through the lockedfile.
getmetadata() method.
...And 4 more matches
GlobalEventHandlers.onanimationend - Web APIs
syntax var animendhandler = tar
get.onanimationend; tar
get.onanimationend = function value a function to be called when an animationend event occurs indicating that a css animation has begun on the tar
get, where the tar
get object is an html element (htmlelement), document (document), or window (window).
... we'll
get to that shortly.
... javascript content before we
get to the animation code, we define a function which logs information to a box on the user's screen.
...And 4 more matches
GlobalEventHandlers.onanimationstart - Web APIs
syntax var animstarthandler = tar
get.onanimationstart; tar
get.onanimationstart = function value a function to be called when an animationstart event occurs indicating that a css animation has begun on the tar
get, where the tar
get object is an html element (htmlelement), document (document), or window (window).
... we'll
get to that shortly.
... javascript content before we
get to the animation code, we define a function which logs information to a box on the user's screen.
...And 4 more matches
GlobalEventHandlers.onpointerdown - Web APIs
syntax tar
get.onpointerdown = downhandler; var downhandler = tar
get.onpointerdown; value a function to handle the pointerdown event for the tar
get element, document, or window.
... var tar
getbox = document.
getelementbyid("tar
get"); tar
getbox.onpointerdown = handledown; function handledown(evt) { var action; switch(evt.pointertype) { case "mouse": action = "clicking"; break; case "pen": action = "tapping"; break; case "touch": action = "touching"; break; default: action = "interacting with"; break; } tar
getbox.innerhtml = "<strong>thanks for " + action + " me!</strong>"; evt.preve...
... the handledown() function, in turn, looks at the value of pointertype to determine what kind of pointing device was used, then uses that information to customize a string to replace the contents of the tar
get box.
...And 4 more matches
HTMLMediaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 30%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 180" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" tar
get="_top"><rect x="331" y="65" width="160"...
...And 4 more matches
HTMLMetaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmetaelement" tar
get="_top"><rect x="341" y="65" width="150" ...
...And 4 more matches
File drag and drop - Web APIs
a tar
get element for the file drop) and to define event handlers for the drop and dragover events.
... define the drop zone the tar
get element of the drop event needs an ondrop global event handler.
... the following code snippet shows how this is done with a <div> element: <div id="drop_zone" ondrop="drophandler(event);"> <p>drag one or more files to this drop zone ...</p> </div> typically, an application will include a dragover event handler on the drop tar
get element and that handler will turn off the browser's default drag behavior.
...And 4 more matches
MediaDevices - Web APIs
properties inherits properties from its parent interface, eventtar
get.
... methods inherits methods from its parent interface, eventtar
get.
...
getsupportedconstraints() returns an object conforming to mediatracksupportedconstraints indicating which constrainable properties are supported on the mediastreamtrack interface.
...And 4 more matches
MediaStream - Web APIs
each track is specified as an instance of mediastreamtrack.you can obtain a mediastream object either by using the constructor or by calling mediadevices.
getusermedia().
... properties this interface inherits properties from its parent, eventtar
get.
... methods this interface inherits methods from its parent, eventtar
get.
...And 4 more matches
MediaStreamConstraints.video - Web APIs
the mediastreamconstraints dictionary's video property is used to indicate what kind of video track, if any, should be included in the mediastream returned by a call to
getusermedia().
... = true | false | mediatrackconstraints; value the value of the video property can be specified as either of two types: boolean if a boolean value is specified, it simply indicates whether or not a video track should be included in the returned stream; if it's true, a video track is included; if no video source is available or if permission is not given to use the video source, the call to
getusermedia() will fail.
...this tells
getusermedia() that we require a video track, but we don't care about any specifics beyond that.
...And 4 more matches
MediaStream Image Capture API - Web APIs
first,
get a reference to a device by calling mediadevices.
getusermedia().
... the example below simply says give me whatever video device is available, though the
getusermedia() method allows more specific capabilities to be requested.
... navigator.mediadevices.
getusermedia({ video: true }) .then(mediastream => { // do something with the stream.
...And 4 more matches
Web Push API Notifications best practices - Web APIs
overview of web push notifications web push notifications (created using a combination of the notifications, push, and service worker apis) are part of the rising noise that product developers and marketers are using to
get attention for their sites.
...say your program manager found a hiccup in the approvals and wants to
get your feedback on something before she proceeds.
... after a few failed attempts to
get your attention, they send you an email, and your email app produces a push notification that successfully alerts you, even though your mail web app is not open.
...And 4 more matches
RTCPeerConnection.addTrack() - Web APIs
instead, the streams are simply a way to group tracks to
gether on the receiving end of the connection, making sure they are synchronized.
... here's an example showing a function that uses
getusermedia() to obtain a stream from a user's camera and microphone, then adds each track from the stream to the peer connection, without specifying a stream for each track: async opencall(pc) { const gumstream = await navigator.mediadevices.
getusermedia( {video: true, audio: true}); for (const track of gumstream.
gettracks()) { pc.addtrack(track); } } the resul...
... for example, consider this function that an application might use to begin streaming a device's camera and microphone input over an rtcpeerconnection to a remote peer: async opencall(pc) { const gumstream = await navigator.mediadevices.
getusermedia( {video: true, audio: true}); for (const track of gumstream.
gettracks()) { pc.addtrack(track, gumstream); } } the remote peer might then use a track event handler that looks like this: pc.ontrack = ({streams: [stream]} => videoelem.srcobject = stream; this sets the video element's current stream to the one that contains the track that's been added to ...
...And 4 more matches
Using the Resource Timing API - Web APIs
resource loading phases an application can
get timestamps for the various phases of resource loading such as redirection, dns lookup, and tcp connection setup.
... function calculate_load_times() { // check performance support if (performance === undefined) { console.log("= calculate load times: performance not supported"); return; } //
get a list of "resource" performance entries var resources = performance.
getentriesbytype("resource"); if (resources === undefined || resources.length <= 0) { console.log("= calculate load times: there are no `resource` performance records"); return; } console.log("= calculate load times"); for (var i=0; i < resources.length; i++) { console.log("== resource[" + i + "] - " + res...
...start until response end time = " + t); } } resource size measurements the size of an application's resources can affect an application's performance so
getting accurate data on resource size can be important (especially for non-hosted resources).
...And 4 more matches
SVGCircleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180"...
...And 4 more matches
SVGGeometryElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180"...
...And 4 more matches
SpeechSynthesis - Web APIs
properties speechsynthesis also inherits properties from its parent interface, eventtar
get.
... methods speechsynthesis also inherits methods from its parent interface, eventtar
get.
... speechsynthesis.
getvoices() returns a list of speechsynthesisvoice objects representing all the available voices on the current device.
...And 4 more matches
WebGLRenderingContext.bindBuffer() - Web APIs
the webglrenderingcontext.bindbuffer() method of the webgl api binds a given webglbuffer to a tar
get.
... syntax void gl.bindbuffer(tar
get, buffer); parameters tar
get a glenum specifying the binding point (tar
get).
... exceptions only one tar
get can be bound to a given webglbuffer.
...And 4 more matches
Taking still photos with WebRTC - Web APIs
<div class="camera"> <video id="video">video stream not available.</video> <button id="startbutton">take photo</button> </div> this is straightforward, and we'll see how it ties to
gether when we
get into the javascript code.
...we'll
get that after the page is done loading.
...
getting element references first, we grab references to the major elements we need to be able to access.
...And 4 more matches
Visualizations with Web Audio API - Web APIs
read those pages to
get more information on how to use them.
... to capture data, you need to use the methods analysernode.
getfloatfrequencydata() and analysernode.
getbytefrequencydata() to capture frequency data, and analysernode.
getbytetimedomaindata() and analysernode.
getfloattimedomaindata() to capture waveform data.
...for example: analyser.
getbytetimedomaindata(dataarray); we now have the audio data for that moment in time captured in our array, and can proceed to visualize it however we like, for example by plotting it onto an html5 <canvas>.
...And 4 more matches
Using the Web Storage API - Web APIs
you can access these values like an object, or with the storage.
getitem() and storage.setitem() methods.
... these three lines all set the (same) colorsetting entry: localstorage.colorsetting = '#a4509b'; localstorage['colorsetting'] = '#a4509b'; localstorage.setitem('colorsetting', '#a4509b'); note: it's recommended to use the web storage api (setitem,
getitem, removeitem, key, length) to prevent the pitfalls associated with using plain objects as key-value stores.
...conversely, we might
get a legitimate quotaexceedederror, which means that we've used up all available storage space, but storage is actually available.
...And 4 more matches
WindowOrWorkerGlobalScope.setInterval() - Web APIs
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>setinterval/clearinterval example</title> <script> var nintervid; function changecolor() { nintervid = setinterval(flashtext, 1000); } function flashtext() { var oelem = document.
getelementbyid('my_box'); oelem.style.color = oelem.style.color == 'red' ?
...ecoration: underline; } #info { width: 180px; height: 150px; float: right; background-color: #eeeeff; padding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ } </style> </head> <body> <p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">copyleft 2012 by <a href="https://developer.mozilla.org/" tar
get="_blank">mozilla developer network</a></p> <p id="controls" style="text-align: center;">[ <span class="intlink" onclick="otwexample1.play();">play</span> | <span class="intlink" onclick="otwexample1.pause();">pause</span> | <span class="intlink" onclick="otwexample1.terminate();">terminate</span> ]</p> <div id="info"> vivamus blandit massa ut metus mattis in fringilla lectus imperdiet.
...nunc e
get elit e
get velit pulvinar fringilla consectetur aliquam purus.
...And 4 more matches
Synchronous and asynchronous requests - Web APIs
var xhr = new xmlhttprequest(); xhr.open("
get", "/bar/foo.txt", true); xhr.onload = function (e) { if (xhr.readystate === 4) { if (xhr.status === 200) { console.log(xhr.responsetext); } else { console.error(xhr.statustext); } } }; xhr.onerror = function (e) { console.error(xhr.statustext); }; xhr.send(null); line 2 specifies true for its third parameter to indicate that the request should be handled asynchrono...
...*/) { var xhr = new xmlhttprequest(); xhr.callback = callback; xhr.arguments = array.prototype.slice.call(arguments, 2); xhr.onload = xhrsuccess; xhr.onerror = xhrerror; xhr.open("
get", url, true); xhr.send(null); } usage: function showmessage(message) { console.log(message + this.responsetext); } loadfile("message.txt", showmessage, "new message!\n\n"); the signature of the utility function loadfile declares (i) a tar
get url to read (via an http
get request), (ii) a function to execute on successful completion of the xhr operation, and (iii) an arbitrary list of...
... var xhr = new xmlhttprequest(); xhr.ontimeout = function () { console.error("the request for " + url + " timed out."); }; xhr.onload = function() { if (xhr.readystate === 4) { if (xhr.status === 200) { callback.apply(xhr, args); } else { console.error(xhr.statustext); } } }; xhr.open("
get", url, true); xhr.timeout = timeout; xhr.send(null); } notice the addition of code to handle the "timeout" event by setting the ontimeout handler.
...And 4 more matches
ARIA: document role - Accessibility
generally used in complex composite wid
gets or applications, the document role can inform assistive technologies to switch context to a reading mode: the document role tells assistive technologies with reading or browse modes to use the document mode to read the content contained within this element.
... <button>close</button> </div> this example shows a dialog wid
get with some controls and a section with some informational text that the assistive technology user can read when tabbing to it.
...this mode can be altered through various roles, including the wid
get and application roles.
...And 4 more matches
Accessibility Information for Web Authors - Accessibility
how-to's key-navigable custom dhtml wid
gets in mozilla & ie this document discusses how to use tabindex, element.focus() and onkeypress to make custom dhtml wid
gets such as menus or tree views keyboard accessible.
... accessible web page authoring ibm has put to
gether a simple, practical resource for web authors to learn accessibility the fast and painless way.
...you can
get accessibity report for errors, warnings.
...And 4 more matches
font-weight - CSS: Cascading Style Sheets
fallback weights if the exact weight given is unavailable, then the following rule is used to determine the weight actually rendered: if the tar
get weight given is between 400 and 500 inclusive: look for available weights between the tar
get and 500, in ascending order.
... if no match is found, look for available weights less than the tar
get, in descending order.
... if a weight less than 400 is given, look for available weights less than the tar
get, in descending order.
...And 4 more matches
Audio and video manipulation - Developer guides
var processor = { timercallback: function() { if (this.video.paused || this.video.ended) { return; } this.computeframe(); var self = this; settimeout(function () { self.timercallback(); }, 16); // roughly 60 frames per second }, doload: function() { this.video = document.
getelementbyid("my-video"); this.c1 = document.
getelementbyid("my-canvas"); this.ctx1 = this.c1.
getcontext("2d"); var self = this; this.video.addeventlistener("play", function() { self.width = self.video.width; self.height = self.video.height; self.timercallback(); }, false); }, computeframe: function() { this.ctx1.drawimage(this.video, 0, 0, this.width...
..., this.height); var frame = this.ctx1.
getimagedata(0, 0, this.width, this.height); var l = frame.data.length / 4; for (var i = 0; i < l; i++) { var grey = (frame.data[i * 4 + 0] + frame.data[i * 4 + 1] + frame.data[i * 4 + 2]) / 3; frame.data[i * 4 + 0] = grey; frame.data[i * 4 + 1] = grey; frame.data[i * 4 + 2] = grey; } this.ctx1.putimagedata(frame, 0, 0); return; } }; once the page has loaded you can call processor.doload() result this is a pretty simple example showing how to manipulate video frames using a canvas.
... html <video id="my-video" controls src="https://udn.realityripple.com/samples/6f/08625b424a.m4v"> </video> javascript var myvideo = document.
getelementbyid('my-video'); myvideo.playbackrate = 2; playable code <video id="my-video" controls="true" width="480" height="270"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /...
...And 4 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
this is somewhat like having date and time wid
gets both created for you and merged into one.
... note: also bear in mind that if such data is submitted via http
get, the colon character will need to be escaped for inclusion in the url parameters, e.g.
... you can also
get and set the date value in javascript using the htmlinputelement.value property, for example: var datecontrol = document.queryselector('input[type="datetime-local"]'); datecontrol.value = '2017-06-01t08:30'; there are several methods provided by javascript's date that can be used to convert numeric date information into a properly-formatted string, or you can do it manually.
...And 4 more matches
<input type="submit"> - HTML: Hypertext Markup Language
es in addition to the attributes shared by all <input> elements, submit button inputs support the following attributes: attribute description formaction the url to which to submit the form's data; overrides the form's action attribute, if any formenctype a string specifying the encoding type to use for the form data formmethod the http method (
get or post) to use when submitting the form.
... formnovalidate a boolean which, if present, means the form's fields will not be subjected to constraint validation before submitting the data to the server formtar
get the browsing context into which to load the response returned by the server after submitting the form formaction a string indicating the url to which to submit the data.
...permitted values are:
get a url is constructed by starting with the url given by the formaction or action attribute, appending a question mark ("?") character, then appending the form's data, encoded as described by formenctype or the form's enctype attribute.
...And 4 more matches
Browser detection using the user agent - HTTP
there are ways to develop your website to progressively enhance itself based on the availability of features rather than by tar
geting specific browsers.
...while user agent sniffing can sometimes detect these, not all devices are the same: some mobile devices have big screen sizes, some desktops have a small touchscreen, some people use smart tv's which are an entirely different ballgame alto
gether, and some people can dynamically change the width and height of their screen by flipping their tablet on its side!
... window) { hastouchscreen = true; // deprecated, but good fallback } else { // only as a last resort, fall back to user agent sniffing var ua = navigator.useragent; hastouchscreen = ( /\b(blackberry|webos|iphone|iemobile)\b/i.test(ua) || /\b(android|windows phone|ipad|ipod)\b/i.test(ua) ); } } if (hastouchscreen) document.
getelementbyid("examplebutton").style.padding="1em"; as for the screen size, simply use window.innerwidth and window.addeventlistener("resize", function(){ /*refresh screen size dependent things*/ }).
...And 4 more matches
Configuring servers for Ogg media - HTTP
handle http 1.1 byte range requests correctly in order to support seeking and playing back regions of the media that aren't yet downloaded, gecko uses http 1.1 byte-range requests to retrieve the media from the seek tar
get position.
... include regular key frames when the browser seeks through ogg media to a specified time, it has to seek to the nearest key frame before the seek tar
get, then download and decode the video from there until the requested tar
get time.
... note: of course, the more key frames you use, the larger your video file is, so you may need to experiment a bit to
get the right balance between file size and seek performance.
...And 4 more matches
Index - HTTP
35 csp: form-action csp, directive, http, security the http content-security-policy (csp) form-action directive restricts the urls which can be used as the tar
get of a form submissions from a given context.
...when this policy is enabled, the promise returned by mediadevices.
getusermedia() will reject with a notallowederror.
...when this policy is enabled, calls to
getcurrentposition() and watchposition() will cause those functions' callbacks to be invoked with a positionerror code of permission_denied.
...And 4 more matches
Grammar and types - JavaScript
this practice reduces the chances of bugs
getting into the code.
... the source text of javascript script
gets scanned from left to right, and is converted into a sequence of input elements which are tokens, control characters, line terminators, comments, or whitespace.
... if (true) { let y = 5; } console.log(y); // referenceerror: y is not defined variable hoisting another unusual thing about variables in javascript is that you can refer to a variable declared later, without
getting an exception.
...And 4 more matches
Using Promises - JavaScript
when that's the case, any callbacks added to promise2
get queued behind the promise returned by either successcallback or failurecallback.
...these
get logged to the console by the node runtime.
... the first mistake is to not chain things to
gether properly.
...And 4 more matches
Array.prototype.copyWithin() - JavaScript
syntax arr.copywithin(tar
get[, start[, end]]) parameters tar
get zero-based index at which to copy the sequence to.
... if negative, tar
get will be counted from the end.
... if tar
get is at or greater than arr.length, nothing will be copied.
...And 4 more matches
FinalizationRegistry.prototype.unregister() - JavaScript
the unregister unregisters a tar
get object from a finalizationregistry instance.
... syntax registry.unregister(unregistertoken); parameters unregistertoken the token used with the register method when registering the tar
get object.
... notes when a tar
get object has been reclaimed, it is no longer registered in the registry.
...And 4 more matches
Math.random() - JavaScript
use the web crypto api instead, and more precisely the window.crypto.
getrandomvalues() method.
...
getting a random number between 0 (inclusive) and 1 (exclusive) function
getrandom() { return math.random(); }
getting a random number between two values this example returns a random number between the specified values.
... function
getrandomarbitrary(min, max) { return math.random() * (max - min) + min; }
getting a random integer between two values this example returns a random integer between the specified values.
...And 4 more matches
Math.random() - JavaScript
use the web crypto api instead, and more precisely the window.crypto.
getrandomvalues() method.
...
getting a random number between 0 (inclusive) and 1 (exclusive) function
getrandom() { return math.random(); }
getting a random number between two values this example returns a random number between the specified values.
... function
getrandomarbitrary(min, max) { return math.random() * (max - min) + min; }
getting a random integer between two values this example returns a random integer between the specified values.
...And 4 more matches
JavaScript
we have put to
gether a course that includes all the essential information you need to work towards your goal.
...
get started tutorials learn how to program in javascript with guides and tutorials.
... standard objects
get to know standard built-in objects array, boolean, date, error, function, json, math, number, object, regexp, string, map, set, weakmap, weakset, and others.
...And 4 more matches
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
two apis, one goal the push api and notifications api are two separate apis, but they work well to
gether when you want to provide engaging functionality in your app.
...instead of showing the notification immediately though, best practice dictates that we should show the popup when the user requests it by clicking on a button: var button = document.
getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.requestpermission().then(function(result) { if(result === 'granted') { randomnotification(); } }); }); this shows a popup using the operating system’s own notifications service: when the user confirms to receive notifications, the app can then show them.
... registration.pushmanager.
getsubscription() .then( /* ...
...And 4 more matches
Exported WebAssembly functions - WebAssembly
when you call them, you
get some activity in the background to convert the arguments into types that wasm can work with (for example converting javascript numbers to int32), the arguments are passed to the function inside your wasm module, the function is invoked, and the result is converted and passed back to javascript.
... you can retrieve exported webassembly functions in two ways: by calling table.prototype.
get() on an existing table.
... either way, you
get the same kind of wrapper for the underlying function.
...And 4 more matches
Communicating using "port" - Archive of obsolete content
by supplying a tar
get for this function in the page-mod's constructor you can register to receive messages from the content script, and take a reference to the worker so as to emit messages to the content script.
... var pagemodscript = "window.addeventlistener('click', function(event) {" + " self.port.emit('click', event.tar
get.tostring());" + " event.stoppropagation();" + " event.preventdefault();" + "}, false);" + "self.port.on('warning', function(message) {" + "window.alert(message);" + "});" var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.port.on('click', function(html) { worker.port.emit('warning', 'do not click this again'); }); } }); in the add-on above there are two user-defined messages: click is sent from the page-mod to the add-on, when the us...
...the button sends the content script a message called "
get-first-para" when it is clicked: pageworker = require("sdk/page-worker").page({ contentscriptfile: require("sdk/self").data.url("listener.js"), contenturl: "http://en.wikipedia.org/wiki/chalk" }); require("sdk/ui/button/action").actionbutton({ id: "
get-first-para", label: "
get-first-para", icon: "./icon-16.png", onclick: function() { console.log("sending '
get-first-para'"); p...
...And 3 more matches
Porting the Library Detector - Archive of obsolete content
ctor.js')), onattach: function(worker) { worker.on('message', function(librarylist) { if (!worker.tab.libraries) { worker.tab.libraries = []; } librarylist.foreach(function(library) { if (worker.tab.libraries.indexof(library) == -1) { worker.tab.libraries.push(library); } }); if (worker.tab == tabs.activetab) { updatewid
getview(worker.tab); } }); } }); the content script is executed once for every window.onload event, so it will run multiple times when a single page containing multiple iframes is loaded.
... implementing the user interface showing the library array the wid
get module is a natural fit for displaying the library list.
...the wid
get must be able to display different content for different windows, so we'll use the wid
getview object.
...And 3 more matches
clipboard - Archive of obsolete content
interact with the system clipboard, setting and
getting its contents.
... examples set and
get the contents of the clipboard.
... var clipboard = require("sdk/clipboard"); clipboard.set("lorem ipsum dolor sit amet"); var contents = clipboard.
get(); set the clipboard contents to some html.
...And 3 more matches
tabs - Archive of obsolete content
on("deactivate", logdeactivate); tab.on("close", logclose); } function logshow(tab) { console.log(tab.url + " is loaded"); } function logactivate(tab) { console.log(tab.url + " is activated"); } function logdeactivate(tab) { console.log(tab.url + " is deactivated"); } function logclose(tab) { console.log(tab.url + " is closed"); } tabs.on('open', onopen); manipulate a tab you can
get and set various properties of tabs (but note that properties relating to the tab's content, such as the url, will not contain valid values until after the tab's ready event fires).
... here's an example converting from a high-level tab to a xul tab and then back the other way: var { modelfor } = require("sdk/model/core"); var { viewfor } = require("sdk/view/core"); var tabs = require("sdk/tabs"); var tab_utils = require("sdk/tabs/utils"); function maphighleveltolowlevel(tab) { //
get the xul tab that corresponds to this high-level tab var lowleveltab = viewfor(tab); // now we can, for example, access the tab's content directly var browser = tab_utils.
getbrowserfortab(lowleveltab); console.log(browser.contentdocument.body.innerhtml); //
get the high-level tab back from the xul tab var highleveltab = modelfor(lowleveltab); console.log(highleveltab.url); } tabs.on...
... example //
get the active tab's title.
...And 3 more matches
core/namespace - Archive of obsolete content
also, multiple namespaces can be used with one object: // ./wid
get.js let { cu } = require('chrome'); let { ns } = require('sdk/core/namespace'); let { view } = require('./view'); // note this is completely independent from view's internal namespace object.
... let sandboxes = ns(); function wid
get(options) { let { element, contentscript } = options; let wid
get = object.create(wid
get.prototype); view.call(wid
get, options.element); sandboxes(wid
get).sandbox = cu.sandbox(element.ownerdocument.defaultview); // ...
... } wid
get.prototype = object.create(view.prototype); wid
get.prototype.postmessage = function postmessage(message) { let { sandbox } = sandboxes(this); sandbox.postmessage(json.stringify(json.parse(message))); ...
...And 3 more matches
ui/button/action - Archive of obsolete content
this will cause the button to generate the click event: var { actionbutton } = require('sdk/ui/button/action'); var button = actionbutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" }, onclick: function(state) { console.log("you clicked '" + state.label + "'"); } }); button.click(); state()
get or set the button's state for a specific window or tab.
...this is an alternative way to set or
get the global state.
...({ id: "default-label", label: "default label", icon: "./default.png", onclick: function(state) { if (button.label == "default label") { button.state(button, differentstate); } else { button.state(button, defaultstate); } console.log(button.state(button).label); console.log(button.state(button).icon); } }); parameters tar
get : button, tab, window, string to set or
get the global state, this needs to be the button instance.
...And 3 more matches
Display a Popup - Archive of obsolete content
the add-on consists of seven files: package.json: created when you run jpm init index.js: the main add-on code, that creates the button and panel
get-text.js: the content script that interacts with the panel content text-entry.html: the panel content itself, specified as html icon-16.png, icon-32.png, and icon-64.png: icons for the button in three different sizes the "index.js" looks like this: var data = require("sdk/self").data; // construct a panel, loading its content from the "text-entry.html" // file in the "data" directory, and loa...
...ding the "
get-text.js" script // into it.
... var text_entry = require("sdk/panel").panel({ contenturl: data.url("text-entry.html"), contentscriptfile: data.url("
get-text.js") }); // create a button require("sdk/ui/button/action").actionbutton({ id: "show-panel", label: "show panel", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); // show the panel when the user clicks the button.
...And 3 more matches
Dialogs and Prompts - Archive of obsolete content
for example, to add an apply button to your dialog, use the following code: <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="..." buttons="accept,cancel,extra1" ondialogaccept="onaccept();" ondialogextra1="onapply();" buttonlabelextra1="apply" buttonaccesskeyextra1="a"> <!-- content --> </dialog> you can even
get the element object for any of predefined buttons with gdialog.
getbutton(dlgtype);, where gdialog is the <dialog> element and dlgtype is one of the six button types listed above.
...to
get an idea of what it looks like, open options (or preferences) dialog in firefox or thunderbird (v1.0 and earlier only).
... programmatic button access if you want to access the accept ("ok") and cancel buttons from script, use this: // disable the ok and cancel btns document.documentelement.
getbutton("accept").disabled = true; document.documentelement.
getbutton("cancel").disabled = true; links dialog.xml — xbl bindings for <dialog> and <dialogheader> elements.
...And 3 more matches
Downloading Files - Archive of obsolete content
components.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); const webbrowserpersist = components.constructor("@mozilla.org/embedding/browser/nswebbrowserpersist;1", "nsiwebbrowserpersist"); var persist = webbrowserpersist(); var tar
getfile = services.dirsvc.
get("desk", ci.nsifile); tar
getfile.append("file.bin"); // obtain the privacy context of the browser window that the url // we are downloading comes from.
...var privacy = privatebrowsingutils.privacycontextfromwindow(urlsourcewindow); persist.persistflags = persist.persist_flags_from_cache | persist.persist_flags_replace_existing_files; persist.saveuri(uritosave, null, null, null, "", tar
getfile, privacy); if you don't need detailed progress information, you might be happier with nsidownloader.
...ng binary files with a progress listener to download a binary file with custom progress listener: components.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); const webbrowserpersist = components.constructor("@mozilla.org/embedding/browser/nswebbrowserpersist;1", "nsiwebbrowserpersist"); var persist = webbrowserpersist(); var tar
getfile = services.dirsvc.
get("desk", ci.nsifile); tar
getfile.append("file.bin"); var obj_uri = services.io.newuri(aurltodownload, null, null); // obtain the privacy context of the browser window that the url // we are downloading comes from.
...And 3 more matches
Rosetta - Archive of obsolete content
nevertheless, the increasing computational power of modern browsers to
gether with the introduction of typed arrays in ecmascript allow us, in theory, to build full virtual machines in pure ecmascript.
...|*| http://www.gnu.org/licenses/gpl-3.0.html |*| |*| syntax: |*| |*| rosetta.appendcompiler([ "text/x-csrc", "text/x-c" ], yourcompiler); |*| \*/ var rosetta = new (function () { function createscript (oscript, oxhr200) { var smimetype = oscript.
getattribute("type").tolowercase(), obaton = document.createcomment(" the previous code has been automatically translated from \"" + smimetype + "\" to \"text/ecmascript\".
..."" : odicts[smimetype](oscript.text); obaton.parentnode.insertbefore(ocompiled, obaton); } function reqerror (oerror) { throw new urierror("the script " + oerror.tar
get.src + " is not accessible."); } function reqsuccess () { createscript(this.refscript, this); } function
getsource (oscript) { var oreq = new xmlhttprequest(); oreq.onload = reqsuccess; oreq.onerror = reqerror; oreq.refscript = oscript; oreq.open("
get", oscript.src, true); oreq.send(null); } function parsescript (oscript) { if (oscript.hasattribute("t...
...And 3 more matches
Sidebar - Archive of obsolete content
to access your sidebar's window or document objects, you need to use the contentwindow or contentdocument properties of document.
getelementbyid("sidebar") respectively.
... for example the code below calls a function defined in the sidebar's context: var sidebarwindow = document.
getelementbyid("sidebar").contentwindow; // verify that our sidebar is open at this moment: if (sidebarwindow.location.href == "chrome://yourextension/content/whatever.xul") { // call "yournotificationfunction" in the sidebar's context: sidebarwindow.yournotificationfunction(anyarguments); } testing which sidebar is open the sidebar content may contain different panels (bookmarks, history, webpanel, etc.) and sometimes one wants to only act on the sidebar when it contains a specific panel.
... the good practice to determine which sidebar is open at a time is by testing in location property, which is a chrome url: var sidebarwindow = document.
getelementbyid("sidebar").contentwindow; if (sidebarwindow.location.href == "chrome://yourextension/content/whatever.xul") { // act on the sidebar content } for example to test if the web panel from firefox is open: var sidebarwindow = document.
getelementbyid("sidebar").contentwindow; if (sidebarwindow.location.href == "chrome://browser/content/web-panels.xul") { // act on the sidebar content only if it is the web panels } accessing the browser.xul window from a sidebar script see accessing the elements of the top-level document from a child window section of working with windows in chrome code.
...And 3 more matches
Displaying web content in an extension without security issues - Archive of obsolete content
the issue that is commonly overlooked here is that the rss feed could contain some malicious javascript code and it would then execute with the privileges of the extension — meaning that it would
get full access to the browser (cookies, history etc) and to user’s files.
...not giving privileges to documents that contain untrusted data the privileges that a document
gets depend on where it comes from.
...so in the simplest case you would have: <iframe type="content" src="data:text/html,%3chtml%3e%3cbody%3e%3c/body%3e%3c/html%3e"/> but usually you don’t want to start with an empty document, you would rather want to load some template into the frame: var request = new xmlhttprequest(); request.open("
get", "chrome://foo/content/template.html", false); request.send(null); frame.setattribute("src", "data:text/html," + encodeuricomponent(request.responsetext)); that way you can have the template in your extension but still strip it off all privileges when it is loaded in a frame.
...And 3 more matches
Enhanced Extension Installation - Archive of obsolete content
the extension manager loads the xml/rdf datasources (this is allowable and necessary because a major change has happened) and
gets a list of all items that need to be installed (tracked using a tobeinstalled flag on the item in the datasource).
...("active" items are items that are enabled.) a whole new world install locations we have several tar
gets for where items can be installed.
... the pending operations list is used by the install operation finalization routine (|_finishoperations|) to
get a list of items that are to be operated on.
...And 3 more matches
Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
the frozen string api does not have (or need) nsxpidlstring: - nsxpidlstring value; + nsstring value; ptr->
gettermethod(
getter_copies(value)); - const prunichar *strvalue = value; + // nsstring doesn't cast directly to prunichar*, use .
get()+ const prunichar *strvalue = value.
get(); the frozen string api doesn't accept a length for .truncate().
...the adopt and
getter_copies methods do not work on abstract strings.
... instead of passing
getter_copies(astring) to a method expecting a character pointer out parameter, you will need to use a temporary variable and copy the result.missing headers some headers are included from idl files only when mozilla_internal_api is defined (actually, they shouldn't be there at all).
...And 3 more matches
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
it might be possible to execute any retrieved jsonp code in an unprivileged sandbox (which is complicated!), but if you have a choice, just avoid jsonp alto
gether!
... someexistingobject.someproperty = "abc"; // we already demonstrated with with functions in a previous example alternative: object.defineproperty() for most objects it is possible to (re-)define properties with the object.defineproperty() api, which allows to not override values, but also lets you define
getters and setters.
... // do not use eval(document.
getelementbyid("mymenu").
getattribute("oncommand")); eval(document.
getelementbyid("mylabel").
getattribute("onclick")); alternative: dispatch real events dispatching real events has the added bonus that all other event listeners for that element (and the corresponding bubbling/capturing chain) will fire as well, so this method will have the closed resemblance to a real user event.
...And 3 more matches
Appendix D: Loading Scripts - Archive of obsolete content
xmlhttprequest = components.constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsixmlhttprequest", "open"); function loadscript(name, context) { // create the sandbox let sandbox = components.utils.sandbox(context, { sandboxprototype: context, wantxrays: false }); //
get the caller's filename let file = components.caller.stack.filename; // strip off any prefixes added by the sub-script loader // and the trailing filename let directory = file.replace(/.* -> |[^\/]+$/g, ""); let scriptname = directory + name; // read the script let xmlhttp = xmlhttprequest("
get", scriptname, false); xmlhttp.overridemimetype("text/plain"); xmlhtt...
...// the following may be used instead at the top-level: // // let context = this if (components.utils.
getglobalforobject) // gecko 2.x var context = components.utils.
getglobalforobject({}); else // gecko 1.x context = {}.__parent__; loadscript("script.js", context); the sub-script loader the mozijssubscriptloader can be used to load local scripts from the chrome:, resource:, and file: protocols into any javascript object.
...additionally, any properties of the tar
get object are available as variables in the script's global namespace, along with as any properties of the global associated with the tar
get object.
...And 3 more matches
Intercepting Page Loads - Archive of obsolete content
let doc = event.originaltar
get; if (doc instanceof htmldocument) { // is this an inner frame?
...you can also use these in conjunction with nsitraceablechannel to
get and modify the response text before it
gets to the original requester.
...ntainer.addeventlistener("tabclose", this, false); }, uninit : function() { gbrowser.browsers.foreach(function (browser) { this ._toggleprogresslistener(browser.webprogress, false); }, this); gbrowser.tabcontainer.removeeventlistener("tabopen", this, false); gbrowser.tabcontainer.removeeventlistener("tabclose", this, false); }, handleevent : function(aevent) { let tab = aevent.tar
get; let webprogress = gbrowser.
getbrowserfortab(tab).webprogress; this._toggleprogresslistener(webprogress, ("tabopen" == aevent.type)); }, _toggleprogresslistener : function(awebprogress, aisadd) { if (aisadd) { awebprogress.addprogresslistener(this, awebprogress.notify_all); } else { awebprogress.removeprogresslistener(this); } } this shouldn't be too hard to follow.
...And 3 more matches
Using the Stylesheet Service - Archive of obsolete content
getting such styles wrong can easily lead to very incorrect behavior, including crashes.
... adding a stylesheet to use the stylesheet service, you
get a reference to the service, create a uri and pass the uri to the stylesheet service's loadandregistersheet method.
... var sss = components.classes["@mozilla.org/content/style-sheet-service;1"] .
getservice(components.interfaces.nsistylesheetservice); var ios = components.classes["@mozilla.org/network/io-service;1"] .
getservice(components.interfaces.nsiioservice); var uri = ios.newuri("chrome://myext/content/myext.css", null, null); sss.loadandregistersheet(uri, sss.user_sheet); note: loadandregistersheet will load the stylesheet synchronously, so you should only call this method using local uris.
...And 3 more matches
XUL user interfaces - Archive of obsolete content
more specialized features can be built from parts by using xul to
gether with other technologies that you have seen in this tutorial: css style, javascript code, and xbl bindings.
...copy and paste the content from here, making sure that you scroll to
get all of it: <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="style7.css"?> <!doctype window> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="css
getting started - xul demonstration" onload="init();"> <script type="application/javascript" src="script7.js"/> <label class="head-1" value="xul demonstration"/> <vbox> <groupbox class="demo-group"> <caption label="day of week calculator"/> <grid> <colum...
...copy and paste the content from here, making sure that you scroll to
get all of it: /*** xul demonstration ***/ window { -moz-box-align: start; background-color: -moz-dialog; font: -moz-dialog; padding: 2em; } .head-1 { font-weight: bold; font-size: 200%; padding-left: 5px; } /* the group box */ .demo-group { padding: 1em; } .demo-group grid { margin-bottom: 1em; } .demo-group column { margin-right: .5em; } .demo-group row { mar...
...And 3 more matches
Creating a dynamic status bar extension - Archive of obsolete content
httprequest = new xmlhttprequest(); httprequest.open('
get', fullurl, true); httprequest.onload = inforeceived; httprequest.send(null); } the httprequest variable will contain an xmlhttprequest object.
...we open the request, specifying that we wish to perform an http "
get" command with the url fullurl.
...inforeceived() when the server responds to our request, our the inforeceived() function, which is embedded inside refreshinformation(),
gets called automatically.
...And 3 more matches
Drag and Drop - Archive of obsolete content
the code for this wrapper can be found in a file named toolkit/content/nsdraganddrop.js nsdraganddrop.js which is contained in the wid
get-toolkit (or global) package.
...this can be retrieved by
getting the property event.tar
get during the event handler.
...this should be set to one of the following constants, or several added to
gether.
...And 3 more matches
Introducing the Audio API extension - Archive of obsolete content
xample</title> </head> <body> <audio id="audio-element" src="song.ogg" controls="true" style="width: 512px;"> </audio> <script> function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; } var audio = document.
getelementbyid('audio-element'); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> the mozaudioavailable event as the audio is played, sample data is made available to the audio layer and the audio buffer (size defined in mozframebufferlength)
gets filled with those samples.
...it's important to note that the samples are not separated by channels; they are all delivered to
gether.
...; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; } function audioavailable(event) { var framebuffer = event.framebuffer; var t = event.time; var text = "samples at: " + t + "\n"; text += framebuffer[0] + " " + framebuffer[1]; raw.innerhtml = text; } var raw = document.
getelementbyid('raw'); var audio = document.
getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> creating an audio stream it is also possible to create and setup an <audio> element for raw writing from script (i.e., without a src attrib...
...And 3 more matches
Space Manager High Level Design - Archive of obsolete content
during reflow, the space manager stores the space taken up by floats (updatespacemanager in nsblockframe) and provides information about the space available for other elements (
getavailablespace in nsblockreflowstate).
... the band of available space is searched (with nsblockreflowstate::
getavailablespace); the float frame that is
get from the passed nsfloatcache argument is reflowed and its rect is retrieved with
getrect; the floats margins are added; check if the float can be placed in the actual band: if not advance to the next band; check the float type and if it can be added to the space manager; align the float to its containing block top if rule css2/9.5.1/4 is not respec...
...ted; add the float using nsspacemanager::addrectregion compare the area that the float used to occupy with the area that it now occupies: if different, record the vertically affected interval using nsspacemanager::includeindamage use case 3: space manager is used to find available space to reflow into the nsblockframe makes use of the space manager indirectly to
get the available space to reflow a child block or inline frame into.
...And 3 more matches
The life of an HTML HTTP request - Archive of obsolete content
the parser then parses the stream it
gets via its streamlistener interface and converts it to nsiparsernodes which it places in the contentsink.
... the parser typically
gets data from the stream in 8kb blocks and parses these blocks, block by block.
... after every parsed block it passes the parsed data as nsiparsernodes to the contentsink unless the parser has been temporarily blocked, in wich case it waits until it
gets unblocked before parsing the cached data it has receieved while being blocked.
...And 3 more matches
Venkman Introduction - Archive of obsolete content
if you don't already have venkman or would like to upgrade, you can easily
get the latest version from firefox add-ons.
...
getting acquainted with venkman's user interface toolbar the toolbar is located at the top of the debugger.
...this is the same text you would
get from the tosource method of the function prototype.
...And 3 more matches
Binding Implementations - Archive of obsolete content
these functions are called
getters and setters in xbl.
... properties with
getters and setters can define them using on
get and onset attributes, or using the more verbose
getter and setter elements.
... if both the attribute form and the element form are used to specify a
getter or setter, then the element form is ignored.
...And 3 more matches
Example Sticky Notes - Archive of obsolete content
fax - respond today.</p></div> <div class="sticker"><p>don't for
get the eggs!</p></div> <div class="sticker"><p>the new project - who's on charge?</p></div> <div class="sticker"><p>learn more about xbl.</p></div> <p style="clear: left"><a href="http://validator.w3.org/check?uri=referer"><img src="https://udn.realityripple.com/samples/e2/dd625ef1cd.png" width="88" height="31" alt="valid html 4.01" style="border: 1px none"></a></p> </body> </html> ...
...you add a binding file using -moz-binding style rule and you address a particular binding by its id: -moz-binding: url(notes.xml#default) this id is local within the binding file (not visible in the tar
get document dom tree).
... unlike <field> these are really two functions (
getter and setter).
...And 3 more matches
Dynamically modifying XUL-based user interface - Archive of obsolete content
the most well known dom method is probably document.
getelementbyid(), which returns an element, given its id.
...var element = document.
getelementbyid("someelement"); while(element.haschildnodes()){ element.removechild(element.firstchild); } inserting menu items to a menu this example adds two new menu items to a <menupopup>: to the start and to the end of it.
... function createmenuitem(alabel) { const xul_ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var item = document.createelementns(xul_ns, "menuitem"); // create a new xul menuitem item.setattribute("label", alabel); return item; } var popup = document.
getelementbyid("mypopup"); // a <menupopup> element var first = createmenuitem("first item"); var last = createmenuitem("last item"); popup.insertbefore(first, popup.firstchild); popup.appendchild(last); you can also use appendchild() and insertbefore() to move existing elements.
...And 3 more matches
Reading from Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files |
getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes).
...reading data from a file involves
getting a reference to a file and then creating an input stream to read from it.
...to create an input stream, first
get a reference to a nsifile, and then use nsiscriptableio.newinputstream() to open a stream for reading from it.
...And 3 more matches
ContextMenus - Archive of obsolete content
however, the event will also fire when the label is right-clicked for instance, so the event handler should check to make sure that the tar
get of the contextmenu event is what is desired.
... function checkcontextmenu(event) { if (event.tar
get.localname == "textbox") event.preventdefault(); } function init() { var container = document.
getelementbyid("container"); container.addeventlistener("contextmenu", checkcontextmenu, true); } the 'checkcontextmenu' function checks to see if the textbox was the tar
get of the context menu and, if so, cancels the event using the preventdefault method.
... menu separators to group menu items to
gether for better visual clarity, use a menu separator.
...And 3 more matches
The Joy of XUL - Archive of obsolete content
key features and benefits powerful wid
get-based markup language the goal of xul is to build cross platform applications, in contrast with dhtml which is intended for developing web pages.
... xbl the extensible bindings language (xbl) is a markup language that defines special new elements, or "bindings" for xul wid
gets.
... with xbl, developers can define new content for xul wid
gets, add additional event handlers to a xul wid
get, and add new interface properties and methods.
...And 3 more matches
Modifying a XUL Interface - Archive of obsolete content
for example, the following will add a button to a xul window: example 1 : source view <script> function addbutton(){ var abox = document.
getelementbyid("abox"); var button = document.createelement("button"); button.setattribute("label","a new button"); abox.appendchild(button); } </script> <box id="abox" width="200"> <button label="add" oncommand="addbutton();"/> </box> this example has two parts a box container element in xul.
... the button element has two attributes "label" and "oncommand" a javascript function named "addbutton()" this script first
gets a reference to the box with
getelementbyid(), which is the container to add a new button to.
... the function
getelementbyid() does not know that the box it is looking for happens to be containing the tag that has the oncommand attribute that referenced it.
...And 3 more matches
browser - Archive of obsolete content
get firefox most of the properties and methods of the browser will rarely be used and can only be called from chrome urls.
...subdocuments of chrome documents are of chrome type, unless the container element (one of iframe, browser or editor) has one of the special type attribute values (the common ones are content, content-tar
getable and content-primary) indicating that the subdocument is of content type.
... content-tar
getable one browser among many for content.
...And 3 more matches
caption - Archive of obsolete content
properties accesskey type: character
gets and sets the value of the accesskey attribute.
... crop type: string
gets and sets the value of the crop attribute.
... image type: image url
gets and sets the value of the image attribute.
...And 3 more matches
label - Archive of obsolete content
properties accesskey type: character
gets and sets the value of the accesskey attribute.
... control type: element id
gets and sets the value of the control attribute.
... crop type: string
gets and sets the value of the crop attribute.
...And 3 more matches
menu - Archive of obsolete content
attributes acceltext, accesskey, allowevents, command, crop, disabled, image, label, menuactive, open, sizetopopup, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, itemcount, label, labelelement, menupopup, open, parentcontainer, selected, tabindex, value methods appenditem,
getindexofitem,
getitematindex, insertitemat, removeitemat style classes menu-iconic example <menubar id="sample-menubar"> <menu id="file-menu" label="file"> <menupopup id="file-popup"> <menuitem label="new"/> <menuitem label="open"/> <menuitem label="save"/> <menuseparator/> <menuitem label="exit"/> </menupopup> </menu> <menu id="edit-menu" label="edi...
...for those elements, setattribute("value", myvalue) and
getattribute("value") do not access or affect the contents displayed to the user.
... value type: string
gets and sets the value of the value attribute.
...And 3 more matches
notificationbox - Archive of obsolete content
finding the current notification box within a firefox extension, you can retrieve the current notification box for a specific tab by calling the global function
getnotificationbox(): notifybox = chromewin.
getnotificationbox(notifywindow) notifybox =
getnotificationbox(notifywindow) // applies to current context's window object here, chromewin is the xul window (usually just window), and notifywindow is the web content window for the tab you want to find the notification box for.
... also it is possible to call function with the same name (they are different) of global object gbrowser: notifybox = gbrowser.
getnotificationbox() examples <notificationbox flex="1"> <browser src="http://www.mozilla.org"/> </notificationbox> there is a more complex code available in the code snippets area.
... properties currentnotification, allnotifications, notificationshidden methods appendnotification,
getnotificationwithvalue, removeallnotifications, removecurrentnotification, removenotification, removetransientnotifications, attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, w...
...And 3 more matches
window - Archive of obsolete content
you can use this as a parameter to
getelementbyid() and other dom functions and to reference the element in style sheets.
... this attribute is used to save and restore the state of a window (to
gether with the persist attribute) and for css styles (e.g.
... to
get the window state from javascript code, use window.windowstate.
...And 3 more matches
CommandLine - Archive of obsolete content
h_qi(aiid) { if (aiid.equals(nsicommandlinehandler) || aiid.equals(nsifactory) || aiid.equals(nsisupports)) return this; throw components.results.ns_error_no_interface; }, /* nsicommandlinehandler */ handle : function clh_handle(acmdline) { var observerservice = components.classes["@mozilla.org/observer-service;1"] .
getservice(components.interfaces.nsiobserverservice); observerservice.notifyobservers(acmdline, "commandline-args-changed", null); }, helpinfo : " -test <value> a test attribute\n", /* nsifactory */ createinstance : function mdh_ci(aouter, aiid) { if (aouter != null) { throw components.results.ns_error_no_aggregation; } return this.queryinterface(aiid); },...
... lockfactory : function mdh_lock(alock) { /* no-op */ } }; var apphandlermodule = { /* nsisupports */ queryinterface : function mod_qi(aiid) { if (aiid.equals(nsimodule) || aiid.equals(nsisupports)) return this; throw components.results.ns_error_no_interface; }, /* nsimodule */
getclassobject : function mod_gch(acompmgr, acid, aiid) { if (acid.equals(class_id)) return apphandler.queryinterface(aiid); throw components.results.ns_error_failure; }, registerself : function mod_regself(acompmgr, afilespec, alocation, atype) { var compreg = acompmgr.queryinterface(nsicomponentregistrar); compreg.registerfactorylocation(class_id, class_name, contract_id, afilespec, alocation, atype); ...
... var catman = components.classes["@mozilla.org/categorymanager;1"] .
getservice(nsicategorymanager); catman.addcategoryentry("command-line-handler", cld_category, contract_id, true, true); }, unregisterself : function mod_unreg(acompmgr, alocation, atype) { var compreg = acompmgr.queryinterface(nsicomponentregistrar); compreg.unregisterfactorylocation(class_id, alocation); var catman = components.classes["@mozilla.org/categorymanager;1"] .
getservice(nsicategorymanager); catman.deletecategoryentry("command-line-handler", cld_category); }, canunload : function (acompmgr) { return true; } }; function ns
getmodule(acompmgr, afilespec) { return apphandlermodule; } creat...
...And 3 more matches
NPN_PostURLNotify - Archive of obsolete content
syntax #include <npapi.h> nperror npn_posturlnotify(npp instance, const char* url, const char* tar
get, uint32 len, const char* buf, npbool file, void* notifydata); parameters the function has the following parameters: instance current plug-in instance, specified by the plug-in.
... tar
get tar
get window, specified by the plug-in.
... for values, see npn_
geturl.
...And 3 more matches
Object.prototype.__noSuchMethod__ - Archive of obsolete content
// doesn't work with multiple inheritance objects as parents function nomethod(name, args) { var parents = this.__parents_; // go through all parents for (var i = 0; i < parents.length; i++) { // if we find a function on the parent, we call it if (typeof parents[i][name] == 'function') { return parents[i][name].apply(this, args); } } // if we
get here, the method hasn't been found throw new typeerror; } // used to add a parent for multiple inheritance function addparent(obj, parent) { // if the object isn't initialized, initialize it if (!obj.__parents_) { obj.__parents_ = []; obj.__nosuchmethod__ = nomethod; } // add the parent obj.__parents_.push(parent); } an example of using this idea is shown below.
... // example base class 1 function namedthing(name) { this.name = name; } namedthing.prototype = {
getname: function() { return this.name; }, setname: function(newname) { this.name = newname; } } // example base class 2 function agedthing(age) { this.age = age; } agedthing.prototype = {
getage: function() { return this.age; }, setage: function(age) { this.age = age; } } // child class.
... inherits from namedthing and agedthing // as well as defining address function person(name, age, address){ addparent(this, namedthing.prototype); namedthing.call(this, name); addparent(this, agedthing.prototype); agedthing.call(this, age); this.address = address; } person.prototype = {
getaddr: function() { return this.address; }, setaddr: function(addr) { this.address = addr; } } var bob = new person('bob', 25, 'new york'); console.log('
getage is ' + (('
getage' in bob) ?
...And 3 more matches
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
it's a well-known maxim that if you stick around long enough, you
get a chance to see the tides of history turn.
... if you're lucky, you
get to ride the surf that second time around without being knocked over by the waves.
...it's like a scuba enthusiast
getting to join jacques cousteau on a dive, even down to the required time travel.
...And 3 more matches
Troubleshooting XForms Forms - Archive of obsolete content
if you
get errors there, do not expect your form to work.
...ensure that your <html> element contains the supported namespace declaration: xmlns="http://www.w3.org/1999/xhtml" (instead of the newer, unratified version, xhtml 2.0, located at http://www.w3.org/2002/06/xhtml2 ) inline instance, no controls
get bound have you remembered to use the correct namespace for the instance nodes?
... any instance, no controls
get bound if no controls show with either inline instance or an <xf:instance src="...">, check the following: as with inline instance, make sure the instance of the form control ref binding expression matches the namespace of the data.
...And 3 more matches
XForms Select1 Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of wid
get(s) to use to represent this control.
... representations the xforms select1 element can be represented by the following wid
gets for the specified appearance attribute values: combobox - default representation (xhtml/xul) listbox - used when appearance = 'compact' (xhtml/xul) radio group - used when appearance = 'full' (xhtml/xul) combobox displaying a combobox is the default representation (xhtml/xul).
... xhtml wid
get characteristics analogous wid
gets is <html:select/> visual grouping by choices element is supported selection="open" is supported if incremental attribute value is false, the bound node is updated when the select1 control is blurred (i.e.
...And 3 more matches
Implementing controls using the Gamepad API - Game development
contains the xbox 360 button layout: buttons: [ 'dpad-up','dpad-down','dpad-left','dpad-right', 'start','back','axis-left','axis-right', 'lb','rb','power','a','b','x','y', ], this can be different for other types of gamepads like the ps3 controller (or a no-name, generic one), so you have to be careful and not just assume the button you're expecting will be the same button you'll actually
get.
... next, we set up two event listeners to
get the data: window.addeventlistener("gamepadconnected", gamepadapi.connect); window.addeventlistener("gamepaddisconnected", gamepadapi.disconnect); due to security policy, you have to interact with the controller first while the page is visible for the event to fire.
...o update the actual status of the gamepad object regularly: update: function() { // clear the buttons cache gamepadapi.buttonscache = []; // move the buttons status from the previous frame to the cache for(var k=0; k<gamepadapi.buttonsstatus.length; k++) { gamepadapi.buttonscache[k] = gamepadapi.buttonsstatus[k]; } // clear the buttons status gamepadapi.buttonsstatus = []; //
get the gamepad object var c = gamepadapi.controller || {}; // loop through buttons and push the pressed ones to the array var pressed = []; if(c.buttons) { for(var b=0,t=c.buttons.length; b<t; b++) { if(c.buttons[b].pressed) { pressed.push(gamepadapi.buttons[b]); } } } // loop through axes and push their values to the array var axes = []; if(c.axes) { ...
...And 3 more matches
Square tilemaps implementation: Static maps - Game development
note: when writing this article, we assumed previous reader knowledge of canvas basics such as how
get a 2d canvas context, load images, etc., which is all explained in the canvas api tutorial, as well as the basic information included in our tilemaps introduction article.
...we need to supply the atlas image, the coordinates and dimensions of the tile inside the atlas, and the tar
get coordinates and size (a different tile size in here would scale the tile.) so, for instance, to draw the tree tile, which is the third in the atlas, at the screen coordinates (128, 320), we would call drawimage() with these values: context.drawimage(atlasimage, 192, 0, 64, 64, 128, 320, 64, 64); in order to support atlases with multiple rows and columns, you would need to know how many rows an...
...
gettile(): a helper method that
gets the tile index in a certain position.
...And 3 more matches
XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
when used in conjunction with xpointer (firefox supports a subset of it, and is used in the code sample below), xinclude can also tar
get just specific portions of a document for inclusion.
...should become: var href =
getxmlbaselink (/* xlink sans xml:base */ xinclude.
getattribute('href'), /* element to query from */ xinclude); function resolvexincludes(docu) { // http://www.w3.org/tr/xinclude/#xml-included-items var xincludes = docu.
getelementsbytagnamens('http://www.w3.org/2001/xinclude', 'include'); if (xincludes) { for (i=0; i < xincludes.length; i++) { var xinclude = xincludes...
...[i]; var href = xinclude.
getattribute('href'); var parse = xinclude.
getattribute('parse'); var xpointer = xinclude.
getattribute('xpointer'); var encoding = xinclude.
getattribute('encoding'); // e.g., utf-8 // "text/xml or application/xml or matches text/*+xml or application/*+xml" before encoding (then utf-8) var accept = xinclude.
getattribute('accept'); // header "accept: "+x var acceptlanguage = xinclude.
getattribute('accept-language'); // "accept-language: "+x var xifallback = xinclude.
getelementsbytagnamens('http://www.w3.org/2001/xinclude', 'fallback')[0]; // only one such child is allowed if (href === '' || href === null) { // points to same document if empty (null is equivalent to empty stri...
...And 3 more matches
The box model - Learn web development
the inline flex container and paragraphs all run to
gether on one line rather than breaking onto new lines as they would do if they were displaying as block-level elements.
...the model defines how the different parts of a box — margin, border, padding, and content — work to
gether to create a box that you can see on the page.
...any padding and border is then added to that width and height to
get the total size taken up by the box.
...And 3 more matches
Beginner's guide to media queries - Learn web development
media feature rules after specifying the type, you can then tar
get a media feature with a rule.
...it enables the user to precisely tar
get a small area.
... how to choose breakpoints in the early days of responsive design, many designers would attempt to tar
get very specific screen sizes.
...And 3 more matches
How CSS is structured - Learn web development
in the
getting started with css, we linked an external stylesheet to our web page.
... selectors a selector tar
gets html to apply styles to content.
... we have already discovered a variety of selectors in the
getting started with css tutorial.
...And 3 more matches
Web fonts - Learn web development
irst of all, you have a @font-face block at the start of the css, which specifies the font file(s) to download: @font-face { font-family: "myfont"; src: url("myfont.woff"); } below this you can then use the font family name specified inside @font-face to apply your custom font to anything you like, as normal: html { font-family: "myfont", "bitstream vera serif", serif; } the syntax does
get a bit more complex than this; we'll go into more detail below.
...it is difficult to demonstrate this using an embedded live example, so instead, we would like you to follow the steps detailed in the below sections, to
get an idea of the process.
... after the generator has finished processing, you should
get a zip file to download — save it in the same directory as your html and css.
...And 3 more matches
What text editors are available? - Learn web development
ideally, you'd try as many editors as you can and
get a feel for what suits your workflow.
... but we'll give you some pointers for
getting started.
...in particular (if possible in your editor), try to: change syntax highlighting settings and colors play with indentation width, setting it to an appropriate setting for your needs check autosave and session saving settings configure any available plugins and investigate how to
get new ones change color schemes adjust view settings and see how you can change the layout of the views check what programming languages/technologies your editor supports while you're learning the default settings of most text editors should be fine to use, but it is important to become familiar with your chosen tools, so you can select the best one for your usage.
...And 3 more matches
How does the Internet work? - Learn web development
at its most basic, the internet is a large network of computers which communicate all to
gether.
...the various technologies that support the internet have evolved over time, but the way it works hasn't changed that much: internet is a way to connect computers all to
gether and ensure that, whatever happens, they find a way to stay connected.
...but it
gets complicated quickly.
...And 3 more matches
What are hyperlinks? - Learn web development
links can correlate any text string with a url, such that the user can instantly reach the tar
get document by activating the link.
... anchors most links tie two webpages to
gether.
... anchors tie two sections of one document to
gether.
...And 3 more matches
Dealing with files - Learn web development
previous overview:
getting started with the web next a website consists of many files: text content, code, stylesheets, media content, and so on.
... when you're building a website, you need to assemble these files into a sensible structure on your local computer, make sure they can talk to one another, and
get all your content looking right before you eventually upload them to a server.
...for these reasons, it is best to
get into the habit of writing your folder and file names lowercase with no spaces and with words separated by dashes, at least until you know what you're doing.
...And 3 more matches
What will your website look like? - Learn web development
previous overview:
getting started with the web next what will your website look like?
...for your first simple webpage, there's not much to sketch out, but you should
get in the habit of doing this now.
...graphic designers put to
gether the visuals of the website.
...And 3 more matches
Introduction to HTML - Learn web development
we have put to
gether a course that includes all the essential information you need to work towards your goal.
...
get started prerequisites before starting this module, you don't need any previous html knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content).
...both are parts of our
getting started with the web complete beginner's module.
...And 3 more matches
Images in HTML - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in
getting started with html.) objective: to learn how to embed simple images in html, annotate them with captions, and how html images relate to css background images.
...for example on the mac you can use cmd + i to
get the info display up for the image file.
...if you
get really stuck, press the show solution button to see an answer: playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> <img> </textarea> <div class="playable-...
...And 3 more matches
Video and audio content - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in
getting started with html) and images in html.
...we have provided you with sample audio and video files and example code for your own experimentation, in case you are unable to
get hold of your own.
...see choosing the right container in media container formats (file types) for help selecting the container file format best suited for your needs; similarly, see choosing a video codec in web video codec guide and choosing an audio codec in web audio codec guide for help selecting the first media codecs to use for your content and your tar
get audience.
...And 3 more matches
Handling text — strings in JavaScript - Learn web development
in this article, we'll look at all the common things that you really ought to know about strings when learning javascript, such as creating strings, escaping quotes in strings, and joining strings to
gether.
... if you don't do this, or miss one of the quotes, you'll
get an error.
... concatenating strings concatenate is a fancy programming word that means "join to
gether".
...And 3 more matches
Adding features to our bouncing balls demo - Learn web development
objective: to test comprehension of javascript objects and object-oriented constructs starting point to
get this assessment started, make a local copy of index-finished.html, style.css, and main-finished.js from our last article in a new directory in your local computer.
... note: if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
... hints and tips a couple of pointers before you
get started.
...And 3 more matches
Accessibility in React - Learn web development
tar
geting our elements in order to focus on an element in our dom, we need to tell react which element we want to focus on and how to find it.
... moving focus back to the edit button at first glance,
getting react to move focus back to our "edit" button when the edit is saved or cancelled appears deceptively easy.
...using pseudocode, our logic should be something like this: if (wasnoteditingbefore && iseditingnow) { focusoneditfield() } if (waseditingbefore && isnoteditingnow) { focusoneditbutton() } the react team had discussed ways to
get a component’s previous state, and has provided an example custom hook we can use for the job.
...And 3 more matches
Starting our Svelte Todo list app - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to
get to the current app state, run cd mdn-svelte-tutorial/02-starting-our-todo-app or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/02-starting-our-todo-app remember to run npm install && npm run dev to start your app in development mode.
...to
get rid of this, remove the name prop from src/main.js; it should now look like so: import app from './app.svelte' const app = new app({ tar
get: document.body }) export default app now if you check your testing server url you'll see our todos.svelte component being rendered: adding static markup for the moment we will start with a static markup representation of our app, so you can see...
... in subsequent articles we'll
get all these features working, and more besides.
...And 3 more matches
Understanding client-side web development tools - Learn web development
client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain to
gether, how to install them using package managers, and control them using the command line.
... we finish up by providing a complete toolchain example showing you how to
get productive.
...
get started now, with our "client-side tooling overview" prerequisites you should really learn the basics of the core html, css, and javascript languages first before attempting to use the tools detailed here.
...And 3 more matches
Tools and testing - Learn web development
once you've started to become comfortable programming with core web technologies (like html, css, and javascript), and you start to
get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from javascript frameworks, to testing and automation tools, and more besides.
... we have put to
gether a course that includes all the essential information you need to work towards your goal.
...
get started prerequisites you should really learn the basics of the core html, css, and javascript languages first before attempting to use many the tools detailed here.
...And 3 more matches
Learn web development
we have put to
gether a course that includes all the essential information you need to work towards your goal.
...
get started where to start complete beginner: if you are a complete beginner to web development, we'd recommend that you start by working through our
getting started with the web module, which provides a practical introduction to web development.
...
getting started with the web provides a practical introduction to web development for complete beginners.
...And 3 more matches
What to do and what not to do in Bugzilla
getting/upgrading bugzilla privileges if you want to
get bugzilla privileges (as described below), please see this page.
... if you need faster access to
get canconfirm or editbugs, especially in order to triage bugs or to participate in a bug day, then you can ask in #bmo on irc, or you may create a bug requesting permissions.
...the same is true for editbugs: leave comments with the information you'd like to be able to edit into the bug, and that will help you
get the editbugs permissions quickly.
...And 3 more matches
Chrome registration
the providers work to
gether to supply a complete set of chrome for a particular window, from the images on the toolbar buttons to the files that describe the text, content, and appearance of the window itself.
...if the above example had a packagename of camelcasepackage, you would
get an error message similar to "no chrome registered for chrome://camelcasepackage/path/to/files".
...if not, you would
get a message in the error console that the appversion flag was not recognized.
...And 3 more matches
Creating Custom Events That Can Pass Data
as of gecko 1.8, if your event names do not start with "nsdom" and their interfaces do not start with "nsidom" then you can for
get about passing data.
...be aware that this means your stuff won't work with everyone else's version of firefox unless you
get your patches into the trunk.
...var event = document.createevent("nsdommyevent"); event.initevent("nsdommyevent", true, true); window.dispatchevent(event); dispatching your event in c++ the following shows how to dispatch your event in c++: nscomptr<nsiwindowwatcher> wwatcher (do_
getservice("@mozilla.org/embedcomp/window-watcher;1")); // the window watcher will be able to give me a handle to the window nscomptr<nsidomwindow> awindow; // a handle to the window nscomptr<nsidomdocument> adoc; // a handle to the document nscomptr<nsidomeventtar
get> twindow; // the tar
get window (really the same window as above but you need // a different inteface :/ nscomptr<...
...And 3 more matches
Obsolete Build Caveats and Tips
therefore, instead of deleting all these nug
gets of information, it's best to collect them all here and remove them from the majority happy path documentation.
...to
get this code, do the following: # pull the mozilla source to the folder 20src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-2.0/ 20src cd 20src mozilla-1.9.2 (firefox 3.6) code for the firefox 3.6 (gecko 1.9.2) release lives in releases/mozilla-1.9.2.
... to
get this code, do the following: # pull the mozilla source to the folder 192src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-1.9.2/ 192src cd 192src mozilla-1.9.1 (firefox 3.5) code for the firefox 3.5 (gecko 1.9.1) release lives in releases/mozilla-1.9.1.
...And 3 more matches
mach
of course, in a random dir you just
get a cryptic error message to improve the experience.
... for full help: $ ./mach help try building the tree: $ ./mach build if you
get error messages, make sure that you have all of the build requisites for your system.
...if you don't use mach, you have to find another solution for the following problems: discovering what commands or make tar
gets are available (mach exposes everything through mach help while inside "mozilla-central" , else you'll just
get a cryptic error message) making more sense out of command output (mach offers terminal colorization and structured logging)
getting productive tools in the hands of others (mach "advertises" tools to people through mach help (unless it actually just gives you a cryptic error message) ...
...And 3 more matches
Using the Browser API
we did this with the following functions: function canmovebwd() { var request = browser.
getcangoback(); request.onsuccess = function() { if (request.result) { back.disabled = false; console.log("it's possible to navigate the history backward."); } else { back.disabled = true; console.log("it's not possible to navigate the history backward."); } } } function canmovefwd() { var request = browser.
getcangoforward(); request.onsuccess = function...
...these use htmliframeelement.
getcangoback() and htmliframeelement.
getcangoforward(), which return a boolean defining whether backward/forward navigation is possible at this point in the history.
...for example: function canmovebwd() { browser.
getcangoback().then(function(result) { if (result) { back.disabled = false; console.log("it's possible to navigate the history backward."); } else { back.disabled = true; console.log("it's not possible to navigate the history backward."); } }); } implementing the url bar the url bar for our simple browser is a <form> containing a single text <input>.
...And 3 more matches
IPDL Tutorial
ocess sendinit(pluginpath); } ~pluginparent() { sendshutdown(); } protected: bool recvready() { mobservers.notify("ready for action"); } }; here's how the ppluginchild might be used by a c++ implementor in the plugin process: class pluginchild : public ppluginchild { protected: void recvinit(const nscstring& pluginpath) { mpluginlibrary = pr_loadlibrary(pluginpath.
get()); sendready(); } void recvshutdown() { pr_unloadlibrary(mpluginlibrary); } private: prlibrary* mpluginlibrary; }; launching the subprocess and hooking these protocol actors into our ipc "transport layer" is beyond the scope of this document.
... because protocol messages are represented as c++ methods, it's easy to for
get that they are in fact asynchronous messages: by default the c++ method will return immediately, before the message has been delivered.
... using struct mozilla::void_t from "ipc/ipcmessageutils.h"; union variant { void_t; bool; int; double; nscstring; ppluginscriptableobject; }; this union generates a c++ interface which includes the following: struct variant { enum type { tvoid_t, tbool, tint, tdouble, tnscstring, tpplugionscriptableobject }; type type(); void_t&
get_void_t(); bool&
get_bool(); int&
get_int(); double&
get_double(); nscstring&
get_nscstring(); ppluginscriptableobject*
get_ppluginscriptableobject(); }; aunion.type() can be used to determine the type of a union received in an ipdl message handler, with the remaining functions granting access to its contents.
...And 3 more matches
Addon
instances can be created using the many
getaddon methods on the addonmanager object.
... overview of required methods void iscompatiblewith(in string appversion, in string platformversion) void findupdates(in updatelistener listener, in integer reason, in string appversion, in string platformversion) overview of optional methods void uninstall() void canceluninstall() boolean hasresource(in string path) nsiuri
getresourceuri(in string path) void
getdatadirectory(in datadirectorycallback callback) required properties attribute type description appdisabled read only boolean true if this add-on cannot be used in the application based on version compatibility, dependencies, and blocklisting.
...
getresourceuri()
gets an nsiuri to the file resource for this add-on.
...And 3 more matches
Add-on Manager
for example: components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.
getalladdons(function(aaddons) { // here aaddons is an array of addon objects }); // this code will execute before the code inside the callback notifications about changes to installed add-ons are dispatched to any registered addonlisteners.
... installing new add-ons new add-ons can be installed by using the
getinstallforfile() or
getinstallforurl() methods on the addonmanager object.
... these will pass an addoninstall instance to the callback, which can then be used to install the add-on: components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.
getinstallforurl("http://www.foo.com/test.xpi", function(ainstall) { // ainstall is an instance of addoninstall ainstall.install(); }, "application/x-xpinstall"); the progress of addoninstalls can be monitored using an installlistener.
...And 3 more matches
Add-on Repository
to import the add-on repository code module, use: components.utils.import("resource://gre/modules/addonrepository.jsm"); method overview string
getrecommendedurl() string
getsearchurl(in string searchterms) void cancelsearch() void retrieverecommendedaddons(in integer maxresults, in searchcallback callback) void searchaddons(in string searchterms, in integer maxresults, in searchcallback callback) properties property type description homepageurl string the url of the r...
... methods
getrecommendedurl() returns the url that can be visited to see recommended add-ons.
... string
getrecommendedurl(); parameters none.
...And 3 more matches
FileUtils.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/fileutils.jsm"); the file constructor if you have a path to a file (or directory) you want to obtain an nsifile for, you can do so using the file constructor, like this: var f = new fileutils.file(mypath); method overview nsifile
getfile(string key, array patharray, bool followlinks); nsifile
getdir(string key, array patharray, bool shouldcreate, bool followlinks); nsifileoutputstream openfileoutputstream(nsifile file, int modeflags); nsifileoutputstream openatomicfileoutputstream(nsifile file, int modeflags); nsifileoutputstream opensafefileoutputstream(nsifile file, int modeflags); ...
... perms_directory 0755 default permissions when creating directories methods
getfile()
gets a file at the specified hierarchy under a nsidirectoryservice key.
... nsifile
getfile( string key, array patharray, bool followlinks ); parameters key the nsidirectoryservice key to start from (see
getting special files for more info) patharray an array of path components to locate beneath the directory specified by key.
...And 3 more matches
Webapps.jsm
importing components.utils.import("resource://gre/modules/webapps.jsm"); // exported symbol is domapplicationregistry method overview init: function() loadcurrentregistry: function() notifyappsregistrystart: function notifyappsregistrystart() notifyappsregistryready: function notifyappsregistryready() sanitizeredirects: function sanitizeredirects(asource) _savewid
getsfullpath: function(amanifest, adestapp) appkind: function(aapp, amanifest) updatepermissionsforapp: function(aid, aispreinstalled) updateofflinecacheforapp: function(aid) installpreinstalledapp: function installpreinstalledapp(aid) removeifhttpsduplicate: function(aid) installsystemapps: function() loadandupdateapps: function() updatedatastore: function(aid, aorigin, amanifesturl, amanife...
...fest, aapp, aentrypoint) _unregisteractivitiesforapps: function(aappstounregister) _unregisteractivities: function(amanifest, aapp) _processmanifestforids: function(aids, arunupdate) observe: function(asubject, atopic, adata) addmessagelistener: function(amsgnames, aapp, amm) removemessagelistener: function(amsgnames, amm) formatmessage: function(adata) receivemessage: function(amessage)
getappinfo: function
getappinfo(aappid) broadcastmessage: function broadcastmessage(amsgname, acontent) registerupdatehandler: function(ahandler) unregisterupdatehandler: function(ahandler) notifyupdatehandlers: function(aapp, amanifest, azippath) _
getappdir: function(aid) _writefile: function(apath, adata) do
getlist: function() doexport: function(amsg, amm) doimport: function(amsg, amm) do...
...tion(adata, aid) _cloneapp: function(adata, anewapp, alocalemanifest, amanifest, aid, alocalid) _writemanifestfile: function(aid, aispackage, ajsonmanifest) _nextlocalid: function() _appidformanifesturl: function(auri) makeappid: function() _saveapps: function() _readmanifests: function(adata) _ensuresufficientstorage: function(anewapp) _checkdownloadsize: function(afreebytes, anewapp) _
getrequestchannel: function(afullpackagepath, aislocalfileinstall, aoldapp,) _senddownloadprogressevent: function(anewapp, aprogress) _
getpackage: function(arequestchannel, aid, aoldapp, anewapp) _computefilehash: function(afilepath) _sendappliedevent: function(aapp) _openandreadpackage: function(azipfile, aoldapp, anewapp, aislocalfileinstall,) _openpackage: function(azipfile, aapp, aislocalfi...
...And 3 more matches
Localizing XLIFF files for iOS
in the <file> tag, add the tar
get-language attribute with your locale code as the value (e.g., tar
get-language="xx-xx").
...each <file> tag requires the tar
get-language attribute with your locale code as the value (e.g., tar
get-language="xx-xx").
...here is an example of such a <trans-unit> <trans-unit id="add to bookmarks"> <source>add to bookmarks</source> </trans-unit> your translations must be contained inside <tar
get> child tags.
...And 3 more matches
Localizing with Mozilla Translator
getting started with mozillatranslator mt uses products as groups of localization files with a common root directory (for instance, you may have a product for thunderbird, other for seamonkey, other for dom, other for toolkit, etc.) you update your repository copy using your favorite repository tool, and then update the product(s) in mt.
... after translating those strings (if using the edit phrase dialog, you can
get translation suggestions for strings having an original text equal to existing translations), you can run some automated tests to detect typical errors.
... migrating contents when the directory structure changes overall, if you are a ''good'' mt user and you do things like: checking "keep original" flags for strings not needing translation, instead of just leaving the translation empty struggling to
get empty lists when running "untranslated strings" and "view fuzzy" if you are up to date in localization regularly running qa checks and trying to minimize them.
...And 3 more matches
Localizing without a specialized tool
get the source change your current directory to your working directory with the following command: $ cd /path/to/your/working/directory first, you will need to check out the sources of mozilla-1.9.2 to
gether with the en-us strings.
...
getting started with compare-locales you are going to need to create the structure of your localization, where, one-by-one, each of the files needing localization will be copied.
... (read more about tools at l10n:tools.) after you have downloaded your editor of choice, type the following command in the same path from above (l10n-mozilla-1.9.2/x-testing/browser/chrome/browser) $ edit l10n-mozilla-1.9.2/x-testing/browser/chrome/browser/aboutcerterror.dtd read the top of the file to
get any context on how to translate contained in the notes written by the developers or l10n-drivers.
...And 3 more matches
Mozilla Style System Documentation
these methods may all return an existing style context rather than a new one (see stylesetimpl::
getcontext), if there is a current style context with the same parent, that matches the same rules (a check that is easy because of the ruletree), and is for the same pseudo-element (or not for a pseudo-element, or a "non-element").
... dynamic changes describe nsframemanager::reresolvestylecontext and nsiframe::
getparentstylecontextframe ...</p> describe nscssframeconstructor::attributechanged hack for style attribute that avoids style context tree manipulation.
...
getting style data from a style context to
get style data from a style context, use the
getstyledata method to fill in a pointer to a style struct.
...And 3 more matches
Profiling with Xperf
heap profiling xperf has good tools for heap allocation profiling, but they have one major limitation: you can't build with jemalloc and
get heap events generated.
...firefox generates lots of events, so you may want to play with the buffersize/minbuffers/maxbuffers options as well to ensure that you don't
get dropped events.
...it's possible to
get around that by doing a simultaneous capture of non-heap data.
...And 3 more matches
NSPR build instructions
the easiest way to
get these tools is to install the mozillabuild package.
... build the libraries build the test programs for example, # check out the source tree from mercurial hg clone https://hg.mozilla.org/projects/nspr # create a build directory mkdir tar
get.debug cd tar
get.debug # run the configure script ../nspr/configure [optional configure options] # build the libraries gmake # build the test programs cd pr/tests gmake on mac os x, use make, which is gnu make.
... --tar
get=x86_64-pc-mingw32 for 64-bit builds on windows, when using the mozillabuild environment.
...And 3 more matches
NSS Sample Code Sample_2_Initialization of NSS
sample code 1 /* nspr headers */ #include <prthread.h> #include <pl
getopt.h> #include <prprf.h> /* nss headers */ #include <nss.h> #include <pk11func.h> #include "util.h" /* print a usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -d <dbdirpath> [-p <plainpasswc>]" " [-f <passwdffile>]\n\n", progname); fprintf(stderr, "%-15s specify a db directory path\n\n", "-d <dbdirpath>"); fprintf(stderr, "%-15s specify a plaintext password\n\n", "-p <plainpasswc>"); fprintf(stderr, "%-15s specify a password file\n...
...l be used to encrypt your keys.\n" "the password should be at least 8 characters long,\n" "and should contain at least one non-alphabetic character.\n\n"); output = fopen("/dev/tty", "w"); if (output == null) { pr_fprintf(pr_stderr, "error opening output terminal for write\n"); return null; } for (;;) { if (p0) port_free(p0); p0 =
getpassword(input, output, "enter new password: ", checkpassword); if (p1) port_free(p1); p1 =
getpassword(input, output, "re-enter password: ", checkpassword); if (p0 && p1 && !port_strcmp(p0, p1)) { break; } pr_fprintf(pr_stderr, "passwords do not ...
...= newpass; } else if (newpwfile) { newpwdata.source = pw_fromfile; newpwdata.data = null; } else { newpwdata.source = pw_none; newpwdata.data = null; } if (pk11_needuserinit(slot)) { newpw = initslotpassword(slot, pr_false, &pwdata); rv = pk11_initpin(slot, (char*)null, newpw); } else { for (;;) { oldpw =
getmodulepassword(slot, pr_false, &pwdata); if (pk11_checkuserpassword(slot, oldpw) != secsuccess) { if (pwdata.source == pw_none) { pr_fprintf(pr_stderr, "invalid password.
...And 3 more matches
nss tech note4
include these files #include "ssl.h" #include "cert.h"
get the handle of the cert associated with an ssl connection certcertificate* cert = ssl_peercertificate(prfiledesc *fd); if ssl client, this will
get you the server's cert handle; if ssl server, this will
get you the client's cert handle if client auth is enabled certcertificate* cert = ssl_localcertificate(prfiledesc *fd); ...
... if ssl client, this will
get you the client cert's handle, if client auth happened if ssl server, this will
get you the server's cert handle don't for
get to clean up the cert handle when you're done with it void cert_destroycertificate(certcertificate *cert); some info is readily available cert->subjectname (char*) cert->issuername (char*) cert->emailaddr (char*) or char *cert_
getcertificateemailaddress(certcertificate *cert); cert->keyusage (unsigned int) to break the issuer and subject names into components pass &(cert->issuer) or &(cert->subject) to the following functions char *cert_
getcommonname(certname *name); char *cert_
getcertemailaddress...
...(certname *name); char *cert_
getcountryname(certname *name); char *cert_
getlocalityname(certname *name); char *cert_
getstatename(certname *name); char *cert_
getorgname(certname *name); char *cert_
getorgunitname(certname *name); char *cert_
getdomaincomponentname(certname *name); char *cert_
getcertuid(certname *name); example code to illustrate access to the info is given below.
...And 3 more matches
NSS PKCS11 Functions
secmod_loadusermodule secmod_unloadusermodule secmod_openuserdb secmod_closeuserdb pk11_findcertfromnickname pk11_findkeybyanycert pk11_
getslotname pk11_
gettokenname pk11_ishw pk11_ispresent pk11_isreadonly pk11_setpasswordfunc secmod_loadusermodule load a new pkcs #11 module based on a modulespec.
...the caller should ask for one new database per call if the caller wants to
get meaningful information about the new database.
...pk11_
getslotname
gets the name of a slot.
...And 3 more matches
NSPR functions
call pr_
geterror to
get the error code of the last failed nss or nspr function.
... call pr_seterror to set the error code, which can be retrieved with pr_
geterror later.
... the nss functions port_
geterror and port_seterror are simply wrappers of pr_
geterror and pr_seterror.
...And 3 more matches
Utility functions
mxr deprecated 3.2 use nssbase64_encodeitem der_asciitotime mxr 3.5 and later der_decodetimechoice mxr 3.9 and later der_encode mxr 3.4 and later der_encodetimechoice mxr 3.9 and later der_generalizedtimetotime mxr 3.2 and later der_
getinteger mxr 3.2 and later der_generalizeddaytoascii mxr 3.11.7 and later der_lengths mxr 3.2 and later der_timetoutctime mxr 3.2 and later der_timechoicedaytoascii mxr 3.11.7 and later der_timetogeneralizedtime mxr 3.11.7 and later ...
... 3.2 and later dsau_encodedersigwithlen mxr 3.9 and later hash_begin mxr 3.4 and later hash_clone mxr 3.10 and later hash_create mxr 3.4 and later hash_destroy mxr 3.4 and later hash_end mxr 3.4 and later hash_
gethashobject mxr 3.2 and later hash_
gethashobjectbyoidtag mxr 3.8 and later hash_
gethashtypebyoidtag mxr 3.8 and later hash_
gettype mxr 3.12 and later hash_hashbuf mxr 3.10 and later hash_resultlen mxr 3.4 and later hash_resultlenbyoi...
...nd later port_arenarelease mxr 3.2 and later port_arenastrdup mxr 3.2 and later port_arenaunmark mxr 3.2 and later port_arenazalloc mxr 3.2 and later port_free mxr 3.2 and later port_freearena mxr 3.2 and later port_
geterror mxr 3.2 and later port_newarena mxr 3.2 and later port_realloc mxr 3.2 and later port_seterror mxr 3.2 and later port_setucs2_asciiconversionfunction mxr 3.2 and later port_setucs2_utf8conversionfunction mxr 3.2 and later port...
...And 3 more matches
Tutorial: Embedding Rhino
it just collects all the arguments and concatenates them to
gether.
...f("my args") = my arg using javascript variables to print out the value of x, we add the following code: object x = scope.
get("x", scope); if (x == scriptable.not_found) { system.out.println("x is not defined."); } else { system.out.println("x = " + context.tostring(x)); } calling javascript functions to
get the function f, call it, and print the result, we add this code: object fobj = scope.
get("f", scope); if (!(fobj instanceof function)) { system.out.println("f is undefined or not a function."); } els...
... public void jsconstructor(int a) { count = a; } class name the class name is defined by the
getclassname method.
...And 3 more matches
Functions
if a name definitely refers to an argument or local variable of the immediately enclosing function, it can be accessed using jsop_{
get,set,call}{arg,local} instructions.
... some of these can even be fused with other operations into combo instructions like jsop_
getargprop, jsop_forlocal, and jsop_inclocal.
...but a with block can: function f(s) { eval(s); print(s); // s can be loaded with
getarg with (obj) { print(s); // no
getarg here; s might refer to obj.s } } upvar instructions.
...And 3 more matches
JSPropertySpec
syntax struct jspropertyspec { struct selfhostedwrapper { void *unused; const char *funname; }; const char *name; int8 tinyid; // obsolete since jsapi 31 uint8_t flags; union { jsnativewrapper native; selfhostedwrapper selfhosted; }
getter; union { jsnativewrapper native; selfhostedwrapper selfhosted; } setter; /* obsolete since jsapi 29 */ /* added in jsapi 28 */ const char *selfhosted
getter; const char *selfhostedsetter; }; name type description name const char * name to assign the property.
... tinyid int8 obsolete since jsapi 31 unique id number for the property to aid in resolving
getproperty and setproperty method calls.
...the
getter/setter function is only used by one property).
...And 3 more matches
JS_DefineElement
syntax /* added in spidermonkey 38 (jsapi 32) */ bool js_defineelement(jscontext *cx, js::handleobject obj, uint32_t index, js::handlevalue value, unsigned attrs, jsnative
getter = nullptr, jsnative setter = nullptr); bool js_defineelement(jscontext *cx, js::handleobject obj, uint32_t index, js::handleobject value, unsigned attrs, jsnative
getter = nullptr, jsnative setter = nullptr); bool js_defineelement(jscontext *cx, js::handleobject obj, uint32_t index, js::handlestring value, unsigned attrs, jsnative
getter = nullptr, jsnative setter = nullptr); bool js_defineelement(jsc...
...ontext *cx, js::handleobject obj, uint32_t index, int32_t value, unsigned attrs, jsnative
getter = nullptr, jsnative setter = nullptr); bool js_defineelement(jscontext *cx, js::handleobject obj, uint32_t index, uint32_t value, unsigned attrs, jsnative
getter = nullptr, jsnative setter = nullptr); bool js_defineelement(jscontext *cx, js::handleobject obj, uint32_t index, double value, unsigned attrs, jsnative
getter = nullptr, jsnative setter = nullptr); /* obsolete since jsapi 32 */ js_defineelement(jscontext *cx, jsobject *obj, uint32_t index, jsval value, jspropertyop
getter, jsstrictpropertyop setter, unsigned attrs); ...
...
getter jsnative or jspropertyop
getproperty method for retrieving the current property value.
...And 3 more matches
JS_InitClass
so, for example, if this object is js_
getglobalobject(cx), then javascript code will be able to see the new class as a global name.
...these include native c functions for instance finalization, adding and deleting properties,
getting and setting property values, and enumerating, converting, and resolving properties.
... note: starting with spidermonkey 1.8, the prototype and constructor are set up with stub
getter and setter operations instead of class operations.
...And 3 more matches
Property attributes
mxr id search for jsprop_permanent jsprop_propop_accessors passed to js_define(uc)property* and js_defineelement if
getters/setters are jspropertyop/jsstrictpropertyop added in spidermonkey 38.
... mxr id search for jsprop_propop_accessors jsprop_
getter the property's
getter is a javascript function, not a c/c++ function.
... mxr id search for jsprop_
getter jsprop_setter the property's setter is a javascript function, not a c/c++ function.
...And 3 more matches
Parser API
tar
get string default: script a type of the parsing tar
get, can be either script or module.
... interface property <: node { type: "property"; key: literal | identifier; value: expression; kind: "init" | "
get" | "set"; } a literal property in an object expression can have either a string or number as its value.
... ordinary property initializers have a kind value "init";
getters and setters have the kind values "
get" and "set", respectively.
...And 3 more matches
Setting up an update server
don't for
get to restore the backup when you are done.
... note: it can be a bit tricky to
get the make_full_update.sh script to accept paths with spaces.
... if you've built your own mar, you can obtain its sha512 checksum by running the following command, which should work in linux, macos, or windows in the mozillabuild environment: shasum --algorithm 512 <filename> on windows, you can
get the exact file size in bytes for your mar by right clicking on it in the file explorer and selecting properties.
...And 3 more matches
How to build an XPCOM component in JavaScript
this tutorial will show you what you need to do to
get a component working in as few and as simple steps as possible.
...you can learn how to
get mac, linux, and windows versions of the gecko sdk by reading the article gecko sdk.
...the imported library contains functions for generating the module, factory, and the ns
getmodule and queryinterface functions for you.
...And 3 more matches
NS_ConvertASCIItoUTF16
class declaration method overview constructors operator=
get find rfind rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assi...
...gn assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar base classes nsautostring data members no public members.
...nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple
get prunichar*
get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...And 3 more matches
NS_ConvertUTF16toUTF8
class declaration a helper class that converts a utf-16 string to utf-8 method overview constructors operator=
get find rfind rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercas...
...eequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar base classes nscautostring data members no public members.
...arameters nscstring& str nsacstring_internal& operator=(char) - source parameters char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple
get char*
get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...And 3 more matches
NS_ConvertUTF8toUTF16
class declaration method overview constructors operator=
get find rfind rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assi...
...gn assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar base classes nsautostring data members no public members.
...nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple
get prunichar*
get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...And 3 more matches
NS_LossyConvertUTF16toASCII
class declaration a helper class that converts a utf-16 string to ascii in a lossy manner method overview constructors operator=
get find rfind rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequals...
...ascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar base classes nscautostring data members no public members.
...arameters nscstring& str nsacstring_internal& operator=(char) - source parameters char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple
get char*
get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...And 3 more matches
nsAutoString
names: nsautostring for wide characters nscautostring for narrow characters method overview constructors operator=
get find rfind rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endw...
...har equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar base classes nsfixedstring data members no public members.
...nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple
get prunichar*
get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...And 3 more matches
nsCAutoString
names: nsautostring for wide characters nscautostring for narrow characters method overview constructors operator=
get find rfind rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion ...
... lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar base classes nsfixedcstring data members no public members.
...nsacstring_internal& operator=(char) - source parameters char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple
get char*
get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...And 3 more matches
nsCString
method overview constructors operator=
get find rfind rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwrit...
...har equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar base classes nsacstring_internal data members no public members.
...arameters nscstring& str nsacstring_internal& operator=(char) - source parameters char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple
get char*
get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...And 3 more matches
nsDependentCString
method overview constructors assertvalid rebind operator=
get find rfind rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwrit...
...har equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar base classes nscstring data members no public members.
...arameters nscstring& str nsacstring_internal& operator=(char) - source parameters char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple
get char*
get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...And 3 more matches
nsDependentString
method overview constructors assertvalid rebind operator=
get find rfind rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endw...
...har equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar base classes nsstring data members no public members.
...nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple
get prunichar*
get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...And 3 more matches
nsFixedCString
class declaration method overview constructors operator=
get find rfind rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(c...
...har assign assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar base classes nscstring data members no public members.
...arameters nscstring& str nsacstring_internal& operator=(char) - source parameters char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple
get char*
get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...And 3 more matches
nsFixedString
class declaration method overview constructors operator=
get find rfind rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assi...
...gn assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar base classes nsstring data members no public members.
...nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple
get prunichar*
get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...And 3 more matches
nsPromiseFlatCString
class declaration method overview constructors operator=
get find rfind rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(c...
...har assign assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar base classes nscstring data members no public members.
...arameters nscstring& str nsacstring_internal& operator=(char) - source parameters char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const nsacstring_internal&) - source parameters nsacstring_internal& str nsacstring_internal& operator=(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple
get char*
get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...And 3 more matches
nsPromiseFlatString
class declaration method overview constructors operator=
get find rfind rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assi...
...gn assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar base classes nsstring data members no public members.
...nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple
get prunichar*
get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...And 3 more matches
nsString
method overview constructors operator=
get find rfind rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconversion appendwithconversion appendint appendfloat beginreading endreading beginwriting endw...
...har equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar base classes nsastring_internal data members no public members.
...nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsastring_internal&) - source parameters nsastring_internal& str nsastring_internal& operator=(const nssubstringtuple&) - source parameters nssubstringtuple& tuple
get prunichar*
get() const - source returns the null-terminated string find print32 find(const nscstring&, prbool, print32, print32) const - source search for the given substring within this string.
...And 3 more matches
nsIAccessibleImage
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void
getimageposition(in unsigned long coordtype, out long x, out long y); void
getimagesize(out long width, out long height); methods
getimageposition() returns the coordinates of the image accessible.
... this method is the same as nsiaccessible.
getbounds() excepting coordinate origin parameter.
... void
getimageposition( in unsigned long coordtype, out long x, out long y ); parameters coordtype specifies coordinates origin (for available constants refer to nsiaccessiblecoordinatetype).
...And 3 more matches
nsIAccessibleRole
role_pa
getab 37 represents a page tab, it is a child of a page tab list.
...also refer to role_pa
getablist.
... role_pa
getablist 60 represents a container of page tab controls.
...And 3 more matches
nsIAuthModule
inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void
getnexttoken([const] in voidptr aintoken, in unsigned long aintokenlength, out voidptr aouttoken, out unsigned long aouttokenlength); void init(in string aservicename, in unsigned long aserviceflags, in wstring adomain, in wstring ausername, in wstring apassword); void unwrap([const] in voidptr aintoken, in unsigned long aintokenlength, out voidptr aouttoken, out unsigned long aouttokenlength); void wrap([const] in voidptr aintoken, in unsigned long aintokenlength, in boolean confidential, out voidptr aouttoken, out uns...
... methods
getnexttoken() this method is called to
get the next token in a sequence of authentication steps.
... void
getnexttoken( [const] in voidptr aintoken, in unsigned long aintokenlength, out voidptr aouttoken, out unsigned long aouttokenlength ); parameters aintoken a buffer containing the input token (for example a challenge from a server).
...And 3 more matches
nsIDNSRecord
inherits from: nsisupports last changed in gecko 1.7 method overview prnetaddr
getnextaddr(in pruint16 aport); native code only!
... acstring
getnextaddrasstring(); boolean hasmore(); void rewind(); attributes attribute type description canonicalname acstring for example, www.mozilla.org --> rheet.mozilla.org.
... methods native code only!
getnextaddr this function copies the value of the next ip address into the given prnetaddr struct and increments the internal address iterator.
...And 3 more matches
nsIDNSService
method overview nsicancelable asyncresolve(in autf8string ahostname, in unsigned long aflags, in nsidnslistener alistener, in nsieventtar
get alistenertar
get); void init(); obsolete since gecko 1.8 nsidnsrecord resolve(in autf8string ahostname, in unsigned long aflags); void shutdown(); obsolete since gecko 1.8 attributes attribute type description myhostname autf8string read only.
... constants resolve flag constants various flags that may be ored to
gether to form the aflags parameter passed to asyncresolve() and resolve().
...nsicancelable asyncresolve( in autf8string ahostname, in unsigned long aflags, in nsidnslistener alistener, in nsieventtar
get alistenertar
get ); parameters ahostname the host name or ip-address-literal to resolve.
...And 3 more matches
nsIDragService
wid
get/nsidragservice.idlscriptable implements the drag service for handling drag and drop operations.
...the only exception is
getcurrentsession(), since there's currently no way to check for a drag in progress using standard dom methods or properties.
... nsidragsession
getcurrentsession( ) ; void invokedragsession( in nsidomnode adomnode, in nsisupportsarray atransferables, in nsiscriptableregion aregion, in unsigned long aactiontype ); void invokedragsessionwithimage(in nsidomnode adomnode, in nsisupportsarray atransferablearray, in nsiscriptableregion aregion, in unsigned long aactiontype, in nsidomnode aimage, in long aimagex, in long aimagey, in nsidomdragevent adragevent, in nsidomdatatransfer a...
...And 3 more matches
nsIEventListenerInfo
content/events/public/nsieventlistenerservice.idlscriptable an instance of this interface describes how an event listener was added to an event tar
get; these are returned by nsieventlistenerservice.
getlistenerinfofor, which provides a list of all the listeners to a given event tar
get.
... 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview nsisupports
getdebugobject(); astring tosource(); attributes attribute type description allowsuntrusted boolean indicates whether or not the event listener allows untrusted events.
... methods
getdebugobject() returns the debugger object if the debug service is active.
...And 3 more matches
nsIFocusManager
1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) implemented by: @mozilla.org/focus-manager;1 as a service: var focusmanager = components.classes["@mozilla.org/focus-manager;1"] .
getservice(components.interfaces.nsifocusmanager); method overview void clearfocus(in nsidomwindow awindow); void contentremoved(in nsidocument adocument, in nsicontent aelement); native code only!
... nsidomelement
getfocusedelementforwindow(in nsidomwindow awindow, in prbool adeep, out nsidomwindow afocusedwindow); pruint32
getlastfocusmethod(in nsidomwindow window); void movecarettofocus(in nsidomwindow awindow); void elementisfocusable(in nsidomelement aelement, in unsigned long aflags); nsidomelement movefocus(in nsidomwindow awindow, in nsidomelement astartelement, in unsigned long atype, in unsigned long aflags); void setfocus(in nsidomelement aelement, in unsigned long aflags); void windowhidden(in nsidomwindow awindow); native code only!
...this is similar to a normal focus except that the wid
get focus is not changed.
...And 3 more matches
nsIMacDockSupport
wid
get/nsimacdocksupport.idlscriptable provides access to the dock on mac os x.
...to create an instance, use: var dock = components.classes["@mozilla.org/wid
get/macdocksupport;1"] .
getservice(components.interfaces.nsimacdocksupport); see working with the mac os x dock for details and examples.
... method summary void activateapplication(in boolean aignoreotherapplications); attributes attribute type description bad
getext astring text to display in a badge on the application's dock icon.
...And 3 more matches
nsINavHistoryContainerResultNode
1.0 66 introduced gecko 1.9 inherits from: nsinavhistoryresultnode last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsinavhistoryresultnode findnodebydetails(in autf8string auristring, in prtime atime, in long long aitemid, in boolean arecursive); nsinavhistoryresultnode
getchild(in unsigned long aindex); unsigned long
getchildindex(in nsinavhistoryresultnode anode); attributes attribute type description childcount unsigned long the number of child nodes; accessing this throws an ns_error_not_available exception of containeropen is false.
...when closed, attempting to call
getchild() or access childcount results in an error.
...
getchild() returns the child node at the specified index.
...And 3 more matches
nsINavHistoryObserver
string aguid); void ondeletevisits(in nsiuri auri, in prtime avisittime, in acstring aguid); void onendupdatebatch(); void onpagechanged(in nsiuri auri, in unsigned long awhat, in astring avalue); void onpageexpired(in nsiuri auri, in prtime avisittime, in boolean awholeentry); obsolete since gecko 2.0 void ontitlechanged(in nsiuri auri, in astring apa
getitle); void onvisit(in nsiuri auri, in long long avisitid, in prtime atime, in long long asessionid, in long long areferringid, in unsigned long atransitiontype, in acstring aguid, out unsigned long aadded); constants constant value description attribute_favicon 3 the page's favicon changed.
...if an error occurs in between these two steps (for example, an out of memory error), then you may
get a notification even though the page doesn't wind up
getting deleted.
...if an error occurs in between these two steps (for example, an out of memory error), then you may
get a notification even though the page doesn't wind up
getting deleted.
...And 3 more matches
nsIPrefService
inherits from: nsisupports last changed in gecko 1.7 method overview nsiprefbranch
getbranch(in string aprefroot); nsiprefbranch
getdefaultbranch(in string aprefroot); void readuserprefs(in nsifile afile); void resetprefs(); void resetuserprefs(); void savepreffile(in nsifile afile); methods
getbranch() call to
get a preferences "branch" which accesses user preference data.
...when using a
get method a user set value will be returned if one exists, otherwise a default value will be returned.
... nsiprefbranch
getbranch( in string aprefroot ); parameters aprefroot the preference root tree on which to base this branch.
...And 3 more matches
nsIPushSubscription
method overview void
getkey(in domstring name, [optional] out uint32_t keylen, [array, size_is(keylen), retval] out uint8_t key); bool quotaapplies(); bool isexpired(); attributes attribute type description endpoint domstring the subscription url.
... methods
getkey() returns a byte array containing the key material for this subscription.
... void
getkey( in domstring name, [optional] out uint32_t keylen, [array, size_is(keylen), retval] out uint8_t key ); parameters name the encryption key name.
...And 3 more matches
nsISHistory
to create an instance, use: var shistory = components.classes["@mozilla.org/browser/shistory;1"] .createinstance(components.interfaces.nsishistory); method overview void addshistorylistener(in nsishistorylistener alistener); nsishentry
getentryatindex(in long index, in boolean modifyindex); void purgehistory(in long numentries); void reloadcurrententry(); void removeshistorylistener(in nsishistorylistener alistener); attributes attribute type description count long the number of toplevel documents currently available in session history.
... maxlength long used to
get/set the maximum number of toplevel documents, session history can hold for each instance.
... to access individual history entries of the enumerator, perform the following steps: call
getshistoryenumerator() to obtain handle the nsisimpleenumerator object.
...And 3 more matches
nsIScreenManager
wid
get/public/nsiscreenmanager.idlscriptable this interface lets you
get information about the display screen (or screens) attached to the user's computer.
... 66 introduced gecko 0.9.5 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) implemented by: @mozilla.org/gfx/screenmanager;1 as a service: var screenmanager = components.classes["@mozilla.org/gfx/screenmanager;1"] .
getservice(components.interfaces.nsiscreenmanager); method overview nsiscreen screenfornativewid
get( in voidptr nativewid
get ); native code only!
... methods native code only!screenfornativewid
get returns the nsiscreen instance for the native wid
get pointer.
...And 3 more matches
nsIScrollable
inherits from: nsiscrollable last changed in gecko 29.0 (firefox 29.0 / thunderbird 29.0 / seamonkey 2.26) method overview long
getcurscrollpos(in long scrollorientation); obsolete since gecko 29.0 long
getdefaultscrollbarpreferences(in long scrollorientation); void
getscrollbarvisibility(out boolean verticalvisible, out boolean horizontalvisible); void
getscrollrange(in long scrollorientation, out long minpos, out long maxpos); obsolete since gecko 29.0 void setcurscrollpos(in long scrollorientation, in long curpos); obsolete since g...
... methods
getcurscrollpos() obsolete since gecko 29.0 (firefox 29.0 / thunderbird 29.0 / seamonkey 2.26) long
getcurscrollpos( in long scrollorientation ); parameters scrollorientation an integer representing the orientation of the scrollbar.
... return value
getdefaultscrollbarpreferences() long
getdefaultscrollbarpreferences( in long scrollorientation ); parameters scrollorientation an integer representing the orientation of the scrollbar.
...And 3 more matches
nsIStringBundle
method overview wstring formatstringfromid(in long aid, [array, size_is(length)] in wstring params, in unsigned long length); wstring formatstringfromname(in wstring aname, [array, size_is(length)] in wstring params, in unsigned long length); nsisimpleenumerator
getsimpleenumeration(); wstring
getstringfromid(in long aid); wstring
getstringfromname(in wstring aname); methods formatstringfromid() returns a formatted string with the given id from the string bundle, where each occurrence of %s (uppercase) is replaced by each successive element in the supplied array.
...
getsimpleenumeration() nsisimpleenumerator
getsimpleenumeration(); parameters none.
...
getstringfromid() retrieves a string from the bundle by its id.
...And 3 more matches
nsIStructuredCloneContainer
once you've initialized the container, you can
get a copy of the object it stores by calling deserializetovariant().
... you can also
get a base-64-encoded string containing a copy of the container's serialized data, using
getdataasbase64().
... method overview nsivariant deserializetovariant(); astring
getdataasbase64(); void initfrombase64(in astring adata,in unsigned long aformatversion); void initfromvariant(in nsivariant adata); attributes attribute type description formatversion unsigned long
get the version of the structured clone algorithm which was used to generate this container's serialized buffer.
...And 3 more matches
nsISupports proxies
it has two entry points: ns_imethod
getproxyforobject(nsieventqueue *destqueue, const nsiid & iid, nsisupports *object, print32 proxytype, void * *result); ns_imethod
getproxy(nsieventqueue *destqueue, const nsiid & cid, nsisupports *aouter, const nsiid & iid, ...
... proxy_async, on the other hand, is a "fire and for
get" method call.
...if you have created the object yourself and then created the proxy, please note that you will have at least a refcount of 2 (one for the proxy and one for the created object which you passed into
getproxyobject, plus any other refcounts which you may have).
...And 3 more matches
nsITaskbarWindowPreview
wid
get/public/nsitaskbarwindowpreview.idlscriptable this interface is used on microsoft windows to represent the preview for a window in the taskbar.
... 1.0 66 introduced gecko 1.9.2 inherits from: nsitaskbarpreview last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) you can't directly instantiate this interface; instead, call nsiwintaskbar.
gettaskbarwindowpreview() to
get the taskbar preview for a specific window.
...the array of buttons may be accessed by calling
getbutton(); each button is an nsitaskbarpreviewbutton object.
...And 3 more matches
nsITelemetry
1.0 66 introduced gecko 6.0 inherits from: nsisupports last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) implemented by: @mozilla.org/base/telemetry;1 as a service: let telemetry = components.classes["@mozilla.org/base/telemetry;1"] .
getservice(components.interfaces.nsitelemetry); method overview jsval
gethistogrambyid(in acstring id); jsval snapshothistograms(in uint32_t adataset, in boolean asubsession, in boolean aclear); jsval
getkeyedhistogrambyid(in acstring id); void capturestack(in acstring name); jsval snapshotcapturedstacks([optional] in boolean clear); nsisuppo...
...rts
getloadedmodules(); jsval snapshotkeyedhistograms(in uint32_t adataset, in boolean asubsession, in boolean aclear); void sethistogramrecordingenabled(in acstring id, in boolean enabled); void asyncfetchtelemetrydata(in nsifetchtelemetrydatacallback acallback); double mssinceprocessstart(); void scalaradd(in acstring aname, in jsval avalue); void scalarset(in acstring aname, in jsval avalue); void scalarsetmaximum(in acstring aname, in jsval avalue); jsval snapshotscalars(in uint32_t adataset, [optional] in boolean aclear); void keyedscalaradd(in acstring aname, in astring akey, in jsval avalue); void keyedscalarset(in acstring aname, in astring akey, in jsval avalue); void keyedscalarsetma...
... methods
gethistogrambyid()
get an histogram by id for histograms registered in histograms.json.
...And 3 more matches
nsITreeColumn
last changed in gecko 1.9 (firefox 3) inherits from: nsisupports method overview void
getidconst([shared] out wstring idconst); native code only!
... nsitreecolumn
getnext(); nsitreecolumn
getprevious(); void invalidate(); attributes attribute type description atom nsiatom the atom attribute of nsitreecolumn which returns an nsiatom for the column, making it fast to do comparisons.
... methods native code only!
getidconst void
getidconst( [shared] out wstring idconst ); parameters idconst
getnext()
get the next column in the nsitreecolumns.
...And 3 more matches
nsIURL
ctory/filebasename.fileextension#ref http://host/directory/filebasename.fileextension;param \ \ / \ ----------------------- \ | / \ filename / ---------------------------- | filepath you can
get a nsiurl from an nsiuri, using the queryinterface() method: var myuri = components.classes["@mozilla.org/network/io-service;1"] .
getservice(components.interfaces.nsiioservice) .newuri("http://developer.mozilla.org", null, null); try { var myurl = myuri.queryinterface(components.interfaces.nsiurl); } catch(e) { // the uri is not an url } or using in...
...stanceof: if (myuri instanceof components.interfaces.nsiurl) { // your code here } method overview autf8string
getcommonbasespec(in nsiuri auritocompare); autf8string
getrelativespec(in nsiuri auritocompare); attributes attribute type description directory autf8string directory portion of a url.
...but you can
get just the leading directory portion for sure.
...And 3 more matches
nsIWebContentHandlerRegistrar
inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by @mozilla.org/embeddor.implemented/web-content-handler-registrar;1 as a service: var nsiwchr = cc["@mozilla.org/embeddor.implemented/web-content-handler-registrar;1"] .
getservice(ci.nsiwebcontenthandlerregistrar); method overview void registercontenthandler(in domstring mimetype, in domstring uri, in domstring title, in nsidomwindow contentwindow) void registerprotocolhandler(in domstring protocol,in domstring uri, in domstring title, in nsidomwindow contentwindow) ...
... cu.import('resource://gre/modules/services.jsm'); var nsiwchr = cc["@mozilla.org/embeddor.implemented/web-content-handler-registrar;1"] .
getservice(ci.nsiwebcontenthandlerregistrar); var htmlcontentwindow = undefined; var registeruri = 'http://mail.live.com/secure/start?action=compose&to=%s'; var myurihostname = services.io.newuri(registeruri, null, null).host; // this section here is long and daunting, but its just finding a suitable contentwindow var domwindows = services.wm.
getenumerator(null); while (domwindows.hasmoreelements()...
...) { var adomwindow = domwindows.
getnext(); if (adomwindow.gbrowser) { if (adomwindow.gbrowser.tabcontainer) { //adomwindow has tabs var tabs = adomwindow.gbrowser.tabcontainer.childnodes; for (var i = 0; i < tabs.length; i++) { console.log(tabs[i].linkedbrowser.contentwindow.location); if (tabs[i].linkedbrowser.contentwindow.location.hostname == myurihostname) { htmlcontentwindow = tabs[i].linkedbrowser.contentwindow; break; //break for loop } } if (htmlcontentwindow) { break; //break while loop } } else { //adomwindow doest have any tabs if (adomwindow.gbrowser.contentwin...
...And 3 more matches
nsIWebProgressListener
this flag indicates that the request has been tar
geted, and that the user may start seeing content corresponding to the request.
...see the example below on how to use an nsiwebprogresslistener in a frame script to
get access to the dom window.
... */ let mm = window.
getgroupmessagemanager("browsers"); mm.loadframescript("chrome://path/to/some/example-framescript.js", true); mm.addmessagelistener("myaddonmessage", (message) => { let data = message.data; let browser = message.tar
get; let outerwindowid = data.outerwindowid; // browser is now the <xul:browser> that saw the web progress activity // occur.
...And 3 more matches
nsIXULRuntime
to
get an instance, use: var xulruntime = components.classes["@mozilla.org/xre/app-info;1"] .
getservice(components.interfaces.nsixulruntime); method overview void invalidatecachesonrestart(); attributes attribute type description accessibilityenabled boolean if true, the accessibility service is running.
...this is taken from the os_tar
get configure variable.
... wid
gettoolkit autf8string a string tag identifying the tar
get wid
get toolkit in use.
...And 3 more matches
nsIXULTemplateBuilder
sisupports method overview void rebuild(); void refresh(); void addresult(in nsixultemplateresult aresult, in nsidomnode aquerynode); void removeresult(in nsixultemplateresult aresult); void replaceresult(in nsixultemplateresult aoldresult, in nsixultemplateresult anewresult, in nsidomnode aquerynode); void resultbindingchanged(in nsixultemplateresult aresult); nsixultemplateresult
getresultforid(in astring aid); nsixultemplateresult
getresultforcontent(in nsidomelement aelement); boolean hasgeneratedcontent(in nsirdfresource anode, in nsiatom atag); void addrulefilter(in nsidomnode arule, in nsixultemplaterulefilter afilter); [noscript] void init(in nsicontent aelement); [noscript] void createcontents(in nsicontent aelement, in boolean aforcecreation); void addlist...
...this object is created by the
getdatasource method of the query processor.
...void resultbindingchanged( in nsixultemplateresult aresult ); parameters aresult the result to change errors throws ns_error_null_pointer if aresult is null
getresultforid() returns the result for a given id.
...And 3 more matches
Building a Thunderbird extension 5: XUL
xul is an xml grammar that provides user interface wid
gets like buttons, menus, toolbars, trees etc.
... we add wid
gets by inserting new xul dom elements into the application window and modify them using scripts and attaching event handlers.
...xul overlays are a way of attaching other ui wid
gets to a xul document at run time.
...And 3 more matches
customDBHeaders Preference
getting started to build upon the reply-to column tutorial, i'll describe the process i went through in developing a custom column to display a 'superfluous' column within thunderbird's main view.
...because comparisons are case-insensitive, all of the custom headers
get set to lowercase when the data
gets migrated to the message database.
...this is the superfluous.js file referenced from within the superfluous_overlay.xul file: dump(" ~ ~ ~ ~ superfluous ~ ~ ~ ~ \n"); var columnhandler = {
getcelltext: function(row, col) { //
get the messages header so that we can extract the 'x-superfluous' field var key = gdbview.
getkeyat(row); var hdr = gdbview.db.
getmsghdrforkey(key); var retval = hdr.
getstringproperty("x-superfluous"); dump("x-superfluous: " + retval + "\n"); return retval; },
getsortstringforrow: function(hdr) { return hdr.
getstringproperty("x-sup...
...And 3 more matches
Version, UI, and Status Information - Plugins
« previousnext » this chapter describes the functions that allow a plug-in to display a message on the status line,
get agent information, and check on the current version of the plug-in api and the browser.
...
getting agent information a plug-in can check which browser is running on the user's current system.
...
getting the current version your plug-in should make sure, possibly during initialization, that the version of the plug-in api it is using is compatible with the version the browser is using.
...And 3 more matches
Debugger - Firefox Developer Tools
it is an accessor property with a
getter and setter: assigning to it enables or disables this debugger instance; reading it produces true if the instance is enabled, or false otherwise.
...this is an accessor property with a
getter and setter.
... setting this flag to true is intended for uses of subsystems of the debugger api (e.g, debugger.source) for purposes other than step debugging a tar
get javascript program.
...And 3 more matches
Attr - Web APIs
in most dom methods, you will directly retrieve the attribute as a string (e.g., element.
getattribute()), but certain functions (e.g., element.
getattributenode()) or means of iterating return attr types.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node...
..." tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/attr" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">attr</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;...
...And 3 more matches
BlobBuilder - Web APIs
when you're done building your blob, call
getblob() to retrieve a blob containing the data you sent into the blob builder.
... method overview void append(in arraybuffer data); void append(in blob data); void append(in string data, [optional] in string endings); blob
getblob([optional] in domstring contenttype); file
getfile(in domstring name, [optional] in domstring contenttype); methods append() appends the contents of the specified javascript object to the blob being built.
...
getblob() returns the blob object that has been constructed using the data passed through calls to append().
...And 3 more matches
Cache.match() - Web APIs
ignoremethod: a boolean that, when set to true, prevents matching operations from validating the request http method (normally only
get and head are allowed.) it defaults to false.
...if the url matches you will
get a match regardless of whether the response object has a vary header.
... in this example, only html documents retrieved with the
get http verb will be cached.
...And 3 more matches
Compositing example - Web APIs
pure black or white does not result in pure black or white.', 'subtracts the bottom layer from the top layer or the other way round to always
get a positive value.', 'like difference, but with lower contrast.', 'preserves the luma and chroma of the bottom layer, while adopting the hue of the top layer.', 'preserves the luma and hue of the bottom layer, while adopting the chroma of the top layer.', 'preserves the luma of the bottom layer, while adopting the hue and chroma of the top layer.', 'preserves the hue and chroma of the bottom layer...
..."); dt.textcontent = pop; dl.appendchild(dt); var dd = document.createelement("dd"); var p = document.createelement("p"); p.textcontent = gcotext.pop(); dd.appendchild(p); var canvastodrawon = createcanvas(); var canvastodrawfrom = createcanvas(); var canvastodrawresult = createcanvas(); var ctx = canvastodrawresult.
getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.globalcompositeoperation = pop; ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.globalcompositeoperation = "source-over"; ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fi...
...llstyle = "#fff"; ctx.font = "14px arial"; ctx.filltext(pop, 5, height/2 - 5); ctx.restore(); var ctx = canvastodrawon.
getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "14px arial"; ctx.filltext('existing content', 5, height/2 - 5); ctx.restore(); var ctx = canvastodrawfrom.
getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ...
...And 3 more matches
Drawing text - Web APIs
function draw() { var ctx = document.
getelementbyid('canvas').
getcontext('2d'); ctx.font = '48px serif'; ctx.filltext('hello world', 10, 50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); a stroketext example the text is filled using the current strokestyle.
... function draw() { var ctx = document.
getelementbyid('canvas').
getcontext('2d'); ctx.font = '48px serif'; ctx.stroketext('hello world', 10, 50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); styling text in the examples above we are already making use of the font property to make the text a bit larger than the default size.
... there are some more properties which let you adjust the way the text
gets displayed on the canvas: font = value the current text style being used when drawing text.
...And 3 more matches
CustomEvent - Web APIs
event.currenttar
get read only a reference to the currently registered tar
get for the event.
...it's possible this has been changed along the way through retar
geting.
... event.explicitoriginaltar
get read only the explicit original tar
get of the event (mozilla-specific.) event.originaltar
get read only the original tar
get of the event, before any retar
getings.
...And 3 more matches
Document.cookie - Web APIs
it serves as a
getter and setter for the actual values of the cookies.
... the lax value value will send the cookie for all same-site requests and top-level navigation
get requests.
... the strict value will prevent the cookie from being sent by the browser to the tar
get site in all cross-site browsing contexts, even when following a regular link.
...And 3 more matches
Element.setPointerCapture() - Web APIs
the setpointercapture() method of the element interface is used to designate a specific element as the capture tar
get of future pointer events.
... subsequent events for the pointer will be tar
geted at the capture element until capture is released (via element.releasepointercapture()).
... note: when pointer capture is set, pointerover, pointerout, pointerenter, and pointerleave events are only generated when crossing the boundary of the capture tar
get.
...And 3 more matches
Using Fetch - Web APIs
// example post method implementation: async function postdata(url = '', data = {}) { // default options are marked with * const response = await fetch(url, { method: 'post', // *
get, post, put, delete, etc.
... async function* maketextfilelineiterator(fileurl) { const utf8decoder = new textdecoder('utf-8'); const response = await fetch(fileurl); const reader = response.body.
getreader(); let { value: chunk, done: readerdone } = await reader.read(); chunk = chunk ?
...ror('there has been a problem with your fetch operation:', error); }); supplying your own request object instead of passing a path to the resource you want to request into the fetch() call, you can create a request object using the request() constructor, and pass that in as a fetch() method argument: const myheaders = new headers(); const myrequest = new request('flowers.jpg', { method: '
get', headers: myheaders, mode: 'cors', cache: 'default', }); fetch(myrequest) .then(response => response.blob()) .then(myblob => { myimage.src = url.createobjecturl(myblob); }); request() accepts exactly the same parameters as the fetch() method.
...And 3 more matches
FileSystemDirectoryEntry - Web APIs
basic concepts you can create a new directory by calling
getdirectory().
... function onfs(fs){ fs.root.
getdirectory('documents', {create:true}, function(directoryentry){ //directoryentry.isfile === false //directoryentry.isdirectory === true //directoryentry.name === 'documents' //directoryentry.fullpath === '/documents' }, onerror); } // opening a file system with temporary storage window.requestfilesystem(temporary, 1024*1024 /*1mb*/, onfs, onerror); properties this interf...
...
getdirectory() returns a filesystemdirectoryentry object representing a directory located at a given path, relative to the directory on which the method is called.
...And 3 more matches
GlobalEventHandlers.onanimationcancel - Web APIs
syntax var animcancelhandler = tar
get.onanimationcancel; tar
get.onanimationcancel = function value a function to be called when an animationcancel event occurs indicating that a css animation has begun on the tar
get, where the tar
get object is an html element (htmlelement), document (document), or window (window).
... javascript before we
get to the animation code, we define a function which logs information to a box on the user's screen.
...note the use of animationevent.animationname and animationevent.elapsedtime to
get information about the event which occurred.
...And 3 more matches
HTMLAnchorElement - Web APIs
t to be confused with <link>, which is represented by htmllinkelement) <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlanchorelement" tar
get="_top"><rect x="321" y="65" width="170...
...And 3 more matches
HTMLButtonElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbuttonelement" tar
get="_top"><rect x="321" y="65" width="170...
...And 3 more matches
HTMLLinkElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllinkelement" tar
get="_top"><rect x="341" y="65" width="150" ...
...And 3 more matches
HTMLSelectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlselectelement" tar
get="_top"><rect x="321" y="65" width="170...
...And 3 more matches
HTMLTextAreaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltextareaelement" tar
get="_top"><rect x="301" y="65" width="1...
...And 3 more matches
HTMLVideoElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" tar
get="_top"><rect x="331" y="65" width="160"...
...And 3 more matches
IntersectionObserverEntry.intersectionRatio - Web APIs
the intersectionobserverentry interface's read-only intersectionratio property tells you how much of the tar
get element is currently visible within the root's intersection ratio, as a value between 0.0 and 1.0.
... syntax var intersectionratio = intersectionobserverentry.intersectionratio; value a number between 0.0 and 1.0 which indicates how much of the tar
get element is actually visible within the root's intersection rectangle.
... more precisely, this value is the ratio of the area of the intersection rectangle (intersectionrect) to the area of the tar
get's bounds rectangle (boundingclientrect).
...And 3 more matches
IntersectionObserverEntry - Web APIs
the intersectionobserverentry interface of the intersection observer api describes the intersection between the tar
get element and its root container at a specific moment of transition.
... properties intersectionobserverentry.boundingclientrect read only returns the bounds rectangle of the tar
get element as a domrectreadonly.
... the bounds are computed as described in the documentation for element.
getboundingclientrect().
...And 3 more matches
KeyboardEvent.key - Web APIs
these events
get mapped to dom keyboard events, and are listed among the "virtual key codes" for windows, even though they aren't actually key codes.
... html <div class="fx"> <div> <textarea rows="5" name="test-tar
get" id="test-tar
get"></textarea> <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button> </div> <div class="flex"> <pre id="console-log"></pre> </div> </div> css .fx { -webkit-display: flex; display: flex; margin-left: -20px; margin-right: -20px; } .fx > div { padding-left: 20px; padding-right: 20px; } .fx > div:first-child { wid...
...th: 30%; } .flex { -webkit-flex: 1; flex: 1; } #test-tar
get { display: block; width: 100%; margin-bottom: 10px; } javascript let textarea = document.
getelementbyid('test-tar
get'), consolelog = document.
getelementbyid('console-log'), btnclearconsole = document.
getelementbyid('btn-clear-console'); function logmessage(message) { document.
getelementbyid("console-log").innerhtml += message + "<br>"; } textarea.addeventlistener('keydown', (e) => { if (!e.repeat) logmessage(`key "${e.key}" pressed [event: keydown]`); else logmessage(`key "${e.key}" repeating [event: keydown]`); }); textarea.addeventlistener('beforeinput', (e) => { logmessage(`key "${e.data}" about to be input [event: beforeinput]`); }); textarea.addeventlistener('input', (e) => { logmessage(`k...
...And 3 more matches
MediaDevices.ondevicechange - Web APIs
you can at any time use enumeratedevices() to
get the updated list of available devices.
...there is no information about the change included in the event object; to
get the updated list of devices, you'll have to use enumeratedevices().
... example in this example, we create a function called updatedevicelist(), which is called once when mediadevices.
getusermedia() successfully obtains a stream, and then is called any time the device list changes.
...And 3 more matches
Transcoding assets for Media Source Extensions - Web APIs
getting started the first and most important step is to ensure that your files are comprised of a container and codec that users' browsers support.
... bento4 — a set of command-line utilities for
getting asset metadata and creating content for dash.
...
get these installed successfully before moving to the next step.
...And 3 more matches
MutationObserver.observe() - Web APIs
syntax mutationobserver.observe(tar
get, options) parameters tar
get a dom node (which may be an element) within the dom tree to watch for changes, or to be the root of a subtree of nodes to be watched.
...there are some caveats to note: if you call observe() on a node that's already being observed by the same mutationobserver, all existing observers are automatically removed from all tar
gets being observed before the new observer is activated.
... if the same mutationobserver is not already in use on the tar
get, then the existing observers are left alone and the new one is added.
...And 3 more matches
MutationObserverInit.subtree - Web APIs
the mutationobserverinit dictionary's optional subtree property can be set to true to monitor the tar
geted node and all of its descendants.
... the default value, false, indicates only the tar
get node itself is to be monitored for changes.
... subtree can be used in concert with the other options to extend monitoring of attributes, text content, and child lists to the entire subtree rooted at the tar
get node.
...And 3 more matches
OffscreenCanvas - Web APIs
methods offscreencanvas.
getcontext() returns a rendering context for the offscreen canvas.
... to display the imagebitmap, you can use a imagebitmaprenderingcontext context, which can be created by calling canvas.
getcontext("bitmaprenderer") on a (visible) canvas element.
... var one = document.
getelementbyid("one").
getcontext("bitmaprenderer"); var two = document.
getelementbyid("two").
getcontext("bitmaprenderer"); var offscreen = new offscreencanvas(256, 256); var gl = offscreen.
getcontext('webgl'); // ...
...And 3 more matches
PointerEvent - Web APIs
the pointer can tar
get a specific coordinate (or set of coordinates) on the contact surface such as a screen.
... a pointer's hit test is the process a browser uses to determine the tar
get element for a pointer event.
... methods pointerevent.
getcoalescedevents() returns a sequence of all pointerevent instances that were coalesced into the dispatched pointermove event.
...And 3 more matches
Using Pointer Events - Web APIs
function startup() { var el = document.
getelementsbytagname("canvas")[0]; el.addeventlistener("pointerdown", handlestart, false); el.addeventlistener("pointerup", handleend, false); el.addeventlistener("pointercancel", handlecancel, false); el.addeventlistener("pointermove", handlemove, false); log("initialized."); } this simply sets up all the event listeners for our <canvas> element so we can handle the touch events as they ...
... function handlestart(evt) { log("pointerdown."); var el = document.
getelementsbytagname("canvas")[0]; var ctx = el.
getcontext("2d"); log("pointerdown: id = " + evt.pointerid); ongoingtouches.push(copytouch(evt)); var color = colorfortouch(evt); ctx.beginpath(); ctx.arc(touches[i].pagex, touches[i].pagey, 4, 0, 2 * math.pi, false); // a circle at the start ctx.arc(evt.clientx, evt.clienty, 4, 0, 2 * math.pi, false); // a circle at the start ctx.fillstyle = color; ctx.fill(); } after storing some of the event's processing in ...
... function handlemove(evt) { var el = document.
getelementsbytagname("canvas")[0]; var ctx = el.
getcontext("2d"); var color = colorfortouch(evt); var idx = ongoingtouchindexbyid(evt.pointerid); log("continuing touch: idx = " + idx); if (idx >= 0) { ctx.beginpath(); log("ctx.moveto(" + ongoingtouches[idx].pagex + ", " + ongoingtouches[idx].pagey + ");"); ctx.moveto(ongoingtouches[idx].pagex, ongoingtouches[idx].pagey); l...
...And 3 more matches
RTCPeerConnection.peerIdentity - Web APIs
once this promise resolves successfully, the resulting identity is the tar
get peer identity and cannot change for the duration of the connection.
...if there isn't already a tar
get peer identity, peeridentity is set to a newly created promise and the process begins again, until the process succeeds or no further attempts to authenticate occur.
... note: the promise returned by setremotedescription() cannot resolve until any tar
get peer identity that's been set is validated.
...And 3 more matches
ReadableStream - Web APIs
properties readablestream.locked read only the locked
getter returns whether or not the readable stream is locked to a reader.
... readablestream.
getiterator() creates a readablestream async iterator instance and locks the stream to it.
... readablestream.
getreader() creates a reader and locks the stream to it.
...And 3 more matches
Request() - Web APIs
the possible options are: method: the request method, e.g.,
get, post.
... the default is
get.
...note that a request using the
get or head method cannot have a body.
...And 3 more matches
SVGEllipseElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180"...
...And 3 more matches
SVGGraphicsElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180"...
...And 3 more matches
SVGRectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180"...
...And 3 more matches
SVGUseElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180"...
...And 3 more matches
Screen - Web APIs
screen.pixeldepth
gets the bit depth of the screen.
... methods screen.lockorientation lock the screen orientation (only works in fullscreen or for installed apps) screen.unlockorientation unlock the screen orientation (only works in fullscreen or for installed apps) methods inherited from eventtar
get: eventtar
get.addeventlistener() registers an event handler of a specific event type on the eventtar
get.
... eventtar
get.removeeventlistener() removes an event listener from the eventtar
get.
...And 3 more matches
TextRange - Web APIs
textrange.htmltext
gets or sets the html content within the textrange.
... textrange.text
gets or sets the plaintext content within the textrange.
...the example
gets the textrange through document.selection, and sets the specified element to be selected.
...And 3 more matches
User Timing API - Web APIs
retrieving performance marks the performance interface has three methods that can be used to retrieve a mark: performance.
getentries() returns all performance entries in the performance timeline.
... performance.
getentriesbyname(name, entrytype) returns all performance entries in the performance timeline with the specified name and entrytype, thus set entrytype to "mark" to
get all marks (and set name accordingly to retrieve more specific entries).
... performance.
getentriesbytype(entrytype) returns all performance entries in the performance timeline with the specified entrytype, thus set entrytype to "mark" to
get all marks.
...And 3 more matches
VisualViewport - Web APIs
you can
get a window's visual viewport using window.visualviewport.
... properties visualviewport also inherits properties from its parent, eventtar
get.
... visualviewport.pa
getop read only returns the y coordinate of the visual viewport relative to the initial containing block origin of the top edge in css pixels.
...And 3 more matches
WebGLRenderingContext.bufferData() - Web APIs
syntax // webgl1: void gl.bufferdata(tar
get, size, usage); void gl.bufferdata(tar
get, arraybuffer?
... srcdata, usage); void gl.bufferdata(tar
get, arraybufferview srcdata, usage); // webgl2: void gl.bufferdata(tar
get, arraybufferview srcdata, usage, srcoffset, length); parameters tar
get a glenum specifying the binding point (tar
get).
... a gl.invalid_enum error is thrown if tar
get or usage are not one of the allowed enums.
...And 3 more matches
Raining rectangles - Web APIs
border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); var gl, timer, rainingrect, scoredisplay, missesdisplay; function setupanimation (evt) { window.removeeventlistener(evt.type, setupanimation, false); if (!(gl =
getrenderingcontext())) return; gl.enable(gl.scissor_test); rainingrect = new rectangle(); timer = settimeout(drawanimation, 17); document.queryselector("canvas") .addeventlistener("click", playerclick, false); var displays = document.queryselectorall("strong"); scoredisplay = displays[0]; missesdisplay = displays[1]; } var score = 0, misses = 0; function drawanimation () ...
... // otherwise we won't
get any animation.
... var position = [ evt.pagex - evt.tar
get.offsetleft, gl.drawingbufferheight - (evt.pagey - evt.tar
get.offsettop), ]; // if the click falls inside the rectangle, we caught it.
...And 3 more matches
WebRTC API - Web APIs
webrtc consists of several interrelated apis and protocols which work to
gether to achieve this.
... webrtc concepts and usage webrtc serves multiple purposes; to
gether with the media capture and streams api, they provide powerful multimedia capabilities to the web, including support for audio and video conferencing, file exchange, screen sharing, identity management, and interfacing with legacy telephone systems including support for sending dtmf (touch-tone dialing) signals.
... more details and links to relevant guides and tutorials needed webrtc reference because webrtc provides interfaces that work to
gether to accomplish a variety of tasks, we have divided up the reference by category.
...And 3 more matches
Writing a WebSocket server in Java - Web APIs
.util.regex.pattern; public class websocket { public static void main(string[] args) throws ioexception, nosuchalgorithmexception { serversocket server = new serversocket(80); try { system.out.println("server has started on 127.0.0.1:80.\r\nwaiting for a connection..."); socket client = server.accept(); system.out.println("a client connected."); socket methods: java.net.socket
getinputstream() returns an input stream for this socket.
... java.net.socket
getoutputstream() returns an output stream for this socket.
... inputstream in = client.
getinputstream(); outputstream out = client.
getoutputstream(); scanner s = new scanner(in, "utf-8"); handshaking when a client connects to a server, it sends a
get request to upgrade the connection to a websocket from a simple http request.
...And 3 more matches
Controlling multiple parameters with ConstantSourceNode - Web APIs
this article demonstrates how to use a constantsourcenode to link multiple parameters to
gether so they share the same value, which can be changed by simply setting the value of the constantsourcenode.offset parameter.
...gainnode2 and gainnode3 will be linked to
gether to have the same, adjustable, value using the constantsourcenode.
... constantnode the constantsourcenode used to control the values of gainnode2 and gainnode3 to
gether.
...And 3 more matches
Using the Web Audio API - Web APIs
let's take a look at
getting started with the web audio api.
...basic audio operations are performed with audio nodes, which are linked to
gether to form an audio routing graph.
... to use all the nice things we
get with the web audio api, we need to grab the source from this element and pipe it into the context we have created.
...And 3 more matches
WindowOrWorkerGlobalScope.fetch() - Web APIs
the possible options are: method the request method, e.g.,
get, post.
... note that the origin header is not set on fetch requests with a method of head or
get.
...note that a request using the
get or head method cannot have a body.
...And 3 more matches
XDomainRequest - Web APIs
it was removed in internet explorer 10 in favor of using xmlhttprequest with proper cors; if you are tar
geting internet explorer 10 or later, or wish to support any other browser, you need to use standard http access control.
... this interface can send both
get and post requests.
... properties xdomainrequest.timeout
gets or sets the amount of time until a request times out.
...And 3 more matches
HTML in XMLHttpRequest - Web APIs
to
get an overview of how to use xmlhttprequest in general, see using xmlhttprequest.
... var xhr = new xmlhttprequest(); xhr.onload = function() { console.log(this.responsexml.title); } xhr.open("
get", "file.html"); xhr.responsetype = "document"; xhr.send(); feature detection method 1 this method relies on the "force async" nature of the feature.
... function htmlinxhr() { if (!window.xmlhttprequest) return false; var req = new window.xmlhttprequest(); req.open('
get', window.location.href, false); try { req.responsetype = 'document'; } catch(e) { return true; } return false; } view on jsfiddle this method is synchronous, does not rely on external assets though it may not be as reliable as method 2 described below since it does not check the actual feature but an indication of that feature.
...And 3 more matches
XMLHttpRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.076923076923077%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 650 150" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtar
get" tar
get="_top"><rect x="151" y="1" width="250" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtar
get</text></a><polyline points="401,25 411,20 411,30 401,25" stroke="#d4dde4" fill="none"/><line x1="411" y1="25" x2="441" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequest" tar
get="_top"><rect x="441" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="511" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" align...
... properties this interface also inherits properties of xmlhttprequesteventtar
get and of eventtar
get.
...And 3 more matches
XRReferenceSpace - Web APIs
properties in addition to the properties inherited from xrspace (of which there are none at this time), xrreferencespace also inherits the properties of eventtar
get.
... methods in addition to the methods inherited from its parent interface, xrspace (there are none at this time), xrreferencespace inherits methods from eventtar
get.
...
getoffsetreferencespace() creates and returns a new reference space object as the same type as the one on which you call the method (so, either xrreferencespace or xrboundedreferencespace).
...And 3 more matches
XRSession - Web APIs
properties in addition to the properties listed below, xrsession inherits properties from its parent interface, eventtar
get.
...this includes things such as the near and far clipping planes (distances defining how close and how far away objects can be and still
get rendered), as well as field of view information.
... visibilitystate read only a domstring whose value is one of those found in the xrvisibilitystate enumerated type, indicating whether or not the session's imagery is visible to the user, and if so, if it's being visible but not currently the tar
get for user events.
...And 3 more matches
XRView - Web APIs
transform read only an xrrigidtransform which describes the current position and orientation of the viewpoint in relation to the xrreferencespace specified when
getviewerpose() was called on the xrframe being rendered.
... usage notes positions and number of xrviews per frame while rendering a scene, the set of views that are used to render the scene for the viewer as of the current frame are obtained by calling the xrframe object's
getviewerpose() method to
get the xrviewerpose representing (in essence) the position of the viewer's head.
... all positions and orientations within the views for a given xrviewerpose are specified in the reference space that was passed to xrframe.
getviewerpose(); this is called the viewer reference space.
...And 3 more matches
ARIA: tab role - Accessibility
some assistive technology will provide a count of the number of tab role elements inside a tablist, and inform users of which tab they currently have tar
geted.
...if the left arrow is being pressed, we decrease our tab focus counter by one, and if it is then less than 0, we set it number of tab elements minus one (to
get to the last element).
... to handle changing the active tab and tabpanel, we have a function that takes in the event,
gets the element that triggered the event, the triggering element's parent element, and its grandparent element.
...And 3 more matches
ARIA: button role - Accessibility
a button is a wid
get used to perform actions such as submitting a form, opening a dialog, cancelling an action, or performing a command such as inserting a new record or displaying information.
... in addition to the ordinary button wid
get, role="button" should be included when creating a toggle button or menu button using a non button element.
... name</span> css [role="button"] { padding: 2px; background-color: navy; color: white; cursor: default; } [role="button"]:hover, [role="button"]:focus, [role="button"]:active { background-color: white; color: navy; } ul { list-style: none; } javascript function handlecommand(event) { // handles both mouse clicks and keyboard // activate with enter or space //
get the new name value from the input element let newnameinput = document.
getelementbyid('newname'); let name = newnameinput.value; newnameinput.value = ''; // clear the text field newnameinput.focus(); // give the text field focus to enable entering and additional name.
...And 3 more matches
Web Accessibility: Understanding Colors and Luminance - Accessibility
how the viewer perceives color after it
gets to his eyes is yet another matter, and can be affected by overall health.
..."luminance" and "saturation" are particularly important to
get right.
... a common example is to add white to red to
get the color pink.
...And 3 more matches
Consistent list indentation - CSS: Cascading Style Sheets
in order to understand why this is the case, and more importantly how to avoid the problem alto
gether, it's necessary to examine the details of list construction.
...if we add two more list items, we
get a result like that shown in figure 2.
...since that parent has no padding or margins yet, we
get the situation shown in figure 3.
...And 3 more matches
Cubic Bezier Generator - CSS: Cascading Style Sheets
ge="updatecanvas();return true;" type="text" maxlength=6 id="x2" value="0.14" class='field'> <label for="y2">y2 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="y2" value="0.53" class='field'> <br> <output id="output">log</output> </form> </html> .field { width: 40px; } function updatecanvas() { var x1 = document.
getelementbyid('x1').value; var y1 = document.
getelementbyid('y1').value; var x2 = document.
getelementbyid('x2').value; var y2 = document.
getelementbyid('y2').value; drawbeziercurve(x1, y1, x2, y2); } const radius = 4; // place needed to draw the rulers const rulers = 30.5; const margin = 10.5; const basic_scale_size = 5; // size of 0.1 tick on the rulers var scaling; //limitation: ...
...scaling is computed once: if canvas.height/canvas.width change it won't be recalculated var dragsm = 0; // drag state machine: 0 = nodrag, others = object being dragged function initcanvas() { //
get the canvas element using the dom var canvas = document.
getelementbyid('bezier'); // make sure we don't execute when canvas isn't supported if (canvas.
getcontext) { // use
getcontext to use the canvas for drawing var ctx = canvas.
getcontext('2d'); scaling = math.min(canvas.height - rulers - margin, canvas.width - rulers - margin); canvas.onmousedown = mousedown; canvas.onmouseup = mouseup; } else { alert('you need safari or firefox 1.5+ to see this demo.'); } } function cx(x) { return x * scaling + rulers; } function...
...result + 0.5 : result; } function drawbeziercurve(x1, y1, x2, y2) { //
get the canvas element using the dom var canvas = document.
getelementbyid('bezier'); // make sure we don't execute when canvas isn't supported if (canvas.
getcontext) { // use
getcontext to use the canvas for drawing var ctx = canvas.
getcontext('2d'); // clear canvas ctx.clearrect(0, 0, canvas.width, canvas.height); // draw the rulers c...
...And 3 more matches
all - CSS: Cascading Style Sheets
</blockquote> phasellus e
get velit sagittis.
... css body { font-size: small; background-color: #f0f0f0; color: blue; } blockquote { background-color: skyblue; color: red; } result no all property <blockquote id="quote">lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> phasellus e
get velit sagittis.
... body { font-size: small; background-color: #f0f0f0; color:blue; } blockquote { background-color: skyblue; color: red; } the <blockquote> uses the browser's default styling to
gether with a specific background and text color.
...And 3 more matches
Cross-browser audio basics - Developer guides
loop the loop attribute will ensure that upon
getting to the end of the audio clip, the audio clip will loop back to the beginning and start playing again.
...</audio> you can grab the <audio> element like this: var myaudio = document.
getelementbyid('my-audio'); alternatively, you can create a new element.
... currenttime the currenttime property
gets or sets the current time the audio should play at.
...And 3 more matches
Constraint validation - Developer guides
the constraint validation is done in the following ways: by a call to the checkvalidity() or reportvalidity() method of a form-associated dom interface, (htmlinputelement, htmlselectelement, htmlbuttonelement, htmloutputelement or htmltextareaelement), which evaluates the constraints only on this element, allowing a script to
get this information.
...d-12345 or 12345" ], nl : [ '^(nl-)?\\d{4}\\s*([a-rt-z][a-z]|s[bce-rt-z])$', "nederland zips must have exactly 4 digits, followed by 2 letters except sa, sd and ss" ] }; // read the country id var country = document.
getelementbyid("country").value; //
get the npa field var zipfield = document.
getelementbyid("zip"); // build the constraint checker var constraint = new regexp(constraints[country][0], ""); console.log(constraint); // check it!
... tell it zipfield.setcustomvalidity(""); } else { // the zip doesn't follow the constraint, we use the constraintapi to // give a message about the format required for this country zipfield.setcustomvalidity(constraints[country][1]); } } then we link it to the onchange event for the <select> and the oninput event for the <input>: window.onload = function () { document.
getelementbyid("country").onchange = checkzip; document.
getelementbyid("zip").oninput = checkzip; } you can see a live example of the postal code validation.
...And 3 more matches
Index - Developer guides
2 ajax ajax, dom, json, javascript, references, xmlhttprequest asynchronous javascript and xml, while not a technology in itself, is a term coined in 2005 by jesse james garrett, that describes a "new" approach to using a number of existing technologies to
gether 3 community ajax if you know of useful mailing lists, newsgroups, forums, or other communities related to ajax, please link to them here.
... 4
getting started ajax, api, advanced, javascript, webmechanics, xmlhttprequest this article guides you through the ajax basics and gives you some simple hands-on examples to
get you started.
...the player controls themselves won't be styled beyond the basics required to
get them working; full styling of the player will be taken care of in a future article.
...And 3 more matches
Writing forward-compatible websites - Developer guides
if you have to ua-sniff, only sniff for past browser versions if you have to resort to ua sniffing, only use it to tar
get past browser versions of particular browsers.
...then, if the default code path doesn't work in past versions of particular browsers and the breakage cannot be detected by sniffing for the absence of certain features your default code path uses, it's ok to add hacks that are tar
geted to old versions of particular browsers by sniffing for those old browser versions.
... browser-specific features and prefixes don't tar
get hacks at current or future versions of browsers this is also a common instance of assuming that present correlation between bugs implies future correlation between bugs.
...And 3 more matches
HTTP caching - HTTP
tar
gets of caching operations http caching is optional, but reusing a cached resource is usually desirable.
... however, common http caches are typically limited to caching responses to
get and may decline other methods.
... the primary cache key consists of the request method and tar
get uri (oftentimes only the uri is used as only
get requests are caching tar
gets).
...And 3 more matches
Enumerability and ownership of properties - JavaScript
enumerable enumerable and nonenumerable not available without extra code not available without extra code in not available without extra code retrieval enumerable nonenumerable enumerable and nonenumerable object.keys
getownpropertynames
getownpropertysymbols
getownpropertynames,
getownpropertysymbols – filtered to exclude enumerables using propertyisenumerable
getownpropertynames
getownpropertysymbols not available without extra code not available without extra code iterable enumerable ...
... nonenumerable enumerable and nonenumerable object.keys
getownpropertynames
getownpropertysymbols
getownpropertynames,
getownpropertysymbols – filtered to exclude enumerables using propertyisenumerable
getownpropertynames
getownpropertysymbols enumerable nonenumerable enumerable and nonenumerable for..in (excluding symbols) not available without extra code not available without extra code not available without extra code obtaining properties by enumerability/ownership note that this is not the most effici...
... detection can occur by simplepropertyretriever.the
getmethodyouwant(obj).indexof(prop) > -1 iteration can occur by simplepropertyretriever.the
getmethodyouwant(obj).foreach(function (value, prop) {}); (or use filter(), map(), etc.) var simplepropertyretriever = {
getownenumerables: function(obj) { return this._
getpropertynames(obj, true, false, this._enumerable); // or could use for..in filtered with hasownproperty or just this: return object.keys(obj); },
getownnonenumerables: function(obj) { return this._
getpropertynames(obj, true, false, this._notenumerable); },
getownenumerablesandnonenumerables: function(obj) { return this._
getpropertynames(obj, true, false, this._e...
...And 3 more matches
FinalizationRegistry.prototype.register() - JavaScript
the register() method registers an object with a finalizationregistry instance so that if the object is garbage-collected, the registry's callback may
get called.
... syntax registry.register(tar
get, heldvalue, [unregistertoken]); parameters tar
get the tar
get object to register.
...this cannot be the tar
get object.
...And 3 more matches
Object.prototype.__proto__ - JavaScript
for better support, use object.
getprototypeof() instead.
... the __proto__ property of object.prototype is an accessor property (a
getter function and a setter function) that exposes the internal [[prototype]] (either an object or null) of the object through which it is accessed.
...it is deprecated in favor of object.
getprototypeof/reflect.
getprototypeof and object.setprototypeof/reflect.setprototypeof (though still, setting the [[prototype]] of an object is a slow operation that should be avoided if performance is a concern).
...And 3 more matches
handler.has() - JavaScript
syntax const p = new proxy(tar
get, { has: function(tar
get, prop) { } }); parameters the following parameters are passed to has() method.
... tar
get the tar
get object.
... interceptions this trap can intercept these operations: property query: foo in proxy inherited property query: foo in object.create(proxy) with check: with(proxy) { (foo); } reflect.has() invariants if the following invariants are violated, the proxy will throw a typeerror: a property cannot be reported as non-existent, if it exists as a non-configurable own property of the tar
get object.
...And 3 more matches
Reflect.apply() - JavaScript
the static reflect.apply() method calls a tar
get function with arguments as specified.
... syntax reflect.apply(tar
get, thisargument, argumentslist) parameters tar
get the tar
get function to call.
... thisargument the value of this provided for the call to tar
get.
...And 3 more matches
Reflect.ownKeys() - JavaScript
the static reflect.ownkeys() method returns an array of the tar
get object's own property keys.
... syntax reflect.ownkeys(tar
get) parameters tar
get the tar
get object from which to
get the own keys.
... return value an array of the tar
get object's own property keys.
...And 3 more matches
TypedArray - JavaScript
it is only directly accessible through object.
getprototypeof(int8array) and similar.
...set value and
get value etc., operate on that array buffer address.
... typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int32array), the typedarray
gets copied into a new typed array.
...And 3 more matches
WebAssembly.Table - JavaScript
instance methods table.prototype.
get() accessor function —
gets the element stored at a given index.
...we then print out the table length and contents of the two indexes (retrieved via table.prototype.
get() to show that the length is two and both elements are null.
... var tbl = new webassembly.table({initial:2, element:"anyfunc"}); console.log(tbl.length); // "2" console.log(tbl.
get(0)); // "null" console.log(tbl.
get(1)); // "null" we then create an import object that contains the table: var importobj = { js: { tbl:tbl } }; finally, we load and instantiate a wasm module (table2.wasm) using the webassembly.instantiatestreaming() method.
...And 3 more matches
eval() - JavaScript
this means that any concept of variable naming
gets obliterated.
...this can be done with eval(): var obj = { a: 20, b: 30 }; var propname =
getpropname(); // returns "a" or "b" eval( 'var result = obj.' + propname ); however, eval() is not necessary here.
...instead, use the property accessors, which are much faster and safer: var obj = { a: 20, b: 30 }; var propname =
getpropname(); // returns "a" or "b" var result = obj[ propname ]; // obj[ "a" ] is the same as obj.a you can even use this method to access descendant properties.
...And 3 more matches
Web audio codec guide - Web media technologies
audio encoder configuration effects on quality and size feature effect on quality effect on size lossless compression no loss of fidelity unlikely to
get more than 40-50% compression lossy compression always some loss of fidelity; the higher the compression, the more the loss compression of up to 80-95% possible quality setting the higher the quality, the better the fidelity of the encoded audio the higher the fidelity, the larger the resulting file becomes, though the amount of change varies from codec to codec ...
...however, if your tar
get is primarily macos and ios users, it may be worth considering, as the operating systems have integrated support for alac.
... container support ogg, webm rtp / webrtc compatible yes licensing fully open and free of any licensing requirements choosing an audio codec typically, regardless of what codec you use, it will generally
get the job done, even if it's not the ideal choice, as long as you choose a codec not specifically designed for a totally different kind of source audio.
...And 3 more matches
Web video codec guide - Web media technologies
the higher the resolution of a video, the larger it
gets.
...anything from 24 fps upward will generally be seen as satisfactorily smooth; 30 or 60 fps is an ideal tar
get, depending on your needs.
... container support ogg rtp / webrtc compatible no supporting/maintaining organization xiph.org specification https://www.theora.org/doc/ licensing open and free of royalties and any other licensing requirements [1] while theora doesn't support variable frame rate (vfr) within a single stream, multiple streams can be chained to
gether within a single file, and each of those can have its own frame rate, thus allowing what is essentially vfr.
...And 3 more matches
begin - SVG: Scalable Vector Graphics
indefinite the begin of the animation will be determined by a beginelement() method call or a hyperlink tar
geted to the element.
... discard for <discard>, begin defines when the tar
get element will be discarded.
...the behavior is the same as if node.removechild() were called on the parent of the tar
get element with the tar
get element as parameter.
...And 3 more matches
WebAssembly Concepts - WebAssembly
it is not primarily intended to be written by hand, rather it is designed to be an effective compilation tar
get for low-level source languages like c, c++, rust, etc.
... webassembly is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages with low-level memory models such as c++ and rust with a compilation tar
get so that they can run on the web.
... writing a rust application and tar
geting webassembly as its output.
...And 3 more matches
Loading and running WebAssembly code - WebAssembly
so how do we
get those bytes into an array buffer and compiled?
...is: webassembly.instantiatestreaming(fetch('mymodule.wasm'), importobject) .then(obj => { // call an exported function: obj.instance.exports.exported_func(); // or access the buffer contents of an exported memory: var i32 = new uint32array(obj.instance.exports.memory.buffer); // or access the elements of an exported table: var table = obj.instance.exports.table; console.log(table.
get(0)()); }) note: for more information on how exporting from a webassembly module works, have a read of using the webassembly javascript api, and understanding webassembly text format.
... using xmlhttprequest xmlhttprequest is somewhat older than fetch, but can still be happily used to
get a typed array.
...And 3 more matches
Compiling an Existing C Module to WebAssembly - WebAssembly
$ git clone https://github.com/webmproject/libwebp to start off simple, expose webp
getencoderversion() from encode.h to javascript by writing a c file called webp.c: #include "emscripten.h" #include "src/webp/encode.h" emscripten_keepalive int version() { return webp
getencoderversion(); } this is a good simple program to test whether you can
get the source code of libwebp to compile, as it doesn't require any parameters or complex data structures to invoke this function.
...
get an image from javascript into wasm
getting the encoder's version number is great, but encoding an actual image would be more impressive.
... the first question you need to answer is: how do i
get the image into wasm?
...And 3 more matches
places/history - Archive of obsolete content
example let { search } = require("sdk/places/history"); // simple query search( { url: "https://developers.mozilla.org/*" }, { sort: "visitcount" } ).on("end", function (results) { // results is an array of objects containing // data about visits to any site on developers.mozilla.org // ordered by visit count }); // complex query // the query objects are or'd to
gether // let's say we want to retrieve all visits from before a week ago // with the query of 'ruby', but from last week onwards, we want // all results with 'javascript' in the url or title.
...each query option can take several properties, which are and'd to
gether to make one complete query.
...each property is and'd to
gether, meaning that bookmarks must match each property within a query object.
...And 2 more matches
Creating annotations - Archive of obsolete content
warning: this tutorial relies on the since-removed wid
get api and no longer works with firefox.
... the wid
get api is deprecated from firefox 29 onwards.
...in particular, for a simple button, try the action button or toggle button apis, and for a more complex wid
get try the toolbar or sidebar apis.
...And 2 more matches
Developing for Firefox Mobile - Archive of obsolete content
firefox for android implements its ui using native android wid
gets instead of xul.
... you can use the same code to tar
get both desktop firefox and firefox mobile, and use jpm-mobile instead of the normal jpm.
...then type: adb devices you should see some output like: list of devices attached 51800f220f01564 device (the long hex string will be different.) if you do, then adb has found your device and you can
get started.
...And 2 more matches
Bootstrapped extensions - Archive of obsolete content
adding user interface manually if you decide to go ahead and try to develop a bootstrapped extension that modifies the application's user interface, here are a few suggestions to
get you started.
... you need to look up the relevant application ui elements by their id by calling document.
getelementbyid(), then manipulate them to inject your ui.
... for example, you can
get access to the menu bar in firefox with document.
getelementbyid("main-menubar").
...And 2 more matches
JS XPCOM - Archive of obsolete content
in order to
get an xpcom object you need to know the contract id of the object and the interface that you wish to use on it.
...
getting an xpcom service var preferences = components.classes["@mozilla.org/preferences-service;1"] .
getservice(components.interfaces.nsiprefservice); you can then call any methods in the nsiprefservice interface on the preferences object.
...
getting a different interface for a component some components implement more than one interface.
...And 2 more matches
On page load - Archive of obsolete content
creating an overlay first, you need to create an overlay to one (or more, depending on which applications you tar
get) of the following xul documents: application uri to overlay firefox chrome://browser/content/browser.xul thunderbird chrome://messenger/content/messenger.xul navigator from seamonkey chrome://navigator/content/navigator.xul attaching a script attach a script to your overlay (see "attaching a script to an overlay") that adds a load event lis...
...tener to appcontent element (browsers) or messagepane (mail): window.addeventlistener("load", function load(event){ window.removeeventlistener("load", load, false); //remove listener, no longer needed myextension.init(); },false); var myextension = { init: function() { var appcontent = document.
getelementbyid("appcontent"); // browser if(appcontent){ appcontent.addeventlistener("domcontentloaded", myextension.onpageload, true); } var messagepane = document.
getelementbyid("messagepane"); // mail if(messagepane){ messagepane.addeventlistener("load", function(event) { myextension.onpageload(event); }, true); } }, onpageload: function(aevent) { var doc = aevent.originaltar
get; // doc is document that triggered "onload" event // do som...
... if(doc.location.href.search("forum") > -1) alert("a forum page is loaded"); // add event listener for page unload aevent.originaltar
get.defaultview.addeventlistener("unload", function(event){ myextension.onpageunload(event); }, true); }, onpageunload: function(aevent) { // do something } }; current firefox trunk nightlies will fire the onpageload function for not only documents, but xul:images (favicons in tabbrowser).
...And 2 more matches
Tree - Archive of obsolete content
iew; for (var i = 0; i < treeview.rowcount; i++) { if (treeview.iscontainer(i) && !treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } to collapse all tree nodes just change the condition: var treeview = tree.treeboxobject.view; for (var i = 0; i < treeview.rowcount; i++) { if (treeview.iscontainer(i) && treeview.iscontaineropen(i)) treeview.toggleopenstate(i); }
getting the text from the selected row assuming the given <tree>: <tree id="my-tree" seltype="single" onselect="ontreeselected()"> use the following javascript: function ontreeselected(){ var tree = document.
getelementbyid("my-tree"); var cellindex = 0; var celltext = tree.view.
getcelltext(tree.currentindex, tree.columns.
getcolumnat(cellindex)); alert(celltext); }
getting the tr...
...ee item from the focused row assuming <tree id="my-tree">, you can use the following to
get the tree item: var view = document.
getelementbyid("my-tree").view; var sel = view.selection.currentindex; //returns -1 if the tree is not focused var treeitem = view.
getitematindex(sel); note that the current index may be unselected (for example, a multi-select tree).
...
getting the cell from a mouse click your first choice is likely to try <treecell onclick="yourfunc();"/> or something similar.
...And 2 more matches
Communication between HTML and your extension - Archive of obsolete content
communication between an html page and and extension after building a sample extension by reading carefully and following the complete instructions for building an extension i was able to
get an extension that could display something on the status bar.
...with a lot of help from irc://irc.mozilla.org#js and irc://irc.mozilla.org#extdev i was able to
get it running pretty well, but i still would rather have the client less responsible for pinging the extension to "look" for what is on the page.
...i set the onblur action to a little javascript function that performed a standard ajax request to
get a result.
...And 2 more matches
Adding windows and dialogs - Archive of obsolete content
getservice(ci.nsipromptservice); prompts.alert(window, "alert title", "hello!"); you should of course use localized strings instead of hard-coded ones.
...
getservice(ci.nsipromptservice); if (prompts.confirm(window, "confirm title", "would you like to continue?")) { // do something.
...luckily, you still
get a great deal of help from the platform if you use the dialog element as the document root instead of the more generic window element.
...And 2 more matches
Handling Preferences - Archive of obsolete content
incorrect values can make firefox behave oddly or break alto
gether.
... managing preferences with xpcom we use the preferences service in order to
get and set preference values: this._prefservice = cc["@mozilla.org/preferences-service;1"].
getservice(ci.nsiprefbranch); // ...
...
get count() { return this._prefservice.
getintpref("extensions.xulschoolhello.message.count"); }, increment : function() { let currentcount = this._prefservice.
getintpref("extensions.xulschoolhello.message.count"); this._prefservice.setintpref("extensions.xulschoolhello.message.count", currentcount + 1); } one important thing to keep in mind is that the "
get" methods of the service can throw an exception if the preference is not found.
...And 2 more matches
Mozilla Documentation Roadmap - Archive of obsolete content
make sure you pick the one that matches your tar
get versions.
...it takes a little
getting used to, specially learning how to choose the best search queries, but it's an invaluable resource of information.
...it brings to
gether the feeds of most mozilla employees, as well as several other members of the mozilla community.
...And 2 more matches
Useful Mozilla Community Sites - Archive of obsolete content
this is the best way to
get your extension to users from all around the world.
...you can still
get a good number of downloads while being in the sandbox.
...the community is very active, and you can be sure to
get translations for the most commonly used languages within a few days of submitting your extension.
...And 2 more matches
Updating addons broken by private browsing changes - Archive of obsolete content
nsicontentprefservice:
getpref, setpref, haspref, hascachedpref, removepref, removegroupedprefs, removeprefsbyname,
getprefs, and
getprefsbyname all take a required nsiloadcontext argument to indicate the privacy status of the pref in question.
... use privatebrowsingutils.
getprivacycontextfromwindow(win) to obtain it from the relevant window.
... nsidownload's
getdownload method is deprecated; use the asynchronous
getdownloadbyguid method instead.
...And 2 more matches
List of Mozilla-Based Applications - Archive of obsolete content
dogtag certificate system uses nss dojo javascript toolkit uses mozilla rhino in shrinksafe eclipse platform open development platform the ajax toolkit framework, standard wid
get toolkit and eclipsemozilla projects make use of mozilla elixon wcms/xul web content management system fully remote xul wcms (no need to install extensions).
...t bindings for gnome globalmojo browser that raises money for your favorite causes gluescript a javascript engine which can be used as a general purpose language uses mozilla spidermonkey and formerly called wxjavascript gnome operating system gnome 3 will use spidermonkey through gjs google adwords editor editor google gad
gets for linux google’s desktop wid
get engine uses xulrunner according to the build instructions grani grain sizing assessment tool according to this wiki page grani is based on xul and xpcom daim gwt-mosaic-xul xul builder for google web tools hachette's multimedia encyclopedia electronic encyclopedia this product was using mozilla in 2004 but i�...
...nderbird printgroove jt suite print process software uses xulrunner and spidermonkey prism (was webrunner) single-site browser xulrunner application pro/engineer wildfire cadcam product psycrunner chat, messenger, multicast toolkit about 1,000 users – xulrunner version of psyczilla extension pyjamas-desktop a python web wid
get toolkit uses xulrunner dom to implement the wid
gets and event handling.
...And 2 more matches
Source code directories overview - Archive of obsolete content
it gives a bird's eye view of the source code so a developer can
get a good idea what is in mozilla and where to find things.
... see also similar information in mozilla source code directory structure, and also see the more detailed overview of how the parts of gecko fit to
gether.
...it does not handle wid
gets or specific drawing routines; it just provides the primitive operations for drawing.
...And 2 more matches
In-Depth - Archive of obsolete content
other sites which list mozilla specific css properties xulplanet.com [dead link, 26.03.13] mozilla-prefixed properties on the standard track 26.03.13 -moz-appearance makes a wid
get look like it's from your operating system.
...the image that is listed there by default (chrome://navigator/skin/icons/btn1.gif) is actually a bunch of images grouped to
gether in one file, so somewhere one of the css attributes is telling it what portion of the larger image to cut out and display.
...to style that image, we first need to
get a handle to the toolbar, then the box inside of it, and then to the image that we added with the xml.
...And 2 more matches
Clipboard - Archive of obsolete content
features can
get and set the clipboard in various flavors of data type.
...jetpack.import.future("clipboard");// in text formatjetpack.clipboard.set("hello world");// in other clipboard
get(flavor string)returns data to jetpack from the clipboard.
...string here's an example of how to use the method to
get the data on the clipboard.
...And 2 more matches
Clipboard Test - Archive of obsolete content
features can
get and set the clipboard in various flavors of data type.
...jetpack.import.future("clipboard");// in text formatjetpack.clipboard.set("hello world");// in other clipboard
get(flavor string)returns data to jetpack from the clipboard.
...string here's an example of how to use the method to
get the data on the clipboard.
...And 2 more matches
Clipboard - Archive of obsolete content
features can
get and set the clipboard in various flavors of data type.
...jetpack.import.future("clipboard"); // in text format jetpack.clipboard.set("hello world"); // in other clipboard
get(flavor string)returns data to jetpack from the clipboard.
...string here's an example of how to use the method to
get the data on the clipboard.
...And 2 more matches
Clipboard - Archive of obsolete content
features can
get and set the clipboard in various flavors of data type.
...jetpack.import.future("clipboard"); // in text format jetpack.clipboard.set("hello world"); // in other clipboard
get(flavor string)returns data to jetpack from the clipboard.
...string here's an example of how to use the method to
get the data on the clipboard.
...And 2 more matches
New Skin Notes - Archive of obsolete content
--callek i tried this, but it
gets totally screwed up in ie for some reason.
...i'll try to
get those fixed today.
...--beltzner any chance we can mobe the "main page" scrollbar to the actual "content area" of the page, so that the sidebar `stays` when in-use, and on dynamic pages (such as the preferences page) if you toggle between something that needs a verticle scrollbar and something that doesnt, you
get screen-jitter; if this is not-feasable, perhaps some method to have a viewport scrollbar always appear for the vert direction.
...And 2 more matches
String Quick Reference - Archive of obsolete content
old way: use nsstring& and nscstring& void mymethod(const nsstring& input, nsstring& output); new way: use nsastring& and nsacstring& void mymethod(const nsastring& input, nsastring& output); substrings what:
get direct references to string fragments why: avoid making multiple copies of the string old way: use a bunch of nsautostrings, and use left(), right() and mid() to grab a segment of a string: //
get an 8-character string starting at the 4th position nsautostring leftside; str.left(leftside, 12); nsautostring middle; leftside.right(middle, 8); new way: use substring() to grab a direct reference to...
... those characters: //
get an 8-character string starting at the 4th position const nsastring& middle = substring(str, 4, 8); unicode literals what: use macro tricks to make wide-character literal strings.
...old way: use nsautostring and assignwithconversion() nsautostring widestring; widestring.assignwithconversion("some string"); callwidefunction(widestring); // use widestring again, but need a const prunichar* callwidewithflatstring(widestring.
get()) nsautostring widestring2; widestring2.assignwithconversion("another string"); callwidefunction(widestring2); new way: use ns_literal_string or ns_named_literal_string // pre-declare the variable if you'll use it multiple times ns_named_literal_string(widestring, "some string"); callwidefunction(widestring); // use widestring again, but need a const prunichar* callwidewithflatstring(widestring.
get()); // inline the string with ns_literal_string callwidefunct...
...And 2 more matches
Supporting per-window private browsing - Archive of obsolete content
getservice(components.interfaces.nsiprivatebrowsingservice).
...to do this, import resource://gre/modules/privatebrowsingutils.jsm and use privatebrowsingutils.
getprivacycontextfromwindow(win), passing a window object that is related to the content in question.
... as an example, if an add-on adds a context menu item that accesses an api that requires an nsiloadcontext, the most relevant window is the one that owns the element being tar
geted by the context menu (element.ownerdocument.defaultview).
...And 2 more matches
Windows Install - Archive of obsolete content
// this function verifies disk space in kilobytes function verifydiskspace(dirpath, spacerequired) { var spaceavailable; //
get the available disk space on the given path spaceavailable = file
getdiskspaceavailable(dirpath); // convert the available disk space into kilobytes spaceavailable = parseint(spaceavailable / 1024); // do the verification if(spaceavailable < spacerequired) { logcomment("insufficient disk space: " + dirpath); logcomment(" required : " + spacerequired + " k"); logcomment(" a...
...vailable: " + spaceavailable + " k"); return(false); } return(true); } function updatewinreg4ren8dot3() { var fprogram =
getfolder("program"); var ftemp =
getfolder("temporary"); //notes: // can't use a double backslash before subkey // - windows already puts it in.
... var winreg =
getwinregistry() ; if(winreg != null) { // here, we
get the current version.
...And 2 more matches
Methods - Archive of obsolete content
(mac os only)
getcomponentfolder returns an object representing the directory in which a component is installed.
...
getfolder returns an object representing a directory, for use with the addfile method.
...
getlasterror returns the most recent non-zero error code.
...And 2 more matches
allowevents - Archive of obsolete content
on listitem and titlebar elements, mouse events normally do not
get sent to their children; instead they are retar
geted to the listitem and titlebar element itself.
...by setting the allowevents attribute to true, this special behavior is disabled, and the events are tar
geted the same as other elements.
... for menu, menuseparator, menuitem and treecol elements, as well as menu buttons, and the popup datepicker, mouse events are also retar
geted to the element itself.
...And 2 more matches
appendNotification - Archive of obsolete content
the element which was the tar
get of the button press event.
... notification box events requires gecko 9.0(firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) if you specify the eventcallback parameter, it should be a javascript function that
gets called when interesting things happen related to the notification box.
... if (typeof window === "undefined") { //if there is no window defined,
get the most recent.
...And 2 more matches
MenuItems - Archive of obsolete content
when the user activates the menuitem, the command event
gets fired.
... <script> function chan
getoolbarstate(event) { if (event.tar
get.
getattribute("checked") == "true") showtoolbar(); else hidetoolbar(); } </script> ...
... <menuitem label="show toolbar" accesskey="t" type="checkbox" oncommand="chan
getoolbarstate();"/> in this example, we show the toolbar when the menuitem is checked and hide the toolbar otherwise.
...And 2 more matches
Filtering - Archive of obsolete content
function applyfilter(country) { var cond = document.
getelementbyid("cond"); var triple = document.
getelementbyid("filtertriple"); if (country) { if (!triple) { triple = document.createelement("triple"); triple.id = "filtertriple"; triple.setattribute("subject", "?photo"); triple.setattribute("predicate", "http://www.xulplanet.com/rdf/country"); } triple.setattribute("object", country); cond.appendchild(tripl...
...e); } else if (triple) { cond.removechild(triple); } document.
getelementbyid("photoslist").builder.rebuild(); } the 'country' argument to the applyfilter function holds the value to filter by.
...when a choice is made, the applyfilter function as shown above is called and the template content
gets rebuilt with the desired filter applied.
...And 2 more matches
Template and Tree Listeners - Archive of obsolete content
var somelistener = { item: null, willrebuild : function(builder) { this.item = builder.
getresourceatindex(builder.root.currentindex); }, didrebuild : function(builder) { if (this.item) { var idx = builder.
getindexofresource(this.item) if (idx != -1) builder.root.view.selection.select(idx); } } }; tree.builder.addlistener(somelistener); this example is very simple and just saves and restores the selected index after a rebuild.
...the example above makes use of the
getresourceatindex and
getindexofresource methods.
...or, the resource may no longer be part of the results, which is why we need to check the return value of the
getindexofresource method.
...And 2 more matches
Complete - Archive of obsolete content
when it is finished, it will
get a category and links from other pages.
...its javascript code
gets the text strings it needs from the xul.
...how a text sting
gets localized when you press button 1 you see an message in english or french, depending on your application's locale.
...And 2 more matches
Additional Install Features - Archive of obsolete content
var binfolder =
getfolder("file:///","bin"); var grep =
getfolder(binfolder, "grep"); var mainfolder =
getfolder("file:///", "main"); file.copy(grep, mainfolder); the first line will retrieve a reference to the /bin directory.
... from there, we
get the file 'grep' which is contained inside the 'bin' directory.
... next, we
get the 'main' folder, again from the file system root.
...And 2 more matches
Anonymous Content - Archive of obsolete content
this is useful for creating a single wid
get that is made up of a set of other wid
gets, but can be referred to as only a single wid
get.
...although anonymous content is displayed on screen, you cannot
get to it through a script in the normal way.
...note that the built-in elements such as scroll bars
get their xbl from the files in the bindings directory in the toolkit package.
...And 2 more matches
Open and Save Dialogs - Archive of obsolete content
get folder - the user is asked to select a folder (directory).
...when the dialog is closed, you can use the interface functions to
get the file that was selected.
...you can also use mode
getfolder and modesave for the other two modes.
...And 2 more matches
XUL Structure - Archive of obsolete content
obviously, web pages do not
get these privileges, unless they are signed with a digital certificate and the user has granted permission to perform these operations.
...the extensions are small packages of xul files, javascript, style sheets and images packed to
gether into a single file.
...however, if you just want to
get started building a simple application, you may skip ahead to creating a window and save this section for later.
...And 2 more matches
editor - Archive of obsolete content
attributes editortype, src, type properties accessibletype, commandmanager, contentdocument, contentwindow, docshell, editingsession, editortype, webbrowserfind, webnavigation methods
geteditor,
gethtmleditor, makeeditable examples this example shows how to made the editor editable by setting the designmode property of the loaded html document: <script language="javascript"> function initeditor(){ // this function is called to set up the editor var editor = document.
getelementbyid("myeditor"); editor.contentdocument.designmode = 'on'; } </script> <editor id="myeditor" ed...
...itortype="html" src="about:blank" flex="1" type="content-primary"/> once editable, the document can have special formatting and other html pieces added to it using the document.execcommand method: var editor = document.
getelementbyid("myeditor"); // toggle bold for the current selection editor.contentdocument.execcommand("bold", false, null); see the midas overview for more command strings.
... methods
geteditor( window ) return type: nsieditor returns the editing interface for the editor which contains numerous methods for manipulating the document.
...And 2 more matches
progressmeter - Archive of obsolete content
erties accessibletype, max, mode, value examples <progressmeter mode="determined" value="82"/> <progressmeter mode="undetermined"/> <!-- switching modes while the mouse is over a button --> <progressmeter mode="determined" id="myprogress"/> <button label="example" onmouseover="setloading(true)" onmouseout="setloading(false)"/> function setloading(state){ document.
getelementbyid('myprogress').mode = (state) ?
... max type: integer
gets and sets the value of the max attribute.
... mode type: string
gets and sets the value of the mode attribute.
...And 2 more matches
stringbundle - Archive of obsolete content
the "src" attribute accepts only absolute chrome:// urls (see bugs 133698, 26291) attributes src properties applocale , src, stringbundle, strings methods
getformattedstring,
getstring examples (example needed) attributes src type: uri the uri of the property file that contains the localized strings.
... src type: url
gets and sets the value of the src attribute.
... methods
getformattedstring( key, strarray ) return type: string looks up the format string for the given key name in the string bundle and returns a formatted copy where each occurrence of %s (uppercase) is replaced by each successive element in the supplied array.
...And 2 more matches
wizard - Archive of obsolete content
attributes firstpage, lastpage, pagestep, title, windowtype properties canadvance, canrewind, currentpage, onfirstpage, onlastpage, pagecount, pageindex, pagestep, title, wizardpages methods advance, cancel, extra1, extra2,
getbutton,
getpagebyid, goto, rewind examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="thewizard" title="secret code wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function checkcode(){ document.
getelementbyid('thewizard').canadvance = (document.
getelementbyid('secretcode').value == "cabba...
...some of mozilla's window handling functions use this attribute to group windows of the same type to
gether.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(),...
...And 2 more matches
Archived Mozilla and build documentation - Archive of obsolete content
blackconnect blackwood bonsai it is a tool that lets you perform queries on the contents of a cvs archive; you can:
get a list of checkins, see what checkins have been made by a given person, or on a given cvs branch, or in a particular time period.
...the extension will access tinderbox, mozilla.org's webtool for tracking source code status, to
get the status of the code.
... creating a skin for firefox/
getting started download the latest version of firefox and install it.
...And 2 more matches
NPP_URLNotify - Archive of obsolete content
url url of the npn_
geturlnotify() or npn_posturlnotify() request that has completed.
... notifydata plug-in-private value for associating a previous npn_
geturlnotify() or npn_posturlnotify() request with a subsequent npp_urlnotify() call.
... description the browser calls npp_urlnotify() after the completion of a npn_
geturlnotify() or npn_posturlnotify() request to inform the plug-in that the request was completed and supply a reason code for the completion.
...And 2 more matches
Building a Theme - Archive of obsolete content
lled install.rdf that you created at the top of your extension's folder hierarchy and put this inside: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>sample@example.net</em:id> <em:version>1.0</em:version> <em:type>4</em:type> <!-- tar
get application this theme can install into, with minimum and maximum supported versions.
... --> <em:tar
getapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>29.0</em:minversion> <em:maxversion>39.*</em:maxversion> </description> </em:tar
getapplication> <!-- front end metadata --> <em:name>my theme</em:name> <em:internalname>sample</em:internalname> <em:description>a test extension</em:description> <em:creator>your name here</em:creator> <em:homepageurl>http://www.example.com/</em:homepageurl> </description> </rdf> sample@example.net - the id of the extension.
... if you
get a message that the install.rdf is malformed, it is helpful to load it into firefox using the file->open file command and it will report xml errors to you.
...And 2 more matches
ECMAScript 2015 support in Mozilla - Archive of obsolete content
standard library additions to the array object array iteration with for...of (firefox 13) array.from() (firefox 32) array.of() (firefox 25) array.prototype.fill() (firefox 31) array.prototype.find(), array.prototype.findindex() (firefox 25) array.prototype.entries(), array.prototype.keys() (firefox 28), array.prototype.values() array.prototype.copywithin() (firefox 32)
get array[@@species] (firefox 48) new map and set objects, and their weak counterparts map (firefox 13) map iteration with for...of (firefox 17) map.prototype.foreach() (firefox 25) map.prototype.entries() (firefox 20) map.prototype.keys() (firefox 20) map.prototype.values() constructor argument: new map(null) (firefox 37) monkey-patched set() in constructor (firefox 37)...
...
get map[@@species] (firefox 41) set (firefox 13) set iteration with for...of (firefox 17) set.prototype.foreach() (firefox 25) set.prototype.entries(), set.prototype.keys(), set.prototype.values() (firefox 24) constructor argument: new set(null) (firefox 37) monkey-patched add() in constructor (firefox 37)
get set[@@species] (firefox 41) weakmap (firefox 6) weakmap.clear() (firefox 20) optional iterable argument in weakmap constructor (firefox 36) constructor argument: new weakmap(null) (firefox 37) monkey-patched set() in constructor (firefox 37) weakset (firefox 34) constructor argument: new weakset(null) (firefox 37) monkey-patched add() in constructor (firefox 37) new math functions math.imul() (firefox 2...
...er() (firefox 16) number.parseint() (firefox 25) number.parsefloat() (firefox 25) number.epsilon (firefox 25) number.max_safe_integer, number.min_safe_integer (firefox 31) number.issafeinteger() (firefox 32) additions to the object object object.prototype.__proto__ has been standardized object.is() (firefox 22) object.setprototypeof() (firefox 31) object.assign() (firefox 34) object.
getownpropertysymbols() (firefox 33) additions to the date object date.prototype is an ordinary object (firefox 41) generic date.prototype.tostring (firefox 41) date.prototype[@@toprimitive] (firefox 44) new promise object promise (firefox 24, enabled by default in firefox 29) new proxy object proxy (firefox 18) preventextensions() trap (firefox 22) isextensible() trap (firefox 31)...
...And 2 more matches
Reflect.enumerate() - Archive of obsolete content
the static reflect.enumerate() method used to return an iterator with the enumerable own and inherited properties of the tar
get object, but has been removed in ecmascript 2016 and is deprecated in browsers.
... syntax reflect.enumerate(tar
get) parameters tar
get the tar
get object on which to
get the property.
... return value an iterator with the enumerable own and inherited properties of the tar
get object.
...And 2 more matches
Writing JavaScript for XHTML - Archive of obsolete content
problem: names in xhtml and html are represented in different cases scripts that used
getelementsbytagname() with an upper case html name no longer work, and attributes like nodename or tagname return upper case in html and lower case in xhtml.
... solution: use or convert to lower case for methods like
getelementsbytagname(), passing the name in lower case will work in both html and xhtml.
...the regular xml dom provides sufficient methods via the element interface for
getting/setting/removing attributes.
...And 2 more matches
XForms Output Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of wid
get(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding special value - xpath expression whose evaluation result is used as the output's value.
... representations the xforms output element can be represented by the following wid
gets for the specified data types (or types derived from these data types): text - default representation for instance data of most types, especially static text (xhtml/xul).
...characteristics text is presented to the user when there is no type given for the bound node or a type is specified that is not handled by one of the other wid
gets (as documented below).
...And 2 more matches
XForms Submit Element - Archive of obsolete content
the result of which is all or part of an instance document being sent to a tar
get destination, which could be local or remote (see the spec).
...attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of wid
get(s) to use to represent this control.
...representations the xforms submit element can be represented by the following wid
gets for the specified appearance attribute values: button - default representation (xhtml/xul) link/clickable text - used when appearance = 'minimal' (xhtml only) button displaying a button is the default presentation (xhtml/xul).
...And 2 more matches
RDF in Fifty Words or Less - Archive of obsolete content
okay, so maybe this is a bit more than fifty words, but the key points are pretty simple (and put into bold text for you manager-types who just want to
get straight to the point).
...and fundamentally, there's no reason that you shouldn't be able to treat these as "bookmarks" as well, grouping them to
gether into folders as you please, or maybe even creating "smart" folders that, when you open them, dynamically generate their contents by running common search that you define.
...that "internet resource" was a uri that pointed to a cgi script (say, http://www.mozilla.org/smart-mail/
get-mail.cgi?user=waterson&folder=inbox).
...And 2 more matches
Anatomy of a video game - Game development
it is also very simple because main() is the only function
getting looped.
...you cannot really
get more smooth and responsive than that.
... you can think about developing realtime applications as having a bud
get of time to do work.
...And 2 more matches
Index - Game development
3 examples demos, example, games, web this page lists a number of impressive web technology demos for you to
get inspiration from, and generally have fun with.
...this article explains how to
get up and running with a-frame, and how to use it to build up a simple demo.
... 22 explaining basic 3d theory 3d, coordinates, textures, basics, fragment, lighting, primitives, rendering, theory, vertex, vertices this article explains all of the basic theory that's useful to know when you are
getting started working with 3d.
...And 2 more matches
Introduction to game development for the Web - Game development
the html5 game platform you can truly think of the web as a better tar
get platform for your game.
...ll screen api, pointer lock api language javascript (or c/c++ using emscripten to compile to javascript) networking webrtc and/or websockets storage indexeddb or the "cloud" web html, css, svg (and much more!) the business case as a game developer, whether you're an individual or a large game studio, you want to know why it makes sense to tar
get the web with your next game project.
... you
get to manage your customer relationship more closely, in your own way.
...And 2 more matches
WebVR — Virtual Reality for the Web - Game development
browser support and spec status currently browser support for the webvr api is still experimental — it works in nightly builds of firefox and experimental builds of chrome (mozilla and google teamed up to work on the implementation to
gether), but sooner rather than later we'll see it in regular builds.
...
get the devices to
get information about devices connected to your computer, you can use the navigator.
getvrdevices method: navigator.
getvrdevices().then(function(devices) { for (var i = 0; i < devices.length; ++i) { if (devices[i] instanceof hmdvrdevice) { ghmd = devices[i]; break; } } if (ghmd) { for (var i = 0; i < devices.length; ++i) { if (devices[i] instanc...
...vices[i].hardwareunitid === ghmd.hardwareunitid) { gpositionsensor = devices[i]; break; } } } }); this code will loop through the available devices and assign proper sensors to the headsets — the first devices array contains the connected devices, and a check is done to find the hmdvrdevice, and assign it to the ghmd variable — using this you can set up the scene,
getting the eye parameters, setting the field of view, etc.
...And 2 more matches
Desktop gamepad controls - Game development
rrently pressed buttons we will need a function that will do exactly that on every frame: function gamepadupdatehandler() { buttonspressed = []; if(controller.buttons) { for(var b=0; b<controller.buttons.length; b++) { if(controller.buttons[b].pressed) { buttonspressed.push(b); } } } } we first reset the buttonspressed array to
get it ready to store the latest info we'll write to it from the current frame.
... next, in the draw() function we do two things — execute the gamepadupdatehandler() function to
get the current state of pressed buttons on every frame, and use the gamepadbuttonpressedhandler() function to check the buttons we are interested to see whether they are pressed, and do something if they are: function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); // ...
... the pressed() function
gets the input data and sets the information about it in our object, and the axes property stores the array containing the values signifying the amount an axis is pressed in the x and y directions, represented by a float in the (-1, 1) range.
...And 2 more matches
Creating fancy letterheaded paper - Learn web development
starting point to
get this assessment started, you should: make local copies of the html and css — save them as index.html and style.css in a new directory.
... note: if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
...you just need to put the files to
gether.
...And 2 more matches
Debugging CSS - Learn web development
solving specificity issues sometimes during development, but in particular when you need to edit the css on an existing site, you will find yourself having a hard time
getting some css to apply.
... take a step back from the problem any coding problem can be frustrating, especially css problems because you often don't
get an error message to search for online to help with finding a solution.
...again, try to
get down to the smallest amount of code that still shows the issue.
...And 2 more matches
Pseudo-classes and pseudo-elements - Learn web development
instead of adding the class, we could use the :first-child pseudo-class selector — this will always tar
get the first child element in the article, and we will no longer need to edit the html (this may not always be possible anyway, maybe due to it being generated by a cms.) all pseudo-classes behave in this same kind of way.
... they tar
get some bit of your document that is in a certain state, behaving as if you had added a class into your html.
... combining pseudo-classes and pseudo-elements if you wanted to make the first line of the first paragraph bold you could chain the :first-child and ::first-line selectors to
gether.
...And 2 more matches
Test your skills: Selectors - Learn web development
if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
... selectors five in this final task add css using attribute selectors to do the following: tar
get the <a> element with a title attribute and make the border pink (border-color: pink).
... tar
get the <a> element with an href attribute that contains the word contact somewhere in its value and make the border orange (border-color: orange).
...And 2 more matches
CSS selectors - Learn web development
previous overview: building blocks next in css, selectors are used to tar
get the html elements on our web pages that we want to style.
... in earlier articles you met some different selectors, and learned that there are selectors that tar
get the document in different ways — for example by selecting an element such as h1, or a class such as .special.
... type, class, and id selectors this group includes selectors that tar
get an html element such as an <h1>.
...And 2 more matches
Test your skills: position - Learn web development
the aim of this task is to
get you working with the css position property and values covered in our lesson on position.
... if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
... positioning one in this task you need to position the item with a class of tar
get to the top and right of the container, which has the 5px grey border.
...And 2 more matches
create fancy boxes - Learn web development
before we start
getting into the practical side of it, make sure you are familiar with the css box model.
...it starts to
get interesting when you push the properties to the limit by having negative padding and/or- margin by having border-radius larger than the actual size of the box.
... if it's not a square, we'll
get an ellipsis rather than a circle ;) */ width : 4em; height : 4em; /* and let's turn the square into a circle */ border-radius: 100%; } yes, we
get a circle: backgrounds when we talk about a fancy box, the core properties to handle that are background-* properties.
...And 2 more matches
What are browser developer tools? - Learn web development
note: before you run through the examples below, open the beginner's example site that we built during the
getting started with the web article series.
... click a property name or value to bring up a text box, where you can key in a new value to
get a live preview of a style change.
... to
get to the debugger: firefox: select ➤ web developer ➤ debugger or press ctrl + shift + s to open the javascript debugger.
...And 2 more matches
Example 4 - Learn web development
this is the fourth example that explain how to build custom form wid
gets.
... change states html content <form class="no-wid
get"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .wid
get select, .no-wid
get .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block...
...gleoptlist(select, show) { var optlist = select.queryselector('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; function updatevalue(select, index) { var nativewid
get = select.previouselementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.option'); nativewid
get.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function
getindex(select) { var nativewid
get = select.previouselementsibling; return nativewid
get.selectedindex; }; // --...
...And 2 more matches
Example 5 - Learn web development
this is the last example that explain how to build custom form wid
gets.
... change states html content <form class="no-wid
get"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select" role="listbox"> <span class="value">cherry</span> <ul class="optlist hidden" role="presentation"> <li class="option" role="option" aria-selected="true">cherry</li> <li class="option" role="option">lemon</li> <li class="option" role="option">banana</li> <li class="option" role="option">strawberry</li> <li class="option" role="option">apple</li> </ul> </div> </form> css content .wid
get select, .no-wid
get .select { position : absolute; left : -5000em; height : 0; overflow : hidden; ...
...gleoptlist(select, show) { var optlist = select.queryselector('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; function updatevalue(select, index) { var nativewid
get = select.previouselementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.setattribute('aria-selected', 'false'); }); optionlist[index].setattribute('aria-selected', 'true'); nativewid
get.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(se...
...And 2 more matches
Test your skills: Advanced styling - Learn web development
if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
... there is a major problem with just
getting rid of the blue focus outline.
...can you figure out a sensible way to attach it, and can you use some css to
get it to sit to the right of the search box, and be lined up vertically as well?
...And 2 more matches
Publishing your website - Learn web development
previous overview:
getting started with the web next once you finish writing the code and organizing the files that make up your website, you need to put it all online so people can find it.
... this article explains how to
get your simple sample code online with little effort.
...
getting hosting and a domain name to have more control over content and website appearance, most people choose to buy web hosting and a domain name: web hosting is rented file space on a hosting company's web server.
...And 2 more matches
Marking up a letter - Learn web development
prerequisites: before attempting this assessment you should have already worked through
getting started with html, what's in the head?
... starting point to begin,
get the raw text you need to mark up, and the the css to style the html.
... note: if you
get stuck, then ask us for help.
...And 2 more matches
Structuring a page of content - Learn web development
starting point to
get this assessment started, you should go and grab the zip file containing all the starting assets.
... note: if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
... if you are
getting stuck and can't envisage what elements to put where, draw out a simple block diagram of the page layout, and write on the elements you think should wrap each block.
...And 2 more matches
Structuring the web with HTML - Learn web development
we have put to
gether a course that includes all the essential information you need to work towards your goal.
...
get started prerequisites before starting this topic, you should have at least basic familiarity with using computers and using the web passively (i.e.
...you should have a basic work environment set up as detailed in installing basic software, and understand how to create and manage files, as detailed in dealing with files — both are parts of our
getting started with the web complete beginner's module.
...And 2 more matches
Choosing the right approach - Learn web development
single delayed operation repeating operation multiple sequential operations multiple simultaneous operations no yes (recursive callbacks) yes (nested callbacks) no code example an example that loads a resource via the xmlhttprequest api (run it live, and see the source): function loadasset(url, type, callback) { let xhr = new xmlhttprequest(); xhr.open('
get', url); xhr.responsetype = type; xhr.onload = function() { callback(xhr.response); }; xhr.send(); } function displayimage(blob) { let objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); } loadasset('coffee.jpg', 'blob', displayimage); pitfalls nested callbacks can be cumbersome and ...
... when your code has the potential to take longer to run than the time interval you’ve assigned, it’s better to use recursive settimeout() — this will keep the time interval constant between executions regardless of how long the code takes to execute, and you won't
get errors.
...we then run it once per second using setinterval(), creating the effect of a digital clock that updates once per second (see this live, and also see the source): function displaytime() { let date = new date(); let time = date.tolocaletimestring(); document.
getelementbyid('demo').textcontent = time; } const createclock = setinterval(displaytime, 1000); pitfalls the frame rate isn't optimized for the system the animation is running on, and can be somewhat inefficient.
...And 2 more matches
General asynchronous programming concepts - Learn web development
this lets you
get other work done in the meantime, which is the basis of asynchronous programming.
...even with multiple cores, you could only
get it to run tasks on a single thread, called the main thread.
...a major one is they are not able to access the dom — you can't
get a worker to directly do anything to update the ui.
...And 2 more matches
Build your own function - Learn web development
here you will
get some practice building your own, custom function.
... the basic function to begin with, let's put to
gether a basic function.
... in this demo, we'll
get the message box to appear when the user clicks the button.
...And 2 more matches
Functions — reusable blocks of code - Learn web development
every time we manipulated a text string, for example: let mytext = 'i am a string'; let newstring = mytext.replace('string', 'sausage'); console.log(newstring); // the replace() string function takes a source string, // and a tar
get string and replaces the source string, // with the tar
get string, and returns the newly formed string or every time we manipulated an array: let myarray = ['i', 'love', 'chocolate', 'frogs']; let madeastring = myarray.join(' '); console.log(madeastring); // the join() function takes an array, joins // all the array items to
gether into a single // string, and returns this new string or every ti...
...if they were able to
get into other enclosures, problems would occur.
...take care not to
get these confused.
...And 2 more matches
Image gallery - Learn web development
previous overview: building blocks now that we've looked at the fundamental building blocks of javascript, we'll test your knowledge of loops, functions, conditionals and events by
getting you to build a fairly common item you'll see on a lot of websites — a javascript-powered image gallery.
... starting point to
get this assessment started, you should go and grab the zip file for the example, unzip it somewhere on your computer, and do the exercise locally to begin with.
... note: if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
...And 2 more matches
What went wrong? Troubleshooting JavaScript - Learn web development
an erroneous example to
get started, let's return to our number guessing game — except this time we'll be exploring a version that has some deliberate errors introduced.
... to
get started, open the local copy inside your favorite text editor, and your browser.
...line 48 is using a document.queryselector() method to
get a reference to an element by selecting it with a css selector.
...And 2 more matches
JavaScript First Steps - Learn web development
we have put to
gether a course that includes all the essential information you need to work towards your goal.
...
get started prerequisites before starting this module, you don't need any previous javascript knowledge, but you should have some familiarity with html and css.
... you are advised to work through the following modules before starting on javascript:
getting started with the web (which includes a really basic javascript introduction).
...And 2 more matches
Object prototypes - Learn web development
note: it's important to understand that there is a distinction between an object's prototype (available via object.
getprototypeof(obj), or via the deprecated __proto__ property) and the prototype property on constructor functions.
...that is, object.
getprototypeof(new foobar()) refers to the same object as foobar.prototype.
... since ecmascript 2015, you can access an object's prototype object indirectly via object.
getprototypeof(obj).
...And 2 more matches
JavaScript — Dynamic client-side scripting - Learn web development
we have put to
gether a course that includes all the essential information you need to work towards your goal.
...
get started prerequisites javascript is arguably more difficult to learn than related technologies such as html and css.
... before attempting to learn javascript, you are strongly advised to
get familiar with at least these two technologies first, and perhaps others as well.
...And 2 more matches
Introduction to the server side - Learn web development
when you click a link on a web page, submit a form, or run a search, an http request is sent from your browser to the tar
get server.
... the request includes a url identifying the affected resource, a method that defines the required action (for example to
get, delete, or post the resource), and may include additional information encoded in url parameters (the field-value pairs sent via a query string), as post data (data sent by the http post method), or in associated cookies.
...when a user wants to navigate to a page, the browser sends an http "
get" request specifying its url.
...And 2 more matches
React interactivity: Editing, filtering, conditional rendering - Learn web development
we'll
get to that in a moment.
...it’ll be similar to deletetask() because it'll take an id to find its tar
get object, but it'll also take a newname property containing the name to update the task to.
...still in todo.js, put the following underneath the existing hook: const [newname, setnewname] = usestate(''); next, create a handlechange() function that will set the new name; put this underneath the hooks but before the templates: function handlechange(e) { setnewname(e.tar
get.value); } now we'll update our editingtemplate's <input /> field, setting a value attribute of newname, and binding our handlechange() function to its onchange event.
...And 2 more matches
Focus management with Vue refs - Learn web development
to give users a better experience, we'll add code to control the focus so that it
gets set to the edit field when the edit form is shown.
...however, it also means you often should not edit your html elements directly through native browser apis (like document.
getelementbyid) when using frameworks, because it results in the vdom and real dom going out of sync.
...this can be useful for things like data fetching, where you may need to
get your data before your component renders, or after a property changes.
...And 2 more matches
Mozilla Plugin Accessibility
problem planned solution owner tar
geted completion 1.
... no tar
get 2.
... focus
gets stuck in plugin.
...And 2 more matches
Creating a Language Pack
l10n binary repack for apps currently in development, you need to
get the right strings for the build you use.
...first, we
get the en-us builds.
... there is a tar
get to
get those, too, another way to test it to repack the en-us binary.
...And 2 more matches
Creating a Login Manager storage module
__logservice : null,
get _logservice() { if (!this.__logservice) this.__logservice = cc["@mozilla.org/consoleservice;1"].
...
getservice(ci.nsiconsoleservice); return this.__logservice; }, log: function (message) { dump("sampleloginmanager: " + message + "\n"); this._logservice.logstringmessage("sampleloginmanager: " + message); }, // logs function name and arguments for debugging stub: function(arguments) { var args = []; for (let i = 0; i < arguments.length; i++) args.push(arguments[i]) this.log("called " + arguments.callee.name + "(" + args.join(",") + ")"); }, init: function slms_init() { this.stub(arguments); }, initwithfile: function slms_initwithfile(ainputfile, aoutputfile) { this.stub(arguments); }, addlogin: function slms_addlogin(login) { this.stub(arguments); }, removelogin: function slms_removelogin(login) ...
...{ this.stub(arguments); }, modifylogin: function slms_modifylogin(oldlogin, newlogin) { this.stub(arguments); },
getalllogins: function slms_
getalllogins(count) { this.stub(arguments); }, removealllogins: function slms_removealllogins() { this.stub(arguments); },
getalldisabledhosts: function slms_
getalldisabledhosts(count) { this.stub(arguments); },
getloginsavingenabled: function slms_
getloginsavingenabled(hostname) { this.stub(arguments); }, setloginsavingenabled: function slms_setloginsavingenabled(hostname, enabled) { this.stub(arguments); }, findlogins: function slms_findlogins(count, hostname, formsubmiturl, httprealm) { this.stub(arguments); }, countlogins: function slms_countlogins(ahostname, aformsubmiturl, ahttprealm) ...
...And 2 more matches
Makefiles - Best practices and suggestions
for classes of hardware (unix/windows) place your makefile in a subdirectory, unix/makefile.in always include dependencies when creating a tar
get initial make call should always be the workhorse: build, generate, deploy, install, etc.
... directory dependencies do not use directories as a dependency for generated tar
gets, ever.
... any activity within a directory will alter inodes forcing tar
gets to always be stale.
...And 2 more matches
How Mozilla's build system works
alto
gether, 1,276 data structures describing the build configuration were derived from them.
... to view information about the tiers, you can execute the following special make tar
gets: command effect make echo-tiers show the final list of tiers.
... one other frequently used variable not specific to a particular build tar
get is dirs.
...And 2 more matches
Old Thunderbird build
windows build prerequisites gnu/linux build prerequisites mac os x build prerequisites
get the source note: on windows, you won't be able to build the thunderbird source code if it's under a directory with spaces in the path (e.g., don't use "documents and settings").
...
get the latest source code from mozilla's comm-central mercurial code repository: hg clone https://hg.mozilla.org/comm-central then,
get all the repositories it depends on.
...first, cd into the comm-central subdirectory (created automatically by the previous command): cd comm-central then run: python client.py checkout on some types of network connections, "hg clone" might fail because it
gets interrupted.
...And 2 more matches
Simple Thunderbird build
17:02 2,743 mapioid.h 02/06/2009 17:02 32,978 mapispi.h 02/06/2009 17:02 54,395 mapitags.h 02/06/2009 17:02 26,467 mapiutil.h 02/06/2009 17:02 97,301 mapival.h 02/06/2009 17:02 9,334 mapiwin.h 02/06/2009 17:02 1,906 mapiwz.h 02/06/2009 17:02 18,277 mapix.h 02/06/2009 17:02 5,012 mspst.h
get the source note: on windows, you won't be able to build the thunderbird source code if it's under a directory with spaces in the path (e.g., don't use "documents and settings").
...
get the latest mozilla source code from mozilla's mozilla-central mercurial code repository, and check it out into a local directory source/ (or however you want to call it).
... then,
get the latest thunderbird source code from mozilla's comm-central mercurial code repository.
...And 2 more matches
The Firefox codebase: CSS Guidelines
when importing your stylesheets, it's best to import the content css before the theme css, that way the theme values
get to override the content values (which is probably what you want), and you're going to want them both after the global values, so your imports will look like this: <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <?xml-stylesheet href="chrome://browser/content/path/module.css" type="text/css"?> <?xml-stylesheet href="chrome://browser/skin/path/module.css" type="text/css"?
...in the following example, -moz-mac-yosemite-theme tar
gets macos 10.10 and higher, so it should be privileged over the styling for macos 10.9.
... these selectors can be used to tar
get dark areas: :-moz-lwtheme-brighttext: dark window frame.
...And 2 more matches
Eclipse CDT Manual Setup
if that is not the case, then
get your build going now so that it can be running while you continue with the instructions below.
... to avoid confusion in this and the following sections, note that "workspace preferences" and "project properties" are different things (we'll
get to the details below).
...(see the headers are only parsed once section below to understand why this step is important for people who have their object directory outside their source tree.)
getting code assistance working you're now ready to
get code assistance working.
...And 2 more matches
Process scripts
similarly, some observer notifications must be registered in the content process, but if you do this in a frame script, and the frame script is loaded more than once, then you will
get multiple notifications for that event.
...the following code uses the global parent process message manager, which will load the script into the the chrome process and any child processes: // chrome code let ppmm = cc["@mozilla.org/parentprocessmessagemanager;1"] .
getservice(ci.nsiprocessscriptloader); ppmm.loadprocessscript("chrome://whatever/process-script.js", true); ppmm.addmessagelistener("hello", function(msg) { ...
...however, you don't
get access to web content or dom events from a process script.
...And 2 more matches
Gecko SDK
get the sdk updates there is no need to download or rebuild the gecko sdk corresponding to security updates of mozilla (e.g., mozilla 1.7.3) since the headers and glue libs in the gecko sdk are usually not changed as a result of security updates.
... you do have to
get and distribute the newest gecko components (gklayout.dll etc.), though.
... downloading for gecko versions before 2.0, you should choose the gecko sdk version for the earliest version of mozilla you wish to tar
get.
...And 2 more matches
Introduction to Layout in Mozilla
frame rectangular formatting primitive geometric information [0..n] per content node 2nd thru nth are “continuations” style context non-geometric information may be shared by adjacent frames reference counted, owned by frame view clipping, z-order, transparency [0..1] per frame, owned by frame wid
get native window [0..1] per view, owned by view key data structures the document owns the content model, and one or more presentations exposed programmatically via dom apis the presentation owns the frame hierarchy frames own the style contexts, views, wid
gets presentation has media type, dimensions, etc.
...reset style context object is a placeholder for partially computed stylistic data style data is computed lazily, as it is asked for reflow recursively compute geometry (x, y, w, h) for frames, views, and wid
gets given w & h constraints of “root frame” compute (x, y, w, h) for all children constraints propagated “down” via nshtmlreflowstate desired size returned “up” via nshtmlreflowmetrics basic pattern parent frame initializes child reflow state (available w, h); places child frame (x, y); invokes child’s reflow method child frame computes de...
...(tables, blocks, xul boxes) reflow “global” reflows initial, resize, style-change processed immediately via presshell method incremental reflows tar
geted at a specific frame dirty, content-changed, style-changed, user-defined nshtmlreflowcommand object encapsulates info queued and processed asynchronously, nsipressshell::appendreflowcommand, processreflowcommands incremental reflow recursively descend to tar
get recovering reflow state child rs.reason set to incremental incremental reflow process reflow “normally” at tar
get frame child ...
...And 2 more matches
JavaScript-DOM Prototypes in Mozilla
here are a few of the properties of obj's prototype: obj.__proto__ parentnode (
getter function) src (
getter and setter functions)
getelementsbytagname (function) text_node (number property, constant) ...
...one of these interfaces is nsidomhtmlimageelement, others are nsidomnshtmlimageelement (netscape extensions to the standard interface), nsidomeventtar
get, nsidomeventlistener, nsidom3node, and so on.
...the pagex property actually needs a patch because it doesn't
get set correctly in initmouseevent bug 411031.
...And 2 more matches
SVN for Localizers
first things first, we need to give you a brief introduction to what svn is and where you can find the necessary tools to
get started.
... installing svn client: linux users can download the svn client from http://subversion.apache.org/packages.html or install packages provided within their distribution (for example, in debian, sudo apt-
get install subversion).
... note: if you do not already have access to svn, visit this wiki page on how to
get set up with an svn account before proceeding.
...And 2 more matches
Mozilla Web Developer FAQ
since also other contemporary browsers have a standards mode, activating the standards mode or the almost standards mode in other browsers as well (using the above-mentioned exact doctypes) is the best way to
get consistent css layout results across different browsers.
...you should not rely on mozilla’s document.all support on new pages.) the method document.
getelementbyid() can be used instead.
...the correct way to access an element by id is to call the document.
getelementbyid() method with the id as a string as the argument.
...And 2 more matches
Memory reporting
on supporting compilers it
gets expanded to the override keyword.
...for
getting a const) that prevent the overriding from happening.
...in graph-like structures (where an object might be pointed to by more than one other object) it
gets more difficult, and might even require some way to mark objects that have been counted (and then a way to unmark them once the measurement is complete).
...And 2 more matches
Scroll-linked effects
<body style="height: 5000px" onscroll="document.
getelementbyid('toolbar').style.top = math.max(100, window.scrolly) + 'px'"> <div id="toolbar" style="position: absolute; top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this implementation of sticky positioning relies on the scroll event listener to reposition the "toolbar" div.
... } else if (math.abs(destination - window.scrolly) < 200) { scrollto(window.scrollx, window.scrolly + ((destination - window.scrolly) / 2)); settimeout(snap, 20, destination); } } var timeoutid = null; addeventlistener("scroll", function() { if (timeoutid) cleartimeout(timeoutid); timeoutid = settimeout(snap, 200, parseint(document.
getelementbyid('snaptar
get').style.top)); }, true); </script> <div id="snaptar
get" class="snaptar
get" style="position: relative; top: 200px; width: 100%; height: 200px; background-color: green"></div> </body> in this example, there is a scroll event listener which detects if the scroll position is within 200 pixels of the top of the "snaptar
get" div.
... <body style="height: 5000px"> <style> body, /* blink currently has bug that requires declaration on `body` */ html { scroll-snap-type: y proximity; } .snaptar
get { scroll-snap-align: start; position: relative; top: 200px; height: 200px; background-color: green; } </style> <div class="snaptar
get"></div> </body> this version can work smoothly in the browser even if there is slow-running javascript on the browser's main thread.
...And 2 more matches
Localization Use Cases
slovenian uses the locative case with its about preposition: <aboutbrowser "o {{ browserbrandshortname.locative }}"> for the official branding, we
get: o firefoxu and for the unofficial branding, we end up with: o brskalniku genders in the system app's apps/system/locales/system, there's a string called crash-banner-os2.
...0 : 1; var sizeinfo = filesizeformatter.
getreadablefilesize(size, fixeddigits); var _ = navigator.mozl10n.
get; element.textcontent = _(l10nid, { size: sizeinfo.size, unit: _('byteunit-' + sizeinfo.unit) }); } the function is used like so: // application storage updateappfreespace: function storage_updateappfreespace() { var self = this; this.
getfreespace(this.appstorage, function(freespace) { devicestoragehelper.s...
...ed pluralization in other languages, and pluralize them even in english: availablesize = {[ plural(size) ]} availablesize[other] = {{$size}} {{$unit}} available an italian translation might look like this: availablesize = {[ plural(size) ]} availablesize[one] = {{$size}} {{$unit}} disponibile availablesize[other] = {{$size}} {{$unit}} disponibili it's easy to imagine how developers might for
get to pluralize some strings that in other languages might require pluralization (or other grammatical features that the framework supports).
...And 2 more matches
PRIOMethods
prfsyncfn fsync; prseekfn seek; prseek64fn seek64; prfileinfofn fileinfo; prfileinfo64fn fileinfo64; prwritevfn writev; prconnectfn connect; pracceptfn accept; prbindfn bind; prlistenfn listen; prshutdownfn shutdown; prrecvfn recv; prsendfn send; prrecvfromfn recvfrom; prsendtofn sendto; prpollfn poll; pracceptreadfn acceptread; prtransmitfilefn transmitfile; pr
getsocknamefn
getsockname; pr
getpeernamefn
getpeername; pr
getsockoptfn
getsockopt; prsetsockoptfn setsockopt; }; typedef struct priomethods priomethods; parameters file_type type of file represented (tos).
... fileinfo
get information about an open file.
...
getsockname
get network address associated with a file descriptor.
...And 2 more matches
An overview of NSS Internals
when working with handles to private keys it's usually difficult (and undesired) that an application
gets access to the raw key data; therefore it may be difficult to extract such data from nss.
...in order to verify a digital signature, we have to look at the application data (e.g., a document that was signed), the signature data block (the digital signature), and a public key (as found in a certificate that is believed to be the signer, e.g., identified by metadata received to
gether with the signature).
...new certificate authorities enter the global pki market, and in order to
get started with their business, they might make deals with established cas and receive so-called cross-signing-certificates.
...And 2 more matches
NSS 3.15.4 release notes
bug 919877 - (cve-2013-1740) when false start is enabled, libssl will sometimes return unencrypted, unauthenticated data from pr_recv new in nss 3.15.4 new functionality implemented ocsp querying using the http
get method, which is the new default, and will fall back to the http post method.
... new functions cert_forcepostmethodforocsp cert_
getsubjectnamedigest cert_
getsubjectpublickeydigest ssl_peercertificatechain ssl_recommendedcanfalsestart ssl_setcanfalsestartcallback new types cert_rev_m_force_post_method_for_ocsp: when this flag is used, libpkix will never attempt to use the http
get method for ocsp requests; it will always use post.
... when building on windows, os_tar
get now defaults to win95.
...And 2 more matches
NSS Sample Code sample2
* this code uses the simplest of the init functions, which does not * require a nss database to exist */ rv = nss_nodb_init("."); if (rv != secsuccess) { fprintf(stderr, "nss initialization failed (err %d)\n", pr_
geterror()); goto out; } /* choose mechanism: ckm_des_cbc_pad, ckm_des3_ecb, ckm_des3_cbc.....
...if you choose something else, then data padding is the * application's responsibility */ ciphermech = ckm_des_cbc_pad; slot = pk11_
getbestslot(ciphermech, null); /* slot = pk11_
getinternalkeyslot(); is a simpler alternative but in * theory, it *may not* return the optimal slot for the operation.
... for * des ops, internal slot is typically the best slot */ if (slot == null) { fprintf(stderr, "unable to find security device (err %d)\n", pr_
geterror()); goto out; } /* nss passes blobs around as secitems.
...And 2 more matches
NSS Sample Code sample5
* * there is no attempt to link the public & private key to
gether * * this example does not do any padding.
... *buf2 = null; char *pubkstr = base64_encoded_subjectpublickeyinfo; char *pvtkstr = base64_encoded_privatekeyinfo; secitem der; secitem nickname; pk11slotinfo *slot = null; /* initialize nss * you need to explicitly authenticate to the internal token if you use * nss_init insteadf of nss_nodb_init * invoke this after
getting the internal token handle * pk11_authenticate(slot, pr_false, null); */ rv = nss_nodb_init("."); if (rv != secsuccess) { fprintf(stderr, "nss initialization failed (err %d)\n", pr_
geterror()); goto cleanup; } /*
get internal slot */ slot = pk11_
getinternalkeyslot(); if (slot == null) { fprintf(stderr, "couldn't find slot (err %d)\n", pr_
gete...
...rror()); goto cleanup; } rv = atob_convertasciitoitem(&der, pubkstr); if (rv!= secsuccess) { fprintf(stderr, "atob_convertasciitoitem failed %d\n", pr_
geterror()); goto cleanup; } spki = seckey_decodedersubjectpublickeyinfo(&der); secitem_freeitem(&der, pr_false); pubkey = seckey_extractpublickey(spki); if (pubkey == null) { fprintf(stderr, "couldn't extract public key (err %d)\n", pr_
geterror()); goto cleanup; } modulus_len = seckey_publickeystrength(pubkey); fprintf(stderr, "public key modulus %d bytes\n", modulus_len); buf1 = (char *)malloc(modulus_len); buf2 = (char *)malloc(modulus_len); /* initialize buf1 */ for (i=0;i<modulus_len;i++) { buf1[i]= (i %26) + 'a'; } buf1[modulus_len-1] = '\0'; fprintf(stderr, "buffer bei...
...And 2 more matches
NSS Sample Code sample6
*/ rv = nss_initreadwrite("."); if (rv != secsuccess) { fprintf(stderr, "nss initialization failed (err %d)\n", pr_
geterror()); exit(1); } /* generate a key with id 1.
...s */ genkey(2); /* generate a key with id 1 - this will fail because key with that id * already exists */ genkey(1); } void genkey(int id) { pk11slotinfo* slot = null; pk11symkey* key = null; secitem keyiditem; int keyid[1]; ck_mechanism_type ciphermech; /* using ckm_aes_cbc_pad mechanism for example */ ciphermech = ckm_aes_cbc_pad; slot = pk11_
getinternalkeyslot(); /* slot = pk11_
getbestslot(ciphermech, null); didn't work.
... */ if (slot == null) { fprintf(stderr, "unable to find security device (err %d)\n", pr_
geterror()); return; } keyid[0] = id; keyiditem.type = sibuffer; keyiditem.data = (void *)keyid; keyiditem.len = sizeof(keyid[0]); /* note: keysize must be 0 for fixed key-length algorithms like des.
...And 2 more matches
nss tech note2
to enable the module logger, you must set the environment variable nss_debug_pkcs11_module to the name of the tar
get module.
... for example, to log the softoken, use: nss_debug_pkcs11_module="nss internal pkcs #11 module" note: in the command prompt on windows, do not quote the name of the tar
get module, otherwise the quotes are considered part of the name.
...to enable this mode, set: nspr_log_modules=nss_mod_log:1 nspr_log_file=<logfile> the output format is: osthreadid[nsprthreadid]: c_xxx osthreadid[nsprthreadid]: rv = 0xyyyyyyyy for example, 1024[805ef10]: c_initialize 1024[805ef10]: rv = 0x0 1024[805ef10]: c_
getinfo 1024[805ef10]: rv = 0x0 1024[805ef10]: c_
getslotlist 1024[805ef10]: rv = 0x0 2.
...And 2 more matches
NSS reference
getting started with nss based on "
getting started with ssl" in the ssl reference.
... validating certificates cert_verifycertnow cert_verifycert cert_verifycertname cert_checkcertvalidtimes nss_cmpcertchainwcanames manipulating certificates cert_dupcertificate cert_destroycertificate sec_deletepermcertificate __cert_closepermcertdb
getting certificate information cert_findcertbyname cert_
getcertnicknames cert_freenicknames cert_
getdefaultcertdb nss_findcertkeatype comparing secitem objects secitem_compareitem key functions key functions seckey_
getdefaultkeydb seckey_destroyprivatekey digital signatures this api consists of the routines used to perform signature generation and the rou...
... secmod_loadusermodule secmod_unloadusermodule secmod_closeuserdb secmod_openuserdb pk11_findcertfromnickname pk11_findkeybyanycert pk11_
getslotname pk11_
gettokenname pk11_ishw pk11_ispresent pk11_isreadonly pk11_setpasswordfunc ssl functions based on "ssl functions" in the ssl reference and "ssl functions" and "deprecated ssl functions" in nss public functions.
...And 2 more matches
pkfnc.html
pk11_findcertfromnickname pk11_findkeybyanycert pk11_
getslotname pk11_
gettokenname pk11_ishw pk11_ispresent pk11_isreadonly pk11_setpasswordfunc pk11_findcertfromnickname finds a certificate from its nickname.
... pk11_
getslotname
gets the name of a slot.
... syntax #include <pk11func.h> char *pk11_
getslotname(pk11slotinfo *slot); parameters this function has the following parameter: slot a pointer to a slot info structure.
...And 2 more matches
Installing Pork
build and install mcpp mcpp generates macro expansion comments that allow pork's elsa to undo macros, which is necessary in order to
get exact position information.
...figure command: ac_cv_visibility_hidden=no cc="gcc34 -save-temps -wp,-w0,-k" cxx="g++ -save-temps -wp,-w0,-k" cppflags=-dns_disable_literal_template $srcdir/configure --enable-debug --disable-optimize --disable-accessibility --enable-application=browser --disable-crashreporter building will probably require disabling warnings_as_errors: make warnings_as_errors= "-wp,-w0,-k" are options that
get passed to mcpp.
...in particular, -k tells mcpp to add the macro annotations we use to
get exact source positions.
...And 2 more matches
Pork Tools
<caption>rewrites performed</caption> nsresult
getter(nsifoo **aresult) { *aresult = ...
... if (!*aresult) return ns_error_failure; return ns_ok; } nsifoo*
getter() { nsifoo *result = null; // aresult below is kept for complicated cases // typically it wont be needed and can be removed nsifoo **aresult = &result; // *aresult patterns are replaced with result result = ...
... if (result) return nsnull; // error returns are changed to nsnull //instead ns_ok, actual result is returned return result; } caller1 { //case 1 nsresult rv; rv =
getter(&var); ns_ensure_success(rv,rv); //case 2: naked call
getter(&var); //case 3: nsresult decl nsresult rv2 =
getter(&var); ns_ensure_success(rv2,rv2); } caller1 { // case 1 // figure out that rv was only used for the rewritten // outparam call + ns_ensure_success.
...And 2 more matches
How to embed the JavaScript engine
get the spidermonkey source code.
...to
get a copy of the code sample without line numbers, hover over the sample near the top until buttons appear.
...// js_callfunctionname(cx, global, "func", 2, argv.begin(), rval.address()); js_callfunctionname(cx, global, "func", argv, &rval); example say the click event is for the top-most or focused ui element at position (x, y): jsobject *tar
get, *event; js::autovaluearray<1> argv(cx); /* * find event tar
get and make event object to represent this click.
...And 2 more matches
Exact Stack Rooting
gcpointers that reside in gcthings fall into one of these cases: storage in a normal property, storage in a reserved slot, or storage with js_{
get|set}private.
... any single gcthing is likely to
get passed through a fairly deep call-stack before
getting used.
... bool returnfoo(jscontext *cx, mutablehandlestring out) { out.set(js_newstringcopyz(cx, "foo")); return bool(out); } size_t
getlengthfoo(jscontext *cx) { rootedstring s(cx); if (returnfoo(cx, &s)) return js_
getstringlength(s); return size_t(-1); } all methods in the js-api that return gcpointers have been changed to this out-param style.
...And 2 more matches
Tracing JIT
in this way the assembler can "patch to
gether" multiple fragments, so that program control can flow from one fragment into another, or back out of generated code and into the interpreter.
...every timespidermonkey interprets a backward-jump bytecode, the monitor makes note of the number of times the jump-tar
get program-counter (pc) value has been jumped-to.
...if the hit count of a particular pc reaches a threshold value, the tar
get is considered hot.
...And 2 more matches
JS_EnterLocalRootScope
description scoped local root management allows native functions,
getter/setters, etc.
...for example: jsbool my_
getproperty(jscontext *cx, jsobject *obj, jsval id, jsval *vp) { jsbool ok; if (!js_enterlocalrootscope(cx)) return js_false; // this function doesn't need to bother rooting any new objects, // strings, or doubles it creates using cx.
... ok = my_
getpropertybody(cx, obj, id, vp); // when we leave the local root scope, this protection ends.
...And 2 more matches
JS_SetErrorReporter
get or specify the error reporting mechanism for an application.
... syntax jserrorreporter js_
geterrorreporter(jsruntime *rt); jserrorreporter js_seterrorreporter(jsruntime *rt, jserrorreporter er); name type description cx jsruntime * pointer to a js runtime whose errors should be reported via your function.
...js_seterrorreporter js_
geterrorreporter returns the value set by js_seterrorreporter.
...And 2 more matches
JS_SetOperationCallback
these methods/types are renamed to js_setinterruptcallback, js_
getinterruptcallback, js_requestinterruptcallback and jsinterruptcallback in spidermonkey 30.
... syntax void js_setoperationcallback(jscontext *cx, jsoperationcallback callback); jsoperationcallback js_
getoperationcallback(jscontext *cx); void js_triggeroperationcallback(jsruntime *rt); name type description cx jscontext * a context.
...(in this case, the callback may terminate the script by returning js_false.) js_
getoperationcallback returns the currently installed operation callback, or null if none is currently installed.
...And 2 more matches
Stored value
the javascript engine sets aside a field of type jsval for the stored value of most object properties, even properties that have
getters.
... the stored value is updated each time the program
gets or sets the property.
... the new stored value is the result of
getting or setting the property, after the
getter or setter, if any, is called.
...And 2 more matches
SpiderMonkey 1.8.7
sejson) js_decompilescriptobject js_deepfreezeobject js_definefunctionbyid js_defineownproperty js_definepropertybyid js_deletepropertybyid js_deletepropertybyid2 js_doubleisint32 js_encodestringtobuffer js_entercrosscompartmentcall js_evaluatescriptforprincipalsversion js_evaluateucscriptforprincipalsversion js_executeregexp js_executeregexpnostatics js_executescriptversion js_for
get_string_flatness js_fileescapedstring js_finishjsonparse (removed in future releases, replaced with js_parsejson) js_flatstringequalsascii js_flattenstring js_flushcaches js_freezeobject js_
getcompartmentprivate js_
getemptystring js_
getflatstringchars js_
getgcparameter js_
getgcparameterforthread js_
getglobalforscopechain js_
getinternedstringchars js_
getinternedstringcharsandlength j...
...s_
getownpropertydescriptor js_
getpropertyattrs
getterandsetterbyid js_
getpropertybyid js_
getpropertybyiddefault js_
getpropertydefault js_
getpropertydescriptorbyid js_
getruntimesecuritycallbacks js_
getsecuritycallbacks js_
getstringcharsandlength js_
getstringcharsz js_
getstringcharszandlength js_
getstringencodinglength js_haspropertybyid js_initctypesclass js_internjsstring js_isconstructing_possiblywithgiventhisobject js_isextensible js_isinrequest js_leavecrosscompartmentcall js_lookuppropertybyid js_lookuppropertywithflagsbyid js_new js_newcompartmentandglobalobject js_newdateobject js_newdateobjectmsec js_newfunctionbyid body new c++ helpers while jsapi remains a c api, the engine is now implemented in c++.
... jsautorequest jsautosuspendrequest jsautocheckrequest jsautoentercompartment js::anchor<> js::call obsolete apis js_clearnewbornroots js_enterlocalrootscope js_leavelocalrootscope js_leavelocalrootscopewithresult js_for
getlocalroot js_newgrowablestring deleted apis js_
getscopechain use js_
getglobalforscopechain api changes operation callback js_setoperationcallback was introduced in js 1.8.0, replacing the branch callback, in anticipation of the addition of the tracing jit (tracemonkey).
...And 2 more matches
SpiderMonkey 45
js_setcurrentembeddertimefunction (bug 1159507) js_
getcurrentembeddertime (bug 1159507) js_mayresolvestandardclass (bug 1155946) js_
getiteratorprototype (bug 1225392) js_globallexicalscope (bug 1202902) js_hasextensiblelexicalscope (bug 1202902) js_extensiblelexicalscope (bug 1202902) js_initreflectparse (bug 987514) js::toprimitive (bug 1206168) js::
getfirstargumentastypehint (bug 1054756) js::objecttocompletepropertydescriptor (bug 1144366...
...) js_setimmutableprototype (bug 1211607) js_
getownucpropertydescriptor (bug 1211607) js_hasownpropertybyid (bug 1211607) js_hasownproperty (bug 1211607) js_deleteucproperty (bug 1211607) js::newfunctionfromspec (bug 1054756) js::compilefornonsyntacticscope (bug 1165486) js_checkforinterrupt (bug 1058695) js::mapdelete (bug 1159469) js::mapforeach (bug 1159469) js::newsetobject (bug 1159469) js::setsize (bug 1159469) js::sethas (bug 1159469) js::setdelete (bug 1159469) js::setadd (bug 1159469) js::setclear (bug 1159469) js::setkeys (bug 1159469) js::setvalues (bug 1159469) js::setentries (bug 1159469) js::setforeach (bug 1159469) js::exceptionstackornull (bug 814497) js::copyasyncstack (bug 1160307) js::
getsavedframesource (bug 1216819) js::
getsavedframeline (bug 121681...
...9) js::
getsavedframecolumn (bug 1216819) js::
getsavedframefunctiondisplayname (bug 1216819) js::
getsavedframeasynccause (bug 1216819) js::
getsavedframeasyncparent (bug 1216819) js::
getsavedframeparent (bug 1216819) js::buildstackstring (bug 1133191) js::flushperformancemonitoring (bug 1181175) js::resetperformancemonitoring (bug 1181175) js::disposeperformancemonitoring (bug 1208747) js::setstopwatchismonitoringcpow (bug 1156264) js::
getstopwatchismonitoringcpow (bug 1156264) js::setstopwatchismonitoringjank (bug 1156264) js::
getstopwatchismonitoringjank (bug 1156264) js::isstopwatchactive (bug 674779) js::
getperfmonitoringtestcpurescheduling (bug 1181175) js::addcpowperformancedelta (bug 1181175) js::setstopwatchstartcallback (bug 1208747) js::setstopwatchcommitcallback (bu...
...And 2 more matches
TPS Tests
steps
get the source code clone mozilla-central (choose your flavor): hg clone hg.mozilla.org/mozilla-central or git clone github.com/mozilla/gecko-dev cd into the tps folder cd testing/tps create the environment i suggest the path to be outside of the mc source tree python create_venv.py --username=%email% --password=%password% %path% note: if you ...
... phase implementation (mandatory) it's worth noting that some parts of tps assume that it can read the number off the end of the phase or profile to
get to the next one, so try to stick to the convention established in the other tests.
... example test here's an example tps test to tie it all to
gether.
...And 2 more matches
Web Replay
getting started to enable web replay (macos and firefox nightly only), go to devtools settings and select "enable webreplay".
... if this difference can affect the recording, the weak pointer must be instrumented so that during replay it holds onto its tar
get for the same duration it was held while recording.
... the difficulties are in figuring out the set of system library apis to intercept, in
getting the memory management and dirty memory parts of the rewind infrastructure to work, and in handling the different graphics and ipc pathways on different platforms.
...And 2 more matches
Gecko object attributes
« at apis support page introduction you can obtain object attributes by nsiaccessible.
getattributes() method.
... common wid
get attributes checkable true when the wid
get is known to behave like a checkbox.
... note some wid
gets which appear to be checkboxes might in fact be cyclers (see "cycles" below).
...And 2 more matches
Feed content access API
loading the feed and sending it to the parser is done using code similar to this: fetch: function(feedurl) { var httprequest = null; function inforeceived() { var data = httprequest.responsetext; var ioservice = components.classes['@mozilla.org/network/io-service;1'] .
getservice(components.interfaces.nsiioservice); var uri = ioservice.newuri(feedurl, null, null); if (data.length) { var parser = components.classes["@mozilla.org/feed-processor;1"] .createinstance(components.interfaces.nsifeedprocessor); var listener = new feedtestresultlistener(); try { parser.listener = listener;...
... parser.parsefromstring(data, uri); } catch(e) { alert("error parsing feed."); } } } httprequest = new xmlhttprequest(); httprequest.open("
get", feedurl, true); try { httprequest.onload = inforeceived; httprequest.send(null); } catch(e) { alert(e); } } the nsifeedprocessor interface lets you parse the feed data from several possible sources; in this case, we're loading a document into a string, then parsing that string using its parsefromstring() method.
...to
get the title of the feed, you look at the feed.title property.
...And 2 more matches
extIApplication
method overview boolean quit() boolean restart() void
getextensions(extiextensionscallback acallback) attributes the following interfaces are available to all applications: attribute type description id readonly attribute astring the id of the application.
...not available anymore on gecko 2.0 (see [1]), use
getextensions() instead obsolete since gecko 2.0 prefs readonly attribute extipreferencebranch the preferences object for the application.
...
getextensions(acallback) calls acallback with the list of installed extensions.
...And 2 more matches
Creating a Python XPCOM component
# _reg_clsid_ = "{a new clsid generated for this object}" # _reg_contractid_ = "the.object.name" def
get_value( self ): # result: string pass def set_value( self, param0 ): # result: void - none # in: param0: string pass as you can see, the output is valid python code, with basic signatures and useful comments for each of the methods.
... a three-part tutorial on ibm developerworks:
getting to know pyxpcom - info on building pyxpcom (and maybe mozilla) to
get it to work.
...
getting started with pyxpcom, part 2 - accessing xpcom from python.
...And 2 more matches
HOWTO
put the following at the end of your script: // do async processing // from <https://developer.mozilla.org/en/xpconnect/xpcshell/howto> print("doing async work"); gscriptdone = false; var gthreadmanager = cc["@mozilla.org/thread-manager;1"] .
getservice(ci.nsithreadmanager); var mainthread = gthreadmanager.currentthread; while (!gscriptdone) mainthread.processnextevent(true); while (mainthread.haspendingevents()) mainthread.processnextevent(true); 2.
...both success and error callbacks, put: gscriptdone = true; if you for
get some condition where your script should exit but you don't add this statement, your script will hang (busy wait).
...e.g., you use: components.utils.import("resource://app/modules/gloda/log4moz.js"); however, you
get (for that particular line, which is the first import): uncaught exception: [exception...
...And 2 more matches
Observer Notifications
the registered component is always retrieved as a singleton (that is
getservice() will be used to instantiate it).
...prepend "service," to the contract id in the category registration to be invoked via
getservice() instead of createinstance().
...see this code snippet to learn how to
get the tab that issued the request.
...And 2 more matches
IAccessibleApplication
method overview [prop
get] hresult appname([out] bstr name ); [prop
get] hresult appversion([out] bstr version ); [prop
get] hresult toolkitname([out] bstr name ); [prop
get] hresult toolkitversion([out] bstr version ); methods appname() returns the application name.
... [prop
get] hresult appname( [out] bstr name ); parameters name the application name.
...[prop
get] hresult appversion( [out] bstr version ); parameters version the application version.
...And 2 more matches
mozISpellCheckingEngine
method overview void adddirectory(in nsifile dir); boolean check(in wstring word); void
getdictionarylist([array, size_is(count)] out wstring dictionaries, out pruint32 count); void removedirectory(in nsifile dir); void suggest(in wstring word,[array, size_is(count)] out wstring suggestions, out pruint32 count); attributes attribute type description copyright wstring a string indicating the ...
...this will be either element from the array returned by
getdictionarylist() or an empty string if no dictionary is selected.
...
getdictionarylist()
gets the list of dictionaries.
...And 2 more matches
nsIAccessibleEvent
accessible/public/nsiaccessibleevent.idlscriptable an interface for accessibility events listened to by in-process accessibility clients, which can be used to find out how to
get accessibility and dom interfaces for the event and its tar
get.
... accessibledocument nsiaccessibledocument the nsiaccessibledocument that the event tar
get nsiaccessible resides in.
... this can be used to
get the dom window, the dom document and the window handler, among other things.
...And 2 more matches
nsIAccessibleSelectable
accessible/public/nsiaccessibleselectable.idlscriptable an interface for the accessibility module and in-process accessibility clients for dealing with
getting and changing the selection of accessible nodes.
... inherits from: nsisupports last changed in gecko 1.7 method overview void addchildtoselection(in long index); void clearselection(); nsiarray
getselectedchildren(); boolean ischildselected(in long index); nsiaccessible refselection(in long index); void removechildfromselection(in long index); boolean selectallselection(); attributes attribute type description selectioncount long the number of accessible children currently selected.
... constants constant value description eselection_add 0 eselection_remove 1 eselection_
getstate 2 methods addchildtoselection() adds the specified accessible child of the object to the object's selection.
...And 2 more matches
nsIAppStartup
to use the service: var appstartup = components.classes["@mozilla.org/toolkit/app-startup;1"] .
getservice(components.interfaces.nsiappstartup); method overview void createhiddenwindow(); boolean createstartupstate(in long awindowwidth, in long awindowheight); obsolete since gecko 1.9.1 void destroyhiddenwindow(); void doprofilestartup(in nsicmdlineservice acmdlineservice, in boolean caninteract); obsolete since gecko 1.9.1 void ensure1window(in ...
...nsicmdlineservice acmdlineservice); obsolete since gecko 1.9.1 void enterlastwindowclosingsurvivalarea(); void exitlastwindowclosingsurvivalarea(); void
getstartupinfo(); void hidesplashscreen(); obsolete since gecko 1.9.1 void initialize(in nsisupports nativeappsupportorsplashscreen); obsolete since gecko 1.9.1 void quit(in pruint32 amode); void restartinsafemode(in pruint32 aquitmode); void run(); attributes attribute type description interrupted boolean true if the startup process was interrupted by an interactive prompt.
... nativeappsupport nsinativeappsupport
getter for "native application support." read only.
...And 2 more matches
nsIApplicationCache
method overview void activate(); void addnamespaces(in nsiarray namespaces); void discard(); void gatherentries(in pruint32 typebits, out unsigned long count, [array, size_is(count)] out string keys); nsiapplicationcachenamespace
getmatchingnamespace(in acstring key); unsigned long
gettypes(in acstring key); void initashandle(in acstring groupid, in acstring clientid); void markentry(in acstring key, in unsigned long typebits); void unmarkentry(in acstring key, in unsigned long typebits); attributes attribute type description active boolean true if the cache is the active cache for this group, otherwise false...
...
getmatchingnamespace() returns the most specific namespace matching a given key.
... nsiapplicationcachenamespace
getmatchingnamespace( in acstring key ); parameters key the key for the cache entry whose most specific namespace is to be returned.
...And 2 more matches
nsIBlocklistService
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 29 (firefox 29 / thunderbird 29 / seamonkey 2.26) method overview unsigned long
getaddonblockliststate(in jsval addon, [optional] in astring appversion, [optional] in astring toolkitversion); unsigned long
getpluginblockliststate(in nsiplugintag plugin, [optional] in astring appversion, [optional] in astring toolkitversion); boolean isaddonblocklisted(in jsval addon, [optional] in astring appversion, [optional] in astring toolkitversion); constants constant value description state_not_blocked 0 state_softblocked 1 ...
... state_blocked 2 state_outdated 3 methods
getaddonblockliststate() determine the blocklist state of an add-on.
... unsigned long
getaddonblockliststate( in jsval addon, in astring appversion, optional in astring toolkitversion optional ); parameters addon the addon object whose blocklist state is to be determined.
...And 2 more matches
nsICacheDeviceInfo
inherits from: nsisupports last changed in gecko 1.7 attributes attribute type description description string
get a human readable description of the cache device.
... entrycount unsigned long
get the number of stored cache entries.
... maximumsize unsigned long
get the upper limit of the size of the data the cache can store.
...And 2 more matches
nsIChannel
netwerk/base/nsichannel.idlscriptable this interface allows clients to construct '
get' requests for specific protocols, and manage them in a uniform way.
...in earlier versions callers could
get the "content-length" property as 64-bit value by queryinterfacing the channel to nsipropertybag2, if that interface is exposed by the channel.
... load_retar
geted_document_uri 17 if the end consumer for this load has been retar
geted after discovering its content, this flag will be set: load_replace 18 this flag is set to indicate that this channel is replacing another channel.
...And 2 more matches
nsIClipboardDragDropHookList
wid
get/public/nsiclipboarddragdrophooklist.idlscriptable this interface is an internal gecko component.
...within gecko, this interface is used by calling
get_interface on a docshell.
... method overview void addclipboarddragdrophooks(in nsiclipboarddragdrophooks ahooks); nsisimpleenumerator
gethookenumerator(); void removeclipboarddragdrophooks(in nsiclipboarddragdrophooks ahooks); methods addclipboarddragdrophooks() this method adds a hook to the list.
...And 2 more matches
nsIContentViewManager
see
getting access to content views for details.
... once you have the view manager, you can call
getcontentviewsin() to
get a list of the content views for a given portion of the browser display, then use those nsicontentview objects to manipulate the content views.
... method overview void
getcontentviewsin(in float axpx, in float aypx, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, [optional] out unsigned long alength, [retval, array, size_is(alength)] out nsicontentview aresult); attributes attribute type description rootcontentview nsicontentview the root content view.
...And 2 more matches
nsIDOMChromeWindow
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void beginwindowmove(in nsidomevent mousedownevent); void
getattention(); void
getattentionwithcyclecount(in long acyclecount); void maximize(); void minimize(); void notifydefaultbuttonloaded(in nsidomelement defaultbutton); void restore(); void setcursor(in domstring cursor); attributes attribute type description browserdomwindow nsibrowserdomwindow the related nsibrowserdomwindow instance which provides access to yet another layer of utility functions by chrome script.
...
getattention() void
getattention(); parameters none.
...
getattentionwithcyclecount() same as
getattention method excepting that this can specify the maximum number of times to animate the window per system conventions.
...And 2 more matches
nsIDOMNSHTMLDocument
inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void captureevents(in long eventflags); void clear(); boolean execcommand(in domstring commandid, in boolean doshowui, in domstring value); boolean execcommandshowhelp(in domstring commandid); obsolete since gecko 14.0 domstring
getselection(); nsidomdocument open(in acstring acontenttype, in boolean areplace); boolean querycommandenabled(in domstring commandid); boolean querycommandindeterm(in domstring commandid); boolean querycommandstate(in domstring commandid); boolean querycommandsupported(in domstring commandid); domstring querycommandtext(in domstring commandid); ...
... embeds nsidomhtmlcollection equivalent to
getelementsbytagname("embed") read only.
...
getselection() domstring
getselection(); parameters none.
...And 2 more matches
nsIDOMStorageManager
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) implemented by @mozilla.org/dom/storagemanager;1 as a service: var domstoragemanager = components.classes["@mozilla.org/dom/storagemanager;1"] .
getservice(components.interfaces.nsidomstoragemanager); method overview void clearofflineapps(); nsidomstorage
getlocalstorageforprincipal(in nsiprincipal aprincipal, in domstring adocumenturi); long
getusage(in astring aownerdomain); methods clearofflineapps() clears keys owned by offline applications.
...
getlocalstorageforprincipal() returns the instance of the localstorage object for auri's origin.
...nsidomstorage
getlocalstorageforprincipal( nsiprincipal aprincipal, domstring adocumenturi ); parameters aprincipal the principal for which to return the local storage object.
...And 2 more matches
nsIDialogParamBlock
inherits from: nsisupports last changed in gecko 1.7 method overview print32
getint( in print32 inindex ); wstring
getstring( in print32 inindex ); void setint( in print32 inindex, in print32 inint ); void setnumberstrings( in print32 innumstrings ); void setstring( in print32 inindex, in wstring instring); attributes attribute type description objects nsimutablearray a place where you can store an nsimutablearray to pass nsisupports.
... methods
getint()
get a previously set integer.
... print32
getint( in print32 inindex ); parameters inindex the index of the integer to
get.
...And 2 more matches
nsIDictionary
method overview boolean haskey(in string key); void
getkeys(out pruint32 count, [retval, array, size_is(count)] out string keys); nsisupports
getvalue(in string key); void setvalue(in string key, in nsisupports value); nsisupports deletevalue(in string key); void clear(); methods haskey() check if a given key is present in the dictionary.
...
getkeys() retrieve all keys in the dictionary.
... void
getkeys( out pruint32 count, [retval, array, size_is(count)] out string keys ); return value array of all keys, unsorted.
...And 2 more matches
nsIDirectoryServiceProvider
xpcom/io/nsidirectoryservice.idlscriptable this interface is used by the directory service to
get file locations.
...method overview nsifile
getfile(in string prop, out prbool persistent); methods
getfile() the directory service calls this method when it
gets the first request for a prop or on every request if the prop is not persistent.
... nsifile
getfile( in string prop, out prbool persistent ); parameters prop the symbolic name of the file.
...And 2 more matches
nsIDocumentLoader
uriloader/base/nsidocumentloader.idlscriptable this interface responsible for tracking groups of loads that belong to
gether (images, external scripts, and so on.) and subdocuments (iframe, frame, and so on.).
...tloader aninstance); obsolete since gecko 1.8 void destroy(); obsolete since gecko 1.8 void fireonlocationchange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri auri); obsolete since gecko 1.8 void fireonstatuschange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsresult astatus, in wstring amessage); obsolete since gecko 1.8 void
getcontentviewercontainer(in nsisupports adocumentid, out nsicontentviewercontainer aresult); native code only!
... obsolete since gecko 1.8 nsiloadgroup
getloadgroup(); obsolete since gecko 1.8 boolean isbusy(); obsolete since gecko 1.8 void stop(); attributes attribute type description container nsisupports read only.
...And 2 more matches
nsIEditor
moveattributeorequivalent(in nsidomelement element, in domstring sourceattrname, in boolean asuppresstransaction); void postcreate(); void predestroy(in boolean adestroyingframes); selected content removal void deleteselection(in short action, in short stripwrappers); document info and file methods void resetmodificationcount(); long
getmodificationcount(); void incrementmodificationcount(in long amodcount); void incrementmodificationcount(in long amodcount); transaction methods void dotransaction(in nsitransaction txn); void enableundo(in boolean enable); void undo(in unsigned long count); void canundo(out boolean isenabled, out boolean canundo); void redo(i...
... void canredo(out boolean isenabled, out boolean canredo); void begintransaction(); void endtransaction(); void beginplaceholdertransaction(in nsiatom name); void endplaceholdertransaction(); boolean shouldtxnsetselection(); void setshouldtxnsetselection(in boolean should); inline spellchecking methods nsiinlinespellchecker
getinlinespellchecker(in boolean autocreate); void syncrealtimespell(); void setspellcheckuseroverride(in boolean enable); clipboard methods void cut(); boolean cancut(); void copy(); boolean cancopy(); void paste(in long aselectiontype); boolean canpaste(in long aselectiontype); selection methods void ...
...ll(); void beginningofdocument(); void endofdocument(); drag/drop methods boolean candrag(in nsidomevent aevent); void dodrag(in nsidomevent aevent); void insertfromdrop(in nsidomevent aevent); node manipulation methods void setattribute(in nsidomelement aelement, in astring attributestr,in astring attvalue); boolean
getattributevalue(in nsidomelement aelement, in astring attributestr, out astring resultvalue); void removeattribute(in nsidomelement aelement, in astring aattribute); void cloneattribute(in astring aattribute, in nsidomnode asourcenode); void cloneattributes(in nsidomnode destnode, in nsidomnode sourcenode); nsidomnode createnode(in astring tag, in nsidomnode pare...
...And 2 more matches
nsIHttpServer
an example : https://github.com/laurentj/slimerjs/blob/master/src/modules/webserver.jsm var exported_symbols = ["create"]; components.utils.import("resource://gre/modules/services.jsm"); function create() { var server = components.classes["@mozilla.org/server/jshttp;1"] .createinstance(components.interfaces.nsihttpserver); return {
get objectname () { return "webserver"; }, /** * @param integer|string port port or "host:port" * @param object opt optional options.
...: function(prefix, handlercallback) { server.registerprefixhandler(prefix, function (request, response) { var req = createhttprequest(request); var resp = new httpresponse(response); handlercallback(req, resp); }); }, close: function(){ server.stop(function(){}); },
get port() { return server.identity.primaryport } } } reference : mozilla-release/netwerk/test/httpserver/nsihttpserver.idl [scriptable, uuid(cea8812e-faa6-4013-9396-f9936cbb74ec)] interface nsihttpserver : nsisupports { /** * starts up this server, listening upon the given port.
... */ astring
getstate(in astring path, in astring key); /** * sets the string associated with the given key in this, for the given path's * saved state.
...And 2 more matches
nsILocalFile
void appendrelativepath(in astring relativefilepath); acstring
getrelativedescriptor(in nsilocalfile fromfile); void initwithfile(in nsilocalfile afile); void initwithnativepath(in acstring filepath); native code only!
...
getrelativedescriptor() returns a relative file path in an opaque, cross platform format.
... acstring
getrelativedescriptor( in nsilocalfile fromfile ); parameters fromfile the file from which the descriptor is relative.
...And 2 more matches
nsIMsgFilter
defined in comm-central/ mailnews/ base/ search/ public/ nsimsgfilter.idl attributes type attribute nsmsgruleactiontype type; priority // tar
get priority..
... throws an exception if the action is not priority attribute nsmsgpriorityvalue priority; tar
getfolderuri // tar
get folder..
... throws an exception if the action is not move to folder attribute acstring tar
getfolderuri; label // tar
get label.
...And 2 more matches
nsIMsgProtocolInfo
method overview long
getdefaultserverport(in boolean issecure); attributes attribute type description candelete boolean true if an account of this type may be deleted.
... can
getincomingmessages boolean true if junk ui actions should be enabled for the account type.
... can
getmessages boolean true if "
get messages" ui actions should be enabled for the account type.
...And 2 more matches
nsIMsgThread
inherits from: nsisupports method overview void addchild(in nsimsgdbhdr child, in nsimsgdbhdr inreplyto, in boolean threadinthread, in nsidbchangeannouncer announcer); nsimsgdbhdr
getchildat(in long index); nsmsgkey
getchildkeyat(in long index); nsimsgdbhdr
getchild(in nsmsgkey msgkey); nsimsgdbhdr
getchildhdrat(in long index); nsimsgdbhdr
getroothdr(out long index); void removechildat(in long index); void removechildhdr(in nsimsgdbhdr child, in nsidbchangeannouncer announcer); void markchildread(in boolean bread); nsimsgdbhdr
getfirstunreadchild(); nsisimpleenumerator enumeratemessages(in nsmsgkey parent); ...
...
getchildat() returns the message at an index.
... nsimsgdbhdr
getchildat(in long index); parameters index the index to
get the message from
getchildkeyat() nsmsgkey
getchildkeyat(in long index); parameters index the index to
get the key from
getchild() nsimsgdbhdr
getchild(in nsmsgkey msgkey); parameters msgkey the index to
get the key from
getchildhdrat() nsimsgdbhdr
getchildhdrat(in long index); parameters index the index to
get the message from.
...And 2 more matches
nsINavHistoryQueryOptions
note that this has no effect on folder links, which are place: uris returned by nsinavbookmarkservice's
getfolderuri method.
...if you do, set this flag and you'll
get all items, even hidden ones.
...set to "0" (the default) to
get all results.
...And 2 more matches
nsIParentalControlsService
to create an instance, use: var parentalcontrolsservice = components.classes["@mozilla.org/parental-controls-service;1"] .createinstance(components.interfaces.nsiparentalcontrolsservice); method overview void log(in short aentrytype, in boolean aflag, in nsiuri asource, [optional] in nsifile atar
get); boolean requesturioverride(in nsiuri atar
get, [optional] in nsiinterfacerequestor awindowcontext); boolean requesturioverrides(in nsiarray atar
gets, [optional] in nsiinterfacerequestor awindowcontext); attributes attribute type description blockfiledownloadsenabled boolean true if the current user account's parental controls restrictions i...
... void log( in short aentrytype, in boolean aflag, in nsiuri asource, in nsifile atar
get optional ); parameters aentrytype the type of event to log.
... atar
get optional the location to which the content was saved if it was not blocked.
...And 2 more matches
nsIPropertyBag
inherits from: nsisupports last changed in gecko 1.0 method overview nsivariant
getproperty(in astring name); attributes attribute type description enumerator nsisimpleenumerator
get a nsisimpleenumerator whose elements are nsiproperty objects.
... methods
getproperty()
get a property value for the given name.
... nsivariant
getproperty( in astring name ); parameters name the name to return the matching property.
...And 2 more matches
nsIRadioInterfaceLayer
to create an instance, use: var radiointerfacelayer = components.classes["@mozilla.org/telephony/system-worker-manager;1"] .
getservice(components.interfaces.nsiinterfacerequestor) .createinstance(components.interfaces.nsiradiointerfacelayer); method overview void answercall(in unsigned long callindex); void deactivatedatacall(in domstring cid, in domstring reason); void dial(in domstring number); void enumeratecalls(in nsiriltelephonycallback callback); void
getdatacalllist(); unsig...
...ned short
getnumberofmessagesfortext(in domstring text); void hangup(in unsigned long callindex); void registercallback(in nsiriltelephonycallback callback); void registerdatacallcallback(in nsirildatacallback callback); void rejectcall(in unsigned long callindex); void sendsms(in domstring number, in domstring message, in long requestid, in unsigned long long processid); void setupdatacall(in long radiotech, in domstring apn, in domstring user, in domstring passwd, in long chappap, in domstring pdptype); void starttone(in domstring dtmfchar); void stoptone(); void unregistercallback(in nsiriltelephonycallback callback); void unregisterdatacallcallback(in nsirildatacallback callback); attributes attribute type description currentstate jsval read only.
...void enumeratecalls( in nsiriltelephonycallback callback ); parameters callback missing description exceptions thrown missing exception missing description
getdatacalllist() void
getdatacalllist(); parameters none.
...And 2 more matches
nsITaggingService
to use this service, use: var taggingsvc = components.classes["@mozilla.org/browser/tagging-service;1"] .
getservice(components.interfaces.nsitaggingservice); method overview void taguri(in nsiuri auri, in nsivariant atags); void untaguri(in nsiuri auri, in nsivariant atags); nsivariant
geturisfortag(in astring atag); nsivariant
gettagsforuri(in nsiuri auri, [optional] out unsigned long length, [retval, array, size_is(length)] out wstring at...
...
geturisfortag() this method retrieves all uris tagged with the given tag.
... nsivariant
geturisfortag( in astring atag ); parameters atag the tag name.
...And 2 more matches
nsIToolkitProfileService
method overview nsitoolkitprofile createprofile(in nsilocalfile arootdir, in autf8string aname); void flush(); nsitoolkitprofile
getprofilebyname(in autf8string aname); nsiprofilelock lockprofilepath(in nsilocalfile adirectory, in nsilocalfile atempdirectory); attributes attribute type description profilecount unsigned long the number of user profiles currently in existence.
... profiles nsisimpleenumerator an enumerator providing access to the list of profiles; each profile is an nsitoolkitprofile object (though you must first call aprofile.queryinterface(components.interfaces.nsitoolkitprofile) to
get access to its attributes and methods).
...this may throw an ns_error_failure (0x80004005) when trying to
get the current profile if it's unavailable or if permissions restrict access.
...And 2 more matches
nsITreeContentView
last changed in gecko 1.8.0 inherits from: nsisupports method overview long
getindexofitem(in nsidomelement item); nsidomelement
getitematindex(in long index); attributes attribute type description root nsidomelement the element in the dom which this view uses as root content.
...obsolete since gecko 1.8 methods
getindexofitem() retrieve the index associated with the specified content item.
... long
getindexofitem( in nsidomelement item ); parameters item a tree row for which to find the row index.
...And 2 more matches
nsIUpdateItem
method overview void init(in astring id, in astring version, in astring installlocationkey, in astring minappversion, in astring maxappversion, in astring name, in astring downloadurl, in astring xpihash, in astring iconurl, in astring updateurl, in astring updatekey, in long type, in astring tar
getappid); attributes attribute type description iconurl astring the url of the icon that can be shown for this item.
... tar
getappid astring the tar
get application id used for checking compatibility for this item.
... note: add-ons can specify a tar
getapplication id of toolkit@mozilla.org in their install manifest for compatibility with all apps using a specific release of the toolkit.
...And 2 more matches
nsIXMLHttpRequest
nsixmlhttprequest along with nsijsxmlhttprequest and nsixmlhttprequesteventtar
get are mozilla's implementation details of the dom xmlhttprequest object.
...when using the xpcom interface, as seen below in example 2, we can
get access to this.
...here is a comment from johnny stenback <jst@netscape.com>: the mozilla implementation of nsixmlhttprequest implements the interface nsidomeventtar
get and that's how you're supported to add event listeners.
...And 2 more matches
Status, Recent Changes, and Plans
you may want to skip directly to the
getting started guide, the reference manual, or the faq.
... made
getter_addrefs( nscomptr& ) apply the same type-safety check that the simple assignment forms do.
... added do_
getservice.
...And 2 more matches
Working with out parameters
void
gettransferdata ( in string aflavor, out nsisupports adata, out unsigned long adatalen ) ; ...
... } the
gettransferdata method takes three parameters, aflavor, adata, and adatalen, and returns nothing.
...to
get at the out parameters, you have to pass in an object.
...And 2 more matches
Adding items to the Folder Pane
the following code snippet listens for that event: let gnumbersext = { load: function gne_load() { window.removeeventlistener("load", gnumbersext.load, false); let tree = document.
getelementbyid("foldertree"); tree.addeventlistener("maprebuild", gnumbersext._insert, false); }, _insert: function gne__insert() { // this function is called when a rebuild occurs } }; window.addeventlistener("load", gnumbersext.load, true); the structure of folder-tree-items the folder pane stores its current display data in a property called _rowmap.
...must persist over sessions text (attribute) the text to display in the tree level (attribute) the level in the tree to display the item at open (rw, attribute) whether or not this container is open children (attribute) an array of child items also conforming to this spec
getproperties (function) a call from
getrowproperties or
getcellproperties for this item will be passed into this function command (function) this function will be called when the item is double-clicked for our example extension, two different types of folder-tree-items will be defined.
... first, our "numbers" container looks like this: let containerrow = { _numbers: 3, id: "numbers-main-container", text: "numbers", level: 0, open: false, _children: null,
get children() { if (!this._children) { this._children = []; for (var i = 1; i <= this._numbers; i++) this._children.push(new numberrow(i)); } return this._children; },
getproperties: function gne_
getprops() { // put your css attributes here }, command: function gne_command() { // just going to alert, to do something here components.classes["@mozilla.org/embedcomp/prompt-service;1"] .
getservice(components.interfaces.nsipromptservice) .alert(...
...And 2 more matches
Folders and message lists
interacting with the current folder the folderdisplaywid
get for the current folder can be accessed via the global variable gfolderdisplay.
...
getting the current nsimsgfolder the nsimsgfolder interface contains many methods and attributes for working with folders.
... to
get the nsimsgfolder instance for the currently-displayed folder, just use gfolderdisplay.displayedfolder.
...And 2 more matches
Using tab-modal prompts
only the window.alert() method
gets this by default; you
get this by default.
... disabling tab-modal prompts you can disable tab-modal prompts and
get back window-modal prompts by setting the prompts.tab_modal.enabled preference to false.
...you can force a prompt to be tab-modal using code like this: var thewindow = gbrowser.contentwindow; let prompt = components.classes["@mozilla.org/prompter;1"] .
getservice(components.interfaces.nsipromptfactory) .
getprompt(thewindow, components.interfaces.nsiprompt); let bag = prompt.queryinterface(components.interfaces.nsiwritablepropertybag2); bag.setpropertyasbool("allowtabmodal", true); the var "thewindow" is a reference to the dom window.
...And 2 more matches
Browser Side Plug-in API - Plugins
npn_
getauthenticationinfo this function is called by plug-ins to
get http authentication information from the browser.
... npn_
geturl asks the browser to create a stream for the specified url.
... npn_
geturlnotify requests creation of a new stream with the contents of the specified url;
gets notification of the result.
...And 2 more matches
Scripting plugins - Plugins
mozilla does this by calling the old plugin api call npp_
getvalue with the new enumeration value that has been added to the nppvariable enumeration.
... a plugin that wishes to be scriptable using this new mechanism needs to return the appropriate npobject (which is created by calling npn_createobject) when the browser requests it by calling: npp_
getvalue(npp, nppvpluginscriptablenpobject, ...); accessing browser objects from a plugin a plugin that wishes to access objects in the browser window that loaded the plugin can do this by
getting the npobject for the browser's window object, or the dom element that loaded the plugin.
... this is done by using an extension to npn_
getvalue.
...And 2 more matches
Use watchpoints - Firefox Developer Tools
there are three types of watchpoints:
get, set, and
get or set.
... a
get watchpoint pauses whenever a property is read; a set watchpoint pauses whenever a property value changes; a
get or set watchpoint pauses whenever a property value is accessed in either way.
... choose break on, and then one of property set property
get property
get or set a watchpoint icon appears to the right of the property in the scopes pane.
...And 2 more matches
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
site = components.utils.waivexrays(site.frame); if (!counts.has(site)) counts.set(site, 0); counts.set(site, counts.
get(site) + 1); } // walk from each site that allocated something up to the // root, computing allocation totals that include // children.
... var totals = new map; for (let [site, count] of counts) { for(;;) { if (!totals.has(site)) totals.set(site, 0); totals.set(site, totals.
get(site) + count); if (!site) break; site = site.parent; } } // compute parent-to-child links, since saved stack frames // have only parent links.
... var rootchildren = new map; function childmapfor(site) { if (!site) return rootchildren; let parentmap = childmapfor(site.parent); if (parentmap.has(site)) return parentmap.
get(site); var m = new map; parentmap.set(site, m); return m; } for (let [site, total] of totals) { childmapfor(site); } // print the allocation count for |site|.
...And 2 more matches
Examine and edit CSS - Firefox Developer Tools
highlight matched elements: next to the selector is a tar
get icon: click this to highlight all nodes in the page that match this selector.
... if the element has a display: grid declaration, then it
gets a grid icon next to it, like this: .
... this also
gets the tar
get icon: , giving you a convenient way to highlight the currently selected element in the page.
...And 2 more matches
Firefox Developer Tools
note: if you are just
getting started with web development and using developer tools, our learning docs will help you — see
getting started with the web and what are browser developer tools?
... download firefox developer edition connecting the developer tools if you open the developer tools using keyboard shortcuts or the equivalent menu items, they'll tar
get the document hosted by the currently active tab.
... but you can attach the tools to a variety of other tar
gets, too, both within the current browser and in different browsers or even different devices.
...And 2 more matches
AudioBufferSourceNode - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" tar
get="_top"><rect x="151" y="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="241,25 251,20 251,30 241,25" stroke="#d4dde4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audioscheduledsourcenode" tar
get="_top"><rect x="281" y="1" width="240" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">aud...
...ioscheduledsourcenode</text></a><polyline points="521,25 531,20 531,30 521,25" stroke="#d4dde4" fill="none"/><line x1="531" y1="25" x2="561" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiobuffersourcenode" tar
get="_top"><rect x="561" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="666" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiobuffersourcenode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} an audiobuffersourcenode has no inputs and exactly one output, which has the same number of channels as the audiobuffer indicated by its buffer property.
...And 2 more matches
BluetoothRemoteGATTService - Web APIs
interface interface bluetoothremotegattservice : serviceeventhandlers { readonly attribute uuid uuid; readonly attribute boolean isprimary; readonly attribute bluetoothdevice device; promise<bluetoothgattcharacteristic>
getcharacteristic(bluetoothcharacteristicuuid characteristic); promise<sequence<bluetoothgattcharacteristic>>
getcharacteristics(optional bluetoothcharacteristicuuid characteristic); promise<bluetoothgattservice>
getincludedservice(bluetoothserviceuuid service); promise<sequence<bluetoothgattservice>>
getincludedservices(optional bluetoothserviceuuid service); }; properties bluetoothremoteg...
... methods bluetoothremotegattservice.
getcharacteristic() returns a promise to an instance of bluetoothgattcharacteristic for a given universally unique identifier (uuid).
... bluetoothremotegattservice.
getcharacteristics() returns a promise to an array of bluetoothgattcharacteristic instances for an optional universally unique identifier (uuid).
...And 2 more matches
BroadcastChannel - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/broadcastchannel" tar
get="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">broadcastchannel</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor broadcastchannel() creates an object linking to the named channel.
... properties this interface also inherits properties from its parent, eventtar
get.
...And 2 more matches
CacheStorage - Web APIs
those that aren't using https, although this definition will likely become more complex in the future.) when testing, you can
get around this by checking the "enable service workers over http (when toolbox is open)" option in the firefox devtools options/gear menu.
... // try to
get data from the cache, but fall back to fetching it live.
... async function
getdata() { const cacheversion = 1; const cachename = `myapp-${ cacheversion }`; const url = 'https://jsonplaceholder.typicode.com/todos/1'; let cacheddata = await
getcacheddata( cachename, url ); if ( cacheddata ) { console.log( 'retrieved cached data' ); return cacheddata; } console.log( 'fetching fresh data' ); const cachestorage = await caches.open( cachename ); await cachestorage.add( url ); cacheddata = await
getcacheddata( cachename, url ); await deleteoldcaches( cachename ); return cacheddata; } //
get data from the cache.
...And 2 more matches
CanvasRenderingContext2D.arcTo() - Web APIs
note: be aware that you may
get unexpected results when using a relatively large radius: the arc's connecting line will go in whatever direction it must to meet the specified radius.
... html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // tangential lines ctx.beginpath(); ctx.strokestyle = 'gray'; ctx.moveto(200, 20); ctx.lineto(200, 130); ctx.lineto(50, 20); ctx.stroke(); // arc ctx.beginpath(); ctx.strokestyle = 'black'; ctx.linewidth = 5; ctx.moveto(200, 20); ctx.arcto(200,130, 50,20, 40); ctx.stroke(); // start point ctx.beginpath(); ctx.fillstyle = 'blue'; ctx.a...
... const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); const p0 = { x: 230, y: 20 } const p1 = { x: 90, y: 130 } const p2 = { x: 20, y: 20 } const labelpoint = function (p) { const offset = 15; ctx.filltext('(' + p.x + ',' + p.y + ')', p.x + offset, p.y + offset); } ctx.beginpath(); ctx.moveto(p0.x, p0.y); ctx.arcto(p1.x, p1.y, p2.x, p2.y, 50); ctx.lineto(p2.x, p2.y); labelpoint(p...
...And 2 more matches
CanvasRenderingContext2D.stroke() - Web APIs
the stroke is drawn using the non-zero winding rule, which means that path intersections will still
get filled.
... html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.rect(10, 10, 150, 100); ctx.stroke(); result re-stroking paths typically, you'll want to call beginpath() for each new thing you want to stroke.
... if you don't, the previous sub-paths will remain part of the current path, and
get stroked every time you call the stroke() method.
...And 2 more matches
Transformations - Web APIs
function draw() { var ctx = document.
getelementbyid('canvas').
getcontext('2d'); ctx.fillrect(0, 0, 150, 150); // draw a rectangle with default settings ctx.save(); // save the default state ctx.fillstyle = '#09f'; // make changes to the settings ctx.fillrect(15, 15, 120, 120); // draw a rectangle with new settings ctx.save(); // save the current state ctx.fillstyle = '#fff'; /...
... function draw() { var ctx = document.
getelementbyid('canvas').
getcontext('2d'); for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { ctx.save(); ctx.fillstyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)'; ctx.translate(10 + j * 50, 10 + i * 50); ctx.fillrect(0, 0, 25, 25); ctx.restore(); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sa...
... function draw() { var ctx = document.
getelementbyid('canvas').
getcontext('2d'); // left rectangles, rotate from canvas origin ctx.save(); // blue rect ctx.fillstyle = '#0095dd'; ctx.fillrect(30, 30, 100, 100); ctx.rotate((math.pi / 180) * 25); // grey rect ctx.fillstyle = '#4d4e53'; ctx.fillrect(30, 30, 100, 100); ctx.restore(); // right rectangles, rotate from rectangle center // draw blue rect ctx.fillstyle...
...And 2 more matches
DataTransfer.clearData() - Web APIs
example this example shows the use of the datatransfer object's
getdata(), setdata() and cleardata() methods.
...</span> <span class="tweaked" id="tar
get">drop zone</span> <div>status: <span id="status">drag to start</span></div> <div>data is: <span id="data">uninitialized</span></div> css span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; } #source { color: blue; border: 1px solid black; } #tar
get { border: 1px solid black; } javascript window.addeventlistener('domcontentloaded', function () { // select html elements var draggable = document.
getelementbyid('source'); var dropable = document.
getelementbyid('tar
get'); var status = document.
getelementbyid('status'); var data = document.
getelementbyi...
...event handlers draggable.addeventlistener('dragstart', dragstarthandler); draggable.addeventlistener('dragend', dragendhandler); dropable.addeventlistener('dragover', dragoverhandler); dropable.addeventlistener('dragleave', dragleavehandler); dropable.addeventlistener('drop', drophandler); function dragstarthandler (event) { status.innerhtml = 'drag in process'; // change tar
get element's border to signify drag has started event.currenttar
get.style.border = '1px dashed blue'; // start by clearing existing clipboards; this will affect all types since we // don't give a specific type.
...And 2 more matches
DataTransferItem - Web APIs
methods datatransferitem.
getasfile() returns the file object associated with the drag data item (or null if the drag item is not a file).
... datatransferitem.
getasstring() invokes the specified callback with the drag data item string as its argument.
... datatransferitem.webkit
getasentry() returns an object based on filesystementry representing the selected file's entry in its file system.
...And 2 more matches
DataTransferItemList.DataTransferItem() - Web APIs
the datatransferitem()
getter method implements support for accessing items in the datatransferitemlist using array-style syntax (that is datatransferitem[index]).
... javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.tar
get.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
...h ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the tar
get node data[i].
getasstring(function (s){ ev.tar
get.appendchild(document.
getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].
getasstring(function (s){ console.log("...
...And 2 more matches
DirectoryReaderSync - Web APIs
that
gets you back to a directoryentrysync (as well as fileentrysync) object.
... console.log(fileentry.name); }); }); }; worker.postmessage({'cmd': 'list'}); the following is worker.js code that
gets the contents of the directory.
...var paths = []; function
getallentries(dirreader) { var entries = dirreader.readentries(); for (var i = 0, entry; entry = entries[i]; ++i) { // stash this entry's filesystem in url paths.push(entry.tourl()); // if this is a directory, traverse.
...And 2 more matches
DragEvent - Web APIs
dragenter this event is fired when a dragged element or text selection enters a valid drop tar
get.
... dragexit this event is fired when an element is no longer the drag operation's immediate selection tar
get.
... dragleave this event is fired when a dragged element or text selection leaves a valid drop tar
get.
...And 2 more matches
Element.className - Web APIs
the classname property of the element interface
gets and sets the value of the class attribute of the specified element.
... example let el = document.
getelementbyid('item'); if (el.classname === 'active'){ el.classname = 'inactive'; } else { el.classname = 'active'; } notes the name classname is used for this property instead of class because of conflicts with the "class" keyword in many languages which are used to manipulate the dom.
...it is better to
get/set the classname of an element using element.
getattribute and element.setattribute if you are dealing with svg elements.
...And 2 more matches
ElementCSSInlineStyle.style - Web APIs
the style property is used to
get as well as set the inline style of an element.
... when
getting, it returns a cssstyledeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline style attribute.
... examples // set multiple styles in a single statement elt.style.csstext = "color: blue; border: 1px solid black"; // or elt.setattribute("style", "color:red; border: 1px solid blue;"); // set specific style while leaving other inline style values untouched elt.style.color = "blue";
getting style information the style property is not useful for completely learning about the styles applied on the element, since it represents only the css declarations set in the element's inline style attribute, not those that come from style rules elsewhere, such as style rules in the <head> section, or external style sheets.
...And 2 more matches
FetchEvent - Web APIs
examples this fetch event uses the browser default for non-
get requests.
... for
get requests it tries to return a match in the cache, and falls back to the network.
... self.addeventlistener('fetch', event => { // let the browser do its default thing // for non-
get requests.
...And 2 more matches
FileSystemEntry - Web APIs
// opening a file system with temporary storage window.requestfilesystem(temporary, 1024*1024 /*1mb*/, function(fs) { fs.root.
getfile('log.txt', {}, function(fileentry) { fileentry.remove(function() { console.log('file removed.'); }, onerror); }, onerror); }, onerror); properties this interface provides the following properties.
...
getmetadata() obtains metadata about the file, such as its modification date and size.
...
getparent() returns a filesystemdirectoryentry representing the entry's parent directory.
...And 2 more matches
Introduction to the File and Directory Entries API - Web APIs
if you are tar
geting chrome for your app and you want to store blobs, the file and directory entries api and app cache are your only choices.
... the app can restart uploads after an interruption, such as the browser being closed or crashing, connectivity
getting interrupted, or the computer
getting shut down.
...temporary storage is easier to
get, because the browser just gives it to you, but it is limited and can be deleted by the browser when it runs out of space.
...And 2 more matches
GlobalEventHandlers.ondragend - Web APIs
syntax var dragendhandler = tar
getelement.ondragend; return value dragendhandler the dragend event handler for element tar
getelement.
... <!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #tar
get { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttar
get.style.border = "dashed"; ev.datatransfer.setdata("text", ev.tar
get.id); } function dragover_handler(ev) { console.log("dragover"); // change the tar
get element's border to signify a drag over ...
...event // has occurred ev.currenttar
get.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.
getdata("text"); ev.tar
get.appendchild(document.
getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttar
get.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttar
get.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the tar
get element's background color to visually indicate // the drag ended.
...And 2 more matches
GlobalEventHandlers.ondragenter - Web APIs
syntax var dragenterhandler = tar
getelement.ondragenter; return value dragenterhandler the dragenter event handler for element tar
getelement.
... <!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #tar
get { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttar
get.style.border = "dashed"; ev.datatransfer.setdata("text", ev.tar
get.id); } function dragover_handler(ev) { console.log("dragover"); // change the tar
get element's border to signify a drag over...
... event // has occurred ev.currenttar
get.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.
getdata("text"); ev.tar
get.appendchild(document.
getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttar
get.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttar
get.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the tar
get element's background color to visually indicate // the drag ended.
...And 2 more matches
GlobalEventHandlers.ondragexit - Web APIs
syntax var dragexithandler = tar
getelement.ondragexit; return value dragexithandler the dragexit event handler for element tar
getelement.
... <!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #tar
get { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttar
get.style.border = "dashed"; ev.datatransfer.setdata("text", ev.tar
get.id); } function dragover_handler(ev) { console.log("dragover"); // change the tar
get element's border to signify a drag over e...
...vent // has occurred ev.currenttar
get.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.
getdata("text"); ev.tar
get.appendchild(document.
getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttar
get.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttar
get.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the tar
get element's background color to visually indicate // the drag ended.
...And 2 more matches
GlobalEventHandlers.ondragleave - Web APIs
syntax var dragleavehandler = tar
getelement.ondragleave; return value dragleavehandler the dragleave event handler for element tar
getelement.
... <!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #tar
get { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's border to signify drag has started ev.currenttar
get.style.border = "dashed"; ev.datatransfer.setdata("text", ev.tar
get.id); } function dragover_handler(ev) { console.log("dragover"); // change the tar
get element's background color to signify a drag over...
... event // has occurred ev.currenttar
get.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.
getdata("text"); ev.tar
get.appendchild(document.
getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttar
get.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's background color back to white ev.currenttar
get.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the tar
get element's background color to visually indicate // the drag ended.
...And 2 more matches
HTMLAreaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlareaelement" tar
get="_top"><rect x="341" y="65" width="150" ...
...And 2 more matches
HTMLCanvasElement.toBlob() - Web APIs
exceptions securityerror the canvas's bitmap is not origin clean; at least some of its contents come from secure examples
getting a file representing the canvas once you have drawn content into a canvas, you can convert it into a file of any supported image format.
... var canvas = document.
getelementbyid('canvas'); canvas.toblob(function(blob) { var newimg = document.createelement('img'), url = url.createobjecturl(blob); newimg.onload = function() { // no longer need to read the blob so it's revoked url.revokeobjecturl(url); }; newimg.src = url; document.body.appendchild(newimg); }); note that here we're creating a png image; if you add a second parameter to the toblob() call, you can specify the image type.
... for example, to
get the image in jpeg format: canvas.toblob(function(blob){...}, 'image/jpeg', 0.95); // jpeg at 95% quality a way to convert a canvas to an ico (mozilla only) this uses -moz-parse to convert the canvas to ico.
...And 2 more matches
HTMLScriptElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlscriptelement" tar
get="_top"><rect x="321" y="65" width="170...
...And 2 more matches
IDBDatabase - Web APIs
the interface provides the only way to
get and manage versions of the database.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbdatabase" tar
get="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbdatabase</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties idbdatabase.name read only a domstring that contains the name of the connected database.
...And 2 more matches
IDBIndexSync - Web APIs
method overview any add (in any value, in optional any key) raises (idbdatabaseexception); any
get (in any key) raises (idbdatabaseexception); any
getobject (in any key) raises (idbdatabaseexception); void opencursor (in optional idbkeyrange range, in optional unsigned short direction) raises (idbdatabaseexception); void openobjectcursor (in optional idbkeyrange range, in optional unsigned short direction) raises (idbdatabaseexception); any put (in any value...
...
get() retrieves the value from this index for the record that corresponds to the given key.
... any
get ( in any key ) raises (idbdatabaseexception); parameters key the key that identifies the record to be retrieved.
...And 2 more matches
ImageCapture - Web APIs
methods the imagecapture interface is based on eventtar
get, so it includes the methods defined by that interface as well as the ones listed below.
... imagecapture.
getphotocapabilities() returns a promise that resolves with a photocapabilities object containing the ranges of available configuration options.
... imagecapture.
getphotosettings() returns a promise that resolves with a photosettings object containing the current photo configuration settings.
...And 2 more matches
Basic concepts - Web APIs
big concepts if you have assumptions from working with other types of databases, you might
get thrown off when working with indexeddb.
...you
get notified by a dom event when the operation finishes, and the type of event you
get lets you know if the operation succeeded or failed.
...dom events also have a tar
get property that indicates where the event is headed.
...And 2 more matches
IntersectionObserverEntry.intersectionRect - Web APIs
the intersectionobserverentry interface's read-only intersectionrect property is a domrectreadonly object which describes the smallest rectangle that contains the entire portion of the tar
get element which is currently visible within the intersection root.
... syntax var intersectionrect = intersectionobserverentry.intersectionrect; value a domrectreadonly which describes the part of the tar
get element that's currently visible within the root's intersection rectangle.
... this rectangle is computed by taking the intersection of boundingclientrect with each of the tar
get's ancestors' clip rectangles, with the exception of the intersection root itself.
...And 2 more matches
MediaSource - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediasource" tar
get="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediasource</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mediasource() constructs and returns a new mediasource object with no associated source buffers.
... mediasource.readystate read only returns an enum representing the state of the current mediasource, whether it is not currently attached to a media element (closed), attached and ready to receive sourcebuffer objects (open), or attached but the stream has been ended via mediasource.endofstream() (ended.) mediasource.duration
gets and sets the duration of the current media being presented.
...And 2 more matches
MediaTrackConstraints.cursor - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.cursor as returned by a call to mediadevices.
getsupportedconstraints().
... syntax var constraintsobject = { cursor: constraint }; constraintsobject.cursor = constraint; value a constraindomstring which specifies whether or not the mouse cursor should be rendered into the video track in the mediastream returned by the call to
getdisplaymedia().
... usage notes you can check the setting selected by the user agent after the display media has been created by
getdisplaymedia() by calling
getsettings() on the display media's video mediastreamtrack, then checking the value of the returned mediatracksettings object's cursor object.
...And 2 more matches
MediaTrackConstraints.displaySurface - Web APIs
this is used to specify the type or types of display surfaces which
getdisplaymedia() will let the user select among for sharing purposes.
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.displaysurface as returned by a call to mediadevices.
getsupportedconstraints().
... usage notes you can check the setting selected by the user agent after the display media has been created by
getdisplaymedia() by calling
getsettings() on the display media's video mediastreamtrack, then checking the value of the returned mediatracksettings object's displaysurface object.
...And 2 more matches
MutationObserver.MutationObserver() - Web APIs
(see mutation.addednodes and mutation.removednodes.) */ break; case 'attributes': /* an attribute value changed on the element in mutation.tar
get.
... const tar
getnode = document.queryselector("#someelement"); const observeroptions = { childlist: true, attributes: true, // omit (or set to false) to observe only changes to the parent node subtree: true } const observer = new mutationobserver(callback); observer.observe(tar
getnode, observeroptions); the desired subtree is located by finding an element with the id someelement.
...in it, we specify values of true for both childlist and attributes, so we
get the information we want.
...And 2 more matches
Node.textContent - Web APIs
note: to
get all of the text and cdata data for the whole document, one could use document.documentelement.textcontent.
... differences from innertext don't
get confused by the differences between node.textcontent and htmlelement.innertext.
... although the names seem similar, there are important differences: textcontent
gets the content of all elements, including <script> and <style> elements.
...And 2 more matches
OVR_multiview2 - Web APIs
for more information, see also: multiview on webxr three.js multiview demo multiview in babylon.js optimizing virtual reality: understanding multiview multiview webgl rendering for oculus browser 6.0+ webgl extensions are available using the webglrenderingcontext.
getextension() method.
... constants this extension exposes 4 constants that can be used in
getparameter() or
getframebufferattachmentparameter().
... framebuffer_incomplete_view_tar
gets_ovr if baseviewindex is not the same for all framebuffer attachment points where the value of framebuffer_attachment_object_type is not none, the framebuffer is considered incomplete.
...And 2 more matches
OfflineAudioContext - Web APIs
the offlineaudiocontext interface is an audiocontext interface representing an audio-processing graph built from linked to
gether audionodes.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" tar
get="_top"><rect x="151" y="1" width="120" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a><polyline points="271,25 281,20 281,30 271,25" stroke="#d4dde4" fill="none"/><line x1="281" y1="25" x2="311" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/offlineaudiocontext" tar
get="_top"><rect x="311" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle...
...And 2 more matches
Performance - Web APIs
performance.
getentries() returns a list of performanceentry objects based on the given filter.
... performance.
getentriesbyname() returns a list of performanceentry objects based on the given name and entry type.
... performance.
getentriesbytype() returns a list of performanceentry objects of the given entry type.
...And 2 more matches
Performance Timeline - Web APIs
performance extensions the performance timeline api extends the performance interface with three methods that provide different mechanisms to
get a set of performance records (metrics), depending on the specified filter criteria.
... the methods are:
getentries() returns all recorded performance entries or, optionally, the entries based on the specified name, performance type and/or the initiatortype (such as an html element).
...
getentriesbyname() returns the recorded performance entries based on the specified name and optionally the performance type.
...And 2 more matches
ProcessingInstruction - Web APIs
the processinginstruction interface represents a processing instruction; that is, a node which embeds an instruction tar
geting a specific application but that can be ignored by any other applications which don't recognize the instruction.
... user-defined processing instructions cannot begin with "xml", as xml-prefixed processing-instruction tar
get names are reserved by the xml specification for particular, standard uses (see, for example, <?xml-stylesheet ?>).
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 10%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...And 2 more matches
PublicKeyCredential - Web APIs
this identifier can be used to look up credentials for future calls to credentialscontainer.
get.
...it is either of type authenticatorattestationresponse if the publickeycredential was the results of a navigator.credentials.create() call, or of type authenticatorassertionresponse if the publickeycredential was the result of a navigator.credentials.
get() call.
... methods publickeycredential.
getclientextensionresults()secure context if any extensions were requested, this method will return the results of processing those extensions.
...And 2 more matches
RTCRtpReceiver - Web APIs
methods rtcrtpreceiver.
getcontributingsources() returns an array of rtcrtpcontributingsource instances for each unique csrc (contributing source) identifier received by the current rtcrtpreceiver in the last ten seconds.
... rtcrtpreceiver.
getparameters() returns an rtcrtpparameters object which contains information about how the rtc data is to be decoded.
... rtcrtpreceiver.
getstats() returns a promise whose fulfillment handler receives a rtcstatsreport which contains statistics about the incoming streams and their dependencies.
...And 2 more matches
RTCRtpTransceiver.setCodecPreferences() - Web APIs
usage notes
getting a list of supported codecs you can only include in the codecs list codecs which the transceiver actually supports.
... a good approach to setting codec preferences is to first
get the list of codecs that are actually supported, then modify that list to match what you want.
... to determine which codecs are supported by the transceiver, call the sender's
getcapabilities() and the receiver's
getcapabilities() methods and
get the codecs list from the results of each.
...And 2 more matches
SVGFEConvolveMatrixElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeconvolvematrixelement" tar
get="_top"><rect x="221" y="65" wid...
...And 2 more matches
SVGLineElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180"...
...And 2 more matches
SVGPolygonElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180"...
...And 2 more matches
SVGPolylineElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180"...
...And 2 more matches
SVGTSpanElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke...
...="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3...
...41,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180" height="5...
...And 2 more matches
SVGTextElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180"...
...And 2 more matches
SVGTextPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180"...
...And 2 more matches
SVGTextPositioningElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180"...
...And 2 more matches
ServiceWorkerRegistration - Web APIs
properties also implements properties from its parent interface, eventtar
get.
... serviceworkerregistration.pushmanager read only returns a reference to the pushmanager interface for managing push subscriptions including subscribing,
getting an active subscription, and accessing push permission status.
... methods also implements methods from its parent interface, eventtar
get.
...And 2 more matches
SourceBuffer - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebuffer" tar
get="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebuffer</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebuffer.appendwindowend controls the timestamp for the end of the append window.
... methods inherits methods from its parent interface, eventtar
get.
...And 2 more matches
SubtleCrypto.importKey() - Web APIs
a pem-encoded privatekeyinfo looks like this: -----begin private key----- mig2ageambagbyqgsm49agegbsubbaaibigemigbagebbdau9bd0jxdff5ov380z 9vieun2w5kjdz3hbuadencxliamsoquktffaou71eldn0tshzaniaarmuhcee/cp xmjgc1roj0d0k6vluqta+jvcwigxciaukoethcngzdkcrd4pkxdbvbcijdzkvo+l ml2fikoovzh/8yetkmjumb804g6omjuc9vvojcrv0ydasmykkjmjblg= -----end private key----- to
get this into a format you can give to importkey() you need to do two things: base64-decode the part between header and footer, using window.atob().
...hunc7f6xzvebd0 r3m5jny+/kabijvu8iu1eral3osi38vgimzjdbdorfxvznnzl+sxahwxiv5bhixl cq6qhwysdgh6oqgkiwialra/wnh4uhxj1or/iyakjhrr/kghutjyvcjzvaqadpjw 2g+syd1ui0b6kjov2cruwipwpff8hbfvwv8q9yc2yd5hcnykvl0iaiyn+sdak/rv 8dc5eilzci4efucbyg4c9o88qz7bs14dxsfapty8p/twoihvvjladf743lgm/jlq cdpubua3hlszuhkm3bbskd7q9ngkjv3+ybyo4/fl+fkyra8j9ypa2n0iw53lfb3b gqidaqab -----end public key----- just as with pkcs #8, to
get this into a format you can give to importkey() you need to do two things: base64-decode the part between header and footer, using window.atob().
... const rawkey = window.crypto.
getrandomvalues(new uint8array(16)); /* import an aes secret key from an arraybuffer containing the raw bytes.
...And 2 more matches
WebGLActiveInfo - Web APIs
the webglactiveinfo interface is part of the webgl api and represents the information returned by calling the webglrenderingcontext.
getactiveattrib() and webglrenderingcontext.
getactiveuniform() methods.
... examples a webglactiveinfo object is returned by: webglrenderingcontext.
getactiveattrib() webglrenderingcontext.
getactiveuniform() or webgl2renderingcontext.
gettransformfeedbackvarying() webglactiveinfo?
...
getactiveattrib(webglprogram?
...And 2 more matches
WebGLRenderingContext.bindFramebuffer() - Web APIs
the webglrenderingcontext.bindframebuffer() method of the webgl api binds a given webglframebuffer to a tar
get.
... syntax void gl.bindframebuffer(tar
get, framebuffer); parameters tar
get a glenum specifying the binding point (tar
get).
... exceptions a gl.invalid_enum error is thrown if tar
get is not gl.framebuffer, gl.draw_framebuffer, or gl.read_framebuffer.
...And 2 more matches
WebGLRenderingContext.bindRenderbuffer() - Web APIs
the webglrenderingcontext.bindrenderbuffer() method of the webgl api binds a given webglrenderbuffer to a tar
get, which must be gl.renderbuffer.
... syntax void gl.bindrenderbuffer(tar
get, renderbuffer); parameters tar
get a glenum specifying the binding point (tar
get).
... exceptions a gl.invalid_enum error is thrown if tar
get is not gl.renderbuffer.
...And 2 more matches
WebGLRenderingContext.bindTexture() - Web APIs
the webglrenderingcontext.bindtexture() method of the webgl api binds a given webgltexture to a tar
get (binding point).
... syntax void gl.bindtexture(tar
get, texture); parameters tar
get a glenum specifying the binding point (tar
get).
... exceptions a gl.invalid_enum error is thrown if tar
get is not gl.texture_2d, gl.texture_cube_map, gl.texture_3d, or gl.texture_2d_array.
...And 2 more matches
WebGLRenderingContext.enableVertexAttribArray() - Web APIs
once that's been done, other methods can be used to access the attribute, including vertexattribpointer(), vertexattrib*(), and
getvertexattrib().
...if you know the name of the attribute but not its index, you can
get the index by calling
getattriblocation().
... errors to check for errors after calling enablevertexattribarray(), call
geterror().
...And 2 more matches
WebGLRenderingContext.vertexAttribPointer() - Web APIs
a gl.invalid_operation error is thrown if no webglbuffer is bound to the array_buffer tar
get.
... the maximum number of vertex attributes depends on the graphics card, and you can call gl.
getparameter(gl.max_vertex_attribs) to
get this value.
...depending on the graphics card, the index will vary, so you must call gl.
getattriblocation() to find out the index, and then provide this index to gl.vertexattribpointer().
...And 2 more matches
Compressed texture formats - Web APIs
usage of compressed formats first requires activating the respective extension with webglrenderingcontext.
getextension().
... if supported, it will return an extension object with constants for the added formats and the formats will also be returned by calls to gl.
getparameter(gl.compressed_texture_formats).
...which formats support texture_2d_array and texture_3d tar
gets (in combination with compressedteximage3d) are noted in the following table.
...And 2 more matches
Lighting in WebGL - Web APIs
it just runs two functions you supply — a vertex shader and a fragment shader — and expects you to write creative functions to
get the results you want.
... then we add the code to drawscene() to bind the normals array to a shader attribute so the shader code can
get access to it: // tell webgl how to pull out the normals from // the normal buffer into the vertexnormal attribute.
... const programinfo = { program: shaderprogram, attriblocations: { vertexposition: gl.
getattriblocation(shaderprogram, 'avertexposition'), vertexnormal: gl.
getattriblocation(shaderprogram, 'avertexnormal'), texturecoord: gl.
getattriblocation(shaderprogram, 'atexturecoord'), }, uniformlocations: { projectionmatrix: gl.
getuniformlocation(shaderprogram, 'uprojectionmatrix'), modelviewmatrix: gl.
getuniformlocation(shaderprogram, 'umodelviewmatrix'), n...
...And 2 more matches
Using WebGL extensions - Web APIs
for instance: var ext = ( gl.
getextension('oes_vertex_array_object') || gl.
getextension('moz_oes_vertex_array_object') || gl.
getextension('webkit_oes_vertex_array_object') ); note that, vendor prefix have been discouraged more and more and thus most browser implement experimental extensions behind a feature flag rather than vendor prefix.
... var available_extensions = gl.
getsupportedextensions(); the webglrenderingcontext.
getsupportedextensions() method returns an array of strings, one for each supported extension.
..._compressed_texture_atc webgl_compressed_texture_etc webgl_compressed_texture_etc1 webgl_compressed_texture_pvrtc webgl_compressed_texture_s3tc webgl_compressed_texture_s3tc_srgb webgl_debug_renderer_info webgl_debug_shaders webgl_depth_texture webgl_draw_buffers webgl_lose_context enabling an extension before an extension can be used it has to be enabled using webglrenderingcontext.
getextension().
...And 2 more matches
WebRTC Statistics API - Web APIs
most broadly, you can call
getstats() on an rtcpeerconnection to
get statistics for the connection overall.
... in this example, a new rtcpeerconnection is created, and then setinterval() is used to set the function
getconnectionstats() to be called every second.
... that function, in turn, uses
getstats() to obtain statistics for the connection and to make use of that data.
...And 2 more matches
Using bounded reference spaces - Web APIs
as this suggests, the safe area is not required to be convex, but may have any number of indentations or extrusions, as long as it's a contiguous shape, note that the coordinates of the origin here, (0, 0), are indicative of the fact that the boundaries are defined at floor level and are essentially a 2d shape on the floor, like an invisible fence used to keep pets from
getting away from home.
... creating the reference space simply requesting support for bounded-floor when calling the xrsystem method requestsession() isn't enough to
get a bounded space.
... the code begins by trying to
get a bounded-floor reference space, but if that fails, it requests a local-floor space.
...And 2 more matches
Using IIR filters - Web APIs
}, false); frequency response we only have one method available on iirfilternode instances,
getfrequencyresponse(), this allows us to see what is happening to the frequencies of the audio being passed into the filter.
... let's draw a frequency plot of the filter we've created with the data we
get back from this method.
...eresponseoutput = new float32array(totalarrayitems); let's fill our first array with frequency values we want data to be returned on: myfrequencyarray = myfrequencyarray.map(function(item, index) { return math.pow(1.4, index); }); we could go for a linear approach, but it's far better when working with frequencies to take a log approach, so let's fill our array with frequency values that
get larger further on in the array items.
...And 2 more matches
WheelEvent - Web APIs
therefore, do not rely on delta* properties to
get the content's scrolling direction.
... instead, detect value changes to scrollleft and scrolltop of the tar
get in the scroll event.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" tar
get="_t...
...And 2 more matches
XRInputSource - Web APIs
tar
getraymoderead only a domstring indicating the methodology used to produce the tar
get ray: gaze, tracked-pointer, or screen.
... tar
getrayspaceread only an xrspace object defining the origin of the tar
get ray and the direciton in which it extends.
... this space is established using the method defined by tar
getraymode.
...And 2 more matches
XRInputSourceEvent.frame - Web APIs
instead, the xrframe specified by the frame property is simply a method to provide access to the
getpose() method, which you can use to
get the relative positions of the objects in the scene at the time the event occurred.
... however, since the event frame isn't an animation frame, there is no viewer pose available to represent the viewer's current point of view; the results of calling
getviewerpose() will be an xrviewerpose with an empty views list.
... examples this code shows a handler for the selectstart event which
gets the tar
get ray's pose from the frame, mapping the pose representing the ray (event.inputsource.tar
getrayspace) to the overall reference space myrefspace.
...And 2 more matches
XRPose.transform - Web APIs
the transform read-only attribute of the xrpose interface is a xrrigidtransform object providing the position and orientation of the pose relative to the base xrspace as specified when the pose was obtained by calling xrframe.
getpose().
...this is the same pose that's returned by the frame's
getpose() method.
...it determines the tar
geted object by passing the event frame's pose into a function called findtar
getusingray(), then dispatches the event differently depending on the user's handedness; this is done by comparing the value of the xrinputsource property handedness to a value in the variable user.handedness.
...And 2 more matches
XRSession: selectend event - Web APIs
after checking to ensure that the received event is a tracked-pointer event (the only kind we handle here), the tar
get ray's pose is obtained using
getpose().
... if the tar
get ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for selectstart events, a mybegintracking() function is called with the tar
get ray pose's matrix.
... upon receiving a select event, the mydropobject() function is called with the tar
get object and the current tar
get ray pose transform as inputs.
...And 2 more matches
XRSession: selectstart event - Web APIs
after checking to ensure that the received event is a tracked-pointer event (the only kind we handle here), the tar
get ray's pose is obtained using
getpose().
... if the tar
get ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for selectstart events, a mybegintracking() function is called with the tar
get ray pose's matrix.
... upon receiving a select event, the mydropobject() function is called with the tar
get object and the current tar
get ray pose transform as inputs.
...And 2 more matches
XRSession: squeezeend event - Web APIs
after checking to ensure that the received event is a tracked-pointer event (the only kind we handle here), the tar
get ray's pose is obtained using
getpose().
... if the tar
get ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for squeezestart events, a mybegintracking() function is called with the tar
get ray pose's matrix.
... upon receiving a squeeze event, the mydropobject() function is called with the tar
get object and the current tar
get ray pose transform as inputs.
...And 2 more matches
XRSession: squeezestart event - Web APIs
after checking to ensure that the received event is a tracked-pointer event (the only kind we handle here), the tar
get ray's pose is obtained using
getpose().
... if the tar
get ray pose was fetched successfully, the code then uses the value of event property type to route control to an appropriate function to handle the event which arrived: for squeezestart events, a mybegintracking() function is called with the tar
get ray pose's matrix.
... upon receiving a squeeze event, the mydropobject() function is called with the tar
get object and the current tar
get ray pose transform as inputs.
...And 2 more matches
XRViewerPose - Web APIs
taken to
gether, these views can reproduce the 3d effect when displayed on the xr device.
...by calling viewport() on the webgl context, specifying the xrview as input, you can
get the viewport to use when rendering in order to draw the frame for that eye into the correct part of the drawing surface.
... the viewer's pose for the animation frame represented by xrframe can be obtained by calling the frame's
getviewerpose() method, specifying the reference space in which the origin's position should be computed.
...And 2 more matches
Web APIs
ntext basiccardrequest basiccardresponse batterymanager beforeinstallpromptevent beforeunloadevent biquadfilternode blob blobbuilder blobevent bluetooth bluetoothadvertisingdata bluetoothcharacteristicproperties bluetoothdevice bluetoothremotegattcharacteristic bluetoothremotegattdescriptor bluetoothremotegattserver bluetoothremotegattservice body broadcastchannel bud
getservice bud
getstate buffersource bytelengthqueuingstrategy bytestring c cdatasection css cssconditionrule csscounterstylerule cssgroupingrule cssimagevalue csskeyframerule csskeyframesrule csskeywordvalue cssmathproduct cssmathsum cssmathvalue cssmediarule cssnamespacerule cssnumericvalue cssomstring csspagerule csspositionvalue cssprimitivevalue csspseudoelement cssrule c...
...r_buffer_float ext_color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_texture_lod ext_texture_compression_bptc ext_texture_compression_rgtc ext_texture_filter_anisotropic eckeygenparams eckeyimportparams ecdhkeyderiveparams ecdsaparams effecttiming element elementcssinlinestyle elementtraversal errorevent event eventlistener eventsource eventtar
get extendableevent extendablemessageevent f featurepolicy federatedcredential fetchevent file fileentrysync fileerror fileexception filelist filereader filereadersync filerequest filesystem filesystemdirectoryentry filesystemdirectoryreader filesystementry filesystementrysync filesystemfileentry filesystemflags filesystemsync focusevent fontface fontfaceset fontfaceset...
...tificationaction notificationevent notifyaudioavailableevent o oes_element_index_uint oes_fbo_render_mipmap oes_standard_derivatives oes_texture_float oes_texture_float_linear oes_texture_half_float oes_texture_half_float_linear oes_vertex_array_object ovr_multiview2 offlineaudiocompletionevent offlineaudiocontext offscreencanvas orientationsensor oscillatornode overconstrainederror p pa
getransitionevent paintworklet pannernode parentnode passwordcredential path2d payererrors paymentaddress paymentcurrencyamount paymentdetailsbase paymentdetailsupdate paymentitem paymentmethodchangeevent paymentrequest paymentrequestevent paymentrequestupdateevent paymentresponse paymentvalidationerrors pbkdf2params performance performanceentry performanceeventtiming performanceframetiming p...
...And 2 more matches
Alerts - Accessibility
instead of using the javascript ‘alert’ function, we’ll use a simple wai-aria wid
get for notification.
... below is example javascript code which could be inserted above the closing “head” tag: <script type="application/javascript"> function removeoldalert() { var oldalert = document.
getelementbyid("alert"); if (oldalert){ document.body.removechild(oldalert); } } function addalert(amsg) { removeoldalert(); var newalert = document.createelement("div"); newalert.setattribute("role", "alert"); newalert.setattribute("id", "alert"); var msg = document.createtextnode(amsg); newalert.appendchild(msg); document.body.appendchild(newalert); } function checkvalidity(aid,...
... asearchterm, amsg) { var elem = document.
getelementbyid(aid); var invalid = (elem.value.indexof(asearchterm) < 0); if (invalid) { elem.setattribute("aria-invalid", "true"); addalert(amsg); } else { elem.setattribute("aria-invalid", "false"); removeoldalert(); } } </script> the checkvalidity function the primary method in javascript used for form validation is the checkvalidity function.
...And 2 more matches
Basic Concepts of Multicol - CSS: Cascading Style Sheets
we
get as many 200 pixel columns as will fit the container, with the extra space shared equally.
... using column-count and column-width to
gether if you specify both properties on a multicol container then column-count will act as a maximum number of columns.
... when using both properties to
gether you may
get fewer columns than specified in the value for column-count.
...And 2 more matches
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
in this guide, i will explain how a grid fits to
gether with other techniques you may already be using.
...the two specifications share some common features, however, and if you have already learned how to use flexbox, the similarities should help you
get to grips with grid.
...with five items, we
get a gap on the end of row two.
...And 2 more matches
content - CSS: Cascading Style Sheets
otherwise, for uri values, the absolute uri; for attr() values, the resulting string; for other keywords, as specified.animation typediscrete formal syntax normal | none | [ <content-replacement> | <content-list> ] [/ <string> ]?where <content-replacement> = <image><content-list> = [ <string> | contents | <image> | <quote> | <tar
get> | <leader()> ]+where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><quote> = open-quote | close-quote | no-open-quote | no-close-quote<tar
get> = <tar
get-counter()> | <tar
get-counters()> | <tar
get-text()><leader()> = leader( <leader-type> )where <image()> = image( <image-tags>?
...)<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()><tar
get-counter()> = tar
get-counter( [ <string> | <url> ] , <custom-ident> , <counter-style>?
... )<tar
get-counters()> = tar
get-counters( [ <string> | <url> ] , <custom-ident> , <string> , <counter-style>?
...And 2 more matches
Media buffering, seeking, and time ranges - Developer guides
this will work with <audio> or <video>; for now let's consider a simple audio example: <audio id="my-audio" controls src="music.mp3"> </audio> we can access these attributes like so: var myaudio = document.
getelementbyid('my-audio'); var bufferedtimeranges = myaudio.buffered; timeranges object timeranges are a series of non-overlapping ranges of time, with start and stop times.
.../ returns 15 myaudio.buffered.end(1); // returns 19 to try out and visualize buffered time ranges we can write a little bit of html: <p> <audio id="my-audio" controls> <source src="music.mp3" type="audio/mpeg"> </audio> </p> <p> <canvas id="my-canvas" width="300" height="20"> </canvas> </p> and a little bit of javascript: window.onload = function(){ var myaudio = document.
getelementbyid('my-audio'); var mycanvas = document.
getelementbyid('my-canvas'); var context = mycanvas.
getcontext('2d'); context.fillstyle = 'lightgray'; context.fillrect(0, 0, mycanvas.width, mycanvas.height); context.fillstyle = 'red'; context.strokestyle = 'white'; var inc = mycanvas.width / myaudio.duration; // display timeranges myaudio.addeventlistener('...
...ffered.start(i) * inc; var endx = myaudio.buffered.end(i) * inc; var width = endx - startx; context.fillrect(startx, 0, width, mycanvas.height); context.rect(startx, 0, width, mycanvas.height); context.stroke(); } }); } this works better with longer pieces of audio or video, but press play and click about the player progress bar and you should
get something like this.
...And 2 more matches
Creating a cross-browser video player - Developer guides
the player controls themselves won't be styled beyond the basics required to
get them working; full styling of the player will be taken care of in a future article.
...a number of variables pointing to html elements are required: var videocontainer = document.
getelementbyid('videocontainer'); var video = document.
getelementbyid('video'); var videocontrols = document.
getelementbyid('video-controls'); as mentioned earlier, the browser's default controls now need to be disabled, and the custom controls need to be displayed: // hide the default controls video.controls = false; // display the user defined video controls videocontrols.style.display = 'block...
...'; with that done, a variable pointing to each of the buttons is now required: var playpause = document.
getelementbyid('playpause'); var stop = document.
getelementbyid('stop'); var mute = document.
getelementbyid('mute'); var volinc = document.
getelementbyid('volinc'); var voldec = document.
getelementbyid('voldec'); var progress = document.
getelementbyid('progress'); var progressbar = document.
getelementbyid('progress-bar'); var fullscreen = document.
getelementbyid('fs'); using these handles, events can now be attached to each of the custom control buttons making them interactive.
...And 2 more matches
<base>: The Document Base URL element - HTML: Hypertext Markup Language
tar
get a keyword or author-defined name of the default browsing context to show the results of navigation from <a>, <area>, or <form> elements without explicit tar
get attributes.
... usage notes multiple <base> elements if multiple <base> elements are used, only the first href and first tar
get are obeyed — all others are ignored.
...for example: <meta property="og:image" content="https://example.com/thumbnail.jpg"> examples <base href="https://www.example.com/"> <base tar
get="_blank"> <base tar
get="_top" href="https://example.com/"> specifications specification status comment html living standardthe definition of '<base>' in that specification.
...And 2 more matches
Concurrency model and the event loop - JavaScript
each message has an associated function which
gets called in order to handle the message.
... here is an example that demonstrates this concept (settimeout does not run immediately after its timer expires): const s = new date().
getseconds(); settimeout(function() { // prints out "2", meaning that the callback is not called immediately after 500 milliseconds.
... console.log("ran after " + (new date().
getseconds() - s) + " seconds"); }, 500) while (true) { if (new date().
getseconds() - s >= 2) { console.log("good, looped for 2 seconds") break; } } zero delays zero delay doesn't actually mean the call back will fire-off after zero milliseconds.
...And 2 more matches
Control flow and error handling - JavaScript
function
getmonthname(mo) { mo = mo - 1; // adjust month number for array index (1 = jan, 12 = dec) let months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']; if (months[mo]) { return months[mo]; } else { throw 'invalidmonthno'; // throw keyword is used here } } try { // statements to try monthname =
getmonthname(mymonth); // functio...
...you can use this identifier to
get information about the exception that was thrown.
... utilizing error objects depending on the type of error, you may be able to use the name and message properties to
get a more refined message.
...And 2 more matches
Array.from() - JavaScript
1 : -1) * math.floor(math.abs(number)); }; var maxsafeinteger = math.pow(2, 53) - 1; var tolength = function (value) { var len = tointeger(value); return math.min(math.max(len, 0), maxsafeinteger); }; var set
getitemhandler = function set
getitemhandler(isiterator, items) { var iterator = isiterator && items[symboliterator](); return function
getitem(k) { return isiterator ?
... iterator.next() : items[k]; }; }; var
getarray = function
getarray( t, a, len,
getitem, isiterator, mapfn ) { // 16.
...repeat, while k < len… or while iterator is done (also steps a - h) while (k < len || isiterator) { var item =
getitem(k); var kvalue = isiterator ?
...And 2 more matches
Intl.DisplayNames - JavaScript
examples region code display names to create an intl.displaynames for a locale and
get the display name for a region code.
... //
get display names of region in english let regionnames = new intl.displaynames(['en'], {type: 'region'}); regionnames.of('419'); // "latin america" regionnames.of('bz'); // "belize" regionnames.of('us'); // "united states" regionnames.of('ba'); // "bosnia & herzegovina" regionnames.of('mm'); // "myanmar (burma)" //
get display names of region in traditional chinese regionnames = new intl.displaynames(['zh-hant'], {type: 'region'}); regionnames.of('419'; // "拉丁美洲" regionnames.of('bz'); // "貝里斯" regionnames.of('us'); // "美國" regionnames.of('ba'); // "波士尼亞與赫塞哥維納" regionnames.of('mm'); // "緬甸" language display names to create an intl.displaynames for a locale and
get the display name for a language-script-region sequence.
... //
get display names of language in english let languagenames = new intl.displaynames(['en'], {type: 'language'}); languagenames.of('fr'); // "french" languagenames.of('de'); // "german" languagenames.of('fr-ca'); // "canadian french" languagenames.of('zh-hant'); // "traditional chinese" languagenames.of('en-us'); // "american english" languagenames.of('zh-tw'); // "chinese (taiwan)"] //
get display names of language in traditional chinese languagenames = new intl.displaynames(['zh-hant'], {type: 'language'}); languagenames.of('fr'); // "法文" languagenames.of('zh'); // "中文" languagenames.of('de'); // "德文" script code display names to create an intl.displaynames for a locale and
get the display name for a script code.
...And 2 more matches
handler.isExtensible() - JavaScript
syntax const p = new proxy(tar
get, { isextensible: function(tar
get) { } }); parameters the following parameter is passed to the isextensible() method.
... tar
get the tar
get object.
... interceptions this trap can intercept these operations: object.isextensible() reflect.isextensible() invariants if the following invariants are violated, the proxy will throw a typeerror: object.isextensible(proxy) must return the same value as object.isextensible(tar
get).
...And 2 more matches
handler.set() - JavaScript
syntax const p = new proxy(tar
get, { set: function(tar
get, property, value, receiver) { } }); parameters the following parameters are passed to the set() method.
... tar
get the tar
get object.
... interceptions this trap can intercept these operations: property assignment: proxy[foo] = bar and proxy.foo = bar inherited property assignment: object.create(proxy)[foo] = bar reflect.set() invariants if the following invariants are violated, the proxy will throw a typeerror: cannot change the value of a property to be different from the value of the corresponding tar
get object property if the corresponding tar
get object property is a non-writable, non-configurable data property.
...And 2 more matches
handler.setPrototypeOf() - JavaScript
syntax const p = new proxy(tar
get, { setprototypeof: function(tar
get, prototype) { } }); parameters the following parameters are passed to the setprototypeof() method.
... tar
get the tar
get object.
... interceptions this trap can intercept these operations: object.setprototypeof() reflect.setprototypeof() invariants if the following invariants are violated, the proxy will throw a typeerror: if tar
get is not extensible, the prototype parameter must be the same value as object.
getprototypeof(tar
get).
...And 2 more matches
Reflect.preventExtensions() - JavaScript
syntax reflect.preventextensions(tar
get) parameters tar
get the tar
get object on which to prevent extensions.
... return value a boolean indicating whether or not the tar
get was successfully set to prevent extensions.
... exceptions a typeerror, if tar
get is not an object.
...And 2 more matches
Object initializer - JavaScript
syntax let o = {} let o = {a: 'foo', b: 42, c: {}} let a = 'foo', b = 42, c = {} let o = {a: a, b: b, c: c} let o = { property: function (parameters) {},
get property() {}, set property(value) {} }; new notations in ecmascript 2015 please see the compatibility table for support for these notations.
... function havees2015duplicatepropertysemantics() { 'use strict'; try { ({prop: 1, prop: 2}); // no error thrown, duplicate property names allowed in strict mode return true; } catch(e) { // error thrown, duplicates prohibited in strict mode return false; } } method definitions a property of an object can also refer to a function or a
getter or setter method.
... let o = { property: function (parameters) {},
get property() {}, set property(value) {} } in ecmascript 2015, a shorthand notation is available, so that the keyword "function" is no longer necessary.
...And 2 more matches
async function - JavaScript
if you use it outside of an async function's body, you will
get a syntaxerror.
...execution
gets here almost instantly const slow = await resolveafter2seconds() console.log(slow) // 2.
...execution
gets here almost instantly console.log(await slow) // 2.
...And 2 more matches
Media container formats (file types) - Web media technologies
you can
get more information about ogg and its codecs in the theora cookbook.
...the relative importance of each will depend on your needs, your license requirements, and the compatibility requirements of your tar
get audience.
... if your tar
get audience is likely to include users on mobile, especially on lower-end devices or on slow networks, consider providing a version of your media in a 3gp container with appropriate compression.
...And 2 more matches
Optimizing startup performance - Web Performance
if the app is being run in a browser, it's possible the user may
get an "unresponsive app" or "slow script" notification.
... on the other hand, however, it can
get tricky when you're porting an existing app to the web.
...
getting asynchronous here are some suggestions for how to build your startup process to be as asynchronous as possible (whether it's a new app or a port): use the defer or async attribute on script tags needed by the web application.
...And 2 more matches
Progressive loading - Progressive web apps (PWAs)
the js13kpwa app uses a placeholder image instead, which is small and lightweight, while the final paths to tar
get images are stored in data-src attributes: <img src='data/img/placeholder.png' data-src='data/img/slug.jpg' alt='name'> those images will be loaded via javascript after the site finishes building the html structure.
... loading via javascript the app.js file processes the data-src attributes like so: let imagestoload = document.queryselectorall('img[data-src]'); const loadimages = (image) => { image.setattribute('src', image.
getattribute('data-src')); image.onload = () => { image.removeattribute('data-src'); }; }; the imagestoload variable contains references to all the images, while the loadimages function moves the path from data-src to src.
... intersection observer this is a progressive enhancement to the previously working example — intersection observer will load tar
get images only when the user scrolls down, causing them to display in the viewport.
...And 2 more matches
xlink:href - SVG: Scalable Vector Graphics
value <iri> default value none animatable no animate, animatecolor, animatemotion, animatetransform, set for <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set>, xlink:href defines the reference to the element which is the tar
get of this animation and which therefore will be modified over time.
... the tar
get element must be part of the current svg document fragment.
... the value must point to exactly one tar
get element which is capable of being the tar
get of the given animation.
...And 2 more matches
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
svgexternalresourcesrequired removed never implemented svgelement.viewportelement and svgelement.ownersvgelement nullable implementation status unknown svgelement.
getpresentationattribute() removed never implemented (prototype removed in bug 921456) svgcolor and svgicccolor removed never implemented svgelement.focus(), svgelement.blur() not implemented (bug 778654) svgelement.tabindex implemented (bug 778654) document.activeelement implementation status unknown globaleventhandlers on svgelement imp...
...lementation status unknown options dictionary attribute for svggraphicselement.
getbbox() implemented behind the preference svg.new-
getbbox.enabled (bug 999964, bug 1019326) allow leading and trailing whitespace in <length>, <angle>, <number> and <integer> implementation status unknown form feed (u+000c) in whitespace implementation status unknown svgelement.xmlbase, svgelement.xmllang and svgelement.xmlspace removed implementation status unknown svgviewspec removed implementation status unknown svgelement.style removed implementation status unknown svggraphicselement.
gettransformtoelement() removed not removed yet svggraphicselement.
getctm() on the outermost element implementation status unknown ...
... animval attribute alias of baseval implementation status unknown dataset attribute for svgelement implementation status unknown moved pathlength attribute and
gettotallength() and
getpointatlength() methods from svgpathelement to svggeometryelement implemented (bug 1239100) document structure change notes svgsvgelement.suspendredraw(), svgsvgelement.unsuspendredraw(), and svgsvgelement.unsuspendredrawall() deprecated turned into no-ops (bug 734079) externalresourcesrequired attribute removed implementation status unknown auto value for width and height in <image> implementation status unknown referencing entire document with <use> implementation status unknown lang attribute on <...
...And 2 more matches
Types of attacks - Web security
this can be used, for example, to steal login credentials or to
get the user's unwitting permission to install a piece of malware.
... stored xss attacks the injected script is stored permanently on the tar
get servers.
....example.com/withdraw" method="post"> <input type="hidden" name="account" value="bob"> <input type="hidden" name="amount" value="1000000"> <input type="hidden" name="for" value="mallory"> </form> <script>window.addeventlistener('domcontentloaded', (e) => { document.queryselector('form').submit(); }</script> there are a few techniques that should be used to prevent this from happening:
get endpoints should be idempotent—actions that enact a change and do not simply retrieve data should require sending a post (or other http method) request.
...And 2 more matches
Tutorials
for complete beginners to the web
getting started with the web
getting started with the web is a concise series introducing you to the practicalities of web development.
... html tutorials introductory level introduction to html this module sets the stage,
getting you used to important concepts and syntax, looking at applying html to text, how to create hyperlinks, and how to use html to structure a webpage.
...this module
gets you started with creating the client-side parts of forms.
...And 2 more matches
Compiling from Rust to WebAssembly - WebAssembly
rust environment setup let's go through all the required steps to
get our environment set up.
... to
get node.js and npm, go to the
get npm!
...navigate to wherever you keep your personal projects, and type this: $ cargo new --lib hello-wasm created library `hello-wasm` project this creates a new library in a subdirectory named hello-wasm with everything you need to
get going: +-- cargo.toml +-- src +-- lib.rs first, we have cargo.toml; this is the file that we use to configure our build.
...And 2 more matches
Communicating With Other Scripts - Archive of obsolete content
first, "main.js" will create a page-mod that will attach "content-script.js" to the tar
get web page, and will then load the tar
get web page: var tabs = require("sdk/tabs"); var mod = require("sdk/page-mod"); var self = require("sdk/self"); var pageurl = self.data.url("page.html") var pagemod = mod.pagemod({ include: pageurl, contentscriptfile: self.data.url("content-script.js"), contentscriptwhen: "ready" }) tabs.open(pageurl); the tar
get web page "page.html" includes a but...
...ton and a page script: <html> <head> <meta charset="utf-8"> </head> <body> <input id="message" type="button" value="send a message"/> <script type="text/javascript" src="page-script.js"></script> </body> </html> the content script "content-script.js" adds an event listener to the button, that sends a custom event containing a message: var messenger = document.
getelementbyid("message"); messenger.addeventlistener("click", sendcustomevent, false); function sendcustomevent() { var greeting = {"greeting" : "hello world"}; var event = document.createevent('customevent'); event.initcustomevent("addon-message", true, true, greeting); document.documentelement.dispatchevent(event); } finally, the page script "page-script.js" listens for the message and logs the greetin...
...from firefox 30 this sharing requires an extra step: the content script needs to explicitly clone the message payload into the page script's scope using the global cloneinto() function: var messenger = document.
getelementbyid("message"); messenger.addeventlistener("click", sendcustomevent, false); function sendcustomevent() { var greeting = {"greeting" : "hello world"}; var cloned = cloneinto(greeting, document.defaultview); var event = document.createevent('customevent'); event.initcustomevent("addon-message", true, true, cloned); document.documentelement.dispatchevent(event); } messaging from ...
... in this example, "main.js" creates a page-mod to tar
get the page we are interested in: var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://my-domain.org/talk.html", contentscriptfile: data.url("listen.js") }); the web page "talk.html" creates and dispatches a custom dom event, using initcustomevent()'s detail parameter to supply the payload: <!doctype html> <html> <head></head> <body> <script> function sendmessage() { var event = document.createevent('customevent'); ...
Cross-domain Content Scripts - Archive of obsolete content
frame whose content is served from "http://en.m.wikipedia.org/": <!doctype html> <!-- page.html --> <html> <head></head> <body> <iframe id="wikipedia" src="http://en.m.wikipedia.org/"></iframe> </body> </html> the "page-script.js" file locates "today's featured article" and sends its content to "main.js": // page-script.js var iframe = window.document.
getelementbyid("wikipedia"); var todaysfeaturedarticle = iframe.contentwindow.document.
getelementbyid("mp-tfa"); self.postmessage(todaysfeaturedarticle.textcontent); for this to work, we need to add the "cross-domain-content" key to "package.json": "permissions": { "cross-domain-content": ["http://en.m.wikipedia.org/"] } the add-on should successfully retrieve the iframe's content.
...if you want to try it out, you'll need to register and
get an api key.
...own adds a button which shows the panel when it is clicked // main.js var data = require("sdk/self").data; var forecast_panel = require("sdk/panel").panel({ height: 50, contenturl: data.url("panel.html"), contentscriptfile: data.url("panel-script.js") }); forecast_panel.on("show", function(){ forecast_panel.port.emit("show"); }); require("sdk/ui/button/action").actionbutton({ id: "
get-forecast", label: "
get the forecast", icon: "./icon-16.png", onclick: function() { forecast_panel.show(); } }); the "panel.html" just includes a <div> block for the forecast: <!doctype html> <!-- panel.html --> <html> <head></head> <body> <div id="forecast_summary"></div> </body> </html> the "panel-script.js" uses xmlhttprequest to fetch the latest forecast: // panel-...
...script.js var url = "http://datapoint.metoffice.gov.uk/public/data/txt/wxfcs/regionalforecast/json/500?key=your-api-key"; self.port.on("show", function () { var request = new xmlhttprequest(); request.open("
get", url, true); request.onload = function () { var jsonresponse = json.parse(request.responsetext); var summary =
getsummary(jsonresponse); var element = document.
getelementbyid("forecast_summary"); element.textcontent = summary; }; request.send(); }); function
getsummary(forecast) { return forecast.regionalfcst.fcstperiods.period[0].paragraph[0].$; } finally, we need to add the "cross-domain-content" key to "package.json": "permissions": { "cross-domain-content": ["http://datapoint.metoffice.gov.uk"] } content permissions and unsafewindow if you us...
port - Archive of obsolete content
this example rewrites the content script in the port.removelistener() example so that it uses once(): // content-script.js function
getfirstparagraph() { var paras = document.
getelementsbytagname('p'); console.log(paras[0].textcontent); } self.port.once("
get-first-para",
getfirstparagraph); removelistener() you can use port.on() to listen for messages.
...the button sends the content script a message called "
get-first-para" when it is clicked: // main.js pageworker = require("sdk/page-worker").page({ contentscriptfile: require("sdk/self").data.url("listener.js"), contenturl: "http://en.wikipedia.org/wiki/chalk" }); require("sdk/ui/button/action").actionbutton({ id: "
get-first-para", label: "
get-first-para", icon: "./icon-16.png", onclick: function() { console.log("sending '
get-first-para'"...
...); pageworker.port.emit("
get-first-para"); } }); the content script listens for "
get-first-para".
... // content-script.js function
getfirstparagraph() { var paras = document.
getelementsbytagname('p'); console.log(paras[0].textcontent); self.port.removelistener("
get-first-para",
getfirstparagraph); } self.port.on("
get-first-para",
getfirstparagraph); the result is that the paragraph is only logged the first time the button is clicked.
Communicating using "postMessage" - Archive of obsolete content
o the constructor: panel = require("sdk/panel").panel({ onmessage: function(contentscriptmessage) { // handle message from the content script } }); message events versus user-defined events you can use message events as an alternative to user-defined events: var pagemodscript = "window.addeventlistener('mouseover', function(event) {" + " self.postmessage(event.tar
get.tostring());" + "}, false);"; var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.on('message', function(message) { console.log('mouseover: ' + message); }); } }); the reason to prefer user-defined events is that as soon as you need to send more than one type of message, then...
... both sending and receiving messages
gets more complex.
...now we have to embed the event type in the message payload, and implement a switch function in the receiver to dispatch the message: var pagemodscript = "window.addeventlistener('mouseover', function(event) {" + " self.postmessage({" + " kind: 'mouseover'," + " element: event.tar
get.tostring()" + " });" + "}, false);" + "window.addeventlistener('mouseout', function(event) {" + " self.postmessage({" + " kind: 'mouseout'," + " element: event.tar
get.tostring()" + " });" + " }, false);" var pagemod = require('sd...
...nsole.log('mouseover: ' + message.element); break; case 'mouseout': console.log('mouseout: ' + message.element); break; } }); } }); implementing the same add-on with user-defined events is shorter and more readable: var pagemodscript = "window.addeventlistener('mouseover', function(event) {" + " self.port.emit('mouseover', event.tar
get.tostring());" + "}, false);" + "window.addeventlistener('mouseout', function(event) {" + " self.port.emit('mouseout', event.tar
get.tostring());" + "}, false);"; var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.port.on('mouseov...
indexed-db - Archive of obsolete content
the add-on implements helper functions open(), additem() and
getitems() to open the database, add a new item to the database, and
get all items in the database.
... var { indexeddb, idbkeyrange } = require('sdk/indexed-db'); var database = {}; database.onerror = function(e) { console.error(e.value) } function open(version) { var request = indexeddb.open("stuff", version); request.onupgradeneeded = function(e) { var db = e.tar
get.result; e.tar
get.transaction.onerror = database.onerror; if(db.objectstorenames.contains("items")) { db.deleteobjectstore("items"); } var store = db.createobjectstore("items", {keypath: "time"}); }; request.onsuccess = function(e) { database.db = e.tar
get.result; }; request.onerror = database.onerror; }; function additem(name) { var db = database.db; var trans = db.transaction(["items"], "readwrite"); var store = trans.objectstore("items"); var time = new date()...
....
gettime(); var request = store.put({ "name": name, "time": time }); request.onerror = database.onerror; }; function
getitems(callback) { var cb = callback; var db = database.db; var trans = db.transaction(["items"], "readwrite"); var store = trans.objectstore("items"); var items = new array(); trans.oncomplete = function() { cb(items); } var keyrange = idbkeyrange.lowerbound(0); var cursorrequest = store.opencursor(keyrange); cursorrequest.onsuccess = function(e) { var result = e.tar
get.result; if(!!result == false) return; items.push(result.value.name); result.continue(); }; cursorrequest.onerror = database.onerror; }; function listitems(itemlist) { console.log(itemlist); } open("1"); var add = require("sdk/ui/butto...
...n/action").actionbutton({ id: "add", label: "add", icon: "./add.png", onclick: function() { additem(require("sdk/tabs").activetab.title); } }); var list = require("sdk/ui/button/action").actionbutton({ id: "list", label: "list", icon: "./list.png", onclick: function() {
getitems(listitems); } }); note that to run this add-on you'll need to provide icons named "add.png" and "list.png" in the add-on's "data" directory.
Annotator - Archive of obsolete content
warning: this tutorial relies on the since-removed wid
get api and no longer works with firefox.
... the wid
get api is deprecated from firefox 29 onwards.
...in particular, for a simple button, try the action button or toggle button apis, and for a more complex wid
get try the toolbar or sidebar apis.
... design overview implementing the wid
get creating annotations storing annotations displaying annotations ...
Deploying a Plugin as an Extension - Archive of obsolete content
here's what a basic install.rdf file looks like: <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>rhapsodyplayerengine@rhapsody.com</em:id> <em:name>rhapsody player engine</em:name> <em:version>1.0.0.487</em:version> <em:tar
getapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>1.5.0.*</em:maxversion> </description> </em:tar
getapplication> </description> </rdf> you can
get more detailed information about this file at install.rdf.
...the tar
getapplication section specifies that platform we want to work on (that id is for firefox).
...now we can open the xpi in firefox and it will
get installed.
...if your plugin is for windows, don't for
get add to version resources to your plugin's dll.
Adding Events and Commands - Archive of obsolete content
you can
get information on key modifiers (in case the user was holding a modifier key like alt while performing the event), screen coordinates for mouse events, and most importantly, the tar
get element for the event.
... for example: <button label="&xulschoolhello.defaultgreeting.label;" oncommand="xulschoolchrome.browseroverlay.changegreeting(event);" /> then on the javascript code you would have something like this: changegreeting : function(aevent) { // more stuff aevent.tar
get.setattribute("label", somenewgreeting); } the tar
get in this example is the button element, so clicking on it will change its text.
...in a nutshell, events propagate from the root of the dom tree all the way down to the tar
get element and then all the way up back to the root, in the capture and bubble phases, respectively.
... let onlinebroadcaster = document.
getelementbyid("xulschoolhello-online-broadcaster"); onlinebroadcaster.setattribute("label", "something"); you can also have finer-grained control to this behavior by adding the observes element as a child to your observer node.
Appendix B: Install and Uninstall Scripts - Archive of obsolete content
so, if we were to use fuel, we can do the following in the init function: init : function() { let firstrunpref = "extensions.xulschoolhello.firstrundone"; if (!application.prefs.
getvalue(firstrunpref, false)) { application.prefs.setvalue(firstrunpref, true); // all the rest of the first run code goes here.
...the current version number can be hard-coded in the first run function, or you can use the add-on manager to dynamically
get it.
... this can
get tricky with the firefox 4 addonmanager, so it's probably best to keep it simple.
...on the other hand, local data that is no longer needed takes unnecessary disk space and can contain private information that users for
get is there.
Appendix F: Monitoring DOM changes - Archive of obsolete content
while they are still viable for add-ons tar
geting only the latest firefox, those wishing to support older browsers will need to provide fallbacks.
...for instance, rather than watching for the creation of <a> elements and adding event listeners to them as they are created, an event listener can be added to the root <html> element, and when the event fires, the event.tar
get and its parents can be searched for a matching element.
... style = components.utils.
getweakreference(style); return function unwatch() { if (style.
get()) { style.
get().ownerdocument.removeeventlistener('animationstart', listener, false); style.
get().parentnode.removechild(style.
get()); } }; } watchnodes.namespace = 'mozcsskeyframerule' in window ?
... '-moz-' : ''; watchnodes.prefix = 'keyframe-node-inserted-' + math.floor(math.random() + 0xffffffff) + '-'; watchnodes._i = 0; } else { watchnodes = function watchnodes(selector, callback, doc) { doc = doc || document; doc.addeventlistener('domnodeinserted', listener, false); function listener(event) { if (event.tar
get.mozmatchesselector(selector)) callback.call(this, event); } return function unwatch() { doc.removeeventlistener('domnodeinserted', listener, false); }; } } xbl xbl is similar in approach to the above animation-based method.
Observer Notifications - Archive of obsolete content
getservice(components.interfaces.nsiobserverservice); observerservice.addobserver(testobserver, "xulschoolhello-test-topic", false); you should come up with a notification topic that is unique so you know it will not conflict with firefox or other extensions topics.
...
getservice(components.interfaces.nsiobserverservice); let subject = components.classes["@mozilla.org/supports-string;1"].
...
getservice(components.interfaces.nsiobserverservice); this._observerservice.addobserver(this, "xulschoolhello-test-topic", false); }, /** * unitializes this object.
... when the notifytest method is called, all observers registered with xulschoolhello-test-topic will
get notified and display two alerts.
The Box Model - Archive of obsolete content
we recommend you play around with it for a while to
get an idea of how the basic parts of the box model work.
...if we add flexibility to the hbox in our first example, we
get the following result: the box flexes to cover the available horizontal space.
... if we also add flexibility to the "cat" button, this is what we
get: now the flexible button is taking the available inner space, moving the other two buttons all the way to the end of the box.
... if you're not familiar with css, you should read this css
getting started guide and other online resources before continuing with this tutorial.
Extensions support in SeaMonkey 2 - Archive of obsolete content
the basics to support seamonkey 2 as a tar
get application, you need to add it to the list of tar
get applications in the extension's install.rdf file.
... the code for that will look something like this: <em:tar
getapplication> <!-- seamonkey --> <description> <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id> <em:minversion>2.0</em:minversion> <em:maxversion>2.*</em:maxversion> </description> </em:tar
getapplication> the install.js is not supported any more and should be removed.
...these are so commonly available that developers often for
get that they are not built-ins.
... in javascript code you can use the following technique to detect the application: const firefox_id = "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}"; const thunderbird_id = "{3550f703-e582-4d05-9a08-453d09bdfdc6}"; const seamonkey_id = "{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}"; var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .
getservice(components.interfaces.nsixulappinfo); if(appinfo.id == firefox_id) { // running under firefox } else if(appinfo.id == thunderbird_id) { // running under thunderbird } else if(appinfo.id == seamonkey_id) { // running under seamonkey } else { // another app } see using nsixulappinfo for more details.
Creating reusable content with CSS and XBL - Archive of obsolete content
copy and paste the content from here: <!doctype html public "-//w3c//dtd html 4.0//en"> <html> <head> <title>mozilla css
getting started - xbl demonstration</title> <link rel="stylesheet" type="text/css" href="style6.css"> </head> <body> <h1>xbl demonstration</h1> <div id="square">click me</div> </body> </html> make a new css file, style6.css.
...g/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="square"> <resources> <stylesheet src="bind6.css"/> </resources> <content> <html:div anonid="square"/> <xul:button anonid="button" type="button"> <children/> </xul:button> </content> <implementation> <field name="square"><![cdata[ document.
getanonymouselementbyattribute(this, "anonid", "square") ]]></field> <field name="button"><![cdata[ document.
getanonymouselementbyattribute(this, "anonid", "button") ]]></field> <method name="dodemo"> <body><![cdata[ this.square.style.backgroundcolor = "#cf4" this.square.style.marginleft = "20em" this.button.setattribute("disabled", "true") ...
... ]]></body> </method> <method name="cleardemo"> <parameter name="me"/> <body><![cdata[ me.square.style.backgroundcolor = "transparent" me.square.style.marginleft = "0" me.button.removeattribute("disabled") ]]></body> </method> </implementation> <handlers> <handler event="click" button="0"><![cdata[ if (event.originaltar
get == this.button) this.dodemo() ]]></handler> </handlers> </binding> </bindings> make a new css file, bind6.css.
...in this demonstration, the square and the button make a self-contained wid
get that functions within an html document.
Bookmark Keywords - Archive of obsolete content
in figure 2, we can see the bookmark has been filed into a folder called "wid
gets." you can create a folder with another name, or not put your keymarks into a folder at all.
...that way, if you ever for
get the keyword you've assigned to a bookmark, you only have to glance at the bookmark's title to remember the keyword.
...once you
get a result page, bookmark that page.
...thus we could type any of the following into the address bar and
get back useful results: <tt>google geitost</tt> <tt>google mozilla keyword bookmark</tt> <tt>google bookmark site:developer.netscape.com</tt> <tt>google netscape xml support -site:netscape.com</tt> a few examples in the course of writing this article, a number of potentially useful bookmarks were considered as possible examples.
Makefile.mozextension.2 - Archive of obsolete content
note that the original makefile.mozextention merely repeats the steps in
getting started with extension development - mozillazine knowledge base (2008).
... do that, all of the < > will be quoted as & lt ; so again it will be corrupt :( therefore, here is a direct link to this makefile: makefile.mozextension2 ## file: makefile.mozextension2 ## based on http://kb.mozillazine.org/makefile_for_packaging_an_extension ## "this makefile.mozextention is for the test extension" ## the original makefile.mozextention reconstructs http://kb.mozillazine.org/
getting_started_with_extension_development # call with: # make -f makefile.mozextension2 make_structure ## (without args for 'all') # note: @echo silent; without @ the command is written in stdout project=test project_name=testworld #~ project_id={xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx} project_id=test@testworld.ext project_version=1.0 project_desc="a $(project_name) project with advanced feature...
...either remove (clean it), or choose individual tar
gets to build."; exit 1; } @echo $(mkdir) $(project) $(mkdir) $(project)/content $(project)/locale $(project)/locale/en-us $(project)/components/ $(project)/defaults/ $(project)/defaults/preferences/ $(project)/locale/de-de $(project)/skin make_xpi: $(mkdir) $(project)/chrome && \ cd $(project) && \ $(zipprog) -r chrome/$(project).jar content locale skin && \ $(zipprog) -r $(project).xpi c...
.../creator> <contributor>here is a place for you who helped me</contributor> <homepageurl>http://$(project).mozdev.org/</homepageurl> <optionsurl>chrome://$(project)/content/settings.xul</optionsurl> <abouturl>chrome://$(project)/content/about.xul</abouturl> <iconurl>chrome://$(project)/skin/mainicon.png</iconurl> <updateurl>http://$(project).mozdev.org/update.rdf</updateurl> <type>2</type> <tar
getapplication> <description> <id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</id> <minversion>2.0</minversion> <maxversion>9.0</maxversion> </description> </tar
getapplication> </description> </rdf> endef export install_rdf install.rdf: @echo generating $(project)/install.rdf @echo "$$install_rdf" > $(project)/install.rdf ###### define overlay_xul <overlay id="$(project)-overlay" ...
Frequently Asked Questions - Archive of obsolete content
when you try to load svg files from some websites you may
get a dialogue asking you "what should firefox do with this file?".
...if you're a c++ programmer interested in working on the svg implementation, please contact us and we'll be happy to help you
get involved.
... how can i
get in contact with you?
... the best way to
get in contact with us is to join the #svg channel on mozilla.org's irc server.
Table Cellmap - Archive of obsolete content
a typical code segment to come from the table level down to the rowgroup level nscellmap* map = mfirstmap; while (map) { if (map->
getrowcount() > rowindex) { // add your action here } rowindex -= map->
getrowcount(); map = map->
getnextsibling(); } data entry the usual way to populate the cellmap is via nstableframe::insertrows.
...he data containing the original cell #define col_span 0x00010000 // there is a col span #define col_span_0 0x00020000 // the col span is 0 #define overlap 0x00040000 // there is a row span and col span but no by same cell #define col_span_offset 0xfff80000 // the col offset to the data containing the original cell #define row_span_shift 3 // num bits to shift to
get right justified row span #define col_span_shift 19 // num bits to shift to
get right justified col span showing that there is a span, this span is a colspan and the colspan origin is one cell away.
...the current solution is to use nscellmap::
getdataat with a special argument aupdatezerospan to repair the cellmap if it encounters a empty cell (nsnull), by looking for a origin of a zero row- or colspan that spans the queried place in the cellmap.
...the following routines seem to be hot spots performance wise: nscellmap::colhasspanningcells nscellmap::rowhasspanningcells nscellmap::rowisspannedinto users of nscellmap::
getdataat outside nscellmap.cpp the border collapse code relies on the cellmap.
[Deprecated] The Mozilla build VM - Archive of obsolete content
thanks to significant improvements in our build environment setup process, it's much simpler and easier to
get set up and stay up to date by starting with building firefox instead.
...generally, there should be enough information in the bug to
get started.
...when you've completed the bug, they will help you
get your code into the tree.
... you can also ask your
getting-started questions in the introduction chat room on matrix, and any firefox development questions in the developers room.
Venkman Internals - Archive of obsolete content
to obtain the antecedent files: doc.
getelementsbytagname("script"); then extract the urls from the src attributes.
...(not in 2006, seems to be computed on the fly in
getsourcecontext()).
...if you want to
get at the pretty printed source text, instead of the actual source text, use scriptwrapper.jsdscript.functionsource.
...this tree should give you a pretty good idea of how it all fits to
gether.
Binding Attachment and Detachment - Archive of obsolete content
var checkbox = document.
getelementbyid("mycheckbox"); checkbox.style.mozbinding = "url(http://www.mozilla.org/xbl/htmlbindings.xml#checkbox)"; this attachment is not necessarily synchronous.
... any specified event handlers are installed on their requested tar
gets.
... methods and properties with
getters/setters are no longer accessible from the binding, although properties with raw values remain.
... any specified event handlers are unhooked from their respective tar
gets.
Creating XPI Installer Modules - Archive of obsolete content
introduction this article is rather old and only applies to mozilla suite and seamonkey (until it
gets converted to toolkit).
...note that the stylesheet processing instruction at the top of the xul file does not refer to any new skin, but imports communicator.css to make use of that skin's basic wid
get styles.
...for barley, that installation script should read as follows: // initinstall(name + version, name, version); var err = initinstall("barley v", "barley", ""); logcomment("initinstall: " + err); addfile("barley grain", // displayname from contents.rdf "barley.jar", // jar source
getfolder("chrome"), // tar
get folder ""); // tar
get subdir // registerchrome(type, location, source) registerchrome(package | delayed_chrome,
getfolder("chrome","barley.jar"), "content/"); if (err==success) performinstall(); else cancelinstall(err); note that there is no version number on barley, and so the name + version parameter has a "v" and then nothing el...
...but the xpi puts all of the resources of your package to
gether, including the instructions for installing it.
Mac stub installer - Archive of obsolete content
the mac stub installer project resides at: <http://lxr.mozilla.org/seamonkey/sou...ll/wizard/mac/> the mac stub installer source code resides at: <http://lxr.mozilla.org/seamonkey/sou...izard/mac/src/> how do we
get setup to debug the mac installer?
... build the mac installer (debug or non-debug tar
get) using miw.mcp grab a nightly build, say from <http://ftp.mozilla.org/pub/mozilla/n...taller.sea.bin> drop in the installer binary next to the "mozilla installer" in the "mozilla installer" folder created by unstuffing the opt build.
... how we
get setup to debug the xpinstall engine from the mac installer?
...to do this, in addition to the above steps to set up the mac installer to debug you will need to do the following: create a file named xpcom.xpi with the shared libraries in the structure described under the [xpcom] section in: <http://lxr.mozilla.org/seamonkey/sou...ackages-mac#33> note that if you are using the debug tar
get of the installer binary all shared libraries are expected to have the name format <libname>debug.shlb now set a break point at xpi_init() in the mac installer code and step into xpistub and eventually the xpinstall engine will load including symbols so you can set a break point in the xpinstall engine itself.
Install script template - Archive of obsolete content
all is quite an overloaded method, but i have invoked it here with three strings // which are globally defined err = initinstall(software_name, plid, version); if (err != 0) { // call initinstall again in case illegal characters in plid err = initinstall(software_name, software_name, version); if (err != 0) cancelinstall(err); } //addfiles to current browser block var pluginsfolder =
getfolder("plugins"); //verify disk space if(verifydiskspace(pluginsfolder, plugin_size+component_size)) { // start installing plugin shared library reseterror(); // install the plugin shared library to the current browser's plugin directory errblock1 = addfile (plid, version, plugin_file, pluginsfolder, null); if (errblock1!=0) { logcomment("could not add " + plugin_file + " to " + plug...
... * * @param empty param list **/ function createsecondaryinstall() { // use
getfolder in such a way that it creates c:\winnt\system32\myplugin secondaryfolder =
getfolder("win system", company_name); // if secondaryfolder is null, then there has been an error if(!secondaryfolder) return nosecondaryinstall; else { // we have admin privileges to write to the win system directory // so we will set up dll and xpt in their new home errblock2 = addfile (plid, ver...
... * * @param dirpath directory path from
getfolder * @param spacerequired required space in kilobytes * **/ function verifydiskspace(dirpath, spacerequired) { var spaceavailable; //
get the available disk space on the given path spaceavailable = file
getdiskspaceavailable(dirpath); // convert the available disk space into kilobytes spaceavailable = parseint(spaceavailable / 1024); // do the verification if(spaceavaila...
....my files) * @param suffixdescription string describing suffix **/ function registerplid(rootkey, plidpath, plidid, dllabsolutepath, xptabsolutepath, plugindescription, vendor, productname, pluginversion, mimetype, suffix, suffixdescription) { var myregstatus = 0; winreg =
getwinregistry(); if (winreg == null) { logcomment("moz registerplid: winreg == null"); return winregisnullerror; } // which root to start from hklm, hkcu if (rootkey == hkey_local_machine) { logcomment("moz registerplid: rootkey=="+hkey_local_machine); winreg.setrootkey(winreg.hkey_local_machine); } else if (rootkey == hkey_current_user) { logcomment("moz registerplid: rootkey==...
Writing to Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files |
getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes).
...to create an input stream, first
get a reference to a nsifile, and then use nsiscriptableio.newoutputstream() to open a stream for writing to it.
...try { var file = io.
getfile("desktop", "myinfo.txt"); var stream = io.newoutputstream(file, "text"); } catch (ex) { alert(ex); } this example retrieves a file object on the desktop called 'myinfo.txt' using nsiscriptableio.
getfile().
...var file = io.
getfile("desktop", "myinfo.txt"); var stream = io.newoutputstream(file, "text"); stream.writestring("this is some text"); stream.close(); in this example, a text input stream is created for the file 'myinfo.txt'.
findbar - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] in gecko 1.9, the findbar wid
get moved into toolkit, so it's available to any xul application, as well as extensions.
... you should use the browser property to
get and set this value from a script.
... , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width browser type: browser element lets you set and
get the browser in which the findbar is located.
... possible values are: find_normal (0): normal find find_typeahead (1): typeahead find find_links (2): link find methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselect...
PopupEvents - Archive of obsolete content
for example: <menu label="file"> <menupopup onpopupshowing="if (event.tar
get == this) adjustfilemenu(this);"> <menu label="open"> <menupopup> <menuitem label="file..."/> <menuitem label="page"/> </menupopup> </menu> </menupopup> </menu> the tar
get of the event is examined to ensure that the event is for the desired menupopup.
...<script> function openfilemenu() { var filemenu = document.
getelementbyid("file-menu"); filemenu.addeventlistener("popupshown", filemenuopened, false); filemenu.open = true; } function filemenuopened(event) { if (event.tar
get != document.
getelementbyid("file-menupopup")) return; var filemenu = document.
getelementbyid("file-menu"); filemenu.removeeventlistener("popupshown", filemenuopened, false); var openmenu = document.
getelementbyid("ope...
...the filemenuopened function first checks that the tar
get of the event is the right popup and returns early if not.
...<panel onpopuphiding="document.
getelementbyid('search').value = '';"> <textbox id="search"/> <button label="search" oncommand="dosearch();"/> </panel> you can prevent a popup from hiding by calling the event's preventdefault method.
Additional Navigation - Archive of obsolete content
another thing that you cannot have is a triple where both variables would be unknown as in the following: <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?category" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> </query> in this case when the template builder
gets to the triple, neither the ?category nor the ?title variables can be filled in so the builder doesn't know what to generate.
... subject="?start" predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> <triple subject="?photo" predicate="http://www.xulplanet.com/rdf/country" object="?start"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> </query> the first triple is used to
get the title for the country.
... by carefully defining the rdf graph and using the right triples we can usually navigate to any part of the rdf data that is necessary in order to
get the right results.
... retrieving parents a very uncommon form of navigation you can also do is to navigate upwards using a member tag, that is to
get all the parents of a node, as in this example: <query> <content uri="?start"/> <member container="?parent" child="?start"/> </query> this might be used, for instance, to start at a particular photo and find all of the containers that it is inside.
Rule Compilation - Archive of obsolete content
this means that you can change the rules using dom methods, rebuild the template, and
get different results.
...calling a dom api which needs to
get at the generated content will cause the template builder to generate output.
...when the template builder decides to start generation is determined automatically, and you don't need to do anything special to
get this to happen.
...however, it also means that the dom api usage, such as an attempt to
get the number of child nodes as above, will also not include generated items until the menu is opened.
SQLite Templates - Archive of obsolete content
the resulting query that
gets used will be: select name, email from myfriends where gender = 'male' this technique is used as quotes or other special characters are handled automatically.
...now, to adjust the query to something else, say to look up females, all you need to do is
get a reference to the param element and adjust the contents.
... you would likely want to add an id to the param element so that the
getelementbyid method may be used to refer to it.
...we could later change the age to use in the query with a short script: function adjustage(min, max) { document.
getelementbyid("minage").textcontent = min; document.
getelementbyid("maxage").textcontent = max; document.
getelementbyid("friends").builder.rebuild(); } this function takes two arguments, the minimum and maximum values to use.
Template Builder Interface - Archive of obsolete content
getservice(components.interfaces.nsirdfservice); var ds = rdf.
getdatasource("http://www.xulplanet.com/ndeakin/tests/xul/template-guide-streets.rdf"); var tree = document.
getelementbyid("thetree"); tree.database.adddatasource(ds); tree.builder.rebuild(); this is the typical way to add a datasource to an element, in this case to the tree with the id 'thetree'.
... the datasource is retrieved using the rdf service's
getdatasource method.
...for instance: var tree = document.
getelementbyid("thetree"); tree.datasources = "template-guide-photos5.rdf template-guide-streets.rdf"; this will also change the datasources used.
...the rdf service's
getdatasource method however, only accepts absolute urls.
Code Samples - Archive of obsolete content
change the first line to specify the page that you want to open: const url = "http://www.mozilla.org/" document .
getelementbyid("content") .webnavigation .loaduri(url, 0, null, null, null) if your button is in thunderbird or sunbird, use code like this to open a web page.
... change the first line to specify the page that you want to open: const url = "http://www.mozilla.org/" var uri = components .classes["@mozilla.org/network/simple-uri;1"] .
getservice(components.interfaces.nsiuri) uri.spec = url components .classes["@mozilla.org/uriloader/external-protocol-service;1"] .
getservice(components.interfaces.nsiexternalprotocolservice) .loadurl(uri) compose an e-mail to compose an e-mail, use the same code as in the section open a web page above.
...otherwise it opens the window: const name = "...internal name of the window..." const uri = "...chrome uri of the window..." var w = components .classes["@mozilla.org/appshell/window-mediator;1"] .
getservice(components.interfaces.nsiwindowmediator) .
getmostrecentwindow(name) if (w) w.focus() else components .classes["@mozilla.org/embedcomp/window-watcher;1"] .
getservice(components.interfaces.nsiwindowwatcher) .openwindow(null, uri, name, "chrome,resizable", null) change the first two lines to specify the window that you want to open.
...ame = "calendarmainwindow" const uri = "chrome://calendar/content/" * at the time of writing, sunbird's passwords window is broken close the current window to close the window containing the button, possibly leaving other windows open: close() exit the application to exit the application, first closing all its windows: components .classes['@mozilla.org/toolkit/app-startup;1'] .
getservice(components.interfaces.nsiappstartup) .quit(components.interfaces.nsiappstartup.eattemptquit) ...
Box Objects - Archive of obsolete content
the dom is generally used only to
get and modify information pertaining to the content or structure of the document.
...that is, you cannot
get the current size with these properties; instead you must use the box object properties.
...example 2 : source view <script> function showpositionandsize() { var labelbox = document.
getelementbyid('thelabel').boxobject; alert("position is (" + labelbox.x + "," + labelbox.y + ") and size is (" + labelbox.width + "," + labelbox.height + ")"); } </script> <button label="hide" oncommand="document.
getelementbyid('thelabel').hidden = true;"/> <button label="show" oncommand="document.
getelementbyid('thelabel').hidden = false;"/> <button label="collap...
...se" oncommand="document.
getelementbyid('thelabel').collapsed = true;"/> <button label="uncollapse" oncommand="document.
getelementbyid('thelabel').collapsed = false;"/> <button label="show position/size" oncommand="showpositionandsize();"/> <label id="thelabel" value="i am a label"/> note that if you hide and collapse the label, it will be treated as hidden.
Using the standard theme - Archive of obsolete content
at the beginning, there is no style when creating a new xul <tt>window</tt> (or a new <tt>dialog</tt>, for that matter) in your extension, and you do not associate a style sheet with it, your wid
gets will be unstyled.
... applying the standard theme in order to use the theme currently chosen by the user of the base application (the so called "global skin"), you have to add the following line to your xul file: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> this imports the styles found in the <tt>global/skin</tt> chrome directory and will make the standard xul wid
gets of your application use the selected chosen theme.
... adding custom styles in order to provide custom styling for some of your wid
gets (apart from the standard global skin) you can take two different routes.
...no matter which approach you choose, do not for
get to register your custom skin in the <tt>chrome.manifest</tt>.
Writing Skinnable XUL and CSS - Archive of obsolete content
these sorts of files are typically used with reusable overlayable wid
gets (e.g., the sidebar).
... derived skin files should not attempt to change the default look for a wid
get.
...in doing so, you have redefined the default look for the wid
get, which will make the ui in your window different from others that properly inherit from the same base skin file you do.
...never use the descendant selector without first
getting usage of the rule approved.
colorpicker - Archive of obsolete content
object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.tar
get.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> preference type: id connects the element to a corresponding preference.
... disabled type: boolean
gets and sets the value of the disabled attribute.
... tabindex type: integer
gets and sets the value of the tabindex attribute.
... value property
gets and sets color attribute methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), re...
iframe - Archive of obsolete content
ue="http://mozilla.org" /> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net" /> <menuitem label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menulist> <iframe id="myframe" flex="1"/> <script> function donav(obj) { var url = obj.selecteditem.value; // note the firstchild is the menupopup element document.
getelementbyid('myframe').setattribute('src', url); } </script> attributes showcaret type: boolean whether or not to cause a typing caret to be visible in the content area.
...subdocuments of chrome documents are of chrome type, unless the container element (one of iframe, browser or editor) has one of the special type attribute values (the common ones are content, content-tar
getable and content-primary) indicating that the subdocument is of content type.
... content-tar
getable one browser among many for content.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
tabbox - Archive of obsolete content
eventnode type: eventtar
get indicates the node where keyboard navigation events listener is set up.
... handlectrlpageupdown type: boolean
gets and sets the value of the handlectrlpageupdown attribute.
... handlectrltab type: boolean
gets and sets the value of the handlectrltab attibute.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
timepicker - Archive of obsolete content
disabled type: boolean
gets and sets the value of the disabled attribute.
... increment type: integer
gets and sets the value of the increment attribute.
... tabindex type: integer
gets and sets the value of the tabindex attribute.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(),...
tooltip - Archive of obsolete content
example <tooltip id="pa
getooltip" page="true"/> <browser tooltip="pa
getooltip"/> position type: string the position attribute determines where the popup appears relative to the element the user clicked to invoke the popup.
... label type: string
gets and sets the value of the label attribute.
... position type: string
gets and sets the value of the position attribute.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(),...
Building XULRunner with Python - Archive of obsolete content
for example def onload(): btntest = document.
getelementbyid("btntest") btntest.addeventlistener('command', ontest, false) def ontest(): window.alert('button activated') window.addeventlistener('load', onload, false) one possible gotcha is that the default python path used to find modules that areimported explicitly includes the xulrunner executable directory and the directory that is current when xulrunner launches.
...the jsconsole can also be open and used from code, for example (in javascript) function openjavascriptconsole() { var wwatch = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .
getservice(components.interfaces.nsiwindowwatcher); wwatch.openwindow(null, "chrome://global/content/console.xul", "_blank", "chrome,dialog=no,all", null); } // dump to the js console (xulrunner -jsconsole) function jsdump(str) { components.classes['@mozilla.org/consoleservice;1'] .
getservice(components.interfaces.nsiconsoleservice) .logstringmessage...
... deploying python must be installed on the tar
get machine.
...don't copy any.pyo files that exist for python modules in the application or errors will occur on the tar
get machine.
How to enable locale switching in a XULRunner application - Archive of obsolete content
snippet showing how this is done: the definition of the xul control: <listbox id="locale-listbox"> <!-- generated list items go in here --> </listbox> <button label="&switchlocale.button;" oncommand="changelocale()"/> the javascript code to populate the control: try { // query available and selected locales var chromeregservice = components.classes["@mozilla.org/chrome/chrome-registry;1"].
getservice(); var xulchromereg = chromeregservice.queryinterface(components.interfaces.nsixulchromeregistry); var toolkitchromereg = chromeregservice.queryinterface(components.interfaces.nsitoolkitchromeregistry); var selectedlocale = xulchromereg.
getselectedlocale("localeswitchdemo"); var availablelocales = toolkitchromereg.
getlocalesforpackage("localeswitchdemo"); // render locale men...
...ulist by iterating through the query result from
getlocalesforpackage() const xul_ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var localelistbox = document.
getelementbyid("locale-listbox"); var selecteditem = null; while(availablelocales.hasmore()) { var locale = availablelocales.
getnext(); var listitem = document.createelementns(xul_ns, "listitem"); listitem.setattribute("value", locale); listitem.setattribute("label", locale); if (locale == selectedlocale) { // is this the current locale?
... var localelistbox = document.
getelementbyid("locale-listbox"); var newlocale = localelistbox.selecteditem.value; // write preferred locale to local user config var prefs = components.classes["@mozilla.org/preferences-service;1"].
...
getservice(components.interfaces.nsiprefbranch); prefs.setcharpref("general.useragent.locale", newlocale); // restart application var appstartup = components.classes["@mozilla.org/toolkit/app-startup;1"] .
getservice(components.interfaces.nsiappstartup); appstartup.quit(components.interfaces.nsiappstartup.erestart | components.interfaces.nsiappstartup.eattemptquit); } catch(err) { alert("couldn't change locale: " + err); } } * * * here i include a complete xulrunner application example that demonstrates the locale switching.
XULRunner tips - Archive of obsolete content
pref("extensions.update.interval", 86400); pref("extensions.dss.enabled", false); pref("extensions.dss.switchpending", false); pref("extensions.ignoremtimechanges", false); pref("extensions.logging.enabled", false); pref("general.skins.selectedskin", "classic/1.0"); // nb these point at amo pref("extensions.update.url", "chrome://mozapps/locale/extensions/extensions.properties"); pref("extensions.
getmoreextensionsurl", "chrome://mozapps/locale/extensions/extensions.properties"); pref("extensions.
getmorethemesurl", "chrome://mozapps/locale/extensions/extensions.properties"); if your application is based on gecko 2.0, you need to register a component through the new component registration because the extension manager uses fuel, namely application.restart(), to restart your xulrunner-based ap...
... var windowds = components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"] .
getservice(components.interfaces.nsiwindowdatasource); var tmpnamespace = {}; var sl = components.classes["@mozilla.org/moz/jssubscript-loader;1"] .createinstance(components.interfaces.mozijssubscriptloader); sl.loadsubscript("chrome://inspector/content/hooks.js", tmpnamespace); tmpnamespace.inspectdomdocument(document); } now create a hook in your application window to start dom insp...
....download.manager.closewhendone", true); pref("browser.download.manager.opendelay", 0); pref("browser.download.manager.focuswhenstarting", false); pref("browser.download.manager.flashcount", 2); // pref("alerts.slideincrement", 1); pref("alerts.slideincrementtime", 10); pref("alerts.totalopentime", 4000); pref("alerts.height", 50); if you are missing preferences that a dialog requires, you will
get the following errors: component returned failure code: 0x8000ffff (ns_error_unexpected) [nsiprefbranch.
getboolpref] error: dialog has no properties source file: chrome://mozapps/content/downloads/u...ontenttype.xul line: 1 enabling password manager these preferences seem to be the default in firefox, however, they are missing in xulrunner.
... pref("signon.remembersignons", true); pref("signon.expiremasterpassword", false); pref("signon.signonfilename", "signons.txt"); you also need to
get an instance of the login manager service, which internally initializes the system: components.classes["@mozilla.org/login-manager;1"].
getservice(components.interfaces.nsiloginmanager); using firefox to run xulrunner applications firefox 3 and up contain the xulrunner runtime.
Monitoring plugins - Archive of obsolete content
be useful to developers trying to use this feature: registration to register for runtime notifications with the observer service you must create a class with an observe method which receives 3 parameters (subject, topic and data) as well as a register method that contains the following code: var observerservice = components.classes["@mozilla.org/observer-service;1"] .
getservice (components.interfaces.nsiobserverservice); observerservice.addobserver(this, "experimental-notify-plugin-call", false); observing as discussed above, to specify what you want done when a notification arrives your class must have an observe method, receiving 3 parameters (subject, topic and data).
... clean up to unregister your class with the observer service - when you no longer want to be listening to runtime notifications - your class must include an unregister method that contains the following code: var observerservice = components.classes["@mozilla.org/observer-service;1"] .
getservice(components.interfaces.nsiobserverservice); observerservice.removeobserver(this, "experimental-notify-plugin-call"); skeleton observer class below is a skeleton class that you may use to listen to runtime notifications: function pluginobserver() { this.registered = false; this.register(); //takes care of registering this class with observer services as an observer for plugi...
...n runtime notifications } pluginwatcherobserver.prototype = { observe: function(subject, topic, data) { if (topic == "experimental-notify-plugin-call") //in case your class is registered to listen to other topics //this
gets executed each time a runtime notification arrives // --your code goes here-- } }, //takes care of registering the observer services for the "experimental-notify-plugin-call" topic register: function() { if (this.registered == false) { //this check prevents double registration -- something you want to avoid!!
... var observerservice = components.classes["@mozilla.org/observer-service;1"] .
getservice(components.interfaces.nsiobserverservice); observerservice.addobserver(this, "experimental-notify-plugin-call", false); this.registered = true; } }, //unregisters from the observer services unregister: function() { if (this.registered == true) { var observerservice = components.classes["@mozilla.org/observer-service;1"] .
getservice(components.interfaces.nsiobserverservice); observerservice.removeobserver(this, "experimental-notify-plugin-call"); this.registered = false; } } } additional resources more information on the observer service: nsiobserverser...
Sunbird Theme Tutorial - Archive of obsolete content
copy and paste the content from here, making sure that you scroll to
get all of it: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest" em:id="just-testing@example.com" em:name="just testing" em:creator="rod whiteley" em:description="a test theme for sunbird" em:homepageurl="http://developer.mozilla.org/" em:versi...
...on="0.1" em:internalname="testing" em:type="4" > <em:tar
getapplication><!-- sunbird --> <description em:id="{718e30fb-e89b-41dd-9da7-e25a45638b28}" em:minversion="0.2.9" em:maxversion="0.4" /> </em:tar
getapplication> </description> </rdf> in the line that starts <tt>em:id</tt>, paste your identifier between the double-quote characters, replacing the identifier that is there now.
...paste the copied <tt>calendar</tt> directory, to
gether with all its contents, into your new <tt>chrome</tt> directory.
...use a jar tool or zip tool to pack the files in your theme directory to
gether with your <tt>.jar</tt> file.
Using IO Timeout And Interrupt On NT - Archive of obsolete content
if the thread
gets interrupted by another thread's <tt>pr_interrupt()</tt> call, the io function returns with <tt>pr_pending_interrupt_error</tt>.
... if the thread
gets interrupted by another thread's <tt>pr_interrupt()</tt> call.
...if the thread subsequently exists and its <tt>prthread</tt> structure
gets deleted, the pointer to the overlapped buffer will be pointing to freed memory.
...when we stop supporting nt 3.51, we can look into using nt 4's <tt>cancelio()</tt> function to cancel outstanding overlapped io requests when we
get io timeout or interrupt errors.
-ms-filter - Archive of obsolete content
code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_8.htm -ms-filter: 'progid:dxima
getransform.microsoft.motionblur(strength=50), progid:dxima
getransform.microsoft.basicimage(mirror=1)'; the following example shows how to use an inline style sheet to set the filter on an image.
... code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_h.htm <img style="filter:progid:dxima
getransform.microsoft.motionblur(strength=50) progid:dxima
getransform.microsoft.basicimage(mirror=1)" src="/workshop/samples/author/dhtml/graphics/cone.jpg" height="80px" width="80px" alt="cone"> the following example shows how to use scripting to set the filter on an image.
... filterfrom.filters.item(0).transition=12; imagefrom.style.visibility = "hidden"; filterto.style.visibility = ""; filterfrom.filters.item(0).play(14); } </script> </body> gradient progid:dxima
getransform.microsoft.gradient( <properties> ) where <properties> = [ <enabled> | <endcolor> | <endcolorstr> | <gradienttype> | <startcolor> | <startcolorstr> ]# where <enabled> = 'enabled=' [ true | false ] <endcolor> = 'startcolor=' <color> <endcolorstr> = 'startcolorstr=' <color> <gradienttype> = 'gradienttype=' <integer> <startcolor> = 'startcolor=' <color> <startcolorstr> = 'startcolorstr=' <col...
... html <div class="gradient horizontal"></div> <div class="gradient vertical"></div> css html, body { overflow-x: hidden; max-width: 100vw; } .gradient { width: 100vw; height: 60px; height: 50vh; } .gradient.horizontal { -ms-filter: 'progid:dxima
getransform.microsoft.gradient(startcolorstr="#ffffff", endcolorstr="#000000", gradienttype=1)'; background-image: linear-gradient(to right, #ffffff 0%, #000000 100%); } .gradient.vertical { -ms-filter: 'progid:dxima
getransform.microsoft.gradient(startcolorstr="#ffffff", endcolorstr="#000000", gradienttype=0)'; background-image: linear-gradient(to bottom, #ffffff 0%, #000000 100%); } result ...
E4X for templating - Archive of obsolete content
{ return s.replace(/"/g, '"').replace(/'/g, '''); } if (typeof s === 'xml') { return s.tostring().replace(/"/g, '"').replace(/'/g, '''); } return string(s).replace(/"/g, '"').replace(/'/g, '''); } localization e4x works nicely with a simple utility for localizing strings of a properties file: // localization function $s(msg, args){ //
get localized message var strs = cc['@mozilla.org/intl/stringbundle;1'].
getservice(ci.nsistringbundleservice).
... createbundle('chrome://myeext/locale/myext.properties'); if (args){ args = array.prototype.slice.call(arguments, 1); return strs.formatstringfromname(msg,args,args.length); } return strs.
getstringfromname(msg); } for example, <toolbarbutton label={$s('mytoolbar.label')}/> conditionals function _if (cond, h, _else) { if (cond && cond != undefined) { // we need undefined condition for e4x return h(cond); } else if (_else) { return _else(cond); } return ''; // empty string allows conditions in attribute as well as element content } for example: {_if(elems.length(), function () <description>{elems[0]}</description>, function _else () <label>no data</label> )} note that the simple xm...
... } } else { lev = arr; h = max; arr = min; max = number.positive_infinity; min = 1; } if (h.length === 1) { for (k in arr) { if (it < min) { ++it; continue; } if (it > max) { break; } ret+=h(arr[k], it, lev); // need to
get it or lev via arguments[] since our length detection implies no explicit additional params; otherwise define with more than one param (see below) ++it; } } else { for (k in arr) { if (it < min) { ++it; continue; } if (it > max) { break; } ret+=h(k, arr[k]...
...inline functions as explained in the tutorial, it is possible to use anonymous functions inline (returning the desired content, including potentially xmllist's) in order to execute more than a single related statement, keeping this logic to
gether with the resulting xml.
New in JavaScript 1.8.5 - Archive of obsolete content
object.
getownpropertydescriptor() returns a property descriptor for a named property on an object.
...bug 307791 object.
getownpropertynames() returns an array of all enumerable and non-enumerable properties on an object.
...bug 429507 new ecmascript5 features
get and set operators now allows the identifier to be numeric or a string.
... other standardization work various non-standard syntaxes for defining
getters and setters have been removed; ecmascript 5 defined syntax has not been changed.
handler.enumerate() - Archive of obsolete content
syntax var p = new proxy(tar
get, { enumerate(tar
get) { } }); parameters the following parameter is passed to the enumerate method.
... tar
get the tar
get object.
... var p = new proxy({}, { enumerate(tar
get) { console.log('called'); return ['a', 'b', 'c'][symbol.iterator](); } }); for (var x in p) { // "called" console.log(x); // "a" } // "b" // "c" the following code violates the invariant.
... var p = new proxy({}, { enumerate(tar
get) { return 1; } }); for (var x in p) {} // typeerror is thrown note: both examples make use of the shorthand syntax for method definitions.
background-size - Archive of obsolete content
people should refer to the webkit and gecko version to
get the info they need.
...it's hard to
get reliable information about its css support without having this browser (read: multiple versions of this browser) installed.
... i'm guessing not, just asking because having both rules in for 3.6 creates a strange effect: -moz-border-image
gets inherited by every element on the page user:robertc 2009-08-08 -moz-border-image should not inherit.
... and anyway, it's more the -moz-border-image that seems to be the problem - that
gets inherited even if i add in -moz-border-image: none, to <body> or <html>, and setting the height to 100% is more a matter of covering it up rather than stopping it happening (see further examples a, b and c - b and c look ok, but adding margin or padding reveals that the image applies to both <body> and <html> even though explicitly set to none) user:robertc 2009-08-14 see also bug 509681 and bug...
Reference - Archive of obsolete content
did this operator
get removed/deprecated, or is it missing from the documentation?
...but is there a way to
get content of jsref-1.5 or other documents as a tarball?
...i checked this by doing alert(math.constructor) //shows that object is its constructor alert(object.constructor) //shows that function is its constructor alert(function.constructor) //shows that function is its constructor note : the function.constructor seems to keep on refering to itself, if you do the following you
get same results which suggests that this is indeed the top level object.
...ruakh 14:40, 27 february 2007 (pst) please don't start making large changes without
getting an ok from dev-mdc.
Implementation Status - Archive of obsolete content
references in xforms unsupported 4.7.1 references to elements within a repeat element unsupported 4.7.2 references to elements within a bind element unsupported 4.8 dom interface for access to instance data supported 4.8.1
getinstancedocument() supported 4.8.2 rebuild() supported 4.8.3 recalculate() supported 4.8.4 revalidate() supported 4.8.5 refresh() supported 4.9 feature string for the hasfeature me...
...
getting a few issues with in/out of range notifications.
...xforms submission model section title status notes bugs 11.1 submission partial from 1.1 we do not yet support @mode, @indent, @replace='text', @separator, @serialize, @tar
get, header or method child elements 11.2 xforms-submit partial we currently limit (for security reasons) submission only back to the server that served the document.
... 11.7.1 method unsupported 11.8 header unsupported 11.8.1 name unsupported 11.8.2 value unsupported 11.9 submission options supported 11.9.1 the
get submission method supported 11.9.2 the post, multipart-post, form-data-post, and urlencoded-post submission methods supported 11.9.3 the put submission method supported 11.9.4 the delete submission method unsupported 11.9.5 ...
XForms Select Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of wid
get(s) to use to represent this control.
... representations the xforms select element can be represented by the following wid
gets for the specified appearance attribute values: list - default representation (xhtml/xul) check group- used when appearance = 'full' (xhtml/xul) list displaying a listbox is the default representation (xhtml/xul).
... characteristics analogous wid
gets are <html:select size="5" multiple="true"/> and <xul:listbox seltype="multiple"/> visual grouping by choices element isn't implemented if incremental attribute value is false, the bound node is updated when the select control is blurred (i.e.
...characteristics appearance attribute contains the value full there are no analogue wid
gets in xhtml or in xul visual grouping by choices element is supported if incremental attribute value is false then bound node is updated when item is blurred examples <xf:model> <xf:instance> <data xmlns=""> <values>g</values> </data> </xf:instance> </xf:model> <xf:select ref="/data/values" appearance="full"> <xf:choices> <xf:label>green colors</xf:label> <xf:item> <xf:label>pale green</xf:label> <xf:value>pg</xf:value> </xf:item> <xf:item> <xf:label>green</xf:label> <xf:value>g</xf:value> </xf:item> ...
XForms Trigger Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of wid
get(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding type restrictions the trigger element can be bound to a node containing data of any type.
... representations the xforms trigger element can be represented by the following wid
gets for the specified appearance attribute values: button - default representation (xhtml/xul) link/clickable text - used when appearance = 'minimal' (xhtml only) button displaying a button is the default presentation (xhtml/xul).
... characteristics analogous wid
gets are <html:input type="button"/> and <xul:button/> link/clickable text xforms authors can use this representation if they want to have a wid
get like a xhtml anchor (xhtml only).
... characteristics appearance attribute contains the value minimal analogue wid
get is <xhtml:a/>.
Using XForms and PHP - Archive of obsolete content
introduction a few tips on using xforms and php to
gether.
... parsing submitted data depending on the submission type, you might
get different data formats on the server side.
...there is some help in
getting to the raw xml on the php documentation site.
...to
get a dom document on php 4 i usually do something like this: $data = $http_raw_post_data; $dom = domxml_open_mem($data); $root = $dom->document_element(); ...
Archive of obsolete content
here at mdn, we try to avoid outright deleting content that might be useful to people tar
geting legacy platforms, operating systems, and browsers.
... perhaps your tar
get audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers.
... creating a status bar extension many of the concepts introduced here apply to any xul-based application; however, to keep from
getting completely overwhelmed, we're going to focus specifically on firefox.
...
getting the page url in npapi plugin sometimes, you want to restrict an npapi plugin to be loadable only from a certain url or domain or scheme.
Building up a basic demo with A-Frame - Game development
this article explains how to
get up and running with a-frame, and how to use it to build up a simple demo.
...it is based on the entity component system, which is known in the game development world, but it tar
gets web developers with a familiar markup structure, manipulable with javascript.
...y> element, just after the <a-scene> element, then add the following javascript code inside it: var scene = document.queryselector('a-scene'); var cylinder = document.createelement('a-cylinder'); cylinder.setattribute('color', '#ff9500'); cylinder.setattribute('height', '2'); cylinder.setattribute('radius', '0.75'); cylinder.setattribute('position', '3 1 0'); scene.appendchild(cylinder); we're
getting a reference to the scene handler first, then we create the cylinder element as an a-frame entity.
...a-frame tar
gets web developers by offering easy to use web markup and all the advantages that brings, such as javascript manipulation.
GLSL Shaders - Game development
it can
get very complicated — very quickly.
... the vertex shader code let's continue by writing a simple vertex shader — add the code below inside the body's first <script> tag: void main() { gl_position = projectionmatrix * modelviewmatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0); } the resulting gl_position is calculated by multiplying the model-view and the projection matrices by each vector to
get the final vertex position, in each case.
... applying the shaders to actually apply the newly created shaders to the cube, comment out the basicmaterial definition first: // var basicmaterial = new three.meshbasicmaterial({color: 0x0095dd}); then, create the shadermaterial: var shadermaterial = new three.shadermaterial( { vertexshader: document.
getelementbyid( 'vertexshader' ).textcontent, fragmentshader: document.
getelementbyid( 'fragmentshader' ).textcontent }); this shader material takes the code from the scripts and applies it to the object the material is assigned to.
...h, height); renderer.setclearcolor(0xdddddd, 1); document.body.appendchild(renderer.domelement); var scene = new three.scene(); var camera = new three.perspectivecamera(70, width/height); camera.position.z = 50; scene.add(camera); var boxgeometry = new three.boxgeometry(10, 10, 10); var shadermaterial = new three.shadermaterial( { vertexshader: document.
getelementbyid( 'vertexshader' ).textcontent, fragmentshader: document.
getelementbyid( 'fragmentshader' ).textcontent }); var cube = new three.mesh(boxgeometry, shadermaterial); scene.add(cube); cube.rotation.set(0.4, 0.2, 0); function render() { requestanimationframe(render); renderer.render(scene, camera); } render(); css body { margin: 0; pad...
Unconventional controls - Game development
there's good hello world and
getting started javascript tutorials available on the leap motion documentation pages, which will
get you through the basics.
... to
get the leap motion working on your computer you have to first install it by following the steps at leapmotion.com/setup.
...we next add these lines after all the event listeners for keyboard and mouse, but before the draw method: var todegrees = 1 / (math.pi / 180); var horizontaldegree = 0; var verticaldegree = 0; var degreethreshold = 30; var grabstrength = 0; right after that we use the leap's loop method to
get the information held in the hand variable on every frame: leap.loop({ hand: function(hand) { horizontaldegree = math.round(hand.roll() * todegrees); verticaldegree = math.round(hand.pitch() * todegrees); grabstrength = hand.grabstrength; output.innerhtml = 'leap motion: <br />' + ' roll: ' + horizontaldegree + '° <br />' + ' pitch: ' +...
... doppler effect there's a very interesting article available on motion sensing using the doppler effect, which mixes to
gether waving your hand and using the microphone.
Square tilemaps implementation: Scrolling maps - Game development
note: when writing this article, we assumed previous reader knowledge of canvas basics such as how
get a 2d canvas context, load images, etc., which is all explained in the canvas api tutorial, as well as the basic information included in our tilemaps introduction article.
...the main difference is that we are adding the offsetx and offsety values to the tar
get x and y coordinates, and these values are rounded, to avoid artifacts that would result from the camera pointing at positions with floating point numbers.
... for (var c = startcol; c <= endcol; c++) { for (var r = startrow; r <= endrow; r++) { var tile = map.
gettile(c, r); var x = (c - startcol) * map.tsize + offsetx; var y = (r - startrow) * map.tsize + offsety; if (tile !== 0) { // 0 => empty tile this.ctx.drawimage( this.tileatlas, // image (tile - 1) * map.tsize, // source x 0, // source y map.tsize, // source width map.tsize, // source height math.round(x), // tar
get x math.round(y), // tar
get y map.tsize, // tar
get width map.tsize // tar
get height ); } } ...
... } demo our scrolling tilemap implementation demo pulls the above code to
gether to show what an implementation of this map looks like.
2D maze game with device orientation - Game development
basic javascript knowledge is recommended to
get the most from this tutorial.
...the following line in the update() function adds a listener that fires when the ball
gets to the hole.
... this.leveltext.settext("level: "+this.level+" / "+this.maxlevels); this.ball.body.x = this.ballstartpos.x; this.ball.body.y = this.ballstartpos.y; this.ball.body.velocity.x = 0; this.ball.body.velocity.y = 0; this.showlevel(); } }, if the current level is equal to the maximum number of levels (in this case 5), then the game is finished — you'll
get a congratulations message along with the number of seconds elapsed through the whole game, and a button to press that takes you to the main menu.
... html5 gives us raw tools, the frameworks built on top of it are
getting faster and better, so now is a great time
get into web game development.
Idempotent - MDN Web Docs Glossary: Definitions of Web-related terms
implemented correctly, the
get, head, put, and delete method are idempotent, but not the post method.
...
get /pagex http/1.1 is idempotent.
... called several times in a row, the client
gets the same results:
get /pagex http/1.1
get /pagex http/1.1
get /pagex http/1.1
get /pagex http/1.1 post /add_row http/1.1 is not idempotent; if it is called several times, it adds several rows: post /add_row http/1.1 post /add_row http/1.1 -> adds a 2nd row post /add_row http/1.1 -> adds a 3rd row delete /idx/delete http/1.1 is idempotent, even if the returned status code may change between requests: delete /idx/delete http/1.1 -> returns 200 if idx exists delete /idx/delete http/1.1 -> returns 404 as it just got deleted delete /idx/delete http/1.1 -> returns 404 learn more general knowledge definition of idempotent in the http specification.
... technical knowledge description of common idempotent methods:
get, head, put, delete, options, trace description of common non-idempotent methods: post,patch, connect ...
Cacheable - MDN Web Docs Glossary: Definitions of Web-related terms
not all http responses can be cached, these are the following constraints for an http response to be cached: the method used in the request is itself cacheable, that is either a
get or a head method.
...for example, a put to pagex.html will invalidate all cached
get or head requests to the same uri.
... when both, the method of the request and the status of the response, are cacheable, the response to the request can be cached:
get /pagex.html http/1.1 (…) 200 ok (…) a put request cannot be cached.
... moreover, it invalidates cached data for request to the same uri done via head or
get: put /pagex.html http/1.1 (…) 200 ok (…) a specific cache-control header in the response can prevent caching:
get /pagex.html http/1.1 (…) 200 ok cache-control: no-cache (…) ...
Safe - MDN Web Docs Glossary: Definitions of Web-related terms
several common http methods are safe:
get, head, or options.
...in particular, an application should not allow
get requests to alter its state.
... a call to a safe method, not changing the state for the server:
get /pagex.html http/1.1 a call to a non-safe method, that may change the state of the server: post /pagex.html http/1.1 a call to an idempotent but non-safe method: delete /idx/delete http/1.1 learn more general knowledge definition of safe in the http specification.
... technical knowledge description of common safe methods:
get, head, options description of common unsafe methods: put, delete, post ...
Assessment: Accessibility troubleshooting - Learn web development
starting point to
get this assessment started, you should go and grab the zip containing the files that comprise the example.
... note: if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
... the table the data table is not currently very accessible — it is hard for screenreader users to associate data rows and columns to
gether, and the table also has no kind of summary to make it clear what it shows.
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
A cool-looking box - Learn web development
in this assessment, you'll
get some more practice in creating cool-looking boxes by trying to create an eye-catching box.
... starting point to
get this assessment started, you should: make local copies of the starting html and css — save them as index.html and style.css in a new directory.
... note: if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
CSS building blocks - Learn web development
we have put to
gether a course that includes all the essential information you need to work towards your goal.
...
get started prerequisites before starting this module, you should have: basic familiarity with using computers, and using the web passively (i.e.
...understanding how big the different features in your design will be is important, and in this lesson, we will summarize the various ways elements
get a size via css and define a few terms around sizing that will help you in the future.
... a cool looking box here you'll
get some practice in using background and border styling to create an eye-catching box.
Responsive design - Learn web development
previous overview: css layout next in the early days of web design, pages were built to tar
get a particular screen size.
...a flexible grid means that you don't need to tar
get every possible device size that there is, and build a pixel perfect layout for it.
... tar
get / context = result for example, if our tar
get column size is 60 pixels, and the context (or container) it is in is 960 pixels, we divide 60 by 960 to
get a value we can use in our css, after moving the decimal point two places to the right.
...or, acknowledging the smaller size of an image on mobile you might want to show a different image alto
gether, one which is more easily understood at a small screen size.
Using your new knowledge - Learn web development
note: if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
... afterwards try looking up some properties not mentioned on this page in the mdn css reference and
get adventurous!
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
...
getting started with css how css is structured how css works using your new knowledge ...
What is CSS? - Learn web development
the individual property pages on mdn give you a quick way to look up properties and their values when you for
get, or want to know what else you can use as a value.
...alternatively, you should
get used to searching for "mdn css-feature-name" in your favourite search engine whenever you need to find out more information about a css feature.
... what's next now that you have some understanding of what css is, let's move on to
getting started with css, where you can start to write some css yourself.
...
getting started with css how css is structured how css works using your new knowledge ...
Fundamental text and font styling - Learn web development
it is quite natural once you
get used to it, and you can use em to size everything, not just text.
...n: center; } h1 + p { font-weight: bold; } p { font-size: 1.5rem; color: red; font-family: helvetica, arial, sans-serif; } line height the line-height property sets the height of each line of text — this can take most length and size units, but can also take a unitless value, which acts as a multiplier and is generally considered the best option — the font-size is multiplied to
get the line-height.
...you won't use these very often, but might find a use for them to
get a certain look, or to improve the legibility of a particularly dense font.
...p { } </textarea> <h2>output</h2> <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> <div class="controls"> <input id="reset" type="button" value="reset" style="margin: 10px 10px 0 0;"> </div> </div> const htmlinput = document.queryselector(".html-input"); const cssinput = document.queryselector(".css-input"); const reset = document.
getelementbyid("reset"); let htmlcode = htmlinput.value; let csscode = cssinput.value; const output = document.queryselector(".output"); const styleelem = document.createelement('style'); const headelem = document.queryselector('head'); headelem.appendchild(styleelem); function drawoutput() { output.innerhtml = htmlinput.value; styleelem.textcontent = cssinput.value; } reset.addeventlistener("...
Typesetting a community school homepage - Learn web development
previous overview: styling text in this assessment we'll test your understanding of all the text styling techniques we've covered throughout this module by
getting you to style the text for a community school's homepage.
... starting point to
get this assessment started, you should: go and grab the html and css files for the exercise, and the provided external link icon.
... note: if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
Learn to style HTML using CSS - Learn web development
we have put to
gether a course that includes all the essential information you need to work towards your goal.
...
get started prerequisites you should learn the basics of html before attempting any css.
...you should have a basic work environment set up as detailed in installing basic software and understand how to create and manage files, as detailed in dealing with files — both of which are parts of our
getting started with the web complete beginner's module.
... it is recommended that you work through
getting started with the web before proceeding with this topic.
What is a Domain Name? - Learn web development
getting a domain name the process is quite straightforward: go to a registrar's website.
... usually there is a prominent “
get a domain name” call to action.
...thus, it takes some time for dns servers that know about this domain name to
get the up-to-date information.
... if you want to
get hands-on, it's a good time to start digging into design and explore the anatomy of a web page.
Example 2 - Learn web development
this is the second example that explain how to build custom form wid
gets.
... js html content <form class="no-wid
get"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> <form> css content .wid
get select, .no-wid
get .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .
...moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-wid
get"); form.classlist.add("wid
get"); }); result for js no js html content <form class="no-wid
get"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="...
...option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> <form> css content .wid
get select, .no-wid
get .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } result for no js ...
CSS basics - Learn web development
previous overview:
getting started with the web next css (cascading style sheets) is the code that styles web content.
... css basics walks through what you need to
get started.
... conclusion if you followed all the instructions in this article, you should have a page that looks similar to this one: (you can view our version here.) if you
get stuck, you can always compare your work with our finished example code on github.
... previous overview:
getting started with the web next in this module installing basic software what will your website look like?
Installing basic software - Learn web development
overview:
getting started with the web next in installing basic software, we show you what tools you need to do simple web development and how to install them properly.
...you should also test how your site performs on mobile devices and on any old browsers your tar
get audience may still be using (such as ie 8–10.) lynx, a text-based terminal web browser, is great for seeing how your site is experienced by visually-impaired users.
... that looks like a scary list, but fortunately, you can
get started in web development without knowing anything about most of these.
... overview:
getting started with the web next in this module installing basic software what will your website look like?
Using data attributes - Learn web development
you could use
getattribute() with their full html name to read them, but the standard defines a simpler way: a domstringmap you can read out via a dataset property.
... to
get a data attribute through the dataset object,
get the property by the part of the attribute name after data- (note that dashes are converted to camelcase).
...for example to show the parent data on the article you can use generated content in css with the attr() function: article::before { content: attr(data-parent); } you can also use the attribute selectors in css to change styles according to the data: article[data-columns='3'] { width: 400px; } article[data-columns='4'] { width: 600px; } you can see all this working to
gether in this jsbin example.
...to support ie 10 and under you need to access data attributes with
getattribute() instead.
Mozilla splash page - Learn web development
previous overview: multimedia and embedding in this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles,
getting you to add some images and video to a funky splash page all about mozilla!
...then save pattern.png in the same directory (right click on the image to
get an option to save it.) access the different images in the originals directory and save them in the same way; you'll want to save them in a different directory for now, as you'll need to manipulate (some of) them using a graphics editor before they're ready to be used.
...this would also be useful if you want to
get it assessed, or ask for help — see the assessment or further help section at the bottom of this page.
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
HTML Tables - Learn web development
we have put to
gether a course that includes all the essential information you need to work towards your goal.
...
get started prerequisites before starting this module, you should already have covered the basics of html — see introduction to html.
... guides this module contains the following articles: html table basics this article
gets you started with html tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group to
gether all the cells in a column for styling purposes.
... assessments structuring planet data in our table assessment, we provide you with some data on the planets in our solar system, and
get you to structure it into an html table.
Making asynchronous programming easier with async and await - Learn web development
in the meantime, other code that may be waiting for a chance to execute
gets to do so.
...if you used the try/catch block here, you might still
get unhandled errors in the myfetch() function when it's called.
...this includes promise.all() — you can quite happily await a promise.all() call to
get all the results returned into a variable in a way that looks like simple synchronous code.
...see the promise.all() line: let values = await promise.all([coffee, tea, description]); by using await here we are able to
get all the results of the three promises returned into the values array, when they are all available, in a way that looks very much like sync code.
Arrays - Learn web development
maybe we've got a series of product items and their prices stored in an array, and we want to loop through them all and print them out on an invoice, while totaling all the prices to
gether and printing out the total price at the bottom.
...you can access an item inside an array that is itself inside another array by chaining two sets of square brackets to
gether.
...er 4 // number 5 let itemtext = 0; const listitem = document.createelement('li'); listitem.textcontent = itemtext; list.appendchild(listitem); } totalbox.textcontent = 'total: $' + total.tofixed(2); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> const textarea = document.
getelementbyid('code'); const reset = document.
getelementbyid('reset'); const solution = document.
getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; ...
...ocus(); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.
getelementbyid('code'); const reset = document.
getelementbyid('reset'); const solution = document.
getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; ...
Silly story generator - Learn web development
starting point to
get this assessment started, you should: go and grab the html file for the example, save a local copy of it as index.html in a new directory somewhere on your computer, and do the assessment locally to begin with.
... note: if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
...for example you can call the function and
get it to return one random string out of insertx by writing randomvaluefromarray(insertx).
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
Test your skills: Strings - Learn web development
if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
... concatenate the two strings to
gether to make a single string containing the complete quote.
... you'll find that you
get an error at this point.
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
Solve common problems in your JavaScript code - Learn web development
some common built-in browser functions that cause problems are: correct wrong
getelementsbytagname()
getelementbytagname()
getelementsbyname()
getelementbyname()
getelementsbyclassname()
getelementbyclassname()
getelementbyid()
getelementsbyid() semi-colon position you need to make sure you don't place any semi-colons incorrectly.
... how do you join strings to
gether?
... can you join strings and numbers to
gether?
... how do you
get and set the methods and properties of an object?
JavaScript object basics - Learn web development
you should
get a result similar to one of the below lines: [object object] object { } { } congratulations, you've just created your first object.
... note: if you are having trouble
getting this to work, try comparing your code against our version — see oojs-finished.html (also see it running live).
... setting object members so far we've only looked at retrieving (or
getting) object members — you can also set (update) the value of object members by simply declaring the member you want to set (using dot or bracket notation), like this: person.age = 45; person['name']['last'] = 'cratchit'; try entering the above lines, and then
getting the members again to see how they've changed, like so: person.age person['name']['last'] setting members doesn't just stop at...
...we could
get those values like this: let mydataname = nameinput.value; let mydatavalue = namevalue.value; we could then add this new member name and value to the person object like this: person[mydataname] = mydatavalue; to test this, try adding the following lines into your code, just below the closing curly brace of the person object: let mydataname = 'height'; let mydatavalue = '1.75m'; person[mydatan...
Measuring performance - Learn web development
you can enter a url and
get a performance report in seconds.
...this is a good start for
getting an idea about what you are already doing well and what could be improved.
... webpa
getest.org is another example of a tool that automatically tests your site and returns useful metrics.
... try running your favorite website now, on both webpa
getest.org and pagespeed insights, and see what the scores are.
Ember app structure and componentization - Learn web development
previous overview: client-side javascript frameworks next in this article we'll
get right on with planning out the structure of our todomvc ember app, adding in the html for it, and then breaking that html structure into components.
...the rendered output should now look like this: it doesn't take too much effort to
get our html looking like a fully-featured to-do list app.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react
getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember
getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivi...
...ty: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue
getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte
getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Beginning our React todo list - Learn web development
objective: to introduce our todo list case study, and
get the basic app structure and styling in place.
...don't worry too much about this for now — we will cover this later on when we
get to using events.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react
getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember
getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivi...
...ty: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue
getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte
getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Rendering a list of Vue components - Learn web development
adding some data to render first we need to
get an array of to-do items.
...we'll
get to these in the next article.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react
getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember
getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue
getting started with vue creating our first vue component rendering a list of vue components adding a ne...
...w todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte
getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Styling Vue components with CSS - Learn web development
files in this folder
get processed by webpack.
...elvetica, arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ next, in your src/main.js file, import the reset.css file like so: import './assets/reset.css'; this will cause the file to
get picked up during the build step and automatically added to our site.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react
getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember
getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivi...
...ty: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue
getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte
getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Software accessibility: Where are we today?
when you add all these groups of people to
gether, that's a lot of potential users!
...alternative ways to command the computer and enter data another problem is how people with disabilities
get information into the computer.
... ensure correct keyboard accessibility when developing new controls: mozilla's xul and html wid
gets already support proper keyboard accessibility, so let's not regress in that area.
... follow the accessible toolkit checklist whenever using xbl to create a new wid
get.
Adding a new CSS property
getting started first, you'll want to add an appropriate test entry to property_database.js.
... make sure to call un
gettoken() if you have called
gettoken() but the result is unexpected.
... then you need to change nscomputeddomstyle.cpp to implement the
getcomputedstyle api.
... then you should
get review on the work you've done so far and move on to implementing whatever the property does (which should be in a separate patch or patches).
Simple SeaMonkey build
ps sudo aptitude install zip mercurial libasound2-dev libcurl4-openssl-dev libnotify-dev libxt-dev libiw-dev libidl-dev mesa-common-dev autoconf2.13 yasm libgtk2.0-dev libdbus-1-dev libdbus-glib-1-dev python-dev libgstreamer0.10-dev libgstreamer-plugins-base0.10-dev libpulse-dev ubuntu linux # for ubuntu 12.04 lts (precise pangolin), replace the following line with: sudo apt-
get build-dep thunderbird sudo apt-
get build-dep seamonkey sudo apt-
get install zip unzip mercurial g++ make autoconf2.13 yasm libgtk2.0-dev libglib2.0-dev libdbus-1-dev libdbus-glib-1-dev libasound2-dev libcurl4-openssl-dev libnotify-dev libgstreamer0.10-dev libgstreamer-plugins-base0.10-dev libiw-dev libxt-dev mesa-common-dev libpulse-dev fedora linux centos rhel: sudo yu...
...(if you
get a message saying this application did not install properly then you should see a windows dialog giving you the option to re-install with the 'correct settings'.
... #
get the source # for aurora, use https://hg.mozilla.org/releases/comm-aurora/ and comm-aurora instead # for beta, use https://hg.mozilla.org/releases/comm-beta/ and comm-beta instead # for release, use https://hg.mozilla.org/releases/comm-release/ and comm-release instead hg clone https://hg.mozilla.org/comm-central/ cd comm-central python client.py checkout # set up a basic .mozconfig file echo 'ac...
... how to build again later in your comm-central directory, run these commands: #
get the latest source python client.py checkout then just re-run the "(moz)make -f client.mk" command above.
Simple Sunbird build
ubuntu linux: sudo apt-
get build-dep sunbird sudo apt-
get install mercurial libasound2-dev libcurl4-openssl-dev libnotify-dev libiw-dev autoconf2.13 cvs fedora linux: sudo yum groupinstall 'development tools' 'development libraries' 'gnome software development' sudo yum install mercurial autoconf213 glibc-static libstdc++-static yasm wireless-tools-devel mesa-libgl-devel mac: install xcode tools.
...(if you
get a message saying this application did not install properly then you should see a windows dialog giving you the option to re-install with the 'correct settings'.
... #
get the source hg clone http://hg.mozilla.org/comm-central/ cd comm-central python client.py checkout # setup a basic .mozconfig file echo 'ac_add_options --enable-application=calendar' > .mozconfig # let's build sunbird...
...how to build again later in your comm-central directory, run these commands: #
get the latest source python client.py checkout then just re-run the "make -f client.mk" command above.
Working with Mozilla source code
the articles below will help you
get your hands on the mozilla source code, learn to navigate the code, and how to
get the changes you propose checked into the tree.
...
getting a pre-configured mozilla build system virtual machine this is the easiest way to
get started: use a virtualbox virtual machine which is already configured with a complete build environment for you to use.
...
getting commit access to the source code feel ready to join the few, the proud, the committers?
... find out how to
get check-in access to the mozilla code.
Developer guide
this guide provides information that will not only help you
get started as a mozilla contributor, but that you'll find useful to refer to even if you are already an experienced contributor.
... documentation topics
getting started a step-by-step beginner's guide to
getting involved with mozilla.
... working with mozilla source code a code overview, how to
get the code, and the coding style guide.
...
getting documentation updated how to ensure that documentation is kept up to date as you develop.
Error codes returned by Mozilla APIs
ns_error_file_tar
get_does_not_exist (0x80520006) an attempt was made to reference a file that does not exist for copy/move, checking its size, etc.
... ns_binding_retar
geted (0x804b0004) the asynchronous request has been "retar
geted" to a different "handler." this error code is used with load groups to notify the load group observer when a request in the load group is removed from the load group and added to a different load group.
... ns_error_xpc_not_enough_args (0x80570001) ns_error_xpc_need_out_object (0x80570002) ns_error_xpc_cant_set_out_val (0x80570003) ns_error_xpc_native_returned_failure (0x80570004) ns_error_xpc_cant_
get_interface_info (0x80570005) ns_error_xpc_cant_
get_param_iface_info (0x80570006) ns_error_xpc_cant_
get_method_info (0x80570007) ns_error_xpc_unexpected (0x80570008) ns_error_xpc_bad_convert_js (0x80570009) ns_error_xpc_bad_convert_native (0x8057000a) ns_error_xpc_bad_convert_js_null_ref (0x8057000b) ns_error_xpc_bad_op_on_wn_proto (0x8057000c) ns_error_xpc_cant_conv...
... ns_error_xpc_js_threw_string (0x8057001e) ns_error_xpc_js_threw_number (0x8057001f) ns_error_xpc_javascript_error (0x80570020) ns_error_xpc_javascript_error_with_details (0x80570021) ns_error_xpc_cant_convert_primitive_to_array (0x80570022) ns_error_xpc_cant_convert_object_to_array (0x80570023) ns_error_xpc_not_enough_elements_in_array (0x80570024) ns_error_xpc_cant_
get_array_info (0x80570025) ns_error_xpc_not_enough_chars_in_string (0x80570026) ns_error_xpc_security_manager_veto (0x80570027) ns_error_xpc_interface_not_scriptable (0x80570028) ns_error_xpc_interface_not_from_nsisupports (0x80570029) ns_error_xpc_cant_
get_jsobject_of_dom_object (0x8057002a) ns_error_xpc_cant_set_read_only_constant (0x8057002b) ns_error_xpc_cant_set_read...
Frame script environment
in particular, note that a frame script accesses the dom window using content, not window: // frame script var links = content.document.
getelementsbytagname("a"); all the frame scripts running in a tab share this global.
... events besides the regular dom events being captured/bubbling up from content the current content object the following additional events
get fired in a frame script environment: unload fires when the frame script environment is shut down, i.e.
... when a tab
gets closed.
... if you use a capturing event listener on the contentframemessagemanager, you should verify that its event.tar
get is set to the contentframemessagemanager global object in order to avoid handling unload events from content.
Limitations of frame scripts
qi from content window to chrome window there's a particular pattern often used to
get from a content window to the associated chrome window.
... it looks something like this: window.queryinterface(ci.nsiinterfacerequestor) .
getinterface(ci.nsiwebnavigation) .queryinterface(ci.nsidocshelltreeitem) .roottreeitem .queryinterface(ci.nsiinterfacerequestor) .
getinterface(ci.nsidomwindow); this will no longer work.
... in the content process the root tree item is an nsitabchild, that cannot be converted to an nsidomwindow, so the second
getinterface call here will fail.
...the tar
get property of the object passed into the message handler in the chrome process is the xul <browser> receiving the message, and you can
get the chrome window from that (note: i'm not really sure how...).
Frame script environment
in particular, note that a frame script accesses the dom window using content, not window: // frame script var links = content.document.
getelementsbytagname("a"); all of the frame scripts running in a tab share this global.
... events besides the regular dom events being captured/bubbling up from content the current content object the following additional events
get fired in a frame script environment: unload bubbles no fires when the frame script environment is shut down, i.e.
... when a tab
gets closed.
... if you use a capturing event listener on the contentframemessagemanager, you should verify that its event.tar
get is set to the contentframemessagemanager global object to avoid handling unload events from content.
Limitations of frame scripts
qi from content window to chrome window there's a particular pattern often used to
get from a content window to the associated chrome window.
... it looks something like this: window.queryinterface(ci.nsiinterfacerequestor) .
getinterface(ci.nsiwebnavigation) .queryinterface(ci.nsidocshelltreeitem) .roottreeitem .queryinterface(ci.nsiinterfacerequestor) .
getinterface(ci.nsidomwindow); this will no longer work.
... in the content process, the root tree item is an nsitabchild, that cannot be converted to an nsidomwindow, so the second
getinterface call here will fail.
...the tar
get property of the object passed into the message handler in the chrome process is the xul <browser> receiving the message, and you can
get the chrome window from that (i'm not sure how).
Roll your own browser: An embedding how-to
it should include all of the base support that you need to
get a web browser started up.
...uses gtkmozembed wid
get, part of the kdebindings module and available from http://websvn.kde.org/trunk/kde/kdebindings/xparts/.
... (news release, screenshot) mozilla examples gtkmozembed wid
get: gtk wid
get wrapper for the mozilla gecko engine.
... testgtkembed: basic browser built with the gtkmozembed wid
get.
How Mozilla determines MIME Types
http for http uris mozilla usually
gets a mime type sent from the server, and uses it.
...however, starting in mozilla 1.7alpha, mozilla does do content sniffing, like this: when the content-type sent by the server is one of (case-sensitively) text/plain text/plain; charset=iso-8859-1 text/plain; charset=iso-8859-1 and the server did not send a content-encoding header, mozilla will sniff the first block of data it
gets and check for non-text bytes.
... unknown decoder located at netwerk/streamconv/converters/nsunknowndecoder.cpp, the interesting part starts at line 287, the ssnifferentries array to
gether with the determinecontenttype function.
...this is done because the generic text/xml mime type does not work for xul files, and xhtml files
get a different dom when interpreted as text/xml.
JavaScript Tips
for instance, windowmanager.
getenumerator(atype).hasmoreelements() may be replaced with windowmanager.
getmostrecentwindow(atype) != null for a single window.
...instead, use instanceof, e,g,: if (tar
get instanceof components.interfaces.nsirdfresource) return tar
get.value; if (tar
get instanceof components.interfaces.nsirdfliteral) return tar
get.value; return null; don't test the return value of queryinterface, it always returns the original variable if it succeeds.
... don't call
getattribute to see if an attribute exists, call hasattribute instead.
...similarly prefer document.
getelementsbytagname(atag).item(0) != null to document.
getelementsbytagname(atag).length > 0.
AddonUpdateChecker
to import the addonupdatechecker, use: components.utils.import("resource://gre/modules/addonupdatechecker.jsm"); method overview updateinfo
getcompatibilityupdate(in updateinfo updates[], in string version, in boolean ignorecompatibility, in string appversion, in string platformversion) updateinfo
getnewestcompatibleupdate(in updateinfo updates[], in string appversion, in string platformversion) void checkforupdates(in string id, in string type, in string updatekey, string url, in updatechecklistener listener) constants cons...
... methods
getcompatibilityupdate() retrieves the best matching compatibility update for the application from a list of available update objects.
... updateinfo
getcompatibilityupdate( in updateinfo updates[], in string version, in boolean ignorecompatibility, in string appversion, in string platformversion ) parameters updates an array of update objects version the version of the add-on to
get new compatibility information for ignorecompatibility an optional parameter to
get the first compatibility update that is compatible with any version of the application or toolkit appversion the version of the application or null to use the current version platformversion the version of the platform or null to use the current version
getnewestcompatibleupdate() returns the newest available update from a list of update objects.
... updateinfo
getnewestcompatibleupdate( in updateinfo updates[], in string appversion, in string platformversion ) parameters updates an array of update objects appversion the version of the application or null to use the current version platformversion the version of the platform or null to use the current version checkforupdates() starts an update check.
PopupNotifications.jsm
method overview void locationchange(); notification
getnotification(id, browser); void remove(notification); notification show(browser, id, message, anchorid, mainaction, secondaryactions, options); properties attribute type description ispanelopen boolean returns true if the notification panel is currently visible, false if it is not.
...
getnotification() retrieve a notification object associated with the browser/id pair.
... notification
getnotification( string id xulelement browser ); parameters id the notification id to search for.
... notification events if you specify an event callback using the options parameter when calling show(), the callback function
gets invoked when the state of the notification changes.
Examples
this can be used for chaining: components.utils.import("resource://gre/modules/osfile.jsm") os.file.
getcurrentdirectory().then(currentdir => { let path = os.path.join(currentdir, ".mozconfig"); return os.file.exists(path).then(exists => { console.log(exists ?
...serdefinedpromise() { try { //var myvariscommented = 'hi'; // i commented this out s oit is undefined, this will cause rejected alert(myvariscommented); return promise.resolve('yay success'); // this makes the success function trigger with asuccessreason being 'yay success' but because i commented out the var 2 lines above, it will error out on the alert(myvariscommented) and never
get to this success line.
...n) + '"'); } ); function myuserdefinedpromise() { try { var myvariscommented = 'hi'; alert(myvariscommented); throw new error('i feel like rejecting this promise'); return promise.resolve('yay success'); // this makes the success function trigger with asuccessreason being 'yay success' but because i commented out the var 2 lines above, it will error out on the throw and never
get to this success line becuase i throw an error on the line before this } catch(ex) { return promise.reject(ex); } } in this example even though the variable is defined, the proimse is rejected because i threw an error.
...the error = ' + uneval(e)); } myimage.onabort = function(e) { loadthisimagepromise.reject('image load was aborted loading path = "' + path + '".'); } myimage.src = path; }); return promise.all(mysubpromises); } catch(ex) { return promise.reject(ex); } } to test and see what happens when you
get an error.
Sqlite.jsm
getschemaversion() the user-set version associated with the schema for the current database.
... let accounts = []; let accountid, username; let statement = "select account_id, username from accounts order by username asc"; try { const result = await conn.executecached(statement, null, function(row, cancel) { accountid = row.
getresultbyname("account_id"); username = row.
getresultbyname("username"); accounts.push({ accountid: accountid, username: username }); // if the cancel function is called here, the statement being executed will // be cancelled, and no more rows will be processed.
... async function () { try { conn = await sqlite.openconnection({ path: dbfile.path }); let statement = "insert into accounts (username, details) values (:username, :details)" let params = { username:"lordbusiness", details: "all i'm asking for is total perfection." }; await conn.execute(statement,params); //
get accountid of the insert.
... let row = result[0]; let accountid = row.
getresultbyname("lastinsertrowid"); if (callback) { callback(null, accountid); } } catch (err) { if (callback) { callback(err); } } finally { conn.close(); } }); note: the value returned by the last_insert_rowid() is per connection, so you may need to open separate connections when doing multiple inserts from different locations, to be sure the row id that is being returned is from the correct corresponding insert.
Task.jsm
if you specify anything else, you
get a promise that is already fulfilled with the specified value.
... let mypromise =
getpromiseresolvedontimeoutwithvalue(1000, "value"); let result = yield mypromise; // this part is executed only after the promise above is resolved (after // one second, in this imaginary example).
... for (let i = 0; i < 3; i++) { result += yield
getpromiseresolvedontimeoutwithvalue(50, "!"); } return "resolution result for the task: " + result; }).then(function (result) { // result == "resolution result for the task: value!!!" // the result is undefined if no special task.result exception was thrown.
... }); exception handling components.utils.import("resource://gre/modules/osfile.jsm") components.utils.import("resource://gre/modules/task.jsm") task.spawn(function* () { let currentdir = yield os.file.
getcurrentdirectory(); let path = os.path.join(currentdir, ".mozconfig"); try { let info = yield os.file.stat(path); console.log("the .mozconfig file is " + info.size + " bytes long."); } catch (ex if ex instanceof os.file.error && ex.becausenosuchfile) { console.log("you don't have .mozconfig in " + currentdir); } }).then(null, components.utils.reporterror); in this example, if the promise returned by os.file.stat is rejected, an exception is thrown inside the task.
Localizing with Pontoon
pontoon is a web-based, what-you-see-is-what-you-
get (wysiwyg), localization (l10n) tool.
...read about implementing pontoon in your project or learn how to
get involved on github.
...pontoon will automatically open that locale's project for you to
get started.
... by clicking a suggestion, it
gets copied into translation area.
Translation phase
as a reward for your efforts, you
get to move on to the very reason you've come here: to localize mozilla projects.
...visit the mozilla translator (mt) download page to
get your own mt client.
... these are the l10n tools we use to localize mozilla web projects: pontoon a web-based, what-you-see-is-what-you-
get (wysiwyg) l10n tool that allows you to localize mozilla websites within the site itself.
...visit their websites to learn how to
get involved.
Localization quick start guide
this guide is filled with all of the basic, technical information you need to
get involved in the mozilla l10n program.
... we will take you through the steps to
get started, from the initial environment setup to testing and releasing your own localization.
... when we
get to specific examples, we'll take them from the firefox project, as it is the most widely localized project within mozilla.
...to
get the big picture, we suggest you start with the green bubble and move from stage to stage.
Setting up the infrastructure
first, make your project's file type decision (see localization formats for details): html/php .lang
gettext (.po) assuming you chose
gettext, you'll need to follow the steps below to set up the infrastructure for localizing your web application.
... requirements: php with
gettext support, apache and some unix experience.
...by default the script looks for
gettext calls in *thtml or *.php files, so you may need to adjust that to your code.
... restart apache to reload
gettext files (necessary for any text changes).
Mozilla projects on GitHub
this article offers a quick guide for
getting started with mozilla code on github.
...
getting started you can look at code on github without an account.
... bugzilla-dashboard a convenient dashboard to help you
get an overview of your bugs.
... fxdt-adapters the firefox developer tools adapter that lets you debug various remote tar
gets from the firefox developer tools.
TimerFirings logging
first, on mac the code uses dladdr to
get the name immediately, and the output will look like the following.
... 2082435840[100445640]: [81190] fn timer (one_shot 8000 ms): [from dladdr] gfxfontinfoloader::delayedstartcallback(nsitimer*, void*) second, on linux the code uses dladdr to
get the symbol library and address, which can be post-processed by tools/rb/fix_stacks.py.
... 204 801266240[7f7c1f248000]: [7163] fn timer (one_shot 50 ms): [content] http://wid
gets.outbrain.com/outbrain.js:20:330 135 -495057024[7f74e105ba00]: [7108] fn timer (one_shot 4 ms): [content] https://self-repair.mozilla.org/repair/:7:13669 118 801266240[7f7c1f248000]: [7163] fn timer (one_shot 100 ms): [content] http://a.visualrevenue.com/vrs.js:6:9423 103 801266240[7f7c1f248000]: [7163] fn timer (one_shot 50 ms): [content] http://static.dynamicyield.
... 204 fn timer (one_shot): [content] http://wid
gets.outbrain.com/outbrain.js:20:330 186 fn timer (one_shot): nsbrowserstatusfilter::timeouthandler 138 fn timer (one_shot): [content] https://self-repair.mozilla.org/repair/:7:13669 118 fn timer (one_shot): [content] http://a.visualrevenue.com/vrs.js:6:9423 108 fn timer (slack): layeractivitytracker 104 fn timer (slack): nsidocument::selectorcache 104 fn tim...
I/O Functions
pr_open pr_delete pr_
getfileinfo pr_
getfileinfo64 pr_rename pr_access type praccesshow functions that act on file descriptors pr_close pr_read pr_write pr_writev pr_
getopenfileinfo pr_
getopenfileinfo64 pr_seek pr_seek64 pr_available pr_available64 pr_sync pr_
getdesctype pr_
getspecialfd pr_createpipe directory i/o functions pr_opendir pr_readdir pr_closedir pr_mkdir pr_rmdir so...
... list of functions: pr_openudpsocket pr_newudpsocket pr_opentcpsocket pr_newtcpsocket pr_importtcpsocket pr_connect pr_connectcontinue pr_accept pr_bind pr_listen pr_shutdown pr_recv pr_send pr_recvfrom pr_sendto pr_transmitfile pr_acceptread pr_
getsockname pr_
getpeername pr_
getsocketoption pr_setsocketoption converting between host and network addresses pr_ntohs pr_ntohl pr_htons pr_htonl pr_familyinet memory-mapped i/o functions the memory-mapped i/o functions allow sections of a file to be mapped to memory regions, allowing read-write accesses to the file to be accomplished by normal memory accesses.
... pr_createfilemap pr_memmap pr_memunmap pr_closefilemap anonymous pipe function pr_createpipe polling functions this section describes two of the most important polling functions provided by nspr: pr_poll pr_
getconnectstatus pollable events a pollable event is a special kind of file descriptor.
...for example, the following lines of code are equivalent: rv = pr_pushiolayer(stack, pr_top_io_layer, my_layer); rv = pr_pushiolayer(stack, pr_
getlayersidentity(stack), my_layer); pr_
getuniqueidentity pr_
getnameforidentity pr_
getlayersidentity pr_
getidentitieslayer pr_
getdefaultiomethods pr_createiolayerstub pr_pushiolayer pr_popiolayer ...
Introduction to NSPR
to interrupt a thread, the caller of pr_interrupt must have the nspr reference to the tar
get thread (prthread*).
... when the tar
get is interrupted, it is rescheduled from the point at which it was blocked, with a status error indicating that it was interrupted.
...when that thread actually
gets scheduled is determined by the thread scheduler and cannot be predicted.
...another thread could tar
get the waiting thread and issue a pr_interrupt, causing a waiting thread to resume.
PR_EnumerateHostEnt
evaluates each of the possible addresses of a prhostent structure, acquired from pr_
gethostbyname or pr_
gethostbyaddr.
...to continue an enumeration (thereby
getting successive addresses from the host entry structure), the value should be set to the function's last returned value.
... hostent a pointer to a prhostent structure obtained from pr_
gethostbyname or pr_
gethostbyaddr.
...you can retrieve the reason for the failure by calling pr_
geterror.
PR_Interrupt
sets the interrupt request for a tar
get thread.
...the interrupted thread returns pr_failure (-1) with an error code (see pr_
geterror) for blocking operations that return a prstatus (such as i/o operations, monitor waits, or waiting on a condition).
... to check whether the thread was interrupted, compare the result of pr_
geterror with pr_pending_interrupt_error.
... pr_interrupt may itself fail if the tar
get thread is invalid.
PR_JoinThread
returns the function returns one of the following values: if successful, pr_success if unsuccessful--for example, if no joinable thread can be found that corresponds to the specified tar
get thread, or if the tar
get thread is unjoinable--pr_failure.
...the function is synchronous in that it blocks the calling thread until the tar
get thread is in a joinable state.
... pr_jointhread returns to the caller only after the tar
get thread returns from its root function.
... the calling thread is not blocked if the tar
get thread has already terminated.
Certificate functions
_findusercertbyusage mxr 3.4 and later cert_findusercertsbyusage mxr 3.4 and later cert_finishcertificaterequestattributes mxr 3.10 and later cert_finishextensions mxr 3.5 and later cert_formatname mxr 3.2 and later cert_freedistnames mxr 3.2 and later cert_freenicknames mxr 3.2 and later cert_
getavatag mxr 3.2 and later cert_
getcertchainfromcert mxr 3.4 and later cert_
getcertemailaddress mxr 3.2 and later cert_
getcertificatenames mxr 3.10 and later cert_
getcertificaterequestextensions mxr 3.10 and later cert_
getcertissuerandsn mxr 3.2 and later cert_
getcertnicknames mxr 3.2 and later c...
...ert_
getcerttrust mxr 3.2 and later cert_
getcertuid mxr 3.2 and later cert_
getclassicocspdisabledpolicy mxr 3.12 and later cert_
getclassicocspenabledhardfailurepolicy mxr 3.12 and later cert_
getclassicocspenabledsoftfailurepolicy mxr 3.12 and later cert_
getcommonname mxr 3.2 and later cert_
getcountryname mxr 3.2 and later cert_
getdbcontentversion mxr 3.2 and later cert_
getdefaultcertdb mxr 3.2 and later cert_
getdomaincomponentname mxr 3.2 and later cert_
getfirstemailaddress mxr 3.7 and later cert_
getlocalityname mxr 3.2 and later cert_
getnextemailaddress mxr 3.7 and later cert_
getnextgeneralname mxr...
... 3.10 and later cert_
getnextnameconstraint mxr 3.10 and later cert_
getocspresponsestatus mxr 3.6 and later cert_
getocspstatusforcertid mxr 3.6 and later cert_
getoidstring mxr 3.9 and later cert_
getorgname mxr 3.2 and later cert_
getorgunitname mxr 3.2 and later cert_
getocspauthorityinfoaccesslocation mxr 3.4 and later cert_
getpkixverifynistrevocationpolicy mxr 3.12 and later cert_
getprevgeneralname mxr 3.10 and later cert_
getprevnameconstraint mxr 3.10 and later cert_
getsloptime mxr 3.2 and later cert_
getsslcacerts mxr 3.2 and later cert_
getstatename mxr 3.2 and later cert_
getusepkixforvali...
...dation mxr 3.12 and later cert_
getvaliddnspatternsfromcert mxr 3.12 and later cert_gentime2formattedascii mxr 3.2 and later cert_hexify mxr 3.2 and later cert_importcachain mxr 3.2 and later cert_importcerts mxr 3.2 and later cert_isrootdercert mxr 3.8 and later cert_isusercert mxr 3.6 and later cert_keyfromdercrl mxr 3.4 and later cert_makecanickname mxr 3.4 and later cert_mergeextensions mxr 3.10 and later cert_nametoascii mxr 3.2 and later cert_newcertlist mxr 3.2 and later cert_newtempcertificate mxr 3.12 and later cert_nicknamestringsfromcertlist mxr 3.4 and later ce...
Using JSS
using jss newsgroup: mozilla.dev.tech.crypto if you have already built jss, or if you are planning to use a binary release of jss, here's how to
get jss working with your code.
...if you are downloading binaries,
get them from the binary release locations in the above table.
...if you are downloading binaries,
get it from http://ftp.mozilla.org/pub/mozilla.org/security/jss/releases/.
... if you are downloading binaries,
get jss42.jar from http://ftp.mozilla.org/pub/mozilla.org/security/jss/releases/.
NSS_3.12.1_release_notes.html
go to the subdirectory for your platform, dbg (debug) or opt (optimized), to
get the tar.gz or zip file.
... the tar.gz or zip file expands to an nss-3.12.1 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr 4.7.1 binary distributions to
get the nspr 4.7.1 header files and shared libraries, which nss 3.12.1 requires.
...pk11_
getallslotsforcert (see pk11pub.h) pk11_
getallslotsforcert returns all the slots that a given certificate exists on, since it's possible for a cert to exist on more than one pkcs#11 token.
... bug 439123: assertion failure in libpkix at shutdown bug 440062: incorrect list element count in pkix_list_appenditem function bug 442618: eliminate dead function cert_certpacka
getype bug 443755: extra semicolon in pkm_tlskeyandmacderive makes conditional code unconditional bug 443760: extra semicolon in seqdatabase makes static analysis tool suspicious bug 448323: certutil -k doesn't report the token and slot names for found keys bug 448324: ocsp checker returns incorrect error code on request with invalid signing cert bug 449146: remove dead libsec function decl...
NSS_3.12.2_release_notes.html
go to the subdirectory for your platform, dbg (debug) or opt (optimized), to
get the tar.gz or zip file.
... the tar.gz or zip file expands to an nss-3.12.2 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin< - nss tools and test programs you also need to download the nspr 4.7.1 binary distributions to
get the nspr 4.7.1 header files and shared libraries, which nss 3.12.2 requires.
... bug 200704: pkcs11: invalid session handle 0 bug 205434: fully implement new libpkix cert verification api from bug 294531 bug 302670: use the installed libz.so where available bug 305693: shlibsign generates pqg for every run bug 311483: exposing includecertchain as a parameter to sec_pkcs12addcertandkey bug 390527:
get rid of pkixerrormsg variable in pkix_error bug 391560: libpkix does not consistently return pkix_validatenode tree that truly represent failure reasons bug 408260: certutil usage doesn't give enough information about trust arguments bug 412311: replace pr_interval_no_wait with pr_interval_no_timeout in client initialization calls bug 423839: add multiple pkcs#11 token password command lin...
...ority certificate to nss bug 450536: remove obsolete xp_mac code bug 451024: certutil.exe crashes with segmentation fault inside pr_cleanup bug 451927: security/coreconf/winnt6.0.mk has invalid defines bug 452751: slot leak in pk11_findslotsbynames bug 452865: remove obsolete linker flags needed when libnss3 was linked with libsoftokn3 bug 454961: fix the implementation and use of pr_f
gets in signtool bug 455348: change hyphens to underscores in debug_$(shell whoami).
NSS 3.12.6 release notes
you also need to download the nspr 4.8.4 binary distributions to
get the nspr 4.8.4 header files and shared libraries, which nss 3.12.6 requires.
... ssl_snisocketconfighook ssl_reconfigfd ssl_configserversessionidcachewithopt ssl_settrustanchors ssl_
getnegotiatedhostinfo new enum for sni: sslsninametype (see sslt.h) new functions in cert.h certdistnames: duplicate distinguished name array.
... in ssl.h ssl_
getimplementedciphers ssl_
getnumimplementedciphers ssl_handshakenegotiatedextension new error codes in sslerr.h ssl_error_unsafe_negotiation ssl_error_rx_unexpected_uncompressed_record new types ...
... bug 275744: support for tls compression rfc 3749 bug 494603: update nss's copy of sqlite3 to 3.6.22 to
get numerous bug fixes bug 496993: add accessor functions for ssl_implementedciphers bug 515279: cert_pkixverifycert considers a certificate revoked if cert_processocspresponse fails for any reason bug 515870: gcc compiler warnings in nss 3.12.4 bug 518255: the input buffer for sgn_update should be declared const bug 519550: allow the specification of an a...
NSS 3.21 release notes
new in nss 3.21 new functionality certutil now supports a --rename option to change a nickname (bug 1142209) tls extended master secret extension (rfc 7627) is supported (bug 1117022) new info functions added for use during mid-handshake callbacks (bug 1084669) new functions in nss.h nss_optionset - sets nss global options nss_option
get -
gets the current value of nss global options in secmod.h secmod_createmoduleex - create a new secmodmodule structure from module name string, module parameters string, nss specific parameters string, and nss configuration parameter string.
... in ssl.h ssl_
getpreliminarychannelinfo - obtains information about a tls channel prior to the handshake being completed, for use with the callbacks that are invoked during the handshake ssl_signatureprefset - configures the enabled signature and hash algorithms for tls ssl_signaturepref
get - retrieves the currently configured signature and hash algorithms ssl_signaturemaxcount - obtains the maximum number signature algorithms that can be configured with ssl_signatureprefset in utilpars.h nssutil_argparsemodulespecex - takes a module spec and breaks it into shared library string, module name stri...
..._tls_mac_params{_ptr} - parameters {or pointer} for ckm_tls_mac in sslt.h sslhashtype - identifies a hash function sslsignatureandhashalg - identifies a signature and hash function sslpreliminarychannelinfo - provides information about the session state prior to handshake completion new macros in nss.h nss_rsa_min_key_size - used with nss_optionset and nss_option
get to set or
get the minimum rsa key size nss_dh_min_key_size - used with nss_optionset and nss_option
get to set or
get the minimum dh key size nss_dsa_min_key_size - used with nss_optionset and nss_option
get to set or
get the minimum dsa key size in pkcs11t.h ckm_tls12_master_key_derive - derives tls 1.2 master secret ckm_tls12_key_and_mac_derive - derives tls 1.2 traffic key a...
...key global root gb ca sha1 fingerprint: 0f:f9:40:76:18:d3:d7:6a:4b:98:f0:a8:35:9e:0c:fd:27:ac:cc:ed the version number of the updated root ca list has been set to 2.6 bugs fixed in nss 3.21 this bugzilla query returns all the bugs fixed in nss 3.21: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.21 acknowledgements the nss development team would like to thank karthikeyan bhargavan from inria for responsibly disclosing the issue in bug 1158489.
NSS 3.35 release notes
the signatures of functions ssl_optionset, ssl_option
get, ssl_optionsetdefault and ssl_option
getdefault have been modified, to take a printn argument rather than prbool.
... experimental: ssl_
getextensionsupport - query nss support for a tls extension.
... removed experimental apis note that experimental apis might
get removed from nss without announcing removals in the release notes.
... bugs fixed in nss 3.35 this bugzilla query returns all the bugs fixed in nss 3.35: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.35 compatibility nss 3.35 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.52 release notes
bugs fixed in nss 3.52 bug 1633498 - fix unused variable '
getauxval' error on ios compilation.
... bug 1625133 - fix implicit declaration of function '
getopt' error.
... bug 1612281 - maintain pkcs11 c_
getattributevalue semantics on attributes that lack nss database columns.
... bug 1630925 - guard all instances of nsscmssigneddata.signerinfo to avoid a cms crash bug 1571677 - name constraints validation: cn treated as dns name even when syntactically invalid as dns name this bugzilla query returns all the bugs fixed in nss 3.52: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.52 compatibility nss 3.52 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS Sample Code Sample_1_Hashing
sample code 1 /* nspr headers */ #include <prprf.h> #include <prtypes.h> #include <pl
getopt.h> #include <prio.h> /* nss headers */ #include <secoid.h> #include <secmodt.h> #include <sechash.h> typedef struct { const char *hashname; secoidtag oid; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha256", sec_oid_sha256 }, { "sha384", sec_oid_sha384 }, { "sha512", sec_oid_sha512 } }; /* * maps a hash name to a secoidtag.
... */ static int digestfile(prfiledesc *outfile, prfiledesc *infile, secoidtag hashoidtag) { unsigned int nb; unsigned char ibuf[4096]; unsigned char digest[64]; unsigned int len; unsigned int digestlen; hash_hashtype hashtype; hashcontext *hashcontext = null; hashtype = hash_
gethashtypebyoidtag(hashoidtag); hashcontext = hash_create(hashtype); if (hashcontext == null) { return secfailure; } do { hash_begin(hashcontext); /* incrementally hash the file contents */ while ((nb = pr_read(infile, ibuf, sizeof(ibuf))) > 0) { hash_update(hashcontext, ibuf, nb); } hash_end(hashcontext, digest, &len, 6...
...progname + 1 : argv[0]; rv = nss_nodb_init("/tmp"); if (rv != secsuccess) { fprintf(stderr, "%s: nss_init failed in directory %s\n", progname, "/tmp"); return -1; } /* parse command line arguments */ optstate = pl_createoptstate(argc, argv, "t:"); while ((status = pl_
getnextopt(optstate)) == pl_opt_ok) { switch (optstate->option) { case 't': require_arg(optstate->option, optstate->value); hashname = strdup(optstate->value); break; } } if (!hashname) usage(progname); /* convert and validate */ hashoidtag = hashnametooidtag(hashname); if (hashoidtag == sec_oid_unknown) { ...
... fprintf(stderr, "%s: invalid digest type - %s\n", progname, hashname); usage(progname); } /* digest it and print the result */ rv = digestfile(pr_stdout, pr_stdin, hashoidtag); if (rv != secsuccess) { fprintf(stderr, "%s: problem digesting data (%d)\n", progname, port_
geterror()); } rv = nss_shutdown(); if (rv != secsuccess) { exit(-1); } return 0; } </sechash.h></secmodt.h></secoid.h></prio.h></pl
getopt.h></prtypes.h></prprf.h> ...
Hashing - sample 1
*/ /* nspr headers */ #include <prprf.h> #include <prtypes.h> #include <pl
getopt.h> #include <prio.h> /* nss headers */ #include <secoid.h> #include <secmodt.h> #include <sechash.h> #include <nss.h> typedef struct { const char *hashname; secoidtag oid; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha256", sec_oid_sha256 }, ...
... */ static int digestfile(prfiledesc *outfile, prfiledesc *infile, secoidtag hashoidtag) { unsigned int nb; unsigned char ibuf[4096]; unsigned char digest[64]; unsigned int len; hash_hashtype hashtype; hashcontext *hashcontext = null; hashtype = hash_
gethashtypebyoidtag(hashoidtag); hashcontext = hash_create(hashtype); if (hashcontext == null) { return secfailure; } do { hash_begin(hashcontext); /* incrementally hash the file contents */ while ((nb = pr_read(infile, ibuf, sizeof(ibuf))) > 0) { hash_update(hashcontext, ibuf, nb); } hash_end(hashcontext, digest, &len, 6...
...progname + 1 : argv[0]; rv = nss_nodb_init("/tmp"); if (rv != secsuccess) { fprintf(stderr, "%s: nss_init failed in directory %s\n", progname, "/tmp"); return -1; } /* parse command line arguments */ optstate = pl_createoptstate(argc, argv, "t:"); while ((status = pl_
getnextopt(optstate)) == pl_opt_ok) { switch (optstate->option) { case 't': require_arg(optstate->option, optstate->value); hashname = strdup(optstate->value); break; } } if (!hashname) usage(progname); /* convert and validate */ hashoidtag = hashnametooidtag(hashname); if (hashoidtag == sec_oid_unknown) { ...
... fprintf(stderr, "%s: invalid digest type - %s\n", progname, hashname); usage(progname); } /* digest it and print the result */ rv = digestfile(pr_stdout, pr_stdin, hashoidtag); if (rv != secsuccess) { fprintf(stderr, "%s: problem digesting data (%d)\n", progname, port_
geterror()); } rv = nss_shutdown(); if (rv != secsuccess) { exit(-1); } return 0; } ...
Initialize NSS database - sample 2
l be used to encrypt your keys.\n" "the password should be at least 8 characters long,\n" "and should contain at least one non-alphabetic character.\n\n"); output = fopen("/dev/tty", "w"); if (output == null) { pr_fprintf(pr_stderr, "error opening output terminal for write\n"); return null; } for (;;) { if (p0) port_free(p0); p0 =
getpassword(input, output, "enter new password: ", checkpassword); if (p1) port_free(p1); p1 =
getpassword(input, output, "re-enter password: ", checkpassword); if (p0 && p1 && !port_strcmp(p0, p1)) { break; } pr_fprintf(pr_stderr, "passwords do not ...
...pwdata.source = pw_none; newpwdata.data = null; } if (pk11_needuserinit(slot)) { newpw = initslotpassword(slot, pr_false, &pwdata); rv = pk11_initpin(slot, (char*)null, newpw); if (rv == secsuccess) { pr_fprintf(pr_stderr, "pk11_initpin failed.\n"); return secfailure; } } else { for (;;) { oldpw =
getmodulepassword(slot, pr_false, &pwdata); if (pk11_checkuserpassword(slot, oldpw) != secsuccess) { if (pwdata.source == pw_none) { pr_fprintf(pr_stderr, "invalid password.
...progname + 1 : argv[0]; /* parse command line arguments */ optstate = pl_createoptstate(argc, argv, "d:p:q:f:g:"); while ((status = pl_
getnextopt(optstate)) == pl_opt_ok) { switch (optstate->option) { case 'd': dbdir = strdup(optstate->value); break; case 'p': plainpass = strdup(optstate->value); break; case 'f': pwfile = strdup(optstate->value); break; default: usage(progname); break; ...
...} } pl_destroyoptstate(optstate); if (!dbdir) usage(progname); pr_init(pr_user_thread, pr_priority_normal, 0); /* create the database */ rv = nss_initreadwrite(dbdir); if (rv != secsuccess) { pr_fprintf(pr_stderr, "nss_initialize failed"); pr_cleanup(); exit(rv); } if (pl_strcmp(slotname, "internal") == 0) slot = pk11_
getinternalkeyslot(); /* if creating new database, initialize the password.
sample1
/* nspr headers */ #include <prprf.h> #include <prtypes.h> #include <pl
getopt.h> #include <prio.h> #include <prprf.h> /* nss headers */ #include <secoid.h> #include <secmodt.h> #include <sechash.h> typedef struct { const char *hashname; secoidtag oid; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha256", sec_oid_sha256 }, { "sha384", sec_oid_sha384 }, { "sha512", sec_oid_sha512 } }; /* maps a hash name to a secoidtag.
... */ static int digestfile(prfiledesc *outfile, prfiledesc *infile, secoidtag hashoidtag) { unsigned int nb; unsigned char ibuf[4096]; unsigned char digest[64]; unsigned int len; unsigned int digestlen; hash_hashtype hashtype; hashcontext *hashcontext = null; hashtype = hash_
gethashtypebyoidtag(hashoidtag); hashcontext = hash_create(hashtype); if (hashcontext == null) { return secfailure; } do { hash_begin(hashcontext); /* incrementally hash the file contents */ while ((nb = pr_read(infile, ibuf, sizeof(ibuf))) > 0) { hash_update(hashcontext, ibuf, nb); } hash_end(hashcontext, di...
...progname + 1 : argv[0]; rv = nss_nodb_init("/tmp"); if (rv != secsuccess) { fprintf(stderr, "%s: nss_init failed in directory %s\n", progname, "/tmp"); return -1; } /* parse command line arguments */ optstate = pl_createoptstate(argc, argv, "t:"); while ((status = pl_
getnextopt(optstate)) == pl_opt_ok) { switch (optstate->option) { case 't': require_arg(optstate->option, optstate->value); hashname = strdup(optstate->value); break; } } if (!hashname) usage(progname); /* convert and validate */ hashoidtag = hashnametooidtag(hashname); if (hashoidtag == sec_oid_un...
...known) { fprintf(stderr, "%s: invalid digest type - %s\n", progname, hashname); usage(progname); } /* digest it and print the result */ rv = digestfile(pr_stdout, pr_stdin, hashoidtag); if (rv != secsuccess) { fprintf(stderr, "%s: problem digesting data (%d)\n", progname, port_
geterror()); } rv = nss_shutdown(); if (rv != secsuccess) { exit(-1); } return 0; } ...
NSS sources building testing
getting the source code of network security services (nss), how to build it, and how to run its test suite.
...
getting source code, and a quick overview the easiest way is to download archives of nss releases from mozilla's download server.
...in order to
get started, anonymous read-only access is sufficient.
...if you
get name resolution errors, try to disable ipv6 on the loopback device.
Build instructions
make variables may be set on the gmake command line, e.g., gmake variable=value variable=value tar
get1 tar
get2 or defined in the environment, e.g.
... (for posix shells), variable=value; export variable gmake tar
get1 tar
get2 here are some (not all) of the make variables that affect nss builds: build_opt: if set to 1, means do optimized non-debug build.
...(the free edition works, and other versions like visual studio 2008 and visual studio 2012 may also work.) use start-shell-msvc2010.bat from mozillabuild to
get a bash shell with the path already configured, and execute these instructions from within that bash shell.
...otherwise, you
get a debug build.
NSS environment variables
nss_shared_db 3.12 nss_disable_arena_free_list string (any non-empty value) define this variable to
get accurate leak allocation stacks when using leak reporting software.
...necessary on some platforms to
get correct function names when using leak reporting software.
...the possible values are: copy: copies of files are published absolute_symlink: symlinks whose tar
gets are absolute pathnames are published if not specified, default to relative symlinks (symlinks whose tar
gets are relative pathnames).
... nss_force_fips boolean (1 to enable) allows enabling fips mode using nss_fips 3.24 os_tar
get string (tar
get os) for cross-compilation environments only, when the tar
get os is not the default for the system on which the build is performed.
sslerr.html
upgraded documentation may be found in the current nss reference nss and ssl error codes chapter 8 nss and ssl error codes nss error codes are retrieved using the nspr function pr_
geterror.
... in addition to the error codes defined by nspr, pr_
geterror retrieves the error codes described in this chapter.
...12184 "ssl peer does not support requested tls hello extension." ssl_error_certificate_unobtainable_alert -12183 "ssl peer could not obtain your certificate from the supplied url." ssl_error_unrecognized_name_alert -12182 "ssl peer has no certificate for the requested dns name." ssl_error_bad_cert_status_response_alert -12181 "ssl peer was unable to
get an ocsp response for its certificate." ssl_error_bad_cert_hash_value_alert -12180 "ssl peer reported bad certificate hash value." unspecified errors that occurred while attempting some operation: all the error codes in the following block describe the operation that was being attempted at the time of the unspecified failure.
... xp_sec_fortezza_more_info -8139 please select a personality to
get more info on.
ssltyp.html
to find out why, call pr_
geterror.
...in this case the value returned by pr_
geterror is meaningless.
...use pr_
geterror to retrieve the error code.
...use pr_
geterror to retrieve the error code.
NSS_3.12.3_release_notes.html
go to the subdirectory for your platform, dbg (debug) or opt (optimized), to
get the tar.gz or zip file.
... the tar.gz or zip file expands to an nss-3.12.3 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr 4.7.4 binary distributions to
get the nspr 4.7.4 header files and shared libraries, which nss 3.12.3 requires.
...d new structure for seed support: (see blapit.h) seedcontextstr seedcontext new functions in the nss shared library: cert_rfc1485_escapeandquote (see cert.h) cert_comparecerts (see cert.h) cert_registeralternateocspaiainfocallback (see ocsp.h) pk11_
getsymkeyhandle (see pk11pqg.h) util_setforkstate (see secoid.h) nss_
getalgorithmpolicy (see secoid.h) nss_setalgorithmpolicy (see secoid.h) for the 2 functions above see also (in secoidt.h): nss_use_alg_in_cert_signature nss_use_alg_in_cms_signature nss_use_alg_reserved support for ...
... bug 476126: cert_asciitoname fails when avas in an rdn are separated by '+' bug 477186: infinite loop in cert_
getcertchainfromcert bug 477777: selfserv crashed in client/server tests.
Necko Architecture
the uri interface does resource-generic things like
getting/setting the scheme, or
getting/setting the spec (everything beyond the first colon ':').
... urls provide
getting/setting of paths, hosts, ports, filenames, etc.
...in order to
get a channel from a uri an intermediary layer was introduced.
...as a user, you don't care where the data came from, or where it "is," as long as you
get the data.
GCIntegration - SpiderMonkey Redirect 1
in the last frame, a
gets marked by the gc.
...as a concrete example of this, imagine that we call
getwrapper() on an nswrappercache instance.
...this is how the read barrier for nswrappercache::
getwrapper() actually works.
...so you might be able to
get your hands on an unrooted object, but you won't be able to do anything with it.
Invariants
the locking is going away regardless.) compartments suppose obj = js_
getscopechain(cx) is not null.
...(taken to
gether, ecma 262-3 §11.13.1 and ecma 262-3 §10.1.4 specify that in an assignment such as x = f(), the name lookup for x occurs before f is called.
... background: the fastest instructions for nameexpressions are fat opcodes that combine a load with additional operations, as in jsop_inclocal or jsop_
getlocalprop.
... failing that, jsop_{
get,call,set}local and jsop_{
get,call,set}arg are the fastest, followed by jsop_{
get,call}upvar, jsop_{
get,call}dslot, jsop_{
get,call,set}gvar, and lastly jsop_{,call,set}name.
JSAutoCompartment
this article covers features introduced in spidermonkey 24 raii helper to enter a different compartment on the given context and automatically leave it once the jsautocompartment instance
gets out of scope.
... syntax jsautocompartment(jscontext *cx, jsobject *tar
get); jsautocompartment(jscontext *cx, jsscript *tar
get); name type description cx jscontext * the context on which a cross-compartment call is needed.
... tar
get jsobject * / jsscript * the object in a different compartment to be accessed.
...jsautocompartment guarantees that by automatically entering the given compartment and leaving it upon
getting out of scope: void foo(jscontext *cx, jobject *obj) { // in some compartment 'c' { jsautocompartment ac(cx, obj); // constructor enters // in the compartment of 'obj' } // destructor leaves // back in compartment 'c' } see also mxr id search for jsautocompartment bug 860050 bug 833817 bug 786068 ...
JSClass.flags
the field can be accessed using js_
getprivate and js_setprivate.
...they can be accessed using js_
getreservedslot and js_setreservedslot.
... jsclass_new_resolve_
gets_start obsolete since jsapi 16 the resolve hook expects to receive the starting object in the prototype chain passed in via the *objp in/out parameter.
... see also bug 527805 - removed jsclass_share_all_properties bug 571789 - removed jsclass_is_extended bug 638291 - removed jsclass_mark_is_trace bug 641025 - added jsclass_implements_barriers bug 702507 - removed jsclass_construct_prototype bug 758913 - removed jsclass_new_resolve_
gets_start bug 766447 - added jsclass_is_domjsclass bug 792108 - added jsclass_emulates_undefined bug 993026 - removed jsclass_new_resolve bug 1097267 - removed jsclass_new_enumerate ...
JS_IdArrayLength
this article covers features introduced in spidermonkey 17
get the length of a jsidarray.
... ida jsidarray * the jsidarray to
get the length of.
... description js_idarraylength
gets the length of the id array pointed to by ida.
... see also mxr id search for js_idarraylength jsidarray js_idarray
get bug 641027 ...
SpiderMonkey 1.8.8
deleted apis js_
get_class (use js_
getclass instead) js_constructobject and js_constructobjectwitharguments (preferably use js_new instead, or use this reimplementation as a short-term fix) js_newcompartmentandglobalobject (use js_newglobalobject instead.) jspd_argument jsval_is_object() (use !jsval_is_primitive(v) to detect objects and jsval_is_null(v) to detect null).
... js_isscriptframe jsclass_new_resolve_
gets_start flag js_newnumbervalue api changes break out and discuss all api changes here...
...removal of jscontext* parameters to many methods the js_
getclass method now takes only a jsobject*, where previously it also required a jscontext* in threadsafe builds.
... (the js_
get_class macro abstracting away this difference has accordingly been removed.) javascript shell changes detail added/removed methods here...
SpiderMonkey 17
deleted apis js_
get_class (use js_
getclass instead) js_constructobject and js_constructobjectwitharguments (preferably use js_new instead, or use this reimplementation as a short-term fix) js_newcompartmentandglobalobject (use js_newglobalobject instead.) jspd_argument jsval_is_object() (use !jsval_is_primitive(v) to detect objects and jsval_is_null(v) to detect null).
... js_isscriptframe jsclass_new_resolve_
gets_start flag js_newnumbervalue js_finalizestub js_clearnewbornroots jsclass_mark_is_trace flag js_setscriptstackquota api changes break out and discuss all api changes here...
...removal of jscontext* parameters to many methods the js_
getclass method now takes only a jsobject*, where previously it also required a jscontext* in threadsafe builds.
... (the js_
get_class macro abstracting away this difference has accordingly been removed.) garbage collection functions now take runtime argument most garbage collection functions now take a runtime argument instead of a context.
SpiderMonkey 24
get it here mozilla-esr24 if the download url is outdate you will find it in "firefox extended support release 24" package on hg release platform support spidermonkey 24 is supported on all the platforms where firefox 24 runs.
... new c apis js_
getarrayprototype provides access to the original value of array.prototype.
... deleted apis js_
get_class (use js_
getclass instead) js_enumerateresolvedstandardclasses js_
getglobalobject js_setcstringsareutf8 ...list other deleted apis...
... js_
getprototype, takes context as first argument js_encodestringtobuffer takes add context as first argument, js_newruntime adds a js_[use|no]_helper_threads flag delete property in jsclass definitions now use js_deletepropertystub garbage collection functions now take runtime argument most garbage collection functions now take a runtime argument instead of a context.
Split object
if page a
gets a reference to that function, then by calling it, it is indirectly accessing tab tb's window.
...apart from the security issue, if one page directly or indirectly
gets a reference to another page's window object, that window object must appear to behave like the outer window and navigate from page to page.
... in the spirit of this rule, js_
getscopechain should always return an inner object.
... but there is a special case when js_
getscopechain is called on a jscontext in which no code is currently running.
compare-locales
to
get a single result across the projects, specify the --unified flag: $ compare-locales --unified browser/locales/l10n.toml mobile/android/locales/l10n.toml ./l10n/ de cross-channel and compare-locales if you're working against the gecko-strings cross-channel repository, the toml configuration files are in the _configs subdirectory, browser.toml, mobile_android.toml, mail.toml and calendar.toml, an...
... options to
get a brief list of available options, use the --help flag: $ compare-locales --help the output the output of compare-locales shows the missing and obsolete strings in a pseudo-diff format.
...this number won't reach 100% in general, mid 80s should be the tar
get, though.
... pass --json to
get just the summary in json format.
Signing Mozilla apps for Mac OS X
getting a signing certificate in order to code-sign an application, you need a signing certificate.
... while testing and debugging for test and debug purposes, the easiest way to
get a signing certificate is to use apple's keychain feature to create one.
...contact the person who created your group apple developer account if you
get stuck here.
...you can find it by running this command in the terminal: openssl x509 -text -noout -inform der -in devloperid_application.cer | grep subject putting it all to
gether, you'll wind up using a command similar to the one below to sign your app.
Gecko Roles
role_pa
getab represents a page tab, it is a child of a page tab list.
... role_pa
getablist represents a container of page tab controls.
... role_autocomplete a text entry having dialog or list containing items for insertion into an entry wid
get, for instance a list of words for completion of a text entry.
... role_combobox_option a item of list that is shown by combobox role_image_map an image map -- has child links representing the areas role_option an option in a listbox role_rich_option a rich option in a listbox, it can have other wid
gets as children role_listbox a list of options editor's note: use template role_ to
get reference on accessible role.
Using the Places favicon service
creating the favicon service the favicon service's contract id is @mozilla.org/browser/favicon-service;1, so to gain access to the favicon service, you should do something like this: var faviconservice = components.classes["@mozilla.org/browser/favicon-service;1"] .
getservice(components.interfaces.nsifaviconservice); caching the favicon service stores an expiration time for each favicon.
...
getting favicon images you can use favicons in the browser ui using special annotation uris.
... nsifaviconservice.
getfaviconimageforpage() returns an annotation uri for the favicon for a given page, and nsifaviconservice.
getfaviconlinkforicon() returns an annotation uri for the given favicon.
...you should always use nsifaviconservice.
getfaviconimageforpage() to
get the favicon for a page.
Using the Places tagging service
initiating the tagging service before using the tagging service, you need to obtain a reference to an instance of it: var taggingsvc = components.classes["@mozilla.org/browser/tagging-service;1"] .
getservice(components.interfaces.nsitaggingservice); tagging a uri the nsitaggingservice.taguri() method tags a url with the given set of tags.
... tagginsvc.untaguri(uri("http://example.com/"), ["tag 1"]); //first argument = uri //second argument = array of tag(s) finding all urls with a given tag the nsitaggingservice.
geturisfortag() method returns an array of all urls tagged with the given tag.
... var tag1uris = taggingsvc.
geturisfortag("tag 1"); //"tag 1" = given tag
getting all tags associated with a url the nsitaggingservice.
gettagsforuri() method returns an array of all tags set for the given url.
... var tags = taggingsvc.
gettagsforuri(uri("http://example.com/", {})); //tags = an array of tags stored in http://example.com/ see also places nsitaggingservice ...
extIPreferenceBranch
method overview boolean has(in astring aname) extipreference
get(in astring aname) nsivariant
getvalue(in astring aname, in nsivariant adefaultvalue) void setvalue(in astring aname, in nsivariant avalue) void reset() attributes attribute type description root readonly attribute astring the name of the branch root.
... boolean has(in astring aname) parameters aname the name of preference return value true if the preference exists, false if not
get()
gets an object representing a preference extipreference
get(in astring aname) parameters aname the name of preference return value a preference object, or null if the preference does not exist
getvalue()
gets the value of a preference.
... nsivariant
getvalue(in astring aname, in nsivariant adefaultvalue) parameters aname the name of a preference adefaultvalue the default value of a preference.
... see bug 481044 void reset() parameters return value examples var myext = application.extensions.
get('myapplicationid'); function myfunc (event) { application.console.log('change!'); }; myext.prefs.
get("myprefname").events.addlistener("change", myfunc); see also fuel (firefox), steel (thunderbird) and smile (seamonkey) known issues bug 488587 - function registered as fuel preference listener not always called ...
Aggregating the In-Memory Datasource
say you were writing a datasource2, and the way you chose to implement it was to "wrap" the in-memory datasource; i.e., myclass : public nsimyinterface, public nsirdfdatasource { private: nscomptr<nsirdfdatasource> minner; public: // nsirdfdatasource methods ns_imethod init(const char* auri) { return minner->init(auri); } ns_imethod
geturi(char* *auri) { return minner->
geturi(auri); } // etc., for each method in nsirdfdatasource!
... in short, the only case where this technique is useful is when you're implementing a datasource to
get "read-only reflection".
...private: nscomptr<nsisupports> minner; }; construct the datasource delegate when your object is constructed (or, at worst, when somebody qi's for it): rv = nscomponentmanager::createinstance( krdfinmemorydatasourcecid, this, /* the "outer" */ nscomtypeinfo<nsisupports>::
getiid(),
getter_addrefs(minner)); note passing this as the "outer" parameter.
...aresult) return ns_error_null_pointer; if (aiid.equals(nscomtypeinfo<nsimyinterface>::
getiid()) || aiid.equals(nscomtypeinfo<nsisupports>::
getiid())) { *aresult = ns_static_cast(nsiglobalhistory*, this); } else if (aiid.equals(nscomtypeinfo<nsirdfdatasource>::
getiid())) { return minner->queryinterface(aiid, aresult); } else { *aresult = nsnull; return ns_nointerface; } ns_addref(ns_static_cast(nsisupports*, aresult)); return ns_ok; } the only oth...
Packaging WebLock
the component files are copied to the components directory of the gecko application, and the weblock subdirectory
gets copied over into the chrome subdirectory, where its ui resources can be added dynamically to the xul-based gecko application.
... weblock installation script // initialize the installation var err = initinstall("weblock", "weblock", 1.0); var componentsdir =
getfolder("components"); var cf =
getfolder("chrome"); // add the dll and say where it'll go addfile("weblock.dll", 1.0, "weblock.dll", componentsdir, ""); // add the typelib also addfile("weblock.xpt", "1.0", "weblock.xpt", componentsdir, ""); // add the weblock subdirectory of the xpi and specify that // it be installed in the chrome application directory err = adddirectory("weblock", "1.0", "",...
... // register the new ui with the mozilla chrome registry registerchrome(content,
getfolder(cf,"weblock.xpi"),"weblock"); registerchrome(skin,
getfolder(cf, "weblock.xpi"),"weblock"); // perform the installation if there are no errors if (err==success) performinstall(); else cancelinstall(err); the weblock trigger script the trigger script is the script placed on a web page that actually initiates an xpinstall installation and calls the installation script that appears in the xpi.
... the following html specifies a complete webpage in which the trigger script is defined as a javascript function, installweblock, that
gets called when the user clicks the hyperlink.
Receiving startup notifications
the startup process during application startup, the application's manifest is used to
get a list of the components it needs to register, and those components are loaded.
... this
gets enough of xpcom and the application loaded and running that the extension manager can then be loaded and handle installing, uninstalling, and updating any installed extensions.
... registering with the category manager to register with the category manager, simply call its nsicategorymanager.addcategoryentry() method: categorymanager->addcategoryentry(appstartup_category, "mycomponentname", "contract-id", pr_true, pr_true,
getter_copies(previous)); this causes your component to be instantiated using nsicomponentmanager.createinstance().
... if you want your component to be started as a service, prepend "service," to the contract id: categorymanager->addcategoryentry(appstartup_category, "mycomponentname", "service,contract-id", pr_true, pr_true,
getter_copies(previous)); with "service," specified, the component is instantiated using nsicomponentmanager.
getservice().
mozilla::services namespace
the services c++ namespace offers an easy and efficient alternative for obtaining a service as compared to the indirect xpcom approach:
getservice(), call
getservice(), etc methods are expensive and should be avoided when possible.
...for example, to obtain a reference to the ioservice: nscomptr<nsiioservice> ioservice = mozilla::services::
getioservice(); provided service
getters service accessor service interface service name
getchromeregistryservice nsichromeregistryservice chrome registry service
getioservice nsiioservice io service
getobserverservice nsiobserverservice observer service
getstringbundleservice nsistringbundleservice string bundle service
gettoolkitchromeregistryservice nsitoolkitchromeregistry toolkit chrome registry service
getxulchromeregistryservice nsixulchromeregistry xul chrome reg...
...istry service
getxuloverlayproviderservice nsixuloverlayprovider xul overlay provider service more services will be added as needed.
... see also services.jsm nsiservicemanager.
getservice() ...
Components.utils.Sandbox
"xray vision" is exactly the same xray behavior that script always
gets, by default, when working with dom objects across origin boundaries.
...the protection is bidirectional: the caller sees the bonafide dom objects without being confused by sneakily-redefined properties, and the tar
get receives appropriate privacy from having its expandos inspected by untrusted callers.
... in general, when accessing same-origin content, script
gets a transparent wrapper rather than an xray wrapper.
...this code was tested on twitter.com and
gets access to the jquery $.
nsIRegistry
var cc = components.classes; var ci = components.interfaces; var rc = cc["@mozilla.org/registry;1"]; var rs = rc.
getservice(ci.nsiregistry); now you have the registry service.
...i don't know how to
get the other keys' names automatically, but i do know how to look up the directory for a particular profile.
... js> rs.
getstringutf8(530, "directory") // 530: key corresponding with profiles/default the output is something like: /home/lion/.mozilla/default/awp83kud.slt boo-yah!
...js> rs.setstringutf8(530, "directory", "/home/lion/somewhere/else") js> rs.
getstringutf8(530, "directory") /home/lion/somewhere/else yes!
Language bindings
components.utils.
getglobalforobjectthis method is used to determine the global object with which an object is associated.
... this is the global object in place at the time the object was created, which is to say the global object used when executing the script that created the object.components.utils.
getweakreferencethis method was introduced in firefox 3 and is used for obtaining a weak reference for an object.
... to obtain the object reference, you have to call
get() on the resulting object.components.utils.importcomponents.utils.import was introduced in firefox 3 and is used for sharing code between different scopes easily.
...you can
get details on what this method does in js_setgczeal.
IAccessibleComponent
method overview [prop
get] hresult background([out] ia2color background ); [prop
get] hresult foreground([out] ia2color foreground ); [prop
get] hresult locationinparent([out] long x, [out] long y ); methods background() returns the background color of this object.
... [prop
get] hresult background( [out] ia2color background ); parameters background the returned color is the background color of this object or, if that is not supported, the default background color.
...[prop
get] hresult foreground( [out] ia2color foreground ); parameters foreground the returned color is the foreground color of this object or, if that is not supported, the default foreground color.
...[prop
get] hresult locationinparent( [out] long x, [out] long y ); parameters x the x coordinate of the upper left corner of the object's bounding box relative to the immediate parent object.
IAccessibleHypertext
method overview [prop
get] hresult hyperlink([in] long index, [out] iaccessiblehyperlink hyperlink ); [prop
get] hresult hyperlinkindex([in] long charindex, [out] long hyperlinkindex ); [prop
get] hresult nhyperlinks([out] long hyperlinkcount ); methods hyperlink() returns the specified link.
...[prop
get] hresult hyperlink( [in] long index, [out] iaccessiblehyperlink hyperlink ); parameters index this 0 based index specifies the hyperlink to return.
...[prop
get] hresult hyperlinkindex( [in] long charindex, [out] long hyperlinkindex ); parameters charindex a 0 based index of the character for which to return the link index.
...[prop
get] hresult nhyperlinks( [out] long hyperlinkcount ); parameters hyperlinkcount the number of links and link groups within this hypertext paragraph.
IAccessibleImage
method overview [prop
get] hresult description([out] bstr description ); [prop
get] hresult imageposition([in] enum ia2coordinatetype coordinatetype, [out] long x, [out] long y ); [prop
get] hresult imagesize([out] long height, [out] long width ); methods description() returns the localized description of the image.
... [prop
get] hresult description( [out] bstr description ); parameters description the localized description of the image.
...[prop
get] hresult imageposition( [in] enum ia2coordinatetype coordinatetype, [out] long x, [out] long y ); parameters coordinatetype specifies whether the returned coordinates should be relative to the screen or the parent object.
...[prop
get] hresult imagesize( [out] long height, [out] long width ); parameters height the height of the image.
IAccessibleValue
method overview [prop
get] hresult currentvalue([out] variant currentvalue ); [prop
get] hresult maximumvalue([out] variant maximumvalue ); [prop
get] hresult minimumvalue([out] variant minimumvalue ); hresult setcurrentvalue([in] variant value ); methods currentvalue() returns the value of this object as a number.
...[prop
get] hresult currentvalue( [out] variant currentvalue ); parameters currentvalue returns the current value represented by this object.
...[prop
get] hresult maximumvalue( [out] variant maximumvalue ); parameters maximumvalue returns the maximal value in an implementation dependent type.
...[prop
get] hresult minimumvalue( [out] variant minimumvalue ); parameters minimumvalue returns the minimal value in an implementation dependent type.
mozIPersonalDictionary
to access this service, use var personaldictionary = components.classes["@mozilla.org/spellchecker/personaldictionary;1"] .
getservice(components.interfaces.mozipersonaldictionary); method overview void addcorrection(in wstring word,in wstring correction, in wstring lang); void addword(in wstring word, in wstring lang); boolean check(in wstring word, in wstring lang); void endsession(); void
getcorrection(in wstring word, [array, size_is(count)] out wstring words, out pruint32 count); void ignoreword(in wstr...
...ing word); void load(); void removecorrection(in wstring word,in wstring correction, in wstring lang); void removeword(in wstring word, in wstring lang); void save(); attributes attribute type description wordlist nsistringenumerator
get the (lexicographically sorted) list of words.
...
getcorrection()
gets a list of previous corrections for the word.
... void
getcorrection( in wstring word, [array, size_is(count)] out wstring words, out pruint32 count ); parameters word the word to
get the list of corrections for.
mozIStorageFunction
javascript starting in gecko 1.9.1.4 (firefox 3.0.15), you can directly pass your function into the mozistorageconnection method mozistorageconnection, like this: dbconn.createfunction("square", 1, function(aarguments) { let value = aarguments.
getint32(0); return value * value; }); // run some query that uses the function.
...var squarefunction = { onfunctioncall: function(aarguments) { let value = aarguments.
getint32(0); return value * value; } }; // now, register our function with the database connection.
...class squarefunction : public mozistoragefunction { public: ns_imethod onfunctioncall(mozistoragevaluearray *aarguments, nsivariant **_result) { print32 value; nsresult rv = aarguments->
getint32(&value); ns_ensure_success(rv, rv); nscomptr<nsiwritablevariant> result = do_createinstance("@mozilla.org/variant;1"); ns_ensure_true(result, ns_error_out_of_memory); rv = result->setasint64(value * value); ns_ensure_success(rv, rv); ns_addref(*_result = result); return ns_ok; } }; // now, register our function with the database connection.
...nscomptr<mozistoragestatement> stmt; rv = dbconn->createstatement(ns_literal_cstring( "select square(value) from some_table"),
getter_addrefs(stmt) ); ns_ensure_success(rv, rv); prbool hasmore; while (ns_succeeded(stmt->executestep(&hasmore)) && hasmore) { // handle the results } see also storage introduction and how-to article mozistorageconnection database connection to a specific file or in-memory data storage mozistoragestatement create and execute sql statements on a sqlite database.
mozIStorageRow
last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: mozistoragevaluearray method overview nsivariant
getresultbyindex(in unsigned long aindex); nsivariant
getresultbyname(in autf8string aname); methods
getresultbyindex() returns the value from a specific column in the row, using a zero-based index to identify the column.
... nsivariant
getresultbyindex( in unsigned long aindex ); parameters aindex the zero-based index of the column number whose value is to be returned.
...
getresultbyname() returns the value from a specific column in the row, identifying the column by name.
... nsivariant
getresultbyname( in autf8string aname ); parameters aname the name of the column whose value is to be returned.
nsIAccessibleHyperLink
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview nsiaccessible
getanchor(in long index); note: renamed from
getobject in gecko 1.9 nsiuri
geturi(in long index); boolean isselected(); obsolete since gecko 1.9 boolean isvalid(); obsolete since gecko 1.9 attributes attribute type description anchorcount long the number of anchors within this hyperlink.
... nsiaccessible
getanchor( in long index ); parameters index the 0-based index whose object is to be returned.
...
geturi() returns the uri at the given index.
... nsiuri
geturi( in long index ); parameters index the 0-based index of the uri to be returned.
nsIAccessibleProvider
xformsselect 0x00002009 used for select and select1 that are implemented using host document's native wid
get.
... xformsdropmarkerwid
get 0x00002101 used for dropmarker wid
get that is used by xforms elements.
... xformscalendarwid
get 0x00002102 used for calendar wid
get that is used by xforms elements.
... xformscomboboxpopupwid
get 0x00002103 used for popup wid
get that is used by xforms minimal select1 elements.
nsIAlertsService
implemented by: @mozilla.org/alerts-service;1 as a service: var alertsservice = components.classes["@mozilla.org/alerts-service;1"] .
getservice(components.interfaces.nsialertsservice); method overview void showalertnotification(in astring imageurl, in astring title, in astring text, [optional] in boolean textclickable, [optional] in astring cookie, [optional] in nsiobserver alertlistener, [optional] in astring name, [optional] in astring dir, [optional] in astring lang, [optional] in astring data, [optional] in nsiprin...
...
getservice(components.interfaces.nsialertsservice); try { alertsservice.showalertnotification("chrome://mozapps/skin/downloads/downloadicon.png", "alert title", "alert text goes here.", false, "", null, ""); } catch (e) { // this can fail on mac os x } listening for callbacks you can be notified when the notification w...
...
getservice(components.interfaces.nsialertsservice); try { alertsservice.showalertnotification("", "alerts service test", "click me", true, "cookie", listener, ""); } catch (e) { // this can fail on mac os x } example 2 this example shows how to use all the available observer topics: var as = cc['@mozilla.org/alerts-service;1'].
getservice(ci.nsialertsservice); var notiflistener = ...
...{ observe: function(asubject, atopic, adata) { console.error('incoming notification observer:', asubject, atopic, adata); if (atopic == 'alertclickcallback') { console.error('user clicked trying to throw click'); services.prompt.alert(services.wm.
getmostrecentwindow('navigator:firefox'), 'focus firefox', 'will now focus fireox and then focus the tab'); } else if (atopic == 'alertshow') { console.log('just showed notification'); } else if (atopic == 'alertfinished') { console.log('just alertfinished') } } }; as.showalertnotification('chrome://branding/content/icon64.png', 'stackoverflow - new messages', 'there are ## new messages.
nsIAppShell
wid
get/public/nsiappshell.idlnot scriptable interface for the native event system layer.
... from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void create(inout int argc, inout string argv); obsolete since gecko 1.9 void dispatchnativeevent(in prbool arealevent, in voidptr aevent); obsolete since gecko 1.9 void exit(); void favorperformancehint(in boolean favorperfoverstarvation, in unsigned long starvationdelay); void
getnativeevent(in prboolref arealevent, in voidptrref aevent); obsolete since gecko 1.9 void listentoeventqueue(in nsieventqueue aqueue, in prbool alisten); obsolete since gecko 1.9 void resumenative(); void run(); void runinstablestate(in nsirunnable arunnable); void spindown(); obsolete since gecko 1.9 void spinup(); obsolete since gecko 1.9 void suspendnative(); attributes a...
...
getnativeevent() obsolete since gecko 1.9 (firefox 3) after event dispatch execute app specific code.
... void
getnativeevent( in prboolref arealevent, in voidptrref aevent ); parameters arealevent event is real or a null placeholder (macintosh).
nsIAuthPromptProvider
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void
getauthprompt(in pruint32 apromptreason, in nsiidref iid, [iid_is(iid),retval] out nsqiresult result); constants constant value description prompt_normal 0 normal (non-proxy) prompt request.
... methods
getauthprompt() this method requests a prompt interface for the given prompt reason.
... void
getauthprompt( in pruint32 apromptreason, in nsiidref iid, [iid_is(iid),retval] out nsqiresult result ); parameters apromptreason the reason for the authentication prompt, one of the prompt_* constants.
... iid the desired interface, for example, ns_
get_iid(nsiauthprompt2).
nsIBadCertListener2
method overview boolean notifycertproblem(in nsiinterfacerequestor socketinfo, in nsisslstatus status, in autf8string tar
getsite); methods notifycertproblem() called in case of a broken ssl status.
... boolean notifycertproblem( in nsiinterfacerequestor socketinfo, in nsisslstatus status, in autf8string tar
getsite ); parameters socketinfo a network communication context that can be used to obtain more information about the active connection.
...tar
getsite the site name that was used to open the current connection.
... return value the consumer shall return true if it wants to suppress the error message related to the bad cert (the connection will still
get canceled).
nsIBoxObject
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) to
get an instance, use the boxobject property.
... where possible, element.
getclientrects and element.
getboundingclientrect should be used instead.
... method overview wstring
getlookandfeelmetric(in wstring propertyname); obsolete since gecko 1.9 wstring
getproperty(in wstring propertyname); nsisupports
getpropertyassupports(in wstring propertyname); void removeproperty(in wstring propertyname); void setproperty(in wstring propertyname, in wstring propertyvalue); void setpropertyassupports(in wstring propertyname, in nsisupports value); attributes attribute type description element nsidomelement read only.
... methods
getlookandfeelmetric() obsolete since gecko 1.9 (firefox 3) wstring
getlookandfeelmetric( in wstring propertyname ); parameters propertyname return value
getproperty() wstring
getproperty( in wstring propertyname ); parameters propertyname return value
getpropertyassupports() nsisupports
getpropertyassupports( in wstring propertyname ); parameters propertyname ret...
nsIClipboard
wid
get/nsiclipboard.idlscriptable this interface supports basic clipboard operations such as: setting, retrieving, emptying, matching and supporting clipboard data.
... inherits from: nsisupports last changed in gecko 30.0 (firefox 30.0 / thunderbird 30.0 / seamonkey 2.27) method overview void emptyclipboard(in long awhichclipboard); void forcedatatoclipboard(in long awhichclipboard); obsolete since gecko 1.8 void
getdata(in nsitransferable atransferable, in long awhichclipboard); boolean hasdatamatchingflavors([array, size_is(alength)] in string aflavorlist, in unsigned long alength, in long awhichclipboard); void setdata(in nsitransferable atransferable, in nsiclipboardowner anowner, in long awhichclipboard); boolean supportsselectionclipboard(); boolean supportsfindclipboard(); constants most clipboard operations in firefox use kglobalclipboard, which is the one also used by the...
...
getdata() this method retrieves data from the clipboard into a transferable.
... void
getdata( in nsitransferable atransferable, in long awhichclipboard ); parameters atransferable the transferable to receive data from the clipboard.
nsICollection
it provides basic operations on those items like:
getting, setting, appending, removing, and so on.
... inherits from: nsiserializable last changed in gecko 1.7 method overview void appendelement(in nsisupports item); void clear(); pruint32 count(); nsienumerator enumerate(); nsisupports
getelementat(in pruint32 index); void queryelementat(in pruint32 index, in nsiidref uuid, [iid_is(uuid),retval] out nsqiresult result); void removeelement(in nsisupports item); void setelementat(in pruint32 index, in nsisupports item); methods appendelement() appends a new item to the collection.
...
getelementat() returns the element at the specified index into the collection.
... nsisupports
getelementat( in pruint32 index ); parameters index the index position of the item to be returned.
nsICommandLine
method overview long findflag(in astring aflag, in boolean acasesensitive); astring
getargument(in long aindex); boolean handleflag(in astring aflag, in boolean acasesensitive); astring handleflagwithparam(in astring aflag, in boolean acasesensitive); void removearguments(in long astart, in long aend); nsifile resolvefile(in astring aargument); nsiuri resolveuri(in astring aargument); attributes attribute type description length long number of arguments in the comm...
... windowcontext nsidomwindow a window to be tar
geted by this command line.
... return value the position of the flag in the command line, or -1 if the flag is not found.
getargument()
gets the value an argument from the array of command-line arguments, given the index into the argument list.
...astring
getargument( in long aindex ); parameters aindex the argument to retrieve.
nsIContentSniffer
method overview acstring
getmimetypefromcontent(in nsirequest arequest, [const,array,size_is(alength)] in octet adata, in unsigned long alength); methods
getmimetypefromcontent() given a chunk of data, determines a mime type.
...acstring
getmimetypefromcontent( in nsirequest arequest, [const,array,size_is(alength)] in octet adata, in unsigned long alength ); parameters arequest the request where this data came from.
... let charset = "iso-8859-1"; try { // this pref has been removed, see bug 910192 charset = services.prefs.
getcomplexvalue("intl.charset.default", ci.nsipreflocalizedstring).data; } catch (e) { } let conv = cc["@mozilla.org/intl/scriptableunicodeconverter"] .createinstance(ci.nsiscriptableunicodeconverter); conv.charset = charset; try { let str = conv.convertfrombytearray(adata, alength); if (str.substring(0, 5) == "%pdf-") return "application/pdf"; // we detected a pdf file ...
... } catch (e) { // try to
get information from arequest } ...
nsICookiePermission
last changed in gecko 1.9 (firefox 3) inherits from: nsisupports method overview nscookieaccess canaccess(in nsiuri auri, in nsichannel achannel); boolean cansetcookie(in nsiuri auri, in nsichannel achannel, in nsicookie2 acookie, inout boolean aissession, inout print64 aexpiry); nsiuri
getoriginatinguri(in nsichannel achannel); void setaccess(in nsiuri auri, in nscookieaccess aaccess); constants constant value description access_default 0 nscookieaccess's access default value access_allow 1 nscookieaccess's access allow value access_deny 2 nscookieaccess's access deny value access_session 8 additional values for nscookieaccess, which are not directly used by any me...
... methods canaccess() tests whether or not the given uri/channel may access the cookie database, either to set or
get cookies.
...
getoriginatinguri() determines the originating uri for a load given a channel, for third-party cookie blocking.
...nsiuri
getoriginatinguri( in nsichannel achannel ); parameters achannel the channel for the load trying to
get or set cookies.
nsIDOMGeoGeolocation
starting in gecko 1.9.2, you can access this service using: var geolocation = components.classes["@mozilla.org/geolocation;1"] .
getservice(components.interfaces.nsidomgeogeolocation); note: if nsidgeogeolocation throws an exception when importing, try using this: var geolocation = components.classes["@mozilla.org/geolocation;1"] .
getservice(components.interfaces.nsisupports); method overview void clearwatch(in unsigned short watchid); void
getcurrentposition(in nsidomgeoposition...
...
getcurrentposition() acquires the user's current position via a new position object.
...void
getcurrentposition( in nsidomgeopositioncallback successcallback, [optional] in nsidomgeopositionerrorcallback errorcallback, [optional] in nsidomgeopositionoptions options ); parameters successcallback an nsidomgeopositioncallback to be called when the current position is available.
... watchposition() similar to
getcurrentposition(), except it continues to call the callback with updated position information periodically until clearwatch() is called.
nsIDOMMouseScrollEvent
method overview void initmousescrollevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtar
get relatedtar
getarg, in long axis); attributes attribute type description axis long indicates which mouse wheel axis changed; this will be either horizontal_axis or vertical_axis.
...void initmousescrollevent( in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtar
get relatedtar
getarg, in long axis ); parameters typearg the type of event.
... relatedtar
getarg the event tar
get related to this event.
... see also nsidommouseevent nsidomevent nsidomeventtar
get ...
nsIDOMWindowInternal
rds, [optional] in boolean wraparound, [optional] in boolean wholeword, [optional] in boolean searchinframes, [optional] in boolean showdialog) domstring atob(in domstring aasciistring) domstring btoa(in domstring abase64data) nsivariant showmodaldialog(in nsivariant aargs, [optional] in domstring aoptions) void postmessage(in domstring message, in domstring tar
getorigin) attributes attribute type description window nsidomwindowinternal readonly: the window object itself.
... defaultstatus domstring
gets/sets the status bar text for the given window.
... outerwidth long
gets the width of the outside of the browser window.
... outerheight long
gets the height of the outside of the browser window.
nsIEditorDocShell
docshell/base/nsieditordocshell.idlscriptable provides a way to
get an editor from a specific frame in a docshell hierarchy.
... inherits from: nsisupports last changed in gecko 1.7 use nsieditingsession.makewindoweditable() and nsieditingsession.
geteditorforwindow() from out side.
... editor nsieditor
gets or sets the editor for the content document.
... methods makeeditable() make this docshell editable, setting a flag that causes an editor to
get created, either immediately, or after a url has been loaded.
nsIGlobalHistory3
method overview void adddocumentredirect(in nsichannel aoldchannel, in nsichannel anewchannel, in print32 aflags, in boolean atoplevel); unsigned long
geturigeckoflags(in nsiuri auri); void seturigeckoflags(in nsiuri auri, in unsigned long aflags); methods adddocumentredirect() notifies the history system that the page loading via aoldchannel redirected to anewchannel.
...if they do so, then callers must call nsiglobalhistory2.adduri() upon
getting the ns_error_not_implemented result.
...
geturigeckoflags()
get the gecko flags for this uri.
...unsigned long
geturigeckoflags( in nsiuri auri ); parameters auri the nsiuri to
get flags for.
nsIInterfaceRequestor
the semantics of nsisupports.queryinterface() dictate that given an interface a that you nsisupports.queryinterface() on to
get to interface b, you must be able to nsisupports.queryinterface() on b to
get back to a.
... nsiinterfacerequestor, however, allows you to obtain an interface c from a that may (or most likely) will not have the ability to
get back to a.
... method overview void
getinterface(in nsiidref uuid, [iid_is(uuid),retval] out nsqiresult result); methods
getinterface() retrieves the specified interface pointer.
... void
getinterface( in nsiidref uuid, [iid_is(uuid),retval] out nsqiresult result ); parameters uuid the iid of the interface being requested.
nsIJSON
don't for
get to gcroot the result before using it.
...don't for
get to gcroot the jsval before using it.
...don't for
get to gcroot the result before using it.
...don't for
get to gcroot the jsval before using it.
nsIMsgSearchCustomTerm
readonly attribute boolean needsbody; methods
getenabled /** * is this custom term enabled?
... * * @return true if enabled */ boolean
getenabled(in nsmsgsearchscopevalue scope, in nsmsgsearchopvalue op);
getavailable /** * is this custom term available?
... * * @return true if available */ boolean
getavailable(in nsmsgsearchscopevalue scope, in nsmsgsearchopvalue op);
getavailableoperators /** * list the valid operators for this term.
... * * @param scope search scope (nsmsgsearchscope) * @param length object to hold array length * * @return array of operators */ void
getavailableoperators(in nsmsgsearchscopevalue scope, out unsigned long length, [retval, array, size_is(length)] out nsmsgsearchopvalue operators); match /** * apply the custom search term to a message * * @param msghdr header database reference representing the message * @param searchvalue user-set value to use in the search * @param searchop search operator (contains, ishigherthan, etc.) * * @return true if the term matches the message, else false */ boole...
nsIParserUtils
implemented by: @mozilla.org/parserutils;1 as a service: var parserutils = components.classes["@mozilla.org/parserutils;1"] .
getservice(components.interfaces.nsiparserutils); method overview astring converttoplaintext(in astring src, in unsigned long flags, in unsigned long wrapcol); nsidomdocumentfragment parsefragment(in astring fragment, in unsigned long flags, in boolean isxml, in nsiuri baseuri, in nsidomelement element); astring sanitize(in astring src, in unsigned long flags); ...
... at present, sanitizing css backgrounds, and so on., is not supported, so setting this to
gether with sanitizerallowstyle doesn't make sense.
... sanitizerlogremovals (1 << 6) flag for sanitizer: log messages to the console for everything that
gets sanitized.
...in this case, properties that gecko doesn't recognize can
get removed as a side effect.
nsIProfile
to
get access to the profile manager service: var profile = components.classes["@mozilla.org/profile/manager;1"] .
getservice(components.interfaces.nsiprofile); note: this interface was used by seamonkey up through seamonkey 1.1 versions, which were based off gecko 1.8.1.
...method overview void cloneprofile(in wstring profilename); void createnewprofile(in wstring profilename, in wstring nativeprofiledir, in wstring langcode, in boolean useexistingdir); void deleteprofile(in wstring name, in boolean candeletefiles); void
getprofilelist(out unsigned long length, [retval, array, size_is(length)] out wstring profilenames); boolean profileexists(in wstring profilename); void renameprofile(in wstring oldname, in wstring newname); void shutdowncurrentprofile(in unsigned long shutdowntype); attributes attribute type description currentprofile wstring the name of the profile currently in use.
...
getprofilelist() returns an array of strings indicating the names of all the available profiles.
... void
getprofilelist( out unsigned long length, [retval, array, size_is(length)] out wstring profilenames ); parameters length on return, contains the number of profiles in the profilenames array.
nsIProperties
to
get an instance, use: var properties = components.classes["@mozilla.org/file/directory_service;1"] .
getservice(components.interfaces.nsiproperties); method overview void
get(in string prop, in nsiidref iid, [iid_is(iid),retval] out nsqiresult result); void
getkeys(out pruint32 count, [array, size_is(count), retval] out string keys); boolean has(in string prop); void set(in string prop, in nsisupports value); void undefine(in string prop); methods
get()
gets the xpcom object associated with a particular name.
... void
get( in string prop, in nsiidref iid, [iid_is(iid),retval] out nsqiresult result ); parameters prop the property name.
...
getkeys() returns an array of property names.
...void
getkeys( out pruint32 count, [array, size_is(count), retval] out string keys ); parameters count the length of the result array.
nsISSLErrorListener
method overview boolean notifysslerror(in nsiinterfacerequestor socketinfo, in print32 error, in autf8string tar
getsite); methods notifysslerror() called in case of an ssl error.
... boolean notifysslerror( in nsiinterfacerequestor socketinfo, in print32 error, in autf8string tar
getsite ); parameters socketinfo a network communication context that can be used to obtain more information about the active connection.
...tar
getsite the site name that was used to open the current connection.
... return value the consumer shall return true if it wants to suppress the error message related to the error (the connection will still
get canceled).
nsISecurityCheckedComponent
method overview string cancallmethod(in nsiidptr iid, in wstring methodname); string cancreatewrapper(in nsiidptr iid); string can
getproperty(in nsiidptr iid, in wstring propertyname); string cansetproperty(in nsiidptr iid, in wstring propertyname); methods cancallmethod() returns a capability string indicating what permissions are required to call the specified method on the given interface.
...can
getproperty() returns the permissions required to
get the specified property on the given interface.
... string can
getproperty( in nsiidptr iid, in wstring propertyname ); parameters iid the interface that the property to
get exists on.
... return value the capability required to
get the property.
nsISelection2
method overview void
getrangesforinterval(in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, out pruint32 resultcount, [retval, array, size_is(resultcount)] out nsidomrange results); void
getrangesforintervalcomarray(in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, in rangearr...
... methods
getrangesforinterval() return array of ranges intersecting with the given dom interval.
... void
getrangesforinterval( in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, out pruint32 resultcount, [retval, array, size_is(resultcount)] out nsidomrange results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection.
... native code only!
getrangesforintervalcomarray void
getrangesforintervalcomarray( in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, in rangearray results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection.
nsIServerSocket
void close(); void asynclisten(in nsiserversocketlistener alistener); prnetaddr
getaddress();native code only!
...the listener's onsocketaccepted() method will be called on the same thread that called asynclisten() (the calling thread must have an nsieventtar
get).
... native code only!
getaddress returns the address to which this server socket is bound.
... prnetaddr
getaddress(); parameters none.
nsISimpleEnumerator
inherits from: nsisupports last changed in gecko 0.9.6 method overview nsisupports
getnext(); boolean hasmoreelements(); methods
getnext() called to retrieve the next element in the enumerator.
...nsisupports
getnext(); parameters none.
...hasmoreelements() called to determine whether or not the enumerator has any elements that can be returned via
getnext().
... this method is generally used to determine whether or not to initiate or continue iteration over the enumerator, though it can be called without subsequent
getnext() calls.
nsISmsDatabaseService
eate an instance, use: var smsservice = components.classes["@mozilla.org/sms/smsdatabaseservice;1"] .createinstance(components.interfaces.nsismsdatabaseservice); method overview long savereceivedmessage(in domstring asender, in domstring abody, in unsigned long long adate); long savesentmessage(in domstring areceiver, in domstring abody, in unsigned long long adate); void
getmessage(in long messageid, in long requestid, [optional] in unsigned long long processid); void deletemessage(in long messageid, in long requestid, [optional] in unsigned long long processid); void createmessagelist(in nsidommozsmsfilter filter, in boolean reverse, in long requestid, [optional] in unsigned long long processid); void
getnextmessageinlist(in long listid, in long requestid, [op...
...
getmessage() void
getmessage( in long messageid, in long requestid, [optional] in unsigned long long processid ); parameters messageid a number representing the id of the message.
...
getnextmessageinlist() void
getnextmessageinlist( in long listid, in long requestid, [optional] in unsigned long long processid ); parameters listid a number representing the id of the message list.
... clearmessagelist() void
getnextmessageinlist( in long listid, ); parameters listid a number representing the id of the message list.
nsISocketTransportService
to create an instance, use: var sockettransportservice = components.classes["@mozilla.org/network/socket-transport-service;1"] .
getservice(components.interfaces.nsisockettransportservice); method overview void attachsocket(in prfiledescptr afd, in nsasockethandlerptr ahandler); native code only!
... ahost specifies the tar
get hostname or ip address literal of the peer for this socket.
... aport specifies the tar
get port of the peer for this socket.
... var transportservice = components.classes["@mozilla.org/network/socket-transport-service;1"] .
getservice(components.interfaces.nsisockettransportservice); // ...
nsISpeculativeConnect
1.0 66 introduced gecko 15.0 inherits from: nsisupports last changed in gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamonkey 2.12) to use this service, simply call nsisupports.queryinterface() on the nsiioservice you plan to use for the connection, to
get access to the i/o service's implementation of nsispeculativeconnect.
...method overview void speculativeconnect(in nsiuri auri, in nsiinterfacerequestor acallbacks, in nsieventtar
get atar
get); methods speculativeconnect() call this method to hint to the networking layer that a new transaction for the specified uri is likely to happen soon.
...void speculativeconnect( in nsiuri auri, in nsiinterfacerequestor acallbacks, in nsieventtar
get atar
get ); parameters auri the uri of the hinted transaction.
...atar
get the thread on which the release of the callbacks will occur.
nsIStringBundleOverride
to create an instance, use: var stringbundleservice = components.classes["@mozilla.org/intl/stringbundle/text-override;1"] .
getservice(components.interfaces.nsistringbundleoverride); note: you should never need to use this service directly.
...method overview nsisimpleenumerator enumeratekeysinbundle(in autf8string url); astring
getstringfromname(in autf8string url, in acstring key); methods enumeratekeysinbundle()
get all override keys for a given string bundle.
...
getstringfromname()
get the override value for a particular key in a particular string bundle.
... astring
getstringfromname( in autf8string url, in acstring key ); parameters url the url of the original string bundle whose keys are to be overridden.
nsIStringEnumerator
inherits from: nsisupports last changed in gecko 1.7 method overview astring
getnext(); boolean hasmore(); methods
getnext() called to retrieve the next string in the enumerator.
...astring
getnext(); parameters none.
...hasmore() called to determine whether or not the enumerator has any strings that can be returned via
getnext().
... this method is generally used to determine whether or not to initiate or continue iteration over the enumerator, though it can be called without subsequent
getnext() calls.
nsITaskbarTabPreview
wid
get/public/nsitaskbartabpreview.idlscriptable this interface is used on microsoft windows to control tab preview specific behavior.
... method overview void ensureregistration(); violates the xpcom interface guidelines nativewindow
gethwnd(); violates the xpcom interface guidelines void move(in nsitaskbartabpreview anext); attributes attribute type description icon imgicontainer the icon displayed next to the title in the preview.
... violates the xpcom interface guidelines
gethwnd() used internally to obtain the handle to the proxy window for the preview.
... nativewindow
gethwnd(); parameters none.
nsIThreadPool
1.0 66 introduced gecko 1.9 inherits from: nsieventtar
get last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) a thread pool provides a convenient way to process events off the main thread.
... method overview void shutdown(); attributes attribute type description idlethreadlimit unsigned long
get/set the maximum number of idle threads that are kept alive.
... once there are more than this many idle worker threads, the idle threads start
getting destroyed.
... idlethreadtimeout unsigned long
get/set the amount of time in milliseconds that a thread must be idle before it becomes eligible to be destroyed.
nsIUTF8StringEnumerator
inherits from: nsisupports last changed in gecko 1.7 method overview autf8string
getnext(); boolean hasmore(); methods
getnext() returns the next string in the enumerator.
...autf8string
getnext(); parameters none.
...hasmore() reports whether or not the enumerator has any strings that can be returned via
getnext().
... this method is generally used to determine whether or not to initiate or continue iteration over the enumerator, athough it can be called without subsequent
getnext() calls.
nsIUpdateManager
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview nsiupdate
getupdateat(in long index); void saveupdates(); attributes attribute type description activeupdate nsiupdate an nsiupdate object describing the currently in use update.
... updatecount long the number of updates in the history list; the updates can be fetched by calling
getupdateat().
... methods
getupdateat() returns the update at the specified index into the history list.
... nsiupdate
getupdateat( in long index ); parameters index an index into the history list for the nsiupdate to retrieve.
nsIWebBrowserChrome3
1.0 66 introduced gecko 2.0 inherits from: nsiwebbrowserchrome2 last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview astring onbeforelinktraversal(in astring originaltar
get, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab); methods onbeforelinktraversal() determines the appropriate tar
get for a link.
... astring onbeforelinktraversal( in astring originaltar
get, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab ); parameters originaltar
get the original link tar
get.
... return value a new link tar
get, if appropriate.
... otherwise returns originaltar
get.
nsIXULBrowserWindow
method overview astring onbeforelinktraversal(in astring originaltar
get, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab); void setjsdefaultstatus(in astring status); void setjsstatus(in astring status); void setoverlink(in astring link, in nsidomelement element); methods onbeforelinktraversal() called before traversing a link to determine the appropriate tar
get into which to load the link.
...astring onbeforelinktraversal( in astring originaltar
get, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab ); parameters originaltar
get the specified tar
get for the link.
... return value a string indicating the revised tar
get for the link.
...element the currently tar
geted link element.
nsIXULTemplateQueryProcessor
each result will have the four variables referred to defined for it and the values may be retrieved using the result's nsixultemplateresult.
getbindingfor() and nsixultemplateresult.
getbindingobjectfor() methods.
...ts(in nsixultemplateresult aleft, in nsixultemplateresult aright, in nsiatom avar, in unsigned long asorthints); nsisupports compilequery(in nsixultemplatebuilder abuilder, in nsidomnode aquery, in nsiatom arefvariable, in nsiatom amembervariable); void done(); nsisimpleenumerator generateresults(in nsisupports adatasource, in nsixultemplateresult aref, in nsisupports aquery); nsisupports
getdatasource(in nsiarray adatasources, in nsidomnode arootnode, in boolean aistrusted, in nsixultemplatebuilder abuilder, out boolean ashoulddelaybuilding); void initializeforbuilding(in nsisupports adatasource, in nsixultemplatebuilder abuilder, in nsidomnode arootnode); nsixultemplateresult translateref(in nsisupports adatasource, in astring arefstring); methods addbinding() add a variable ...
...
getdatasource() retrieve the datasource to use for the query processor.
...nsisupports
getdatasource( in nsiarray adatasources, in nsidomnode arootnode, in boolean aistrusted, in nsixultemplatebuilder abuilder, out boolean ashoulddelaybuilding ); parameters adatasources the list of nsiuri objects and/or nsidomnode objects.
nsIZipReaderCache
to create an instance, use: var zipreadercache = components.classes["@mozilla.org/libjar/zip-reader-cache;1"] .createinstance(components.interfaces.nsizipreadercache); method overview nsizipreader
getinnerzip(in nsifile zipfile, in autf8string zipentry); nsizipreader
getinnerzip(in nsifile zipfile, in string zipentry); obsolete since gecko 10 nsizipreader
getzip(in nsifile zipfile); void init(in unsigned long cachesize); methods
getinnerzip() returns a (possibly shared) cached nsizipreader for a zip inside another zip.
... nsizipreader
getinnerzip( in nsifile zipfile, in autf8string zipentry ); parameters zipfile the zip file.
...
getzip() returns a (possibly shared) cached nsizipreader for a zip file.
...note: if nsizipreader.close has been called on the shared nsizipreader, this method will return the closed nsizipreader nsizipreader
getzip( in nsifile zipfile ); parameters zipfile the zip file.
XPCOM Interface Reference
cookieservicensicookiestoragensicrashreporternsicryptohmacnsicryptohashnsicurrentcharsetlistenernsicyclecollectorlistenernsidbchangelistenernsidbfolderinfonsidnslistenernsidnsrecordnsidnsrequestnsidnsservicensidomcanvasrenderingcontext2dnsidomchromewindownsidomclientrectnsidomdesktopnotificationnsidomdesktopnotificationcenternsidomelementnsidomeventnsidomeventgroupnsidomeventlistenernsidomeventtar
getnsidomfilensidomfileerrornsidomfileexceptionnsidomfilelistnsidomfilereadernsidomfontfacensidomfontfacelistnsidomgeogeolocationnsidomgeopositionnsidomgeopositionaddressnsidomgeopositioncallbacknsidomgeopositioncoordsnsidomgeopositionerrornsidomgeopositionerrorcallbacknsidomgeopositionoptionsnsidomglobalpropertyinitializernsidomhtmlaudioelementnsidomhtmlformelementnsidomhtmlmediaelementnsidomhtmlsou...
...progresslistenernsidownloadernsidragdrophandlernsidragservicensidragsessionnsidroppedlinkhandlernsidroppedlinkitemnsidynamiccontainernsieditornsieditorboxobjectnsieditordocshellnsieditorimesupportnsieditorloggingnsieditormailsupportnsieditorobservernsieditorspellchecknsieffectivetldservicensienumeratornsienvironmentnsierrorservicensieventlistenerinfonsieventlistenerservicensieventsourcensieventtar
getnsiexceptionnsiextensionmanagernsiexternalhelperappservicensiexternalprotocolservicensiexternalurlhandlerservicensiftpchannelnsiftpeventsinknsifactorynsifavicondatacallbacknsifaviconservicensifeednsifeedcontainernsifeedelementbasensifeedentrynsifeedgeneratornsifeedpersonnsifeedprocessornsifeedprogresslistenernsifeedresultnsifeedresultlistenernsifeedtextconstructnsifilensifileinputstreamnsifileoutp...
...iwifimonitornsiwinaccessnodensiwinapphelpernsiwintaskbarnsiwindowcreatornsiwindowmediatornsiwindowwatchernsiwindowsregkeynsiwindowsshellservicensiworkernsiworkerfactorynsiworkerglobalscopensiworkermessageeventnsiworkermessageportnsiworkerscopensiwritablepropertybagnsiwritablepropertybag2nsixformsmodelelementnsixformsnsinstanceelementnsixformsnsmodelelementnsixmlhttprequestnsixmlhttprequesteventtar
getnsixmlhttprequestuploadnsixpcexceptionnsixpcscriptablensixpconnectnsixsltexceptionnsixsltprocessornsixsltprocessorobsoletensixulappinfonsixulbrowserwindownsixulbuilderlistenernsixulruntimensixulsortservicensixultemplatebuildernsixultemplatequeryprocessornsixultemplateresultnsixulwindownsixmlrpcclientnsixmlrpcfaultnsizipentrynsizipreadernsizipreadercachensizipwriternsmsgfilterfileattribvaluensmsgfo...
...lderflagtypensmsgjunkstatusnsmsgkeynsmsglabelvaluensmsgpriorityvaluensmsgruleactiontypensmsgsearchattribnsmsgsearchopnsmsgsearchscopensmsgsearchtermnsmsgsearchtypevaluensmsgsearchvaluensmsgsearchwid
getvaluenspipromptservice see also interfaces grouped by function ...
XPCOM Interface Reference by grouping
(i'm fully aware that this will be a great point of discussion and probably will end in tears, but since i'm the first person to apparently take a swing at this, i
get first dibs.) the primary sections consist of: browser this section contains elements associated with the view pane or the content of the "browser window" proper.
... nsidomhtmlmediaelement nsidomhtmlsourceelement nsidomhtmltimeranges nsidomjswindow nsidomnode nsidomnshtmldocument nsidomstorageitem nsidomstoragemanager nsidomwindow nsidomwindow2 nsidomwindowinternal nsidomwindowutils nsidynamiccontainer nsieditor event nsidomevent nsidomeventgroup nsidomeventlistener nsidomeventtar
get nsidommousescrollevent nsidommoztouchevent nsidomorientationevent nsidomprogressevent nsidomsimplegestureevent nsidragdrophandler nsidragservice nsidragsession html nsiaccessibilityservice nsiaccessiblecoordinatetype nsiaccessibledocument nsiaccessibleeditabletext nsiaccessibleevent nsiaccessiblehyperlink nsiaccessiblehypertext ...
...ernal nsiworker nsiworkerglobalscope nsiworkermessageevent nsiworkermessageport nsiworkerscope tree nsitreeboxobject nsitreecolumn nsitreecolumns nsitreecontentview nsitreeselection nsitreeview xform nsixformsmodelelement nsixformsnsinstanceelement nsixformsnsmodelelement xmlhttprequest nsixmlhttprequesteventtar
get favicon nsifavicondatacallback nsifaviconservice frame nsichromeframemessagemanager nsiframeloader nsiframeloaderowner nsiframemessagelistener nsiframemessagemanager interface nsijsxmlhttprequest jetpack nsijetpack nsijetpackservice offlinestorage nsiapplicationcache nsiapplicationcachechannel nsiapplicati...
...siacceleration nsiaccelerationlistener nsiaccelerometer misc nsisound nsiwifimonitor document nsiwebnavigation environment nsienvironment event nsieventlistenerinfo nsieventlistenerservice nsieventtar
get exception nsiexception extention nsiextensionmanager nsiinstalllocation external nsiexternalprotocolservice frame nsicontentframemessagemanager history nsishentry nsishistory idle nsiidleservice interna...
XPCOM string functions
this is a low-level api.ns_cstring
getdatathe ns_cstring
getdata function gives the caller read access to the string's internal buffer.ns_cstring
getmutabledatathe ns_cstring
getmutabledata function gives the caller write access to the string's internal buffer.ns_cstringinsertdatathe ns_cstringinsertdata function appends data to the existing value of a nsacstring instance.
...this is a low-level api.ns_cstringsetdataran
gethe ns_cstringsetdatarange function copies data into a section of the string's internal buffer.
...this is a low-level api.ns_string
getdatathe ns_string
getdata function gives the caller access to the string's internal buffer.
...this is a low-level api.ns_stringsetdataran
gethe ns_stringsetdatarange function copies data into a section of the string's internal buffer.
already_AddRefed
already_addrefed<nsifoo>
getfoo() { nsifoo* foo = mfoo; ns_if_addref(foo); return foo; } // or already_addrefed<nsifoo>
getfoo() { nscomptr<nsifoo> foo = mfoo; // ...
... return foo.for
get(); } ...
... // the following assignment doesn't perform an additional addref, // as it would do if
getfoo() returned a raw pointer.
... nscomptr<nsifoo> foo =
getfoo(); see also nscomptr,
getteraddrefs(), dont_addref().
wrappedJSObject
// constructor function helloworld() { }; helloworld.prototype = { hello: function() { return "hello world!"; }, queryinterface: function(aiid) { if (!aiid.equals(components.interfaces.nsisupports) && !aiid.equals(components.interfaces.nsihelloworld)) throw components.results.ns_error_no_interface; return this; } }; xpconnect wrapping now let's
get a reference to our component.
... in this example we use
getservice, but as long as we
get the reference from xpcom, our component
gets wrapped by xpconnect in the same way: var comp = components.classes["@myself.com/my-component;1"].
getservice(); if we try to call the hello() method we defined in our component implementation, we
get: > comp.hello(); typeerror on line 1: comp.hello is not a function this happens because, as we mentioned earlier, comp is not the helloworld js object itself, but an xpconnect wrapper around it: > dump(comp); [xpconnect wrapped nsisupports] the idea of these wrappers is to make the javascript-implemented xpcom components look just like any other xpcom component to the user.
... more specifically, as xpconnect source comments say, you can
get comp.wrappedjsobject if three conditions are met: comp really is an xpconnect wrapper around a js object.
...for example: function helloworld() { this.wrappedjsobject = this; }; now we can
get the component directly: var comp = components.classes["@myself.com/my-component;1"] .
getservice().wrappedjsobject; this is a real js object: > comp [object object] so we can access any property on it: > comp.hello(); hello world!
Mail composition back end
faces nsimsgsendlistener nsimsgcopyservicelistener copy operations copy to sent folder drafts templates "send later" sending unsent messages sending unsent messages listener quoting sample programs overview i've done considerable work in the past few weeks reorganizing the mail composition back end, so i thought it would be helpful to put to
gether a small doc on the new interfaces and how one can use them.
...the setfcc() and
getfcc() methods are used by the caller to control if a message should be copied to the defined "sent" folder if the sending operation was successful.
...the determiniation of which folder is the "sent" folder for the user is done by a call to
getfolderswithflag() and the message store will control this user defined preference.
... if the setting for
getfcc() is set to true, the copy operation is automatically performed after a successful send operation.
Mail event system
for example, when a folder
gets a new message, its total message count increases.
...is example, a listener will be set up to be notified when the message count changes in a folder: // our variable to know if the listener fired var listenerhasfired = false; var totalmessageslistenerhasfired = false; // the listening function that will react to changes function myonintpropertychanged(item, property, oldvalue, newvalue) { listenerhasfired=true; var propertystring = property.
getunicode(); dump("onintpropertychanged has fired with property + " + propertystring + "!\n"); if (propertystring == "totalmessages") { totalmessageslistenerhasfired=true; //now show us visually var folder = item.queryinterface(components.interfaces.nsimsgfolder); dump("the folder " + folder.prettyname + " now has " + newvalue + " messages."); } else if (proper...
...
getservice(components.interfaces.nsimsgmailsession); mailsession.addlistener(folderlistener); // now test to see if integer stuff is firing at all // let's say "folder" is a folder we know about // first we need an atom to play with atomservice = components.classes["component://netscape/atom-service"].
...
getservice(components.interfaces.nsiatomservice); var testpropertyatom = atomservice.
getatom("testproperty"); // now fire the test notification folder.notifyintpropertychanged(testpropertyatom, 0, 100); // now we would do some operations to change the message count, such // as copying a message into this folder or something.
Building a Thunderbird extension 6: Adding JavaScript
in this step we will create a small piece of javascript code that inserts the current date into our statusbar wid
get.
... window.addeventlistener("load", function(e) { startup(); }, false); window.setinterval( function() { startup(); }, 60000); //update date every minute function startup() { var mypanel = document.
getelementbyid("my-panel"); var date = new date(); var day = date.
getday(); var datestring = date.
getfullyear() + "." + (date.
getmonth()+1) + "." + date.
getdate(); mypanel.label = "date: " + datestring; } the first part registers a new event listener that will be executed automatically when thunderbird loads.
... the event listener then calls our startup function which
gets our <statusbarpanel>-element with the id my-panel from the document's dom tree.
... it then uses javascript's date class to
get the current date, which it converts into a string that has the format of yyyy.mm.dd.
Zombie compartments
firefox’s own javascript code also
gets one or more compartments and so do add-on scripts.
...) ── style-sheets │ │ │ ├──0.33 mb (00.07%) -- dom │ │ │ │ ├──0.17 mb (00.04%) ── text-nodes │ │ │ │ ├──0.13 mb (00.03%) ── element-nodes │ │ │ │ ├──0.02 mb (00.00%) ── other │ │ │ │ ├──0.01 mb (00.00%) ── orphan-nodes │ │ │ │ └──0.00 mb (00.00%) ── event-tar
gets │ │ │ └──0.00 mb (00.00%) ── property-tables │ │ └───5.93 mb (01.19%) -- js-zone(0x13ffa0000) │ │ ├──1.92 mb (00.39%) ── unused-gc-things │ │ ├──1.28 mb (00.26%) -- lazy-scripts │ │ │ ├──1.03 mb (00.21%) ── gc-heap │ │ │ └──0.25 mb (00.05%) ── malloc-heap │ │ ├�...
... compartment(http://techcrunch.com/) compartment(http://www.facebook.com/plugins/like.php?...) compartment(https://plusone.google.com/_/+1/fastbutton?...) compartment(http://platform.twitter.com/wid
gets/...utton.html?...) compartment(http://cdn.at.atwola.com/_media/uac/tcode3.html) compartment(https://s-static.ak.fbcdn.net/connec..._proxy.php?...) compartment(http://ads.tw.adsonar.com/adserving/
getads.jsp?...) (some of those compartment urls are long and have been truncated.) another thing to beware is each compartment is created for an origin (e.g.
... restartless add-ons should also take special care that all their compartments
get destroyed after disabling or uninstalling the add-on.
CData
this provides a way to
get a pointer to the actual data of the c value represented by the cdata object.
...rmed, it is an attempt at readingmalformed function readaschar8thenaschar16(stringptr, known_len, jschar) { // when reading as jschar it assumes max length of 500 // stringptr is either char or jschar, if you know its jschar for sure, pass 2nd arg as true // if known_len is passed, then assumption is not made, at the known_len position in array we will see a null char // i tried
getting known_len from stringptr but its not possible, it has be known, i tried this: //"stringptr.contents.tostring()" "95" //"stringptr.tostring()" "ctypes.unsigned_char.ptr(ctypes.uint64("0x7f73d5c87650"))" // so as we see neither of these is 77, this is for the example of "_scratchpad/entehandle.js at master · noitidart/_scratchpad mdnfirefox" // tries to do read str...
...known_len : 500; var ptrasarr = ctypes.cast(stringptr, ctypes.unsigned_char.array(assumption_max_len).ptr).contents; // must cast to unsigned char (not ctypes.jschar, or ctypes.char) as otherwise i dont
get foreign characters, as they are got as negative values, and i should read till i find a 0 which is null terminator which will have unsigned_char code of 0 // can test this by reading a string like this: "_scratchpad/entehandle.js at master · noitidart/_scratchpad mdnfirefox" at js array position 36 (so 37 if count from 1), we see 183, and at 77 we see char code of 0 if casted to unsigned_char, if casted to char we see -73 at pos 36 but...
...log('debug-msg :: datacasted:', datacasted, uneval(datacasted), datacasted.tostring()); var charcode = []; var fromcharcode = [] for (var i=0; i<ptrasarr.length; i++) { //if known_len is correct, then will not hit null terminator so like in example of "_scratchpad/entehandle.js at master · noitidart/_scratchpad mdnfirefox" if you pass length of 77, then null term will not
get hit by this loop as null term is at pos 77 and we go till `< known_len` var thisunsignedcharcode = ptrasarr.addressofelement(i).contents; if (thisunsignedcharcode == 0) { // reached null terminator, break console.log('reached null terminator, at pos: ', i); break; } charcode.push(thisunsignedcharcode);...
Plug-in Side Plug-in API - Plugins
np_
getentrypoints undocumented.
... np_
getmimedescription registers the mime types supported by the plug-in (unix, mac os).
... npp_
getvalue allows the browser to query the plug-in for information.
... np_
getvalue allows the browser to query the plug-in for information.
Accessibility Inspector - Firefox Developer Tools
you can click on the "tar
get" icon that comes after it to select the node in the page inspector.
... hovering over the "tar
get" icon highlights the dom node in the page content.
... print accessibility tree to json you can print the contents of the accessibility tree to json by right-clicking on an entry in the accessibility tab and selecting print to json: when you do, you will
get a new tab with the selected accessibility tree loaded into the json viewer: once opened, you can save or copy the data as necessary.
...note, however, that if you hold the shift key down when "performing a pick", you can "preview" the accessibility object in the tree (and its properties in the right-hand pane), but then continue picking as many times as you like (the picker does not
get cancelled) until you release the shift key.
Debugging service workers - Firefox Developer Tools
when you open the application panel’s service workers view on a page that doesn't have a service worker registered, you'll
get the following output shown: this gives you some advice on what to do if you don't have a service worker registered, and were perhaps expecting there to be one registered!
...
getting your service worker to register before you can look at your service worker in action in the applications panel, you need to successfully register it.
... registration is done with a block of code along these lines, using the register() method: if('serviceworker' in navigator) { navigator.serviceworker .register('sw.js') .then(function() { console.log('service worker registered'); }); } if you
get the path wrong, for example, you'll
get an error in the web console giving you a hint as to what's wrong, which depends on what exactly is wrong with the code.
... you can also click on one of the individual items stored in the cache, then right/ctrl click on it to
get options for deleting just that item, or every item in the cache.
Highlight and inspect DOM nodes - Firefox Developer Tools
a dom object in the watch expressions area, for example, includes a tar
get.
... hover over the tar
get to highlight the item on the page, click on the tar
get to switch to the page inspector with the item highlighted.
... also, when you view the details of a dom node in the code panel, objects that you can highlight in the list will also have a tar
get next to them.
... you can click any one of these tar
gets to switch to the page inspector with this item highlighted.
Debugger.Environment - Firefox Developer Tools
(if more than one debugger instance is debugging the same code, each debugger
gets a separate debugger.environment instance for a given environment.
...when true,
getvariable returns an ordinary javascript object whose optimizedout property is true on all bindings, and setvariable throws a referenceerror.
...
getvariable(name) return the value of the variable bound toname in this environment, or undefined if this environment does not bindname.name must be a string that is a valid ecmascript identifier name.
...if the given variable should be in scope, but
getvariable is unable to produce its value, it returns an ordinary javascript object (not a debugger.object instance) whose optimizedout property is true.
Waterfall - Firefox Developer Tools
event phase for example, "tar
get" or "capture".
... type always "for
getskippable".
... using the frame rate tool and the waterfall to
gether, it's easy to see when long-running javascript is causing responsiveness problems.
... for example, consider code like this: var timerbutton = document.
getelementbyid("timer"); timerbutton.addeventlistener("click", handleclick, false); function handleclick() { console.time("timer"); runtimer(1000).then(timerfinished); } function timerfinished() { console.timeend("timer"); console.log("ready!"); } function runtimer(t) { return new promise(function(resolve) { settimeout(resolve, t); }); } the waterfall will display a marker for the...
AddressErrors - Web APIs
please check for any errors."; const invalidcountryerror = "at this time, we only ship to the united states, canada, great britain, japan, china, and germany."; let shippingaddress = ev.tar
get.shippingaddress; let shippingaddresserrors = {}; let updatedetails = {}; if (!validcountries.includes(shippingaddress.country)) { ev.tar
get.shippingoptions = []; shippingaddresserrors.country = invalidcountryerror; updatedetails = { error: genericaddresserror, shippingaddresserrors, ...defaultpaymentdetails }; } ev.updatewith(updatedetails); } see h...
...please check for any errors."; const invalidcountryerror = "at this time, we only ship to the united states, canada, great britain, japan, china, and germany."; let shippingaddress = ev.tar
get.shippingaddress; let shippingaddresserrors = {}; let updatedetails = {}; if (!validcountries.includes(shippingaddress.country)) { ev.tar
get.shippingoptions = []; shippingaddresserrors.country = invalidcountryerror; updatedetails = { error: genericaddresserror, shippingaddresserrors, ...defaultpaymentdetails }; } ev.updatewith(updatedetails); } the s...
...hippingaddresschange event doesn't receive the paymentrequest object directly, so we fetch it from the tar
get property of the event.
... window.addeventlistener("load", function(ev) { document.
getelementbyid("pay").addeventlistener("click", process, false); }, false); see addeventlistener() for information about event handlers and how they work.
AudioContext.createMediaStreamSource() - Web APIs
the createmediastreamsource() method of the audiocontext interface is used to create a new mediastreamaudiosourcenode object, given a media stream (say, from a mediadevices.
getusermedia instance), the audio from which can then be played and manipulated.
... example in this example, we grab a media (audio + video) stream from navigator.
getusermedia, feed the media into a <video> element to play then mute the audio, but then also feed the audio into a mediastreamaudiosourcenode.
... var pre = document.queryselector('pre'); var video = document.queryselector('video'); var myscript = document.queryselector('script'); var range = document.queryselector('input'); //
getusermedia block - grab stream // put it into a mediastreamaudiosourcenode // also output the visuals into a video element if (navigator.mediadevices) { console.log('
getusermedia supported.'); navigator.mediadevices.
getusermedia ({audio: true, video: true}) .then(function(stream) { video.srcobject = stream; video.onloadedmetadata = function(e) { video.play()...
... = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination, so we can play the // music and adjust the volume using the mouse cursor source.connect(biquadfilter); biquadfilter.connect(audioctx.destination); //
get new mouse pointer coordinates when mouse is moved // then set new gain value range.oninput = function() { biquadfilter.gain.value = range.value; } }) .catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('
getusermedia not supported on your browser!'); } // dump script to pre element pre...
AudioContext.createMediaStreamTrackSource() - Web APIs
example in this example,
getusermedia() is used to request access to the user's microphone.
... once that access is attained, an audio context is established and a mediastreamtrackaudiosourcenode is created using createmediastreamtracksource(), taking its audio from the first audio track in the stream returned by
getusermedia().
... navigator.mediadevices.
getusermedia ({audio: true, video: false}) .then(function(stream) { audio.srcobject = stream; audio.onloadedmetadata = function(e) { audio.play(); audio.muted = true; }; let audioctx = new audiocontext(); let source = audioctx.createmediastreamsource(stream); let biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 3000; biquadfilter.gain.value = 20; source.connect(biquadfilt...
...er); biquadfilter.connect(audioctx.destination); }) .catch(function(err) { // handle
getusermedia() error }); specifications specification status comment web audio apithe definition of 'createmediastreamtracksource()' in that specification.
AudioContext - Web APIs
the audiocontext interface represents an audio-processing graph built from audio modules linked to
gether, each represented by an audionode.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" tar
get="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor audiocontext() creates and returns a new audiocontext object.
... audiocontext.
getoutputtimestamp() returns a new audiotimestamp object containing two audio timestamp values relating to the current audio context.
AudioParamDescriptor - Web APIs
if the underlying audioworkletprocessor has a parameterdescriptors static
getter, then the returned array of objects based on this dictionary is used internally by audioworkletnode constructor to populate its parameters property accordingly.
... we expand the processor by adding a static parameterdescriptors
getter.
... // white-noise-processor.js class whitenoiseprocessor extends audioworkletprocessor { static
get parameterdescriptors () { return [{ name: 'customgain', defaultvalue: 1, minvalue: 0, maxvalue: 1, automationrate: 'a-rate' }] } process (inputs, outputs, parameters) { const output = outputs[0] output.foreach(channel => { for (let i = 0; i < channel.length; i++) { channel[i] = (math.random() * 2 - 1) * (parameters['customgain'].length > 1 ?
... const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('white-noise-processor.js') const whitenoisenode = new audioworkletnode(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) now we can change the gain on the node like this: const gainparam = whitenoisenode.parameters.
get('customgain') gainparam.setvalueattime(0, audiocontext.currenttime) gainparam.linearramptovalueattime(0.5, audiocontext.currenttime + 0.5) specifications specification status comment web audio apithe definition of 'audioparamdescriptor' in that specification.
AudioProcessingEvent - Web APIs
property type description tar
get read only eventtar
get the event tar
get (the topmost tar
get in the dom tree).
...lector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function
getdata() { request = new xmlhttprequest(); request.open('
get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } ...
...is the song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.
getchanneldata(channel); var outputdata = outputbuffer.
getchanneldata(channel); // loop through the 4096 samples for (var sample = 0; sample < inputbuffer.length; sample++) { // make output equal to the same as the input outputdata[sample] = inputdata[sample]; // add noise to each output sample outputdata[sample] += ((math.random() * 2) - 1) * 0.2; }...
... } }
getdata(); // wire up play button playbutton.onclick = function() { source.connect(scriptnode); scriptnode.connect(audioctx.destination); source.start(); } // when the buffer source stops playing, disconnect everything source.onended = function() { source.disconnect(scriptnode); scriptnode.disconnect(audioctx.destination); } ...
AudioTrack - Web APIs
this id can be used to locate a specific track within an audio track list by calling audiotracklist.
gettrackbyid().
... usage notes to
get an audiotrack for a given media element, use the element's audiotracks property, which returns an audiotracklist object from which you can
get the individual tracks contained in the media: var el = document.queryselector("video"); var tracks = el.audiotracks; you can then access the media's individual tracks using either array syntax or functions such as foreach().
... this first example
gets the first audio track on the media: var firsttrack = tracks[0]; the next example scans through all of the media's audio tracks, enabling any that are in the user's preferred language (taken from a variable userlanguage) and disabling any others.
... function
gettracklist(el) { var tracklist = []; const wantedkinds = [ "main", "alternative", "main-desc", "translation", "commentary" ]; el.audiotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({ id: track.id, kind: track.kind, label: track.label }); } }); return tracklist; } the resulting tracklist contains a...
AudioTrackList - Web APIs
properties this interface also inherits properties from its parent interface, eventtar
get.
... methods this interface also inherits methods from its parent interface, eventtar
get.
...
gettrackbyid() returns the audiotrack found within the audiotracklist whose id matches the specified string.
... examples
getting a media element's audio track list to
get a media element's audiotracklist, use its audiotracks property.
AudioWorkletNode.parameters - Web APIs
they are instantiated during creation of the underlying audioworkletprocessor according to its parameterdescriptors static
getter.
... we expand the processor by adding a static parameterdescriptors
getter.
... // white-noise-processor.js class whitenoiseprocessor extends audioworkletprocessor { static
get parameterdescriptors () { return [{ name: 'customgain', defaultvalue: 1, minvalue: 0, maxvalue: 1, automationrate: 'a-rate' }] } process (inputs, outputs, parameters) { const output = outputs[0] output.foreach(channel => { for (let i = 0; i < channel.length; i++) { channel[i] = (math.random() * 2 - 1) * (parameters['customgain'].length > 1 ?
... const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('white-noise-processor.js') const whitenoisenode = new audioworkletnode(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) now we can change the gain on the node like this: const gainparam = whitenoisenode.parameters.
get('customgain') gainparam.setvalueattime(0, audiocontext.currenttime) gainparam.linearramptovalueattime(0.5, audiocontext.currenttime + 0.5) specifications specification status comment web audio apithe definition of 'parameters' in that specification.
BaseAudioContext.decodeAudioData() - Web APIs
older callback syntax in this example, the
getdata() function uses xhr to load an audio track, setting the responsetype of the request to arraybuffer so that it returns an array buffer as its response that we then store in the audiodata variable .
... the buttons in the example simply run
getdata() to load the track and start it playing, and stop it playing, respectively.
...// then we put the buffer into the source function
getdata() { source = audioctx.createbuffersource(); var request = new xmlhttprequest(); request.open('
get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { source.buffer = buffer; source.connect(audioctx.destination); source.l...
...oop = true; }, function(e){ console.log("error with decoding audio data" + e.err); }); } request.send(); } // wire up buttons to stop and play audio play.onclick = function() {
getdata(); source.start(0); play.setattribute('disabled', 'disabled'); } stop.onclick = function() { source.stop(0); play.removeattribute('disabled'); } // dump script to pre element pre.innerhtml = myscript.innerhtml; new promise-based syntax ctx.decodeaudiodata(audiodata).then(function(decodeddata) { // use the decoded data here }); specifications specification status comment web audio apithe definition of 'decodeaudiodata()' in that specification.
BaseAudioContext - Web APIs
a baseaudiocontext can be a tar
get of events, therefore it implements the eventtar
get interface.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/base...
...audiocontext" tar
get="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">baseaudiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties baseaudiocontext.audioworklet read only secure context returns the audioworklet object, which can be used to create and manage audionodes in which javascript code implementing the audioworkletprocessor interface are run in the background to process audio data.
... methods also implements methods from the interface eventtar
get.
Bluetooth - Web APIs
interface interface bluetooth : eventtar
get { promise<boolean>
getavailability(); attribute eventhandler onavailabilitychanged; [sameobject] readonly attribute bluetoothdevice?
... referringdevice; promise<sequence<bluetoothdevice>>
getdevices(); promise<bluetoothdevice> requestdevice(optional requestdeviceoptions options = {}); }; bluetooth includes bluetoothdeviceeventhandlers; bluetooth includes characteristiceventhandlers; bluetooth includes serviceeventhandlers; properties inherits properties from its parent eventtar
get.
... methods bluetooth.
getavailability() returns a promise that resolved to a boolean indicating whether the user-agent has the ability to support bluetooth.
... bluetooth.
getdevices() returns a promise that resolved to an array of bluetoothdevices which the origin already obtained permission for via a call to bluetooth.requestdevice().
BluetoothRemoteGATTCharacteristic - Web APIs
value; promise<bluetoothremotegattdescriptor>
getdescriptor(bluetoothdescriptoruuid descriptor); promise<sequence<bluetoothremotegattdescriptor>>
getdescriptors(optional bluetoothdescriptoruuid descriptor); promise<dataview> readvalue(); promise<void> writevalue(buffersource value); promise<void> startnotifications(); promise<void> stopnotifications(); }; bluetoothremotegattcharacteristic implements eventtar
get; bluetoothremotegatt...
...this value
gets updated when the value of the characteristic is read or updated via a notification or indication.
... methods bluetoothremotegattcharacteristic.
getdescriptor() returns a promise that resolves to the first bluetoothgattdescriptor for a given descriptor uuid.
... bluetoothremotegattcharacteristic.
getdescriptors() returns a promise that resolves to an array of all bluetoothgattdescriptor objects for a given descriptor uuid.
Body.arrayBuffer() - Web APIs
when pressed, the
getdata() function is run.
...if you need to play ogg during downloading (stream it) - consider htmlaudioelement: new audio("music.ogg").play(); in
getdata() we create a new request using the request() constructor, then use it to fetch an ogg music track.
... once
getdata() has finished running, we start the audio source playing with start(0), then disable the play button so it can't be clicked again when it is already playing (this would cause an error.) function
getdata() { source = audioctx.createbuffersource(); var myrequest = new request('viper.ogg'); fetch(myrequest).then(function(response) { return response.arraybuffer(); }).then(function(buffer) { audioctx.decod...
...eaudiodata(buffer, function(decodeddata) { source.buffer = decodeddata; source.connect(audioctx.destination); }); }); }; // wire up buttons to stop and play audio play.onclick = function() {
getdata(); source.start(0); play.setattribute('disabled', 'disabled'); } reading files the response() constructor accepts files and blobs, so it may be used to read a file into other formats.
CSSMathSum - Web APIs
a cssmathsum is the object type returned when the stylepropertymapreadonly.
get() method is used on a css property whosevalue is created with a calc() function.
... <div>has width</div> we assign a width div { width: calc(30% - 20px); } we add the javascript const stylemap = document.queryselector('div').computedstylemap(); console.log( stylemap.
get('width') ); // cssmathsum {values: cssnumericarray, operator: "sum"} console.log( stylemap.
get('width').operator ); // 'sum' console.log( stylemap.
get('width').values ); // cssnumericarray {0: cssunitvalue, 1: cssunitvalue, length: 2} console.log( stylemap.
get('width').values[0] ); // cssunitvalue {value: 30, unit: "percent"} console.log( stylemap.
get('wi...
...dth').values[0].value ); // 30 console.log( stylemap.
get('width').values[0].unit ); // 'percent' console.log( stylemap.
get('width').values[1] ); // cssunitvalue {value: -20, unit: "px"} console.log( stylemap.
get('width').values[1].value ); // -20 console.log( stylemap.
get('width').values[1].unit ); // 'px' the specification is still evolving.
... in the future we may write the last three lines as: console.log( stylemap.
get('width').values[1] ); // cssmathnegate {value: cssunitvalue, operator: "negate"} console.log( stylemap.
get('width').values[1].value ); // cssunitvalue {value: 20, unit: "px"} console.log( stylemap.
get('width').values[1].value.unit ); // 'px' specifications specification status comment css typed om level 1the definition of 'cssmathsum' in that specification.
CSSPseudoElement - Web APIs
the csspseudoelement interface represents a pseudo-element that may be the tar
get of an event or animated using the web animations api.
... methods csspseudoelement extends eventtar
get, so it inherits the following methods: eventtar
get.addeventlistener() registers an event handler of a specific event type on the pseudo-element.
... eventtar
get.dispatchevent() dispatches an event to this pseudo-element.
... eventtar
get.removeeventlistener() removes an event listener from the pseudo-element.
CSSStyleDeclaration - Web APIs
via window.
getcomputedstyle(), which exposes the cssstyledeclaration object as a read-only interface.
... methods cssstyledeclaration.
getpropertypriority() returns the optional priority, "important".
... cssstyledeclaration.
getpropertyvalue() returns the property value given a property name.
... cssstyledeclaration.
getpropertycssvalue() only supported via
getcomputedstyle in firefox.
CanvasRenderingContext2D.putImageData() - Web APIs
note: image data can be retrieved from a canvas using the
getimagedata() method.
... html <canvas id="canvas"></canvas> javascript var canvas = document.
getelementbyid('canvas'); var ctx = canvas.
getcontext('2d'); function putimagedata(ctx, imagedata, dx, dy, dirtyx, dirtyy, dirtywidth, dirtyheight) { var data = imagedata.data; var height = imagedata.height; var width = imagedata.width; dirtyx = dirtyx || 0; dirtyy = dirtyy || 0; dirtywidth = dirtywidth !== undefined?
... var pos = y * width + x; ctx.fillstyle = 'rgba(' + data[pos*4+0] + ',' + data[pos*4+1] + ',' + data[pos*4+2] + ',' + (data[pos*4+3]/255) + ')'; ctx.fillrect(x + dx, y + dy, 1, 1); } } } // draw content onto the canvas ctx.fillrect(0, 0, 100, 100); // create an imagedata object from it var imagedata = ctx.
getimagedata(0, 0, 100, 100); // use the putimagedata function that illustrates how putimagedata works putimagedata(ctx, imagedata, 150, 0, 50, 50, 25, 25); result data loss due to browser optimization due to the lossy nature of converting to and from premultiplied alpha color values, pixels that have just been set using putimagedata() might be returned to an equivalent
getimagedata() as diff...
... javascript const canvas = document.createelement("canvas"); canvas.width = 1; canvas.height = 1; const context = canvas.
getcontext("2d"); const imgdata = context.
getimagedata(0, 0, canvas.width, canvas.height); const pixels = imgdata.data; pixels[0 + 0] = 1; pixels[0 + 1] = 127; pixels[0 + 2] = 255; pixels[0 + 3] = 1; console.log("before:", pixels); context.putimagedata(imgdata, 0, 0); const imgdata2 = context.
getimagedata(0, 0, canvas.width, canvas.height); const pixels2 = imgdata2.data; console.log("after:", pixels2); the output might look like: before: uint8clampedarray(4) [ 1, 127, 255, 1 ] after: uint8clampedarray(4) [ 255, 255, 255, 1 ] specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d...
ContentIndex - Web APIs
contentindex.
getall returns a promise that resolves with an iterable list of content index entries.
... examples feature detection and interface access here we
get a reference to the serviceworkerregistration, then check for the index property, which gives us access to the content index interface.
... async function createreadinglist() { // access our service worker registration const registration = await navigator.serviceworker.ready; //
get our index entries const entries = await registration.index.
getall(); // create a containing element const readinglistelem = document.createelement('div'); // test for entries if (!array.length) { // if there are no entries, display a message const message = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' re...
...they are accessible from the workerglobalscope.self property: // service worker script self.registration.index.add(item); self.registration.index.delete(item.id); const contentindexitems = self.registration.index.
getall(); specifications specification status comment unknownthe definition of 'contentindex' in that specification.
DataTransfer.dropEffect - Web APIs
for example, when the user hovers over a tar
get drop element, the browser's cursor may indicate which type of operation will occur.
...on
getting, it returns its current value.
... </p> </div> <div id="tar
get" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css content div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #tar
get { border: 1px solid black; } javascript content function dragstart_handler(ev) { console.log("dragstart: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfe...
...r.effectallowed); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.datatransfer.setdata("text", ev.tar
get.id); ev.datatransfer.effectallowed = "move"; } function drop_handler(ev) { console.log("drop: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.preventdefault(); //
get the id of the tar
get and add the moved element to the tar
get's dom var data = ev.datatransfer.
getdata("text"); ev.tar
get.appendchild(document.
getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.preventdefault(); // set the dropeffect to move ev.
DataTransfer.setData() - Web APIs
return value void example this example shows the use of the datatransfer object's
getdata(), setdata() and cleardata() methods.
... <!doctype html> <html lang=en> <title>examples of datatransfer's setdata(),
getdata() and cleardata()</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #tar
get { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttar
get.style.border = "dashed"; // set the drag's format and data.
... use the event tar
get's id for the data ev.datatransfer.setdata("text/plain", ev.tar
get.id); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); //
get the data, which is the id of the drop tar
get var data = ev.datatransfer.
getdata("text"); ev.tar
get.appendchild(document.
getelementbyid(data)); // clear the drag data cache (for all formats/types) ev.datatransfer.cleardata(); } </script> <body> <h1>examples of <code>datatransfer</code>: <code>setdata()</code>, <code>
getdata()</code>, <code>cleardata()</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move t...
...he element.</p> </div> <div id="tar
get" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'setdata()' in that specification.
DataTransfer.setDragImage() - Web APIs
when a drag occurs, a translucent image is generated from the drag tar
get (the element the dragstart event is fired at), and follows the mouse pointer during the drag.
... demo <!doctype html> <html lang=en> <title>example of datatransfer.setdragimage()</title> <meta name="viewport" content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #tar
get { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart"); // set the drag's format and data.
... use the event tar
get's id for the data ev.datatransfer.setdata("text/plain", ev.tar
get.id); // create an image and use it for the drag image // note: change "example.gif" to an existing image or the image will not // be created and the default drag image will be used.
... var img = new image(); img.src = 'example.gif'; ev.datatransfer.setdragimage(img, 10, 10); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); //
get the data, which is the id of the drop tar
get var data = ev.datatransfer.
getdata("text"); ev.tar
get.appendchild(document.
getelementbyid(data)); } </script> <body> <h1>example of <code>datatransfer.setdragimage()</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="tar
get" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> ...
DataTransfer - Web APIs
properties standard properties datatransfer.dropeffect
gets the type of drag-and-drop operation currently selected or sets the operation to a new type.
... datatransfer.
getdata() retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.
... datatransfer.moz
getdataat() retrieves the data associated with the given format for an item at the specified index, or null if it does not exist.
... living standard mozcursor, mozitemcount, mozsourcenode, mozusercancelled, addelement(), mozcleardataat(), moz
getdataat(), mozsetdataat() and moztypesat are gecko specific.
DataTransferItemList.add() - Web APIs
html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="tar
get" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #tar
get { border: 1px solid black; } javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add...
... to its tree var datalist = ev.datatransfer.items; datalist.add(ev.tar
get.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
.....</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the tar
get node data[i].
getasstring(function (s){ ev.tar
get.appendchild(document.
getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].
getasstring(function (s){ console.log("...
... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri data[i].
getasstring(function (s){ console.log("...
DataTransferItemList.clear() - Web APIs
html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="tar
get" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #tar
get { border: 1px solid black; } javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // kno...
...w which element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.tar
get.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
.....</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the tar
get node data[i].
getasstring(function (s){ ev.tar
get.appendchild(document.
getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].
getasstring(function (s){ console.log("...
... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri data[i].
getasstring(function (s){ console.log("...
DataTransferItemList.length - Web APIs
javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.tar
get.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
...h ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the tar
get node data[i].
getasstring(function (s){ ev.tar
get.appendchild(document.
getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].
getasstring(function (s){ console.log("...
... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri data[i].
getasstring(function (s){ console.log("...
...on dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; // clear any remaining drag data datalist.clear(); } html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="tar
get" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #tar
get { border: 1px solid black; } result drag and drop demo link specifications specification status comment html living standardthe definition of 'length' in that specificatio...
DataTransferItemList.remove() - Web APIs
javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.tar
get.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
.....</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the tar
get node data[i].
getasstring(function (s){ ev.tar
get.appendchild(document.
getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html data[i].
getasstring(function (s){ console.log("...
... drop: html = " + s); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/uri-list'))) { // drag data item is uri data[i].
getasstring(function (s){ console.log("...
...); } // clear any remaining drag data datalist.clear(); } html <h1>example uses of <code>datatransferitemlist</code> methods and property</h1> <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="tar
get" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #tar
get { border: 1px solid black; } specifications specification status comment html living standardthe definition of 'remove()' in that specification.
Document.createProcessingInstruction() - Web APIs
syntax pinode = document.createprocessinginstruction(tar
get, data) parameters pinode is the resulting processinginstruction node.
... tar
get is a string containing the first part of the processing instruction (i.e., <?tar
get … ?>) data is a string containing any information the processing instruction should carry, after the tar
get.
... exceptions dom_invalid_character throws if either of the following are true: the processing instruction tar
get is invalid — it should be a valid xml name that doesn't contain "xml", "xml", or any case combination of the two, other than standardized ones such as <?xml-stylesheet ?>.
... obsolete added note that the namespace of the tar
get name is not checked whether it is well-formed, defined what is considered an illegal character for the tar
get name and specified the returned processinginstruction object more precisely.
Document.createTouch() - Web APIs
syntax var touch = documenttouch.createtouch(view, tar
get, identifier, pagex, pagey, screenx, screeny); parameters note: all parameters are optional.
... tar
get the eventtar
get for the touch.
... in following code snippet, two touch objects are created for the tar
get element.
... var tar
get = document.
getelementbyid("tar
get"); var touch1 = document.createtouch(window, tar
get, 1, 15, 20, 35, 40); var touch2 = document.createtouch(window, tar
get, 2, 25, 30, 45, 50); specifications specification status comment touch eventsthe definition of 'document.createtouch()' in that specification.
DocumentFragment - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documentfragment" tar
get="_top"><rect x="266" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">documentfragment...
... documentfragment.
getelementbyid() returns the first element node within the documentfragment, in document order, that matches the specified id.
... functionally equivalent to document.
getelementbyid().
EXT_texture_filter_anisotropic - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... constants ext.max_texture_max_anisotropy_ext this is the pname argument to the gl.
getparameter() call, and it returns the maximum available anisotropy.
... ext.texture_max_anisotropy_ext this is the pname argument to the gl.
gettexparameter() and gl.texparameterf() / gl.texparameteri() calls and sets the desired maximum anisotropy for a texture.
... examples var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); var ext = ( gl.
getextension('ext_texture_filter_anisotropic') || gl.
getextension('moz_ext_texture_filter_anisotropic') || gl.
getextension('webkit_ext_texture_filter_anisotropic') ); if (ext){ var max = gl.
getparameter(ext.max_texture_max_anisotropy_ext); gl.texparameterf(gl.texture_2d, ext.texture_max_anisotropy_ext, max); } specifications specification status comment ext_texture_filter_anisotropicthe definition of 'ext_texture_filter_anisotropic' in that specification.
Element.classList - Web APIs
elete this[len], proto.length -= 1, proto.value = resstr; } skippropchange = 1, ele.classname = proto.value, skippropchange = 0; }; window.domtokenlist = domtokenlist; function whenpropchanges(){ var evt = window.event, prop = evt.propertyname; if ( !skippropchange && (prop==="classname" || (prop==="classlist" && !defineproperty)) ) { var tar
get = evt.srcelement, protoobjproto = tar
get[" uclp"], strval = "" + tar
get[prop]; var tokens=strval.trim().split(wsre), restokenlist=tar
get[prop==="classlist"?" ucl":"classlist"]; var oldlen = protoobjproto.length; a: for(var ci = 0, clen = protoobjproto.length = tokens.length, sub = 0; ci !== clen; ++ci){ for(var inneri=0; inneri!==ci; ++inneri) i...
...f(tokens[inneri]===tokens[ci]) {sub++; continue a;} restokenlist[ci-sub] = tokens[ci]; } for (var i=clen-sub; i < oldlen; ++i) delete restokenlist[i]; //remove trailing indexs if(prop !== "classlist") return; skippropchange = 1, tar
get.classlist = restokenlist, tar
get.classname = strval; skippropchange = 0, restokenlist.length = tokens.length - sub; } } function polyfillclasslist(ele){ if (!ele || !("innerhtml" in ele)) throw typeerror("illegal invocation"); ele.detachevent( "onpropertychange", whenpropchanges ); // prevent duplicate handler infinite loop allowtokenlistconstruction = 1; try{ function protoobj(){} protoobj.prototype = new domtokenlist(); } finally...
... for (var inneri=0; inneri !== ci; ++inneri) if (toks[inneri] === toks[ci]) { sub++; continue a; } this[ci-sub] = toks[ci]; } protoobjproto.length = clen-sub, protoobjproto.value = ele.classname, protoobjproto[" ucl"] = ele; if (defineproperty) { defineproperty(ele, "classlist", { // ie8 & ie9 allow defineproperty on the dom enumerable: 1,
get: function(){return restokenlist}, configurable: 0, set: function(newval){ skippropchange = 1, ele.classname = protoobjproto.value = (newval += ""), skippropchange = 0; var toks = newval.trim().split(wsre), oldlen = protoobjproto.length; a: for(var ci = 0, clen = protoobjproto.length = toks.length, sub = 0; ci !== clen; ++ci){ ...
... ele[" ucl"]=restokenlist, ele[" uclp"]=protoobj.prototype; } ele.attachevent( "onpropertychange", whenpropchanges ); } try { // much faster & cleaner version for ie8 & ie9: // should work in ie8 because element.prototype instanceof node is true according to the specs window.object.defineproperty(window.element.prototype, "classlist", { enumerable: 1,
get: function(val){ if (!hasownprop.call(this, "classlist")) polyfillclasslist(this); return this.classlist; }, configurable: 0, set: function(val){this.classname = val} }); } catch(e) { // less performant fallback for older browsers (ie 6-8): window[" ucl"] = polyfillclassli...
Element.currentStyle - Web APIs
element.currentstyle is a proprietary property which is similar to the standardized window.
getcomputedstyle() method.
...however, it returns the units set in css while window.
getcomputedstyle() returns the values in pixels.
... polyfill this polyfill returns the values in pixels and is likely to be rather slow, as it has to call window.
getcomputedstyle() every time its value is read.
... * http://creativecommons.org/publicdomain/zero/1.0/ */ if (!("currentstyle" in element.prototype)) { object.defineproperty(element.prototype, "currentstyle", {
get: function() { return window.
getcomputedstyle(this); } }); } specification not part of any specification.
Element.insertAdjacentElement() - Web APIs
syntax tar
getelement.insertadjacentelement(position, element); parameters position a domstring representing the position relative to the tar
getelement; must match (case-insensitively) one of the following strings: 'beforebegin': before the tar
getelement itself.
... 'afterbegin': just inside the tar
getelement, before its first child.
... 'beforeend': just inside the tar
getelement, after its last child.
... 'afterend': after the tar
getelement itself.
Element.outerHTML - Web APIs
the outerhtml attribute of the element dom interface
gets the serialized html fragment describing the element including its descendants.
... examples
getting the value of an element's outerhtml property: html <div id="d"> <p>content</p> <p>further elaborated</p> </div> javascript var d = document.
getelementbyid("d"); console.log(d.outerhtml); // the string '<div id="d"><p>content</p><p>further elaborated</p></div>' // is written to the console window replacing a node by setting the outerhtml property: html <div id="container"> <div ...
...id="d">this is a div.</div> </div> javascript var container = document.
getelementbyid("container"); var d = document.
getelementbyid("d"); console.log(container.firstchild.nodename); // logs "div" d.outerhtml = "<p>this paragraph replaced the original div.</p>"; console.log(container.firstchild.nodename); // logs "p" // the #d div is no longer part of the document tree, // the new paragraph replaced it.
...for example: var div = document.createelement("div"); div.outerhtml = "<div class=\"test\">test</div>"; console.log(div.outerhtml); // output: "<div></div>" also, while the element will be replaced in the document, the variable whose outerhtml property was set will still hold a reference to the original element: var p = document.
getelementsbytagname("p")[0]; console.log(p.nodename); // shows: "p" p.outerhtml = "<div>this div replaced a paragraph.</div>"; console.log(p.nodename); // still "p"; the returned value will contain html escaped attributes: var anc = document.createelement("a"); anc.href = "https://developer.mozilla.org?a=b&c=d"; console.log(anc.outerhtml); // output: "<a href='https://developer.mozilla.org?a=b&am...
Element.setCapture() - Web APIs
call this method during the handling of a mousedown event to retar
get all mouse events to this element until the mouse button is released or document.releasecapture() is called.
... syntax element.setcapture(retar
gettoelement); retar
gettoelement if true, all events are tar
geted directly to this element; if false, events can also fire at descendants of this element.
... <html> <head> <title>mouse capture example</title> <style type="text/css"> #mybutton { border: solid black 1px; color: black; padding: 2px; box-shadow: black 2px 2px; } </style> <script type="text/javascript"> function init() { var btn = document.
getelementbyid("mybutton"); if (btn.setcapture) { btn.addeventlistener("mousedown", mousedown, false); btn.addeventlistener("mouseup", mouseup, false); } else { document.
getelementbyid("output").innerhtml = "sorry, there appears to be no setcapture support on this browser"; } } function mousedown(e) { e.tar
get.setcapture(); e.ta...
...r
get.addeventlistener("mousemove", mousemoved, false); } function mouseup(e) { e.tar
get.removeeventlistener("mousemove", mousemoved, false); } function mousemoved(e) { var output = document.
getelementbyid("output"); output.innerhtml = "position: " + e.clientx + ", " + e.clienty; } </script> </head> <body onload="init()"> <p>this is an example of how to use mouse capture on elements in gecko 2.0.</p> <p><a id="mybutton" href="#">test me</a></p> <div id="output">no events yet</div> </body> </html> view live examples notes the element may not be scrolled completely to the top or bottom, depending on the layout of other elements.
Event.msConvertURL() - Web APIs
syntax var retval = dragevent.msconverturl(file, tar
gettype, tar
geturl); parameters file [in] type: file the file object to be converted.
... tar
gettype [in] type: domstring one of the following values indicating the desired conversion type: "specified", "base64", or "unchanged".
... tar
geturl [in, optional] type: url the tar
get url.
... example var bloblist = []; document.
getelementbyid("pastezone").addeventlistener('paste', handlepaste, false); function handlepaste(evt) { var filelist = window.clipboarddata.files; // note that window.datatransfer.files is not applicable.
Event.preventDefault() - Web APIs
the event interface's preventdefault() method tells the user agent that if the event does not
get explicitly handled, its default action should not be taken as it normally would be.
... as noted below, calling preventdefault() for a non-cancelable event, such as one dispatched via eventtar
get.dispatchevent(), without specifying cancelable: true has no effect.
...this example demonstrates how to prevent that from happening: javascript document.queryselector("#id-checkbox").addeventlistener("click", function(event) { document.
getelementbyid("output-box").innerhtml += "sorry!
...first, listen for keypress events: var mytextbox = document.
getelementbyid('my-textbox'); mytextbox.addeventlistener('keypress', checkname, false); the checkname() function, which looks at the pressed key and decides whether to allow it: function checkname(evt) { var charcode = evt.charcode; if (charcode != 0) { if (charcode < 97 || charcode > 122) { evt.preventdefault(); displaywarning( "please use lowercase letters only." ...
GeolocationCoordinates.longitude - Web APIs
to
gether with a domtimestamp indicating a time of measurement, the geolocationcoordinates object is part of the geolocationposition interface, which is the object type returned by geolocation api functions that obtain and return a geographical position.
... let button = document.
getelementbyid("
get-location"); let lattext = document.
getelementbyid("latitude"); let longtext = document.
getelementbyid("longitude"); button.addeventlistener("click", function() { navigator.geolocation.
getcurrentposition(function(position) { let lat = position.coords.latitude; let long = position.coords.longitude; lattext.innertext = lat.tofixed(2); longtext.innertext = long.tof...
... upon receiving a click event, we call
getcurrentposition() to request the device's current position.
...</p> <button id="
get-location">
get my location </button> result take this example for a test drive here: specifications specification status comment geolocation apithe definition of 'coordinates.longitude' in that specification.
Geolocation API - Web APIs
the developer can now access this location information in a couple of different ways: geolocation.
getcurrentposition(): retrieves the device's current location.
... dictionaries positionoptions represents an object containing options to pass in as a parameter of geolocation.
getcurrentposition() and geolocation.watchposition().
... body { padding: 20px; background-color:#ffffc9 } button { margin: .5rem 0; } html <button id = "find-me">show my location</button><br/> <p id = "status"></p> <a id = "map-link" tar
get="_blank"></a> javascript function geofindme() { const status = document.queryselector('#status'); const maplink = document.queryselector('#map-link'); maplink.href = ''; maplink.textcontent = ''; function success(position) { const latitude = position.coords.latitude; const longitude = position.coords.longitude; status.textcontent = ''; maplink.href = `https://www...
...etmap.org/#map=18/${latitude}/${longitude}`; maplink.textcontent = `latitude: ${latitude} °, longitude: ${longitude} °`; } function error() { status.textcontent = 'unable to retrieve your location'; } if(!navigator.geolocation) { status.textcontent = 'geolocation is not supported by your browser'; } else { status.textcontent = 'locating…'; navigator.geolocation.
getcurrentposition(success, error); } } document.queryselector('#find-me').addeventlistener('click', geofindme); result specifications specification status comment geolocation api recommendation ...
GlobalEventHandlers.onanimationiteration - Web APIs
syntax var animiterationhandler = tar
get.onanimationiteration; tar
get.onanimationiteration = function value a function to be called when an animationiteration event occurs indicating that a css animation has reached the end of an iteration while running on the tar
get, where the tar
get object is an html element (htmlelement), document (document), or window (window).
... var box = document.
getelementbyid("box"); var iterationcounter = 0; box.onanimationiteration = function(event) { box.style.animationplaystate = "paused"; document.
getelementbyid("play").innerhtml = "start iteration #" + (iterationcounter+1); }; this sets up two global variables: box, which references the "box" element that we're animating, and iterationcounter, which is initially zero, which indicates how many i...
... finally, we set up a handler for a click on the button that runs the animation: document.
getelementbyid("play").addeventlistener("click", function(event) { box.style.animationplaystate = "running"; iterationcounter++; }, false); this sets the box element's animation-play-state to "running" and increments the iteration counter.
... result assembled to
gether, you
get this: each time the box reaches the opposing corner, it stops, with the button reflecting which iteration number is up next, until you click the button to run the next iteration.
GlobalEventHandlers.onclick - Web APIs
syntax tar
get.onclick = functionref; value functionref is a function name or a function expression.
...you may prefer to use the eventtar
get.addeventlistener() method instead, since it's more flexible.
... html <div id="demo">click here</div> javascript document.
getelementbyid('demo').onclick = function changecontent() { document.
getelementbyid('demo').innerhtml = "help me"; document.
getelementbyid('demo').style = "color: red"; } result
getting the coordinates of clicks this example displays the coordinates at which the most recent mouse button click occurred.
... html <p>click anywhere in this example.</p> <p id="log"></p> javascript let log = document.
getelementbyid('log'); document.onclick = inputchange; function inputchange(e) { log.textcontent = `position: (${e.clientx}, ${e.clienty})`; } result specification specification status comment html living standardthe definition of 'onclick' in that specification.
HTMLAudioElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" tar
get="_top"><rect x="331" y="65" width="160"...
...#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a><polyline points="331,89 321,84 321,94 331,89" stroke="#d4dde4" fill="none"/><line x1="321" y1="89" x2="291" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlaudioelement" tar
get="_top"><rect x="131" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlaudioelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor audio() creates and r...
HTMLBaseElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbaseelement" tar
get="_top"><rect x="341" y="65" width="150" ...
... htmlbaseelement.tar
get is a domstring that reflects the tar
get html attribute, containing a default tar
get browsing context or frame for elements that do not have a tar
get reference specified.
HTMLElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, element, and implements those from documentandelementeventhandlers, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement and toucheventhandlers.
...as a
getter, it approximates the text the user would
get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.
HTMLFormElement.elements - Web APIs
note: similarly, you can
get a list of all of the forms contained within a given document using the document's forms property.
... the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to
get at the elements most important when processing forms.
... <form id="my-form"> <input type="text" name="username"> <input type="text" name="full-name"> <input type="password" name="password"> </form> var inputs = document.
getelementbyid("my-form").elements; var inputbyindex = inputs[0]; var inputbyname = inputs["username"]; accessing form controls this example
gets the form's element list, then iterates over the list, looking for <input> elements of type "text" so that some form of processing can be performed on them.
... var inputs = document.
getelementbyid("my-form").elements; // iterate over the form controls for (i = 0; i < inputs.length; i++) { if (inputs[i].nodename === "input" && inputs[i].type === "text") { // update text input inputs[i].value.tolocaleuppercase(); } } disabling form controls var inputs = document.
getelementbyid("my-form").elements; // iterate over the form controls for (i = 0; i < inputs.length; i++) { // disable all form controls inputs[i].setattribute("disabled", ""); } specifications specification status comment html living standardthe definition of 'htmlformelement.elements' in that specification.
HTMLImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlimageelement" tar
get="_top"><rect x="331" y="65" width="160"...
... errors if an error occurs while trying to load or render the image, and an onerror event handler has been configured to handle the error event, that event handler will
get called.
HTMLObjectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlobjectelement" tar
get="_top"><rect x="321" y="65" width="170...
... htmlobjectelement.code is a domstring representing the name of an applet class file, containing either the applet's subclass, or the path to
get to the class, including the class file itself.
HTMLShadowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlshadowelement" tar
get="_top"><rect x="321" y="65" width="170...
... htmlshadowelement.
getdistributednodes() returns a static nodelist of the distributed nodes associated with this <shadow> element.
IDBCursorWithValue - Web APIs
you always
get the same idbcursorwithvalue object representing a given cursor.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/idbcursor" tar
get="_top"><rect x="1" y="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="46" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbcursor</text></a><polyline points="91,25 101,20 101,30 91,25" stroke="#d4dde4" fill="none"/><line x1="101" y1="25" x2="131" y2="25" stroke="#...
...d4dde4"/><a xlink:href="/docs/web/api/idbcursorwithvalue" tar
get="_top"><rect x="131" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbcursorwithvalue</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} methods inherits methods from its parent interface, idbcursor.
...for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of ...
IDBOpenDBRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" tar
get="_top"><rect x="151" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a><polyline points="251,25 261,20 261,30 251,25" stroke="#d4dde4" fill="none"/><line x1="261" y1="25" x2="291" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbopendbrequest" tar
get="_top"><rect x="291" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbop...
...endbrequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits methods from its parents idbrequest and eventtar
get.
... methods no methods, but inherits methods from its parents idbrequest and eventtar
get.
IntersectionObserver.unobserve() - Web APIs
the intersectionobserver method unobserve() instructs the intersectionobserver to stop observing the specified tar
get element.
... syntax intersectionobserver.unobserve(tar
get); parameters tar
get the element to cease observing.
... var observer = new intersectionobserver(callback); observer.observe(document.
getelementbyid("elementtoobserve")); /* ...
... */ observer.unobserve(document.
getelementbyid("elementtoobserve")); specifications specification status comment intersection observerthe definition of 'intersectionobserver.unobserve()' in that specification.
IntersectionObserverEntry.boundingClientRect - Web APIs
the intersectionobserverentry interface's read-only boundingclientrect property returns a domrectreadonly which in essence describes a rectangle describing the smallest rectangle that contains the entire tar
get element.
... syntax var boundsrect = intersectionobserverentry.boundingclientrect; value a domrectreadonly which describes the smallest rectangle that contains every part of the tar
get element whose intersection change is being described.
... this value is obtained using the same algorithm as element.
getboundingclientrect(), so refer to that article for details on precisely what is done to obtain this rectangle and what is and is not included within its bounds.
... in the general case, however, it's safe to simply think of this as the bounds rectangle of the tar
get element.
MediaDeviceInfo.groupId - Web APIs
this might be used to produce a user interface that gathers associated devices to
gether for presentation purposes, or to make it easy for the user to choose to use the built-in camera and microphone on the same display at the same time.
... const
getdevicegroup = maindevinfo => { let devlist = []; navigator.mediadevices.enumeratedevices() .then(devices => { devices.foreach(device => { if (device.groupid === maindevinfo.groupid) { devlist.push(device); } }); }); return devlist; }; the
getdevicegroup() function takes as input the mediadeviceinfo object describing the device for which a group list is to be built.
... then navigator.mediadevices.enumeratedevices() is called to
get the list of all media devices.
... this version of the example puts the passed-in device at the top of the result list, then adds any other members of the group that are found: const
getdevicegroup = maindevinfo => { let devlist = [maindevinfo]; navigator.mediadevices.enumeratedevices() .then(devices => { devices.foreach(device => { if ((device.groupid === maindevinfo.groupid) && (device.deviceid !== maindevinfo.deviceid)) { devlist.push(device); } }); }); return devlist; }; ...
MediaStreamAudioSourceNode - Web APIs
this media could be from a microphone (through
getusermedia()) or from a remote peer on a webrtc call (using the rtcpeerconnection's audio tracks).
... example in this example, we grab a media (audio + video) stream from navigator.
getusermedia, feed the media into a <video> element to play then mute the audio, but then also feed the audio into a mediastreamaudiosourcenode.
... var pre = document.queryselector('pre'); var video = document.queryselector('video'); var myscript = document.queryselector('script'); var range = document.queryselector('input'); //
getusermedia block - grab stream // put it into a mediastreamaudiosourcenode // also output the visuals into a video element if (navigator.mediadevices) { console.log('
getusermedia supported.'); navigator.mediadevices.
getusermedia ({audio: true, video: true}) .then(function(stream) { video.srcobject = stream; video.onloadedmetadata = function(e) { video.play()...
... = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination, so we can play the // music and adjust the volume using the mouse cursor source.connect(biquadfilter); biquadfilter.connect(audioctx.destination); //
get new mouse pointer coordinates when mouse is moved // then set new gain value range.oninput = function() { biquadfilter.gain.value = range.value; } }) .catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('
getusermedia not supported on your browser!'); } // dump script to pre element pre...
MediaStreamTrack - Web APIs
properties in addition to the properties listed below, mediastreamtrack has constrainable properties which can be set using applyconstraints() and accessed using
getconstraints() and
getsettings().
... mediastreamtrack.
getcapabilities() returns the a list of constrainable properties available for the mediastreamtrack.
... mediastreamtrack.
getconstraints() returns a mediatrackconstraints object containing the currently set constraints for the track; the returned value matches the constraints last set using applyconstraints().
... mediastreamtrack.
getsettings() returns a mediatracksettings object containing the current values of each of the mediastreamtrack's constrainable properties.
MediaTrackConstraints.logicalSurface - Web APIs
this is used to specify whether or not
getdisplaymedia() should allow the user to choose display surfaces which are not necessarily fully visible on the screen, such as occluded windows or the complete content of windows which are large enough to require scrolling to see their entire contents.
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.logicalsurface as returned by a call to mediadevices.
getsupportedconstraints().
... usage notes you can check the setting selected by the user agent after the display media has been created by
getdisplaymedia() by calling
getsettings() on the display media's video mediastreamtrack, then checking the value of the returned mediatracksettings object's logicalsurface object.
... for example, if your app needs to know if the selected display surface is a logical one: let islogicalsurface = displaystream.
getvideotracks()[0].
getsettings().logicalsurface; following this code, islogicalsurface is true if the display surface contained in the stream is a logical surface; that is, one which may not be entirely onscreen, or may even be entirely offscreen.
MediaTrackSupportedConstraints.aspectRatio - Web APIs
the mediatracksupportedconstraints dictionary's aspectratio property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.
getsupportedconstraints() if and only if the user agent supports the aspectratio constraint.
... you can access the supported constraints dictionary by calling navigator.mediadevices.
getsupportedconstraints().
...if the property isn't present, this property is missing from the supported constraints dictionary, and you'll
get undefined if you try to look at its value.
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.
getelementbyid("result"); if (navigator.mediadevices.
getsupportedconstraints().aspectratio) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'aspectratio' in that specification.
MediaTrackSupportedConstraints.autoGainControl - Web APIs
the mediatracksupportedconstraints dictionary's autogaincontrol property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.
getsupportedconstraints() if and only if the user agent supports the autogaincontrol constraint.
... you can access the supported constraints dictionary by calling navigator.mediadevices.
getsupportedconstraints().
...if the property isn't present, this property is missing from the supported constraints dictionary, and you'll
get undefined if you try to look at its value.
... html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.
getelementbyid("result"); if (navigator.mediadevices.
getsupportedconstraints().autogaincontrol) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'autogaincontrol' in that specification.
MediaTrackSupportedConstraints.channelCount - Web APIs
the mediatracksupportedconstraints dictionary's channelcount property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.
getsupportedconstraints() if and only if the user agent supports the channelcount constraint.
... you can access the supported constraints dictionary by calling navigator.mediadevices.
getsupportedconstraints().
...if the property isn't present, this property is missing from the supported constraints dictionary, and you'll
get undefined if you try to look at its value.
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.
getelementbyid("result"); if (navigator.mediadevices.
getsupportedconstraints().channelcount) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'channelcount' in that specification.
MediaTrackSupportedConstraints.cursor - Web APIs
the supported constraints list is obtained by calling navigator.mediadevices.
getsupportedconstraints().
... example this method sets up the constraints object specifying the options for the call to
getdisplaymedia().
...capturing is then started by calling
getdisplaymedia() and attaching the returned stream to the video element referenced by the variable videoelem.
... async function capturewithcursor() { let supportedconstraints = navigator.mediadevices.
getsupportedconstraints(); let displaymediaoptions = { video: { displaysurface: "browser" }, audio: false; }; if (supportedconstraints.cursor) { displaymediaoptions.video.cursor = "always"; } try { videoelem.srcobject = await navigator.mediadevices.
getdisplaymedia(displaymediaoptions); } catch(err) { /* handle the error */ } } specifications specification status comment screen capturethe definition of 'mediatracksupportedconstraints.cursor' in that specification.
MediaTrackSupportedConstraints.deviceId - Web APIs
the mediatracksupportedconstraints dictionary's deviceid property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.
getsupportedconstraints() if and only if the user agent supports the deviceid constraint.
... you can access the supported constraints dictionary by calling navigator.mediadevices.
getsupportedconstraints().
...if the property isn't present, this property is missing from the supported constraints dictionary, and you'll
get undefined if you try to look at its value.
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.
getelementbyid("result"); if (navigator.mediadevices.
getsupportedconstraints().deviceid) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'deviceid' in that specification.
MediaTrackSupportedConstraints.displaySurface - Web APIs
the supported constraints list is obtained by calling navigator.mediadevices.
getsupportedconstraints().
... example this method sets up the constraints object specifying the options for the call to
getdisplaymedia().
...capturing is then started by calling
getdisplaymedia() and attaching the returned stream to the video element referenced by the variable videoelem.
... async function capture() { let supportedconstraints = navigator.mediadevices.
getsupportedconstraints(); let displaymediaoptions = { video: { }, audio: false; }; if (supportedconstraints.displaysurface) { displaymediaoptions.video.displaysurface = "monitor"; } try { videoelem.srcobject = await navigator.mediadevices.
getdisplaymedia(displaymediaoptions); } catch(err) { /* handle the error */ } } specifications specification status comment screen capturethe definition of 'mediatracksupportedconstraints.displaysurface' in that specification.
MediaTrackSupportedConstraints.echoCancellation - Web APIs
the mediatracksupportedconstraints dictionary's echocancellation property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.
getsupportedconstraints() if and only if the user agent supports the echocancellation constraint.
... you can access the supported constraints dictionary by calling navigator.mediadevices.
getsupportedconstraints().
...if the property isn't present, this property is missing from the supported constraints dictionary, and you'll
get undefined if you try to look at its value.
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.
getelementbyid("result"); if (navigator.mediadevices.
getsupportedconstraints().echocancellation) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'echocancellation' in that specification.
MediaTrackSupportedConstraints.facingMode - Web APIs
the mediatracksupportedconstraints dictionary's facingmode property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.
getsupportedconstraints() if and only if the user agent supports the facingmode constraint.
... you can access the supported constraints dictionary by calling navigator.mediadevices.
getsupportedconstraints().
...if the property isn't present, this property is missing from the supported constraints dictionary, and you'll
get undefined if you try to look at its value.
... example html <div id="result"> </div> css #result { font: 14px "arial", sans-serif; } javascript let result = document.
getelementbyid("result"); if (navigator.mediadevices.
getsupportedconstraints().facingmode) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'facingmode' in that specification.
MediaTrackSupportedConstraints.groupId - Web APIs
the mediatracksupportedconstraints dictionary's groupid property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.
getsupportedconstraints() if and only if the user agent supports the groupid constraint.
... you can access the supported constraints dictionary by calling navigator.mediadevices.
getsupportedconstraints().
...if the property isn't present, this property is missing from the supported constraints dictionary, and you'll
get undefined if you try to look at its value.
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.
getelementbyid("result"); if (navigator.mediadevices.
getsupportedconstraints().groupid) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'groupid' in that specification.
MediaTrackSupportedConstraints.height - Web APIs
the mediatracksupportedconstraints dictionary's height property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.
getsupportedconstraints() if and only if the user agent supports the height constraint.
... you can access the supported constraints dictionary by calling navigator.mediadevices.
getsupportedconstraints().
...if the property isn't present, this property is missing from the supported constraints dictionary, and you'll
get undefined if you try to look at its value.
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.
getelementbyid("result"); if (navigator.mediadevices.
getsupportedconstraints().height) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'height' in that specification.
MediaTrackSupportedConstraints.latency - Web APIs
the mediatracksupportedconstraints dictionary's latency property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.
getsupportedconstraints() if and only if the user agent supports the latency constraint.
... you can access the supported constraints dictionary by calling navigator.mediadevices.
getsupportedconstraints().
...if the property isn't present, this property is missing from the supported constraints dictionary, and you'll
get undefined if you try to look at its value.
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.
getelementbyid("result"); if (navigator.mediadevices.
getsupportedconstraints().latency) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'latency' in that specification.
MediaTrackSupportedConstraints.logicalSurface - Web APIs
the supported constraints list is obtained by calling navigator.mediadevices.
getsupportedconstraints().
... example this method sets up the constraints object specifying the options for the call to
getdisplaymedia().
...capturing is then started by calling
getdisplaymedia() and attaching the returned stream to the video element referenced by the variable videoelem.
... async function capture() { let supportedconstraints = navigator.mediadevices.
getsupportedconstraints(); let displaymediaoptions = { video: { }, audio: false; }; if (supportedconstraints.logicalsurface) { displaymediaoptions.video.logicalsurface = "monitor"; } try { videoelem.srcobject = await navigator.mediadevices.
getdisplaymedia(displaymediaoptions); } catch(err) { /* handle the error */ } } specifications specification status comment screen capturethe definition of 'mediatracksupportedconstraints.logicalsurface' in that specification.
MediaTrackSupportedConstraints.noiseSuppression - Web APIs
the mediatracksupportedconstraints dictionary's noisesuppression property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.
getsupportedconstraints() if and only if the user agent supports the noisesuppression constraint.
... you can access the supported constraints dictionary by calling navigator.mediadevices.
getsupportedconstraints().
...if the property isn't present, this property is missing from the supported constraints dictionary, and you'll
get undefined if you try to look at its value.
... html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.
getelementbyid("result"); if (navigator.mediadevices.
getsupportedconstraints().noisesuppression) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'noisesuppression' in that specification.
MediaTrackSupportedConstraints.sampleRate - Web APIs
the mediatracksupportedconstraints dictionary's samplerate property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.
getsupportedconstraints() if and only if the user agent supports the samplerate constraint.
... you can access the supported constraints dictionary by calling navigator.mediadevices.
getsupportedconstraints().
...if the property isn't present, this property is missing from the supported constraints dictionary, and you'll
get undefined if you try to look at its value.
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.
getelementbyid("result"); if (navigator.mediadevices.
getsupportedconstraints().samplerate) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'samplerate' in that specification.
MediaTrackSupportedConstraints.sampleSize - Web APIs
the mediatracksupportedconstraints dictionary's samplesize property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.
getsupportedconstraints() if and only if the user agent supports the samplesize constraint.
... you can access the supported constraints dictionary by calling navigator.mediadevices.
getsupportedconstraints().
...if the property isn't present, this property is missing from the supported constraints dictionary, and you'll
get undefined if you try to look at its value.
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.
getelementbyid("result"); if (navigator.mediadevices.
getsupportedconstraints().samplesize) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'samplesize' in that specification.
MediaTrackSupportedConstraints.volume - Web APIs
the mediatracksupportedconstraints dictionary's volume property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.
getsupportedconstraints() if and only if the user agent supports the volume constraint.
... you can access the supported constraints dictionary by calling navigator.mediadevices.
getsupportedconstraints().
...if the property isn't present, this property is missing from the supported constraints dictionary, and you'll
get undefined if you try to look at its value.
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.
getelementbyid("result"); if (navigator.mediadevices.
getsupportedconstraints().volume) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result ...
MediaTrackSupportedConstraints.width - Web APIs
the mediatracksupportedconstraints dictionary's width property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.
getsupportedconstraints() if and only if the user agent supports the width constraint.
... you can access the supported constraints dictionary by calling navigator.mediadevices.
getsupportedconstraints().
...if the property isn't present, this property is missing from the supported constraints dictionary, and you'll
get undefined if you try to look at its value.
... example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.
getelementbyid("result"); if (navigator.mediadevices.
getsupportedconstraints().width) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'width' in that specification.
MouseEvent.initMouseEvent() - Web APIs
this method must be called to set the event before it is dispatched, using eventtar
get.dispatchevent().
... syntax event.initmouseevent(type, canbubble, cancelable, view, detail, screenx, screeny, clientx, clienty, ctrlkey, altkey, shiftkey, metakey, button, relatedtar
get); parameters type the string to set the event's type to.
... relatedtar
get the event's related eventtar
get.
... example html <div style="background:red; width:180px; padding:10px;"> <div id="out"></div> <input type="text"> </div> javascript document.body.onclick = function(){ e = arguments[0]; var dt = e.tar
get,stag = dt.tagname.tolowercase(); document.
getelementbyid("out").innerhtml = stag; }; var simulateclick = function(){ var evt = document.createevent("mouseevents"); evt.initmouseevent("click", true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null); document.body.dispatchevent(evt); } simulateclick(); result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseeven...
msPlayToSource - Web APIs
msplaytosource is a read-only property which
gets the source associated with the media element for use by the playtomanager.
... msplaytosource is used in the sourcerequested handler --
get the playtosource object from an audio, video, or img element using the msplaytosource property and pass it to e.setsource, then set the playtosource.next property to the msplaytosource of another element for continual playing.
... var ptm = windows.media.playto.playtomanager.
getforcurrentview(); // step 2: register for the sourcerequested event (user swipes devices charm).
... e.sourcerequest.setsource(document.
getelementbyid("videoplayer").msplaytosource); // the media will then be streamed to the device chosen by the user in the ui.
MutationObserverInit - Web APIs
subtree optional set to true to extend monitoring to the entire subtree of nodes rooted at tar
get.
... all of the other mutationobserverinit properties are then extended to all of the nodes in the subtree instead of applying solely to the tar
get node.
... childlist optional set to true to monitor the tar
get node (and, if subtree is true, its descendants) for the addition of new child nodes or removal of existing child nodes.
... characterdata optional set to true to monitor the specified tar
get node (and, if subtree is true, its descendants) for changes to the character data contained within the node or nodes.
Web-based protocol handlers - Web APIs
the "%s" is replaced with the href of the link and a
get is executed on the resultant url.
...the browser extracts the href from the activated link, combines it with the url template supplied during handler registration and performs an http
get on the url.
... so, using the above examples, the browser would perform a
get on this url: http://www.google.co.uk/?uri=web+burger:cheeseburger server side code can extract the query string parameters and perform the desired action.
... example <?php $value = ""; if ( isset ( $_
get["value"] ) ) { $value = $_
get["value"]; } ?> <!doctype html public "-//w3c//dtd html 4.01//en"> <html lang="en"> <head> <title>web protocol handler sample</title> </head> <body> <h1>web protocol handler sample - handler</h1> <p>this web page is called when handling a <code>web+burger:</code> protocol action.
Using the Notifications API - Web APIs
getting permission if permission to display notifications hasn't been granted yet, the application needs to use the notification.requestpermission() method to request this from the user.
...because notification also inherits from eventtar
get, it's possible to use the addeventlistener() method on it.
...ndow.addeventlistener('load', function () { // at first, let's check if we have permission for notification // if not, let's ask for it if (window.notification && notification.permission !== "granted") { notification.requestpermission(function (status) { if (notification.permission !== status) { notification.permission = status; } }); } var button = document.
getelementsbytagname('button')[0]; button.addeventlistener('click', function () { // if the user agreed to
get notified // let's try to send ten notifications if (window.notification && notification.permission === "granted") { var i = 0; // using an interval cause some browsers (including firefox) are blocking notifications if there are too much in a certain time.
..." + i, {tag: 'somanynotification'}); if (i++ == 9) { window.clearinterval(interval); } }, 200); } // otherwise, we can fallback to a regular modal alert else { alert("hi!"); } }); } // if the user refuses to
get notified else { // we can fallback to a regular modal alert alert("hi!"); } }); }); see the live result below: specifications specification status comment notifications api living standard living standard ...
performance.mark() - Web APIs
the application defined timestamp can be retrieved by one of the performance interface's
getentries*() methods (
getentries(),
getentriesbyname() or
getentriesbytype()).
...performance.mark("squirrel"); performance.mark("squirrel"); performance.mark("monkey"); performance.mark("monkey"); performance.mark("dog"); performance.mark("dog"); //
get all of the performancemark entries.
... const allentries = performance.
getentriesbytype("mark"); console.log(allentries.length); // 6 //
get all of the "monkey" performancemark entries.
... const monkeyentries = performance.
getentriesbyname("monkey"); console.log(monkeyentries.length); // 2 // clear out all of the marks.
PerformanceObserverEntryList - Web APIs
methods performanceobserverentrylist.
getentries() returns a list of explicitly observed performanceentry objects based on the given filter.
... performanceobserverentrylist.
getentriesbytype() returns a list of explicitly observed performanceentry objects of the given entry type.
... performanceobserverentrylist.
getentriesbyname() returns a list of explicitly observed performanceentry objects based on the given name and entry type.
... example // create observer for all performance event types // list is of type performanceobserveentrylist var observe_all = new performanceobserver(function(list, obs) { var perfentries = list.
getentries(); for (var i = 0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); // do something with it } }) specifications specification status comment performance timeline level 2the definition of 'performanceobserverentrylist' in that specification.
Using the Permissions API - Web APIs
a simple example for this article, we have put to
gether a simple demo called location finder.
...the geolocation.
getcurrentposition() function is then run, which prompts the user for permission; it runs the revealposition() function if permission is granted (which shows the map), or the positiondenied() function if permission is denied (which makes the "enable geolocation" button appear).
... function handlepermission() { navigator.permissions.query({name:'geolocation'}).then(function(result) { if (result.state == 'granted') { report(result.state); geobtn.style.display = 'none'; } else if (result.state == 'prompt') { report(result.state); geobtn.style.display = 'none'; navigator.geolocation.
getcurrentposition(revealposition,positiondenied,geosettings); } else if (result.state == 'denied') { report(result.state); geobtn.style.display = 'inline'; } result.onchange = function() { report(result.state); } }); } function report(state) { console.log('permission ' + state); } handlepermission(); permission descriptors the permissions.query() method take...
...if we choose to never share our location from the permission prompt (deny permission), then we can't
get back to the permission prompt without using the browser menu options: firefox: tools > page info > permissions > access your location.
Pointer Lock API - Web APIs
it gives you access to raw mouse movement, locks the tar
get of mouse events to a single element, eliminates limits on how far mouse movement can go in a single direction, and removes the cursor from view.
...mouse capture provides continued delivery of events to a tar
get element while a mouse is being dragged, but it stops when the mouse button is released.
... var tracker = document.
getelementbyid('tracker'); var animation; function updateposition(e) { x += e.movementx; y += e.movementy; if (x > canvas.width + radius) { x = -radius; } if (y > canvas.height + radius) { y = -radius; } if (x < -radius) { x = canvas.width + radius; } if (y < -radius) { y = canvas.height + radius; } tracker.textcontent = "x position: " + x + ", y position: " + y...
...if you lock one iframe, you cannot try to lock another iframe and transfer the tar
get to it; pointer lock will error out.
RTCDtlsTransport - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/rtcdtlstransport" tar
get="_top"><rect x="1" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcdtlstransport</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesicetransport read only the re...
...for this reason, you'll sometimes see separate transports created at first, one for each track, then see them
get bundled up once it's known that bundling is possible.
... if your code accesses rtcrtpsenders and/or rtcrtpreceivers directly, you may encounter situations where they're initially separate, then half or more of them
get closed and the senders and receivers updated to refer to the appropriate remaining rtcdtlstransport objects.
...*/ function tallysenders(pc) { let results = { transportmissing: 0, connectionpending: 0, connected: 0, closed: 0, failed: 0, unknown: 0 }; let senderlist = pc.
getsenders(); senderlist.foreach(sender => { let transport = sender.transport; if (!transport) { results.transportmissing++; } else { switch(transport.state) { case "new": case "connecting": results.connectionpending++; break; case "connected": results.connected++; break; case "closed": results.
RTCIceCandidatePair.local - Web APIs
the rtcicecandidatepair is returned by the rtcicetransport method
getselectedcandidatepair().
... example this one-line example simply obtains the current candidate pair and then from that
gets the local candidate.
... var candidatepair = pc.
getsenders()[0].transport.transport.
getselectedcandidatepair(); var localcandidate = candidatepair.local; the rtcicetransport is found by
getting the list of rtcrtpsender objects for the rtcpeerconnection pc.
... in the first rtcrtpsender, we
get the rtcdtlstransport over which the media data is being transmitted and finally, from that, the rtcicetransport.
RTCIceCandidatePair.remote - Web APIs
the rtcicecandidatepair is returned by the rtcicetransport method
getselectedcandidatepair().
... example this one-line example simply obtains the current candidate pair and then from that
gets the remote candidate.
... var candidatepair = pc.
getsenders()[0].transport.transport.
getselectedcandidatepair(); var remotecandidate = candidatepair.remote; the rtcicetransport is found by
getting the list of rtcrtpsender objects for the rtcpeerconnection pc.
... in the first rtcrtpsender, we
get the rtcdtlstransport over which the media data is being transmitted and finally, from that, the rtcicetransport.
RTCRtpSender - Web APIs
with it, you can configure the encoding used for the corresponding track,
get information about the device's media capabilities, and so forth.
... methods rtcrtpsender.
getparameters() returns a rtcrtpparameters object describing the current configuration for the encoding and transmission of media on the track.
... rtcrtpsender.
getstats() returns a promise which is fulfilled with a rtcstatsreport which provides statistics data for all outbound streams being sent using this rtcrtpsender.
... static methods rtcrtpsender.
getcapabilities() returns an rtcrtpcapabilities object describing the system's capabilities for sending a specified kind of media data.
RTCStatsReport - Web APIs
the rtcstatsreport interface provides a statistics report obtained by calling one of the rtcpeerconnection.
getstats(), rtcrtpreceiver.
getstats(), and rtcrtpsender.
getstats() methods.
... calling
getstats() on an rtcpeerconnection lets you specify whether you wish to obtain statistics for outbound, inbound, or all streams on the connection.
... the rtcrtpreceiver and rtcrtpsender versions of
getstats() specifically only return statistics available to the incoming or outgoing stream on which you call them.
... local-candidate an rtcicecandidatestats object giving statistics about an ice local candidate; these candidates are found in the output from rtcicetransport.
getlocalcandidates().
Range - Web APIs
range objects can also be retrieved by using the
getrangeat() method of the selection object or the caretrangefrompoint() method of the document object.
... range.
getboundingclientrect() returns a domrect object which bounds the entire contents of the range; this would be the union of all the rectangles returned by range.
getclientrects().
... range.
getclientrects() returns a list of domrect objects that aggregates the results of element.
getclientrects() for all the elements in the range.
... working draft added the methods
getclientrects() and
getboundingclientrect().
Reporting API - Web APIs
the endpoints are arranged into groups; an endpoint group can work to
gether to provide load balancing (each endpoint will receive a specified proportion of report traffic) and safeguarding against failure (fallback endpoints can be specified to use if the primary ones fail).
... reporting observers reports can also be obtained via reportingobserver objects created via javascript inside the website you are aiming to
get reports on.
...observer) { reportbtn.onclick = () => displayreports(reports); }, options); we then tell it to start observing reports using reportingobserver.observe(); this tells the observer to start collecting reports in its report queue, and runs the callback function specified inside the constructor: observer.observe(); later on in the example we deliberately use the deprecated version of mediadevices.
getusermedia(): if(navigator.moz
getusermedia) { navigator.moz
getusermedia( constraints, success, failure); } else { navigator.
getusermedia( constraints, success, failure); } this causes a deprecation report to be generated; because of the event handler we set up inside the reportingobserver() constructor, we can now click the button to display the report details.
... note: if you look at the complete source code, you'll notice that we actually call the deprecated
getusermedia() method twice.
ResizeObserverEntry.contentRect - Web APIs
syntax var contentrect = resizeobserverentry.contentrect; value a domrectreadonly object containing the new size of the element indicated by the tar
get property.
... if the tar
get is an html element, the returned contentrect is the element's content box.
... if the tar
get is an svgelement, the returned contentrect is the svg's bounding box.
...this uses a simple feature detection test to see if the browser supports the newer resizeobserverentry.contentboxsize property — if so, it uses that to
get the sizing data it needs.
SVGAnimateElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" tar
get="_top"><rect x="291" y="65" width="190...
...de4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimateelement" tar
get="_top"><rect x="81" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimateelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no pro...
SVGAnimateMotionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" tar
get="_top"><rect x="291" y="65" width="190...
...troke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimatemotionelement" tar
get="_top"><rect x="21" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="136" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatemotionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has ...
SVGAnimateTransformElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" tar
get="_top"><rect x="291" y="65" width="190...
...ke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimatetransformelement" tar
get="_top"><rect x="-9" y="65" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="121" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatetransformelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface h...
SVGDefsElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180"...
...#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgdefselement" tar
get="_top"><rect x="121" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgdefselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't impl...
SVGFEFuncAElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" tar
get="_top"><rect x="131" y...
...th="2px" /><text x="306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncaelement" tar
get="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide...
SVGFEFuncBElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" tar
get="_top"><rect x="131" y...
...th="2px" /><text x="306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncbelement" tar
get="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncbelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide...
SVGFEFuncGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" tar
get="_top"><rect x="131" y...
...th="2px" /><text x="306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncgelement" tar
get="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide...
SVGFEFuncRElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" tar
get="_top"><rect x="131" y...
...th="2px" /><text x="306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncrelement" tar
get="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncrelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide...
SVGForeignObjectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180"...
...stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgforeignobjectelement" tar
get="_top"><rect x="31" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="146" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgforeignobjectelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also...
SVGGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180"...
...e="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggelement" tar
get="_top"><rect x="151" y="65" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't impleme...
SVGImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180"...
...d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgimageelement" tar
get="_top"><rect x="111" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgimageelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inheri...
SVGLinearGradientElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" tar
get="_top"><rect x="301" y="65" width="180"...
...troke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svglineargradientelement" tar
get="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svglineargradientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface als...
SVGRadialGradientElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" tar
get="_top"><rect x="301" y="65" width="180"...
...troke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgradialgradientelement" tar
get="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgradialgradientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface als...
SVGSetElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" tar
get="_top"><rect x="291" y="65" width="190...
...#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgsetelement" tar
get="_top"><rect x="121" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsetelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't imple...
SVGSwitchElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" tar
get="_top"><rect x="301" y="65" width="180"...
...4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgswitchelement" tar
get="_top"><rect x="101" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgswitchelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't im...
SVGTransformList - Web APIs
note: starting in gecko 9.0,the svgtransformlist dom interface is now indexable and can be accessed like arrays interface overview also implement none methods void clear() svgtransform initialize(in svgtransform newitem) svgtransform
getitem(in unsigned long index) svgtransform insertitembefore(in svgtransform newitem, in unsigned long index) svgtransform replaceitem(in svgtransform newitem, in unsigned long index) svgtransform removeitem(in unsigned long index) svgtransform appenditem(in svgtransform newitem) svgtransform createsvgtransformfrommatrix(in svgmatrix) svgtransform consolidate() ...
...
getitem(in unsigned long index) svgtransform returns the specified item from the list.
... consolidate() svgtransform consolidates the list of separate svgtransform objects by multiplying the equivalent transformation matrices to
gether to result in a list consisting of a single svgtransform object of type svg_transform_matrix.
... <svg id="my-svg" viewbox="0 0 300 280" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>example showing how to transform svg elements that using svgtransform objects</desc> <script type="application/ecmascript"> <![cdata[ function transformme(evt) { // svg root element to access the createsvgtransform() function var svgroot = evt.tar
get.parentnode; // svgtransformlist of the element that has been clicked on var tfmlist = evt.tar
get.transform.baseval; // create a seperate transform object for each transform var translate = svgroot.createsvgtransform(); translate.settranslate(50,5); var rotate = svgroot.createsvgtransform(); rotate.setrotate(10,0,0); var scale = svgroot.createsvg...
Screen Capture API - Web APIs
its sole method is mediadevices.
getdisplaymedia(), whose job is to ask the user to select a screen or portion of a screen to capture in the form of a mediastream.
... to start capturing video from the screen, you call
getdisplaymedia() on the instance of media navigator.mediadevices: capturestream = await navigator.mediadevices.
getdisplaymedia(displaymediaoptions); the promise returned by
getdisplaymedia() resolves to a mediastream which streams the captured media.
... mediadevices interface mediadevices.
getdisplaymedia() the
getdisplaymedia() method is added to the mediadevices interface.
... similar to
getusermedia(), this method creates a promise that resolves with a mediastream containing the display area selected by the user, in a format that matches the specified options.
Selection - Web APIs
to obtain a selection object for examination or manipulation, call window.
getselection().
... selection.
getrangeat() returns a range object representing one of the ranges currently selected.
... notes string representation of a selection calling the selection.tostring() method returns the text contained within the selection, e.g.: var selobj = window.
getselection(); window.alert(selobj); note that using a selection object as the argument to window.alert will call the object's tostring method.
...typically, it holds only one range, accessed as follows: var selobj = window.
getselection(); var range = selobj.
getrangeat(0); selobj is a selection object range is a range object as the selection api specification notes, the selection api was initially created by netscape and allowed multiple ranges (for instance, to allow the user to select a column from a <table>).
Selection API - Web APIs
concepts and usage to retrieve the current text range the user has selected, you can use the window.
getselection() or document.
getselection() method, storing the return value — a selection object — in a variable for futher use.
... extensions to other interfaces window.
getselection(), document.
getselection() returns a selection object representing the range of text selected by the user or the current position of the caret.
... document.
getselection() is basically an alias of window.
getselection().
... yeschrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yes
getrangeat experimentalchrome full support yesedge full support 12firefox full support yesie ?
SourceBufferList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebufferlist" tar
get="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebufferlist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebufferlist.length read only returns the number of sourcebuffer objects in the list.
... methods inherits methods from its parent interface, eventtar
get.
... sourcebufferlist: indexed property
getter this
getter allows the sourcebuffer objects in the list to be accessed with an array operator (i.e.
SpeechSynthesisUtterance.voice - Web APIs
the voice property of the speechsynthesisutterance interface
gets and sets the voice that will be used to speak the utterance.
... this should be set to one of the speechsynthesisvoice objects returned by speechsynthesis.
getvoices().
... examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.
getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].
getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'voice' in that specification.
Storage - Web APIs
storage.
getitem() when passed a key name, will return that key's value.
...we first test whether the local storage contains data items using !localstorage.
getitem('bgcolor').
... if it does, we run a function called setstyles() that grabs the data items using storage.
getitem() and uses those values to update page styles.
... if(!localstorage.
getitem('bgcolor')) { populatestorage(); } setstyles(); function populatestorage() { localstorage.setitem('bgcolor', document.
getelementbyid('bgcolor').value); localstorage.setitem('font', document.
getelementbyid('font').value); localstorage.setitem('image', document.
getelementbyid('image').value); } function setstyles() { var currentcolor = localstorage.
getitem('bgcolor'); var currentfont = localstorage.
getitem('font'); var currentimage = localstorage.
getitem('image'); document.
getelementbyid('bgcolor').value = currentcolor; document.
getelementbyid('font').value = currentfont; document.
getelementbyid('image').value = ...
SubtleCrypto.deriveBits() - Web APIs
let salt; /*
get some key material to use as input to the derivebits method.
...*/ function
getkeymaterial() { const password = window.prompt("enter your password"); const enc = new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), {name: "pbkdf2"}, false, ["derivebits", "derivekey"] ); } /* derive some bits from a password supplied by the user.
... */ async function
getderivedbits() { const keymaterial = await
getkeymaterial(); salt = window.crypto.
getrandomvalues(new uint8array(16)); const derivedbits = await window.crypto.subtle.derivebits( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-256" }, keymaterial, 256 ); const buffer = new uint8array(derivedbits, 0, 5); const derivedbitsvalue = document.queryselector(".pbkdf2 .derived-bits-value"); derivedbitsvalue.classlist.add("fade-in"); derivedbitsvalue.addeventlistener("animationend", () => { derivedbitsvalue.classlist.remove("fade-in"); }); derivedbitsvalue.textcontent = `${buffer}...[${derivedbits.bytelength} bytes total]`; } const derivebitsbutton = document.queryselector(".pbkdf2 .derive-bits-butt...
...on"); derivebitsbutton.addeventlistener("click", () => {
getderivedbits(); }); specifications specification status comment web cryptography apithe definition of 'subtlecrypto.derivebits()' in that specification.
SubtleCrypto.encrypt() - Web APIs
function
getmessageencoding() { const messagebox = document.queryselector(".rsa-oaep #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } function encryptmessage(publickey) { let encoded =
getmessageencoding(); return window.crypto.subtle.encrypt( { name: "rsa-oaep" }, publickey, encoded ); } aes-ctr this code fetches the...
... function
getmessageencoding() { const messagebox = document.queryselector(".aes-ctr #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } function encryptmessage(key) { let encoded =
getmessageencoding(); // counter will be needed for decryption counter = window.crypto.
getrandomvalues(new uint8array(16)); return window.crypto.subtle.encrypt( { name: "aes-ctr", counter, length: 64 }, key, encoded ); } let iv = new uint8array(16); let key = new uint8array(16); let data = new uint8array(12345); //crypto functions are wrapped in promises so we have to use await and make s...
... function
getmessageencoding() { const messagebox = document.queryselector(".aes-cbc #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } function encryptmessage(key) { let encoded =
getmessageencoding(); // iv will be needed for decryption iv = window.crypto.
getrandomvalues(new uint8array(16)); return window.crypto.subtle.encrypt( { ...
... function
getmessageencoding() { const messagebox = document.queryselector(".aes-gcm #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } function encryptmessage(key) { let encoded =
getmessageencoding(); // iv will be needed for decryption iv = window.crypto.
getrandomvalues(new uint8array(12)); return window.crypto.subtle.encrypt( { name: "aes-gcm", iv: iv }, key, encoded ); } specifications specification status comment web cryptography apithe definition of '...
SubtleCrypto.sign() - Web APIs
*/ function
getmessageencoding() { const messagebox = document.queryselector(".rsassa-pkcs1 #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } let encoded =
getmessageencoding(); let signature = await window.crypto.subtle.sign( "rsassa-pkcs1-v1_5", privatekey, encoded ); rsa-pss this code fetches the contents of a text box, encodes it for sign...
...*/ function
getmessageencoding() { const messagebox = document.queryselector(".rsa-pss #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } let encoded =
getmessageencoding(); let signature = await window.crypto.subtle.sign( { name: "rsa-pss", saltlength: 32, }, privatekey, encoded ); ecdsa this code fetches the contents of a text box, encodes it for signing, and signs it with a private key.
...*/ function
getmessageencoding() { const messagebox = document.queryselector(".ecdsa #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } let encoded =
getmessageencoding(); let signature = await window.crypto.subtle.sign( { name: "ecdsa", hash: {name: "sha-384"}, }, privatekey, encoded ); hmac this code fetches the contents of a text box, encodes it for signing, and signs it with a secret key.
...*/ function
getmessageencoding() { const messagebox = document.queryselector(".hmac #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } let encoded =
getmessageencoding(); let signature = await window.crypto.subtle.sign( "hmac", key, encoded ); specifications specification status comment web cryptography apithe definition of 'subtlecrypto.sign()' in that specification.
TextTrackList - Web APIs
properties this interface also inherits properties from its parent interface, eventtar
get.
... methods this interface also inherits methods from its parent interface, eventtar
get.
...
gettrackbyid() returns the texttrack found within the texttracklist whose id matches the specified string.
... examples
getting a video element's text track list to
get a media element's texttracklist, use its texttracks property.
URLSearchParams - Web APIs
urlsearchparams.
get() returns the first value associated with the given search parameter.
... urlsearchparams.
getall() returns all the values associated with a given search parameter.
...for (let p of searchparams) { console.log(p); } searchparams.has("topic") === true; // true searchparams.
get("topic") === "api"; // true searchparams.
getall("topic"); // ["api"] searchparams.
get("foo") === null; // true searchparams.append("topic", "webdev"); searchparams.tostring(); // "q=urlutils.searchparams&topic=api&topic=webdev" searchparams.set("topic", "more webdev"); searchparams.tostring(); // "q=urlutils.searchparams&topic=more+webdev" searchparams.delete("topic"); searchparams.tostring(); //...
... var paramsstring1 = "http://example.com/search?query=%40"; var searchparams1 = new urlsearchparams(paramsstring1); searchparams1.has("query"); // false searchparams1.has("http://example.com/search?query"); // true searchparams1.
get("query"); // null searchparams1.
get("http://example.com/search?query"); // "@" (equivalent to decodeuricomponent('%40')) var paramsstring2 = "?query=value"; var searchparams2 = new urlsearchparams(paramsstring2); searchparams2.has("query"); // true var url = new url("http://example.com/search?query=%40"); var searchparams3 = new urlsearchparams(url.search); searchparams3.has("query") // true ...
VideoTrackList - Web APIs
properties this interface also inherits properties from its parent interface, eventtar
get.
... methods this interface also inherits methods from its parent interface, eventtar
get.
...
gettrackbyid() returns the videotrack found within the videotracklist whose id matches the specified string.
... examples
getting a media element's video track list to
get a media element's videotracklist, use its videotracks property.
WebGL2RenderingContext.bindBufferBase() - Web APIs
the webgl2renderingcontext.bindbufferbase() method of the webgl 2 api binds a given webglbuffer to a given binding point (tar
get) at a given index.
... syntax void gl.bindbufferbase(tar
get, index, buffer); parameters tar
get a glenum specifying the tar
get for the bind operation.
... possible values: gl.transform_feedback_buffer gl.uniform_buffer index a gluint specifying the index of the tar
get.
... buffer a webglbuffer which to bind to the binding point (tar
get).
WebGL2RenderingContext.bindBufferRange() - Web APIs
the webgl2renderingcontext.bindbufferrange() method of the webgl 2 api binds a range of a given webglbuffer to a given binding point (tar
get) at a given index.
... syntax void gl.bindbufferrange(tar
get, index, buffer, offset, size); parameters tar
get a glenum specifying the tar
get for the bind operation.
... possible values: gl.transform_feedback_buffer gl.uniform_buffer index a gluint specifying the index of the tar
get.
... buffer a webglbuffer which to bind to the binding point (tar
get).
WebGL2RenderingContext.texImage3D() - Web APIs
syntax void gl.teximage3d(tar
get, level, internalformat, width, height, depth, border, format, type, glintptr offset); void gl.teximage3d(tar
get, level, internalformat, width, height, depth, border, format, type, htmlcanvaselement source); void gl.teximage3d(tar
get, level, internalformat, width, height, depth, border, format, type, htmlimageelement source); void gl.teximage3d(tar
get, level, internalformat, width, height, depth, border, format, type, htmlvideoelement source); void gl.teximage3d(tar
get, level, internalformat, width, height, depth, border, format, type, imagebitmap source); void gl.teximage3d(tar
get, level, internalformat, width, height, depth, border, format...
..., type, imagedata source); void gl.teximage3d(tar
get, level, internalformat, width, height, depth, border, format, type, arraybufferview?
... srcdata); void gl.teximage3d(tar
get, level, internalformat, width, height, depth, border, format, type, arraybufferview srcdata, srcoffset); parameters tar
get a glenum specifying the binding point (tar
get) of the active texture.
...used to upload data to the currently bound webgltexture from the webglbuffer bound to the pixel_unpack_buffer tar
get.
WebGLRenderingContext.blendFunc() - Web APIs
if a constant color and a constant alpha value are used to
gether as source and destination factors, a gl.invalid_enum error is thrown.
... gl.enable(gl.blend); gl.blendfunc(gl.src_color, gl.dst_color); to
get the current blend function, query the blend_src_rgb, blend_src_alpha, blend_dst_rgb, and blend_dst_alpha constants which return one of the blend function constants.
... gl.enable(gl.blend); gl.blendfunc(gl.src_color, gl.dst_color); gl.
getparameter(gl.blend_src_rgb) == gl.src_color; // true specifications specification status comment webgl 1.0the definition of 'blendfunc' in that specification.
... in webgl, constant color and constant alpha cannot be used to
gether as source and destination factors in the blend function.
WebGLRenderingContext.blendFuncSeparate() - Web APIs
if a constant color and a constant alpha value are used to
gether as source (srcrgb) and destination (dstrgb) factors, a gl.invalid_enum error is thrown.
... gl.enable(gl.blend); gl.blendfuncseparate(gl.src_color, gl.dst_color, gl.one, gl.zero); to
get the current blend function, query the blend_src_rgb, blend_src_alpha, blend_dst_rgb, and blend_dst_alpha constants which return one of the blend function constants.
... gl.enable(gl.blend); gl.blendfuncseparate(gl.src_color, gl.dst_color, gl.one, gl.zero); gl.
getparameter(gl.blend_src_rgb) == gl.src_color; // true specifications specification status comment webgl 1.0the definition of 'blendfunc' in that specification.
... in webgl, constant color and constant alpha cannot be used to
gether as source and destination factors in the blend function.
WebGLRenderingContext.bufferSubData() - Web APIs
syntax // webgl1: void gl.buffersubdata(tar
get, offset, arraybuffer srcdata); void gl.buffersubdata(tar
get, offset, arraybufferview srcdata); // webgl2: void gl.buffersubdata(tar
get, dstbyteoffset, arraybufferview srcdata, srcoffset, length); parameters tar
get a glenum specifying the binding point (tar
get).
... a gl.invalid_enum error is thrown if tar
get is not one of the allowed enums.
... examples using buffersubdata var canvas = document.
getelementbyid('canvas'); var gl = canvas.
getcontext('webgl'); var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, 1024, gl.static_draw); gl.buffersubdata(gl.array_buffer, 512, data); specifications specification status comment webgl 1.0the definition of 'buffersubdata' in that specification.
... adds new tar
get buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.transform_feedback_buffer, gl.uniform_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer.
WebGLRenderingContext.compressedTexImage[23]D() - Web APIs
syntax // webgl 1: void gl.compressedteximage2d(tar
get, level, internalformat, width, height, border, arraybufferview?
... pixels); // additionally available in webgl 2: // read from buffer bound to gl.pixel_unpack_buffer void gl.compressedteximage2d(tar
get, level, internalformat, width, height, border, glsizei imagesize, glintptr offset); void gl.compressedteximage2d(tar
get, level, internalformat, width, height, border, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); // read from buffer bound to gl.pixel_unpack_buffer void gl.compressedteximage3d(tar
get, level, internalformat, width, height, depth, border, glsizei imagesize, glintptr offset); void gl.compressedteximage3d(tar
get, level, internalformat, width, height, depth, border, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); parameters tar
get ...
... a glenum specifying the binding point (tar
get) of the active texture.
... examples var ext = ( gl.
getextension('webgl_compressed_texture_s3tc') || gl.
getextension('moz_webgl_compressed_texture_s3tc') || gl.
getextension('webkit_webgl_compressed_texture_s3tc') ); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgba_s3tc_dxt5_ext, 512, 512, 0, texturedata); gl.texparameteri(gl.texture_2d, gl.texture_mag_filter, g...
WebGLRenderingContext.framebufferRenderbuffer() - Web APIs
syntax void gl.framebufferrenderbuffer(tar
get, attachment, renderbuffertar
get, renderbuffer); parameters tar
get a glenum specifying the binding point (tar
get) for the framebuffer.
...bgl ext.color_attachment5_webgl ext.color_attachment6_webgl ext.color_attachment7_webgl ext.color_attachment8_webgl ext.color_attachment9_webgl ext.color_attachment10_webgl ext.color_attachment11_webgl ext.color_attachment12_webgl ext.color_attachment13_webgl ext.color_attachment14_webgl ext.color_attachment15_webgl renderbuffertar
get a glenum specifying the binding point (tar
get) for the render buffer.
... exceptions a gl.invalid_enum error is thrown if tar
get is not gl.framebuffer, gl.draw_framebuffer, or gl.read_framebuffer.
... a gl.invalid_enum error is thrown if renderbuffertar
get is not gl.renderbuffer.
WebGLRenderingContext.framebufferTexture2D() - Web APIs
syntax void gl.framebuffertexture2d(tar
get, attachment, textar
get, texture, level); parameters tar
get a glenum specifying the binding point (tar
get).
... textar
get a glenum specifying the texture tar
get.
... exceptions a gl.invalid_enum error is thrown if tar
get is not gl.framebuffer.
... textar
get is not one of the accepted texture tar
gets.
WebGLRenderingContext.viewport() - Web APIs
to
get this range, you can use the max_viewport_dims constant, which returns an int32array.
... gl.
getparameter(gl.max_viewport_dims); // e.g.
... int32array[16384, 16384] to
get the current viewport, query the viewport constant.
... gl.
getparameter(gl.viewport); // e.g.
Clearing with colors - Web APIs
the clear color is just the first of many you will
get to know.
... var paragraph = document.queryselector("p"), canvas = document.queryselector("canvas"); //
getting the webgl rendering context.
... var gl = canvas.
getcontext("webgl") || canvas.
getcontext("experimental-webgl"); // if failed, inform user of failure.
... if (!gl) { paragraph.innerhtml = "failed to
get webgl context.
Hello vertex attributes - Web APIs
ntsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl =
getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); g...
...l.compileshader(fragmentshader); program = gl.createprogram(); gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.detachshader(program, vertexshader); gl.detachshader(program, fragmentshader); gl.deleteshader(vertexshader); gl.deleteshader(fragmentshader); if (!gl.
getprogramparameter(program, gl.link_status)) { var linkerrlog = gl.
getprograminfolog(program); cleanup(); document.queryselector("p").innerhtml = "shader program did not link successfully.
... " + "error log: " + linkerrlog; return; } initializeattributes(); gl.useprogram(program); gl.drawarrays(gl.points, 0, 1); document.queryselector("canvas").addeventlistener("click", function (evt) { var clickxrelativtocanvas = evt.pagex - evt.tar
get.offsetleft; var clickxinwebglcoords = 2.0 * (clickxrelativtocanvas- gl.drawingbufferwidth/2) / gl.drawingbufferwidth; gl.bufferdata(gl.array_buffer, new float32array([clickxinwebglcoords]), gl.static_draw); gl.drawarrays(gl.points, 0, 1); }, false); } var buffer; function initializeattributes() { gl.enablevertexattribarray(0); buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float32array([0.0]),...
... gl.static_draw); gl.vertexattribpointer(0, 1, gl.float, false, 0, 0); } window.addeventlistener("beforeunload", cleanup, true); function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function
getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.
getcontext("webgl") || canvas.
getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to
get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0,...
Writing WebSocket client applications - Web APIs
var msg = { type: "message", text: document.
getelementbyid("text").value, id: clientid, date: date.now() }; // send the msg object as a json-formatted string.
... document.
getelementbyid("text").value = ""; } receiving messages from the server websockets is an event-driven api; when messages are received, a message event is sent to the websocket object.
...there are assorted types of data packets the client might receive, such as: login handshake message text user list updates the code that interprets these incoming messages might look like this: examplesocket.onmessage = function(event) { var f = document.
getelementbyid("chatbox").contentdocument; var text = ""; var msg = json.parse(event.data); var time = new date(msg.date); var timestr = time.tolocaletimestring(); switch(msg.type) { case "id": clientid = msg.id; setusername(); break; case "username": text = "<b>user <em>" + msg.name + "</em> signed in at " + timestr + "</b><br>"; break; case "mess...
...: text = "(" + timestr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>"; break; case "rejectusername": text = "<b>your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>" break; case "userlist": var ul = ""; for (i=0; i < msg.users.length; i++) { ul += msg.users[i] + "<br>"; } document.
getelementbyid("userlistbox").innerhtml = ul; break; } if (text.length) { f.write(text); document.
getelementbyid("chatbox").contentwindow.scrollbypages(1); } }; here we use json.parse() to convert the json object back into the original object, then examine and act upon its contents.
Fundamentals of WebXR - Web APIs
to
gether, these technologies are referred to as mixed reality, which is abbreviated xr.
... mixed reality is a large and complex subject, with much to learn and many other apis to bring to
gether in order to create an engaging experience for users.
... basic concepts before
getting into too much detail, let's consider some basic concepts that you need to know before you learn how to develop xr code.
...because the fov is a matter of the size of the lenses and how close they are to the user's eyes, there are limitations on how wide the fov can
get without installing lenses into the user's eyeballs.
WebXR Device API - Web APIs
webxr is a group of standards which are used to
gether to support rendering 3d scenes to hardware designed for presenting virtual worlds (virtual reality, or vr), or for adding graphical imagery to the real world, (augmented reality, or ar).
...to
get an xrframe, call the session's requestanimationframe() method, providing a callback which will be called with the xrframe once available.
... xrinputsource represents any input device the user can use to perform tar
geted actions within the same virtual space as the viewer.
... tar
geting and hit detection how to use an input source's tar
geting ray mode and tar
geting ray space to display a tar
geting ray, identify tar
geted surfaces or objects, and perform related tasks.
Web Animations API Concepts - Web APIs
now we’ve got the waapi for future animation specifications to piggyback on, allowing them to to remain consistent and play well to
gether.
... core concepts web animations consist of timeline objects, animation objects, and animation effect objects working to
gether.
...animation objects accept media in the form of animation effects, specifically keyframe effects (we’ll
get to those in a moment).
... assembling the animation from disparate pieces we can assemble all these pieces to
gether to create a working animation with the animation() constructor or we can use the element.animate() shortcut function.
Web audio spatialization basics - Web APIs
these two to
gether can nicely set the direction.
...first, we'll
get references to the elements we want to move, then we'll store references to the values we'll change when we set up css transforms to actually do the movement.
...t the new coordinates when we're rotating our boombox: // set up rotation constants const rotationrate = 60; // bigger number equals slower sound rotation const q = math.pi/rotationrate; //rotation increment in radians we can also use this to work out degrees rotated, which will help with the css transforms we will have to create (note we need both an x and y-axis for the css transforms): //
get degrees for css const degreesx = (q * 180)/math.pi; const degreesy = (q * 180)/math.pi; let's take a look at our left rotation as an example.
...the values can be hard to manipulate sometimes and depending on your use case it can take some time to
get them right.
WritableStream - Web APIs
writablestream.
getwriter() returns a new instance of writablestreamdefaultwriter and locks the stream to that instance.
...inside this function it calls the stream's
getwriter() method, which returns an instance of writablestreamdefaultwriter.
... const list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.
getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // call ready agai...
... samsung internet android full support 7.0
getwriter experimentalchrome full support 59edge full support 16firefox no support noie no support noopera full support 47safari ?
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
const {cc,ci} = require("chrome"); function createtcperrorfromfailedxhr(xhr) { let status = xhr.channel.queryinterface(ci.nsirequest).status; let errtype; if ((status & 0xff0000) === 0x5a0000) { // security module const nsinsserrorsservice = ci.nsinsserrorsservice; let nsserrorsservice = cc['@mozilla.org/nss_errors_service;1'].
getservice(nsinsserrorsservice); let errorclass; //
geterrorclass will throw a generic ns_error_failure if the error code is // somehow not in the set of covered errors.
... try { errorclass = nsserrorsservice.
geterrorclass(status); } catch (ex) { //catching security protocol exception errorclass = 'securityprotocol'; } if (errorclass == nsinsserrorsservice.error_class_bad_cert) { errtype = 'securitycertificate'; } else { errtype = 'securityprotocol'; } // nss_sec errors (happen below the base value because of negative vals) if ((status & 0xffff) < math.abs(nsinsserrorsservice.nss_sec_error_base)) { // the bases are actually negative, so in our positive numeric space, we // need to subtract the base off our value.
... case 11: // sec_error_expired_certificate, sec(11) errname = 'securityexpiredcertificateerror'; break; case 12: // sec_error_revoked_certificate, sec(12) errname = 'securityrevokedcertificateerror'; break; // per bsmith, we will be unable to tell these errors apart very soon, // so it makes sense to just folder them all to
gether already.
...print = " + cert.sha1fingerprint + "\n"); var validity = cert.validity.queryinterface(ci.nsix509certvalidity); dump("\tvalid from " + validity.notbeforegmt + "\n"); dump("\tvalid until " + validity.notaftergmt + "\n"); } } catch(err) { alert(err); } } function test(url) { var req = cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(); req.open('
get', url, true); req.addeventlistener("error", function(e) { var error = createtcperrorfromfailedxhr(req); dumpsecurityinfo(req, error); }, false); req.onload = function(e) { dumpsecurityinfo(req); }; req.send(); } then test("https://addons.mozilla.org"); produced the following output in my console: connection status: succeeded security info: ...
Sending and Receiving Binary Data - Web APIs
var oreq = new xmlhttprequest(); oreq.open("
get", "/myfile.png", true); oreq.responsetype = "arraybuffer"; oreq.onload = function (oevent) { var arraybuffer = oreq.response; // note: not oreq.responsetext if (arraybuffer) { var bytearray = new uint8array(arraybuffer); for (var i = 0; i < bytearray.bytelength; i++) { // do something with each byte in the array } } }; oreq.send(null); you can also read a binary file...
... var oreq = new xmlhttprequest(); oreq.open("
get", "/myfile.png", true); oreq.responsetype = "blob"; oreq.onload = function(oevent) { var blob = oreq.response; // ...
... function load_binary_resource(url) { var req = new xmlhttprequest(); req.open('
get', url, false); //xhr binary charset opt by marcus granado 2006 [http://mgran.blogspot.com] req.overridemimetype('text\/plain; charset=x-user-defined'); req.send(null); if (req.status != 200) return ''; return req.responsetext; } the magic happens in line 5, which overrides the mime type, forcing the browser to treat it as plain text, using a user-defined character set.
...var stream = components.classes["@mozilla.org/network/file-input-stream;1"] .createinstance(components.interfaces.nsifileinputstream); stream.init(file, 0x04 | 0x08, 0644, 0x04); // file is an nsifile instance // try to determine the mime type of the file var mimetype = "text\/plain"; try { var mimeservice = components.classes["@mozilla.org/mime;1"] .
getservice(components.interfaces.nsimimeservice); mimetype = mimeservice.
gettypefromfile(file); // file is an nsifile instance } catch (oevent) { /* eat it; just use text/plain */ } // send var req = components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"] .createinstance(components.interfaces.nsixmlhttprequest); req.open('put', url, false); /* synchronous!
XRRigidTransform.inverse - Web APIs
that is, you can always
get the inverse of any xrrigidtransform using its inverse property, instead of having to explicitly generate it.
... let modelviewmatrix = mat4.create(); for (let view of pose.view) { let viewport = gllayer.
getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); /* ...
...*/ } this outline of a renderer's core code shows how the pose's view
gets represented by taking its transform's inverse's matrix as the model view matrix used to transform objects based on the viewer's position and orientation.
... the inverse's matrix is multiplied by the object's matrix to
get the model view matrix, which is then passed into the shader program by setting a uniform to contain that information.
ARIA live regions - Accessibility
simple live regions dynamic content which updates without a page reload is generally either a region or a wid
get.
... progressbar a hybrid between a wid
get and a live region.
... <div id="clock" role="timer" aria-live="polite"></div> /* basic javascript to update the clock */ setinterval(function() { var now = new date(); document.
getelementbyid('clock').innerhtml = "time: " + now.
gethours() + ":" + ("0"+now.
getminutes()).substr(-2); }, 60000); the first time the function executes, the entirety of the string that is added will be announced.
... a working example of a simple year control for better understanding: <div id="date-input"> <label>year: <input type="text" id="year" value="1990" onblur="change(event)"/> </label> </div> <div id="date-output" aria-live="polite"> the set year is: <span id="year-output">1990</span> </div> function change(event) { var yearout = document.
getelementbyid("year-output"); switch (event.tar
get.id) { case "year": yearout.innerhtml = event.tar
get.value; break; default: return; } }; without aria-atomic="true" the screenreader announces only the changed value of year.
Using the link role - Accessibility
this is a huge amount of work just to recreate something you've
get for free using the <a> element, so you should really use that if possible.
... you should however note that there are still problems with this approach: it is very difficult to detect whether the tar
get of the fake link has been visited before, and therefore use :visited styles (e.g.
... html <h1>role="link" example</h1> <span data-href="https://mozilla.org" tabindex="0" id="link1" role="link" class="link"> fake accessible link created using a span </span> <p><a href="https://mozilla.org" tar
get="_blank">actual real link</a></p> css span[role="link"] { color: blue; text-decoration: underline; cursor: pointer; } span[role="link"]:focus { outline: 1px dotted black; } javascript const spanelem = document.queryselector('span'); //handles clicks and keydowns on the link function navigatelink(e) { if (e.type === 'click' || e.key === 'enter') { let ref = e.tar
get != n...
...e.tar
get : e.srcelement; if (ref) { window.open(ref.
getattribute('data-href'), '_blank'); } } } spanelem.addeventlistener('click', navigatelink); spanelem.addeventlistener('keydown', navigatelink); result notes if pressing the link triggers an action but does not change browser focus or navigate to a new page, you might wish to consider using the button role instead of the link role.
ARIA: timer role - Accessibility
required javascript features keypress used to handle keyboard input and control the focus click, touch handle as appropriate for your wid
get as well changing attribute values aria-activedescendant is used to manage the focus inside the application container.
... the timer role does not have a related html wid
get and xxx.
... the author of the timer must take full responsibility for not letting users
get stuck in a focus limbo or trap focus inside something the user cannot exit of.
... <div id="clock" role="timer" aria-live="off">20</div> <button onclick="starttimer('clock')">start</button> /* basic javascript to update a timer */ function starttimer(timername) { //
get the number of seconds let timer = document.
getelementbyid(timername), seconds = parseint(timer.innertext); // remove a second // updated the content of timer timer.innertext = --seconds // if timer != 0, settimeout if (seconds) { settimeout( function() { starttimer(timername); }, 1000); } } the first time the function executes, the entirety of the string th...
ARIA: listbox role - Accessibility
when the listbox role is added to an element, or such an element becomes visible, screen readers announce the label and role of the listbox when it
gets focus.
... if an option or item is focused within the list, it
gets announced next, followed by an indication of the item's position with the list if the screen reader supports this.
... required javascript features selecting an option in a single select listbox when the user selects an option, the following must occur: deselect the previously selected option, setting the aria-selected to false, or removing the attribute alto
gether, changing the appearance of the newly unselected option to appear not selected.
... if the listbox is not part of another wid
get, it should have the aria-labelledby property set.
WAI-ARIA Roles - Accessibility
it is usually set on related content items such as comments, forum posts, newspaper articles or other items grouped to
gether on one page.aria: banner rolea banner role represents general and informative content frequently placed at the beginning of the page.
...dialogs can be either non-modal (it's still possible to interact with content outside of the dialog) or modal (only the content in the dialog can be interacted with).aria: document rolegenerally used in complex composite wid
gets or applications, the document role can inform assistive technologies to switch context to a reading mode: the document role tells assistive technologies with reading or browse modes to use the document mode to read the content contained within this element.aria: feed rolea feed is a dynamic scrollable list of articles in which articles are added to or removed from either end of the list as the u...
...a figure is generally considered to be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text.aria: form rolethe form landmark role can be used to identify a group of elements on a page that provide equivalent functionality to an html form.aria: grid rolethe grid role is for a wid
get that contains one or more rows of cells.
...tem menuitemcheckbox menuitemradio none note option presentation progressbar - old page radio - old page radiogroup range region roletype rowheader(estelle) scrollbar searchbox section sectionhead select separator slider - old page spinbutton status - old page structure tab tablist (michiel) tabpanel (michiel) term timer toolbar tooltip tree treegrid treeitem wid
get window ...
Operable - Accessibility
see ui controls and building keyboard accessibility back in 2.1.2 no keyboard trap (a) when entering a section of functionality using the keyboard, you should be able to
get out of that section again using *only* the keyboard.
... this is very important so that keyboard users do not
get trapped on specific sections of your apps.
... understanding motion actuation 2.5.5 tar
get size (aaa) added in 2.1 the size of an actionable item's touch tar
get must be at least 44 css pixels in both width and height.
... understanding tar
get size 2.5.6 concurrent input mechanisms (aaa) added in 2.1 make sure people can use and switch between different modes of input when interacting with digital content including touchscreen, keyboard, mouse, voice commands, or alternative input devices.
CSS Animations tips and tricks - CSS: Cascading Style Sheets
instead, you have to use clever tricks to
get a stopped animation to replay.
... here's what happens when the play() function
gets called: the box's list of css classes is reset to simply "box".
...our callback
gets executed just before the next repaint of the document.
... shows how you'd achieve the aforementioned javascript technique: .slidein { animation-duration: 5s; animation-name: slidein; animation-iteration-count: infinite; } .stopped { animation-name: none; } @keyframes slidein { 0% { margin-left: 0%; } 50% { margin-left: 50%; } 100% { margin-left: 0%; } } <h1 id="watchme">click me to stop</h1> let watchme = document.
getelementbyid('watchme') watchme.classname = 'slidein' const listener = (e) => { watchme.classname = 'slidein stopped' } watchme.addeventlistener('click', () => watchme.addeventlistener('animationiteration', listener, false) ) demo https://jsfiddle.net/morenoh149/5ty5a4oy/ ...
Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
once the first row
gets to a point where there is not enough space to place another 160 pixel item, a new flex line is created for the items and so on until all of the items are placed.
...if you assign percentage widths to flex items — either as flex-basis or by adding a width to the item itself leaving the value of flex-basis as auto — you can
get the impression of a two dimensional layout.
...flex line wrapping is re-done after collapsing, however, so the cross-size of a flex container with multiple lines might or might not change.” - collapsed items this behaviour is useful if you want to tar
get flex items using javascript to show and hide content for example.
...if you add more content to the second item, it changes row once it
gets long enough.
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
.wrapper { display: grid; grid-gap: 20px; grid-template-areas: "header" "nav" "content" "sidebar" "ad" "footer"; } after setting up a mobile layout we will
get this single column at all screen sizes, we can now add a media query and redefine our layout for the circumstance of having enough screen real estate to show two columns.
...i want them never to become smaller than 200 pixels, and then to share any available remaining space equally – so we always
get equal width column tracks.
...at some breakpoints, this means that we'll
get a gap in the grid – where there isn’t space to lay out a two-track item.
...don’t for
get to find examples that are impossible to build with current methods.
Using CSS gradients - CSS: Cascading Style Sheets
if you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point; however, you can use values outside that range if necessary to
get the effect you want.
...the colors
get cycled over again as the gradient repeats.
...the colors
get cycled over and over as the gradient repeats.
... <div class="repeating-radial"></div> div { width: 120px; height: 120px; } .repeating-radial { background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); } multiple repeating radial gradients <div class="multi-tar
get"></div> div { width: 250px; height: 150px; } .multi-tar
get { background: repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5), rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px, rgba(255,255,255,0.5) 30px) top left no-repeat, repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5), rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px, rgba(255,255,255,0.5) 20px) top left no-repeat yellow; background-size: 200px 200px, 150px 150px; } ...
Visual formatting model - CSS: Cascading Style Sheets
it will then behave as a flex item, however, it cannot be tar
geted and styled like a regular box because there is no element to tar
get.
... something to consider about these anonymous boxes is that they inherit styles from their direct parent, but you cannot change how they look by tar
geting the anonymous box.
... in my examples, i am using a direct child selector to tar
get the children of the container.
...multiple-column layout creates anonymous column boxes around the columns; these also cannot be styled or otherwise tar
getted.
animation-fill-mode - CSS: Cascading Style Sheets
the animation-fill-mode css property sets how a css animation applies styles to its tar
get before and after its execution.
... syntax /* single animation */ animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; /* multiple animations */ animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none; values none the animation will not apply any styles to the tar
get when it's not executing.
... forwards the tar
get will retain the computed values set by the last keyframe encountered during execution.
...dd 100% or to reverse even or odd 0% or from alternate even 0% or from alternate odd 100% or to alternate-reverse even 100% or to alternate-reverse odd 0% or from backwards the animation will apply the values defined in the first relevant keyframe as soon as it is applied to the tar
get, and retain this during the animation-delay period.
animation - CSS: Cascading Style Sheets
.5em; } button { width: 27px; height: 27px; background-size: 16px; background-position: center; background-repeat: no-repeat; border-radius: 3px; cursor: pointer; } button.play { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atar
get%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c...
...1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#play'); } button.pause { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atar
get%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#pause'); } button.restart { background-image: url('data:image/svg+xml;charset=ut...
...f-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atar
get%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#restart'); } .grid { width: 100%; height: 100%; display: flex; background: #eee; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; justif...
... <single-animation-fill-mode> determines how styles should be applied to the animation's tar
get before and after its execution.
clear - CSS: Cascading Style Sheets
suspendisse e
get dolor.</p> <p class="red">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="left">this paragraph clears left.</p> </div> css .wrapper{ border:1px solid black; padding:10px; } .left { border: 1px solid black; clear: left; } .black { float: left; margin: 0; background-color: black; color: #fff; width: 20%; } .red { float: left; margin: 0; backgro...
...suspendisse e
get dolor.</p> <p class="red">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="right">this paragraph clears right.</p> </div> css .wrapper{ border:1px solid black; padding:10px; } .right { border: 1px solid black; clear: right; } .black { float: right; margin: 0; background-color: black; color: #fff; width:20%; } .red { float: right; margin: 0; background-color: pink; width:20%; } p { width: 50%; } clear: both html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer ad...
...suspendisse e
get dolor.
...suspendisse e
get dolor.</p> <p class="both">this paragraph clears both.</p> </div> css .wrapper{ border:1px solid black; padding:10px; } .both { border: 1px solid black; clear: both; } .black { float: left; margin: 0; background-color: black; color: #fff; width:20%; } .red { float: right; margin: 0; background-color: pink; width:20%; } p { width: 45%; } specifications specification status comment css logical properties and values level 1the definition of 'float and clear' in that specification.
Inheritance - CSS: Cascading Style Sheets
inherited properties when no value for an inherited property has been specified on an element, the element
gets the computed value of that property on its parent element.
... only the root element of the document
gets the initial value given in the property's summary.
...it does not
get the initial value of the property (which is the color that is used for the root element when the page specifies no color).
... non-inherited properties when no value for a non-inherited property has been specified on an element, the element
gets the initial value of that property (as specified in the property's summary).
position - CSS: Cascading Style Sheets
nam congue tortor e
get pulvinar lobortis.
... duis nisl mauris, aliquam sit amet luctus e
get, dapibus in enim.
...nam congue tortor e
get pulvinar lobortis.
... duis nisl mauris, aliquam sit amet luctus e
get, dapibus in enim.
Ajax - Developer guides
getting started an introduction to ajax.
... asynchronous javascript and xml, while not a technology in itself, is a term coined in 2005 by jesse james garrett, that describes a "new" approach to using a number of existing technologies to
gether, including html or xhtml, css, javascript, dom, xml, xslt, and most importantly the xmlhttprequest object.
... documentation
getting started this article guides you through the ajax basics and gives you two simple hands-on examples to
get you started.
...file objects may be obtained from a filelist object returned as a result of a user selecting files using the <input> element, from a drag and drop operation's datatransfer object, or from the moz
getasfile() api on an htmlcanvaselement.
Adding captions and subtitles to HTML5 video - Developer guides
if you are not interested in this, and just want to
get straight into the javascript and more relevant css, skip to the subtitle implementation section.
... initial setup as with all the other buttons, one of the first things we need to do is store a handle to the subtitles' button: var subtitles = document.
getelementbyid('subtitles'); we also initially turn off all subtitles, in case the browser turns any of them on by default: for (var i = 0; i < video.texttracks.length; i++) { video.texttracks[i].mode = 'hidden'; } the video.texttracks property contains an array of all the text tracks attached to the video.
...value = label; button.setattribute('data-state', 'inactive'); button.appendchild(document.createtextnode(label)); button.addeventlistener('click', function(e) { // set all buttons to inactive subtitlemenubuttons.map(function(v, i, a) { subtitlemenubuttons[i].setattribute('data-state', 'inactive'); }); // find the language to activate var lang = this.
getattribute('lang'); for (var i = 0; i < video.texttracks.length; i++) { // for the 'subtitles-off' button, the first condition will never match so all will subtitles be turned off if (video.texttracks[i].language == lang) { video.texttracks[i].mode = 'showing'; this.setattribute('data-state', 'active'); } else { video.tex...
... the ::cue pseudo-element is the key to tar
getting individual text track cues for styling, as it matches any defined cue.
Creating and triggering events - Developer guides
elem.dispatchevent(event); the above code example uses the eventtar
get.dispatchevent() method.
...elem.addeventlistener('build', function (e) { // e.tar
get matches elem }, false); // tar
get can be any element or other eventtar
get.
...ail: { text: () => textarea.value } }); // the form element listens for the custom "awesome" event and then consoles the output of the passed text() method form.addeventlistener('awesome', e => console.log(e.detail.text())); // as the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point textarea.addeventlistener('input', e => e.tar
get.dispatchevent(eventawesome)); creating and dispatching events dynamically elements can listen for events that haven't been created yet: <form> <textarea></textarea> </form> const form = document.queryselector('form'); const textarea = document.queryselector('textarea'); form.addeventlistener('awesome', e => console.log(e.detail.text())); textarea.addeventlistener('input', function() { ...
... function simulateclick() { const event = new mouseevent('click', { view: window, bubbles: true, cancelable: true }); const cb = document.
getelementbyid('checkbox'); const cancelled = !cb.dispatchevent(event); if (cancelled) { // a handler called preventdefault.
DOM onevent handlers - Developer guides
events are actions like: being clicked detecting pressed keys
getting focus the onevent handler is usually named with the event it reacts to, like onclick, onkeypress, onfocus, etc.
...when the element is built from the html, the value of its onevent attributes are copied to the dom object that represents the element, so that accessing the attributes' values using javascript will
get the value set in the html.
...k handler") }; // original handler log(`element's onclick as a javascript property: <code> ${el.onclick.tostring()} </code>`); //changing handler using .onclick log('<br>changing onclick handler using <strong> onclick property </strong> '); el.onclick = anchoronclick; log(`changed the property to: <code> ${el.onclick.tostring()} </code>`); log(`but the html attribute is unchanged: <code> ${el.
getattribute("onclick")} </code><br>`); //changing handler using .setattribute log('<hr/><br> changing onclick handler using <strong> setattribute method </strong> '); el.setattribute("onclick", 'anchoronclick(event)'); log(`changed the property to: <code> ${el.onclick.tostring()} </code>`); log(`now even the html attribute has changed: <code> ${el.
getattribute("onclick")} </code><br>`); result ...
... when discussing the various methods of listening to events: event listener refers to a function or object registered via eventtar
get.addeventlistener() event handler refers to a function registered via on… attributes or properties specifications specification status comment html living standardthe definition of 'event handlers' in that specification.
Using HTML sections and outlines - Developer guides
it does not refer to the main content alone and can be used for comments and wid
gets.
... <section> <h1>
getting involved</h1> <article> <header> <h2>how to become an mdn contributor</h2> <p>do you want to help protect the web?....</p> </header> <section> <h3>steps to editing an article</h3> </section> <footer> <p>author info</p> <p>publication date</p> </footer> </article> </section> section element the section element is used for a thematic g...
... <section> <h1>amazing mdn contributors</h1> <ul> <li><img src="link" alt="descriptive text"></li> <li><img src="link" alt="descriptive text"></li> <li><img src="link" alt="descriptive text"></li> </ul> <aside> <p>to
get involved contact</p> </aside> </section> nesting aside elements the <aside> element can be nested inside of other sectional html elements.
...if a significant percentage of your particular tar
get audience is using internet explorer 8 or older, then you can follow the below instructions to make them behave as expected.
Mobile-friendliness - Developer guides
their desktop site focuses on
getting visitors to book trips.
...goal #3 (performance) “give your users a smooth experience, even on a slow connection.” though things have been
getting better in recent years, browsing the internet over a wireless data connection can still be pretty painful.
...know your audience while not strictly a part of the definition of being mobile friendly, defining who your tar
get audience is makes these goals much more concrete.
... for example, it is absolutely critical to keep in mind which browsers and devices you will tar
get when picking a mobile strategy.
<area> - HTML: Hypertext Markup Language
href the hyperlink tar
get for the area.
... rel for anchors containing the href attribute, this attribute specifies the relationship of the tar
get object to the link object.
... tar
get a keyword or author-defined name of the browsing context to display the linked resource.
...firefox 79+) setting tar
get="_blank" on <area> elements implicitly provides the same rel behavior as setting rel="noopener".
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
the
getstartdate() method can be used to determine the beginning point of the media timeline's reference frame.
... to
get a consistent look and feel across browsers, you'll need to create custom controls; these can be marked up and styled in whatever way you want, and then javascript can be used along with the htmlmediaelement api to wire up their functionality.
...</audio> for details on when autoplay works, how to
get permission to use autoplay, and how and when it's appropriate to use autoplay, see our autoplay guide.
... 1 00:00:00 --> 00:00:45 [ener
getic techno music] 2 00:00:46 --> 00:00:51 welcome to the time keeper's podcast!
<button>: The Button element - HTML: Hypertext Markup Language
get: the form data are appended to the form's action url, with a ?
... formtar
get html5 if the button is a submit button, this attribute is a author-defined name or standardized, underscore-prefixed keyword indicating where to display the response from submitting the form.
...if this attribute is specified, it overrides the tar
get attribute of the button's form owner.
... understanding success criterion 2.5.5: tar
get size | w3c understanding wcag 2.1 tar
get size and 2.5.5 | adrian roselli quick test: large touch tar
gets - the a11y project proximity large amounts of interactive content — including buttons — placed in close visual proximity to each other should have space separating them.
<form> - HTML: Hypertext Markup Language
get: the
get method; form data appended to the action url with a ?
... tar
get indicates where to display the response after submitting the form.
... this value can be overridden by a formtar
get attribute on a <button>, <input type="submit">, or <input type="image"> element.
... examples html <!-- form which will send a
get request to the current url --> <form> <label>name: <input name="submitted-name" autocomplete="name"> </label> <button>save</button> </form> <!-- form which will send a post request to the current url --> <form method="post"> <label>name: <input name="submitted-name" autocomplete="name"> </label> <button>save</button> </form> <!-- form with fieldset, legend, and label --> <form method="post"> <fieldset> <legend>title</legend> <label><input type="radio" name="radio"> select me</label> </fieldset> </form> specifications specification status comment html living standardthe definition of '<form>' in that specification.
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
name a tar
getable name for the embedded browsing context.
... this can be used in the tar
get attribute of the <a>, <form>, or <base> elements; the formtar
get attribute of the <input> or <button> elements; or the windowname parameter in the window.open() method.
... allow-popups: allows popups (such as window.open(), tar
get="_blank", or showmodaldialog()).
... from the inside of a frame, a script can
get a reference to its parent window with window.parent.
<input type="color"> - HTML: Hypertext Markup Language
here's an example that watches changes over time to the color value: colorpicker.addeventlistener("input", updatefirst, false); colorpicker.addeventlistener("change", watchcolorpicker, false); function watchcolorpicker(event) { document.queryselectorall("p").foreach(function(p) { p.style.color = event.tar
get.value; }); } selecting the value if the <input> element's implementation of the color type on the user's browser doesn't support a color well, but is instead a text field for entering the color string directly, you can use the select() method to select the text currently in the edit field.
...ff"; window.addeventlistener("load", startup, false); initialization once the page is loaded, our load event handler, startup(), is called: function startup() { colorwell = document.queryselector("#colorwell"); colorwell.value = defaultcolor; colorwell.addeventlistener("input", updatefirst, false); colorwell.addeventlistener("change", updateall, false); colorwell.select(); } this
gets a reference to the color <input> element in a variable called colorwell, then sets the color input's value to the value in defaultcolor.
... function updatefirst(event) { var p = document.queryselector("p"); if (p) { p.style.color = event.tar
get.value; } } when the color picker is dismissed, indicating that the value will not be changing again (unless the user re-opens the color picker), a change event is sent to the element.
... we handle that event using the updateall() function, using event.tar
get.value to obtain the final selected color: function updateall(event) { document.queryselectorall("p").foreach(function(p) { p.style.color = event.tar
get.value; }); } this sets the color of every <p> block so that its color attribute matches the current value of the color input, which is referred to using event.tar
get.
<input type="date"> - HTML: Hypertext Markup Language
you can
get and set the date value in javascript with the input element's value and valueasnumber properties.
...mum date of 2017-04-01 and a maximum date of 2017-04-30: <form> <label for="party">choose your preferred party date: <input type="date" name="party" min="2017-04-01" max="2017-04-30"> </label> </form> the result is that only days in april 2017 can be selected — the month and year parts of the textbox will be uneditable, and dates outside april 2017 can't be selected in tte picker wid
get.
...=== 'march' | month === 'may' | month === 'july' | month === 'august' | month === 'october' | month === 'december') { daynum = 31; } else if(month === 'april' | month === 'june' | month === 'september' | month === 'november') { daynum = 30; } else { // if month is february, calculate whether it is a leap year or not var year = yearselect.value; var isleap = new date(year, 1, 29).
getmonth() == 1; isleap ?
...this part of the code ensures that the highest day available // is selected, rather than showing a blank dayselect if(dayselect.value === "") { dayselect.value = previousday - 1; } if(dayselect.value === "") { dayselect.value = previousday - 2; } if(dayselect.value === "") { dayselect.value = previousday - 3; } } } function populateyears() { //
get this year as a number var date = new date(); var year = date.
getfullyear(); // make this year, and the 100 years before it available in the year <select> for(var i = 0; i <= 100; i++) { var option = document.createelement('option'); option.textcontent = year-i; yearselect.appendchild(option); } } // when the month or year <select> values are changed, rerun populatedays() /...
<input type="file"> - HTML: Hypertext Markup Language
getting information on selected files the selected files' are returned by the element's htmlinputelement.files property, which is a filelist object containing a list of file objects.
... the filelist behaves like an array, so you can check its length property to
get the number of selected files.
... note: you can set as well as
get the value of htmlinputelement.files in all modern browsers; this was most recently added to firefox, in version 57 (see bug 1384030).
... in the first lines of script, we
get references to the form input itself, and the <div> element with the class of .preview.
<input type="time"> - HTML: Hypertext Markup Language
you can set a default value for the input by including a valid time in the value attribute when creating the <input> element, like so: <label for="appt-time">choose an appointment time: </label> <input id="appt-time" type="time" name="appt-time" value="13:30"> you can also
get and set the date value in javascript using the htmlinputelement.value property, for example: var timecontrol = document.queryselector('input[type="time"]'); timecontrol.value = '15:30'; time value format the value of the time input is always in 24-hour format that includes leading zeros: hh:mm, regardless of the input format, which is likely to be selected based on the user's locale (or by the...
... var starttime = document.
getelementbyid("starttime"); var valuespan = document.
getelementbyid("value"); starttime.addeventlistener("input", function() { valuespan.innertext = starttime.value; }, false); when a form including a time input is submitted, the value is encoded before being included in the form's data.
... using the step attribute you can use the step attribute to vary the amount of time jumped whenever the time is incremented or decremented (for example, so the time moves by 10 minutes at a time when clicking the little arrow wid
gets).
...argin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the best way to deal with times in forms in a cross-browser way, for the time being, is to
get the user to enter the hours and minutes (and seconds if required) in separate controls (<select> elements are popular; see below for an example), or use javascript libraries such as the jquery timepicker plugin.
<tr>: The Table Row element - HTML: Hypertext Markup Language
this can take a little practice to
get right when building your tables.
... we have some examples below, but for more examples and an in-depth tutorial, see the html tables series in our learn web development area, where you'll learn how to use the table elements and their attributes to
get just the right layout and formatting for your tabular data.
... charobsolete since html5 a domstring which sets the character to align the cells in each of the row's columns on (each row's centering that uses the same character
gets aligned with others using the same character .
... table { border: 1px solid black; } th, td { border: 1px solid black; } explicitly specifying table content groups before really
getting into styling this table, let's take a moment to add row and column groups to help make our css easier.
HTML elements reference - HTML: Hypertext Markup Language
forms html provides a number of elements which can be used to
gether to create forms which the user can fill out and submit to the web site or application.
... <input> the html <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control wid
gets are available, depending on the device and user agent.
... element description <details> the html details element (<details>) creates a disclosure wid
get in which information is visible only when the wid
get is toggled into an "open" state.
... element description <slot> the html <slot> element—part of the web components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate dom trees and present them to
gether.
HTML: Hypertext Markup Language
we have put to
gether a course that includes all the essential information you need to work towards your goal.
...
get started beginner's tutorials our html learning area features multiple modules that teach html from the ground up — no previous knowledge required.
... introduction to html this module sets the stage,
getting you used to important concepts and syntax such as looking at applying html to text, how to create hyperlinks, and how to use html to structure a web page.
...this module
gets you started with creating the client-side/front-end parts of forms.
HTTP conditional requests - HTTP
the different behaviors are defined by the method of the request used, and by the set of headers used for a precondition: for safe methods, like
get, which usually tries to fetch a document, the conditional request can be used to send back the document, if relevant only.
... to
gether with the resource, the validators are sent in the headers.
...the client first reads the original files, modifies them, and finally pushes them to the server: unfortunately, things
get a little inaccurate as soon as we take into account concurrency.
...the concept is to allow all clients to
get copies of the resource, then let them modify it locally, controlling concurrency by successfully allowing the first client submitting an update.
Large-Allocation - HTTP
a large-allocation header was ignored due to the load being triggered by a non-
get request.
...this error is displayed when loading a document with a large-allocation header with a non-
get http method.
... the document with the large-allocation header was loaded in a window which was opened by window.open(), <a tar
get="_blank"> or other similar methods without rel="noopener" or the "noopener" feature being set.
... the document with the large-allocation header has opened another window with window.open(), <a tar
get="_blank"> or other similar methods without rel="noopener" or the "noopener" feature being set.
Introduction - JavaScript
once you have a firm grasp of the fundamentals, you can use the javascript reference to
get more details on individual objects and statements.
...to
get a better idea about the different technologies that are used when programming with javascript, consult the article javascript technologies overview.
...
getting started with javascript
getting started with javascript is easy: all you need is a modern web browser.
... hello world to
get started with writing javascript, open the web console in multi-line mode, and write your first "hello world" javascript code: (function(){ "use strict"; /* start of your code */ function greetme(yourname) { alert('hello ' + yourname); } greetme('world'); /* end of your code */ })(); press cmd+enter or ctrl+enter (or click the run button) to watch it unfold in your browser!
Keyed collections - JavaScript
let sayings = new map(); sayings.set('dog', 'woof'); sayings.set('cat', 'meow'); sayings.set('elephant', 'toot'); sayings.size; // 3 sayings.
get('dog'); // woof sayings.
get('fox'); // undefined sayings.has('bird'); // false sayings.delete('dog'); sayings.has('dog'); // false for (let [key, value] of sayings) { console.log(key + ' goes ' + value); } // "cat goes meow" // "elephant goes toot" sayings.clear(); sayings.size; // 0 object and map compared traditionally, objects have been used to map strings to values.
... you can
get the size of a map easily, while you have to manually keep track of size for an object.
...the object references in the keys are held weakly, meaning that they are a tar
get of garbage collection (gc) if there is no other reference to the object anymore.
... const privates = new weakmap(); function public() { const me = { // private data goes here }; privates.set(this, me); } public.prototype.method = function () { const me = privates.
get(this); // do stuff with private data in `me`...
Public class fields - JavaScript
you can also reference it by name, and use super to
get the superclass constructor (if one exists).
... class baseclass { msg = 'hello world' basepublicmethod() { return this.msg } } class subclass extends baseclass { subpublicmethod() { return super.basepublicmethod() } } const instance = new subclass() console.log(instance.subpublicmethod()) // expected output: "hello world"
getters and setters are special methods that bind to a class property and are called when that property is accessed or set.
... use the
get and set syntax to declare a public instance
getter or setter.
... class classwith
getset { #msg = 'hello world'
get msg() { return this.#msg } set msg(x) { this.#msg = `hello ${x}` } } const instance = new classwith
getset() console.log(instance.msg) // expected output: "hello world" instance.msg = 'cake' console.log(instance.msg) // expected output: "hello cake" specifications specification public and private instance fieldsthe definition of 'fielddefinition' in that specification.
Arrow function expressions - JavaScript
an arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.tar
get keywords.
...=> { return element.length; }); // [8, 6, 7, 9] // when the only statement in an arrow function is `return`, we can remove `return` and remove // the surrounding curly brackets elements.map(element => element.length); // [8, 6, 7, 9] // in this case, because we only need the length property, we can use destructuring parameter: // notice that the `length` corresponds to the property we want to
get whereas the // obviously non-special `lengthfoobarx` is just the name of a variable which can be changed // to any valid variable name you want elements.map(({ length: lengthfoobarx }) => lengthfoobarx); // [8, 6, 7, 9] // this destructuring parameter assignment can also be written as seen below.
... that.age++; }, 1000); } alternatively, a bound function could be created so that a preassigned this value would be passed to the bound tar
get function (the growup() function in the example above).
...another example involving object.defineproperty(): 'use strict'; var obj = { a: 10 }; object.defineproperty(obj, 'b', {
get: () => { console.log(this.a, typeof this.a, this); // undefined 'undefined' window {...} (or the global object) return this.a + 10; // represents global object 'window', therefore 'this.a' returns 'undefined' } }); use of the new operator arrow functions cannot be used as constructors and will throw an error when used with new.
Functions - JavaScript
defining method functions
getter and setter functions you can define
getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties.
... the syntax for defining
getters and setters uses the object literal syntax.
...
get binds an object property to a function that will be called when that property is looked up.
... method definition syntax starting with ecmascript 2015, you are able to define own methods in a shorter syntax, similar to the
getters and setters.
Array.prototype.indexOf() - JavaScript
let lenvalue be the result of calling the
get // internal method of o with the argument "length".
... let elementk be the result of calling the
get // internal method of o with the argument tostring(k).
...1 array.indexof(2, -3); // 0 finding all the occurrences of an element var indices = []; var array = ['a', 'b', 'a', 'c', 'a', 'd']; var element = 'a'; var idx = array.indexof(element); while (idx != -1) { indices.push(idx); idx = array.indexof(element, idx + 1); } console.log(indices); // [0, 2, 4] finding if an element exists in the array or not and updating the array function updateve
getablescollection (veggies, veggie) { if (veggies.indexof(veggie) === -1) { veggies.push(veggie); console.log('new veggies collection is : ' + veggies); } else if (veggies.indexof(veggie) > -1) { console.log(veggie + ' already exists in the veggies collection.'); } } var veggies = ['potato', 'tomato', 'chillies', 'green-pepper']; updateve
getablescollection(veggi...
...es, 'spinach'); // new veggies collection is : potato,tomato,chillies,green-pepper,spinach updateve
getablescollection(veggies, 'spinach'); // spinach already exists in the veggies collection.
Math.log1p() - JavaScript
when you calculate log(1 + x), you should
get an answer very close to x, if x is small (that's why these are called 'natural' logarithms).
... if you calculate math.log(1 + 1.1111111111e-15) you should
get an answer close to 1.1111111111e-15.
... instead, you will end up taking the logarithm of 1.00000000000000111022 (the roundoff is in binary so sometimes it
gets ugly), so you
get the answer 1.11022...e-15, with only 3 correct digits.
... if, instead, you calculate math.log1p(1.1111111111e-15) you will
get a much more accurate answer 1.1111111110999995e-15 with 15 correct digits of precision (actually 16 in this case).
Object.create() - JavaScript
+ ": " + obj[prop] + "\n" ); } } not such simple results: (especially if silent error-trapping had hidden the error messages) ob={}; ob.po=oco; ob.pn=ocn; // create a compound object using the test objects from above as property values > showproperties( ob ) // display top-level properties - po: [object object] - error: cannot convert object to primitive value note that only first property
gets shown.
... (but if the same object is created simply in a different order -- at least in some implementations...) ob={}; ob.pn=ocn; ob.po=oco; // create same compound object again, but create same properties in different order > showproperties( ob ) // display top-level properties - error: cannot convert object to primitive value note that neither property
gets shown.
... note that such a different order may arise statically via disparate fixed codings such as here, but also dynamically via whatever the order any such property-adding code-branches actually
get executed at runtime as depends on inputs and/or random-variables.
...(note that the second parameter // maps keys to *property descriptors*.) o = object.create(object.prototype, { // foo is a regular 'value property' foo: { writable: true, configurable: true, value: 'hello' }, // bar is a
getter-and-setter (accessor) property bar: { configurable: false,
get: function() { return 10; }, set: function(value) { console.log('setting `o.bar` to', value); } /* with es2015 accessors our code can look like this
get() { return 10; }, set(value) { console.log('setting `o.bar` to', value); } */ } }); function constructor() {} o = new constructor(); //...
Object.defineProperties() - JavaScript
an accessor descriptor also has the following optional keys:
get a function which serves as a
getter for the property, or undefined if there is no
getter.
... if a descriptor has neither of value, writable,
get and set keys, it is treated as a data descriptor.
... if a descriptor has both value or writable and
get or set keys, an exception is thrown.
...== null) throw new typeerror('bad desc'); var d = {}; if (hasproperty(desc, 'enumerable')) d.enumerable = !!desc.enumerable; if (hasproperty(desc, 'configurable')) d.configurable = !!desc.configurable; if (hasproperty(desc, 'value')) d.value = desc.value; if (hasproperty(desc, 'writable')) d.writable = !!desc.writable; if (hasproperty(desc, '
get')) { var g = desc.
get; if (!iscallable(g) && typeof g !== 'undefined') throw new typeerror('bad
get'); d.
get = g; } if (hasproperty(desc, 'set')) { var s = desc.set; if (!iscallable(s) && typeof s !== 'undefined') throw new typeerror('bad set'); d.set = s; } if (('
get' in d || 'set' in d) && ('value' in d || 'writable' in d)) ...
handler.apply() - JavaScript
syntax const p = new proxy(tar
get, { apply: function(tar
get, thisarg, argumentslist) { } }); parameters the following parameters are passed to the apply() method.
... tar
get the tar
get object.
... the tar
get must be a callable itself.
... const p = new proxy(function() {}, { apply: function(tar
get, thisarg, argumentslist) { console.log('called: ' + argumentslist.join(', ')); return argumentslist[0] + argumentslist[1] + argumentslist[2]; } }); console.log(p(1, 2, 3)); // "called: 1, 2, 3" // 6 specifications specification ecmascript (ecma-262)the definition of '[[call]]' in that specification.
handler.deleteProperty() - JavaScript
syntax const p = new proxy(tar
get, { deleteproperty: function(tar
get, property) { } }); parameters the following parameters are passed to the deleteproperty() method.
... tar
get the tar
get object.
... interceptions this trap can intercept these operations: property deletion: delete proxy[foo] and delete proxy.foo reflect.deleteproperty() invariants if the following invariants are violated, the proxy will throw a typeerror: a property cannot be deleted, if it exists as a non-configurable own property of the tar
get object.
... const p = new proxy({}, { deleteproperty: function(tar
get, prop) { if (prop in tar
get){ delete tar
get[prop] console.log('property removed: ' + prop) return true } else { console.log('property not found: ' + prop) return false } } }) let result p.a = 10 console.log('a' in p) // true result = delete p.a // "property removed: a" console.log(result) // true console.log('a' in p) // false result = delete p.a // "property not found: a" console.log(result) // false specifications specification ecmascript (ecma-262)the definition of '[[delete]]' in that specification.
handler.preventExtensions() - JavaScript
syntax const p = new proxy(tar
get, { preventextensions: function(tar
get) { } }); parameters the following parameter is passed to the preventextensions() method.
... tar
get the tar
get object.
... const p = new proxy({}, { preventextensions: function(tar
get) { console.log('called'); object.preventextensions(tar
get); return true; } }); console.log(object.preventextensions(p)); // "called" // false the following code violates the invariant.
... const p = new proxy({}, { preventextensions: function(tar
get) { return true; } }); object.preventextensions(p); // typeerror is thrown specifications specification ecmascript (ecma-262)the definition of '[[preventextensions]]' in that specification.
Proxy.revocable() - JavaScript
syntax proxy.revocable(tar
get, handler); parameters tar
get a tar
get object to wrap with proxy.
... proxy a proxy object created with new proxy(tar
get, handler) call.
... if the revoke() function
gets called, the proxy becomes unusable: any trap to a handler will throw a typeerror.
... examples using proxy.revocable var revocable = proxy.revocable({}, {
get: function(tar
get, name) { return "[[" + name + "]]"; } }); var proxy = revocable.proxy; console.log(proxy.foo); // "[[foo]]" revocable.revoke(); console.log(proxy.foo); // typeerror is thrown proxy.foo = 1 // typeerror again delete proxy.foo; // still typeerror typeof proxy // "object", typeof doesn't trigger any trap specifications specification ecmascript (ecma-262)the definition of 'proxy revocation functions' in that specification.
Reflect.isExtensible() - JavaScript
syntax reflect.isextensible(tar
get) parameters tar
get the tar
get object which to check if it is extensible.
... return value a boolean indicating whether or not the tar
get is extensible.
... exceptions a typeerror, if tar
get is not an object.
...let frozen = object.freeze({}) reflect.isextensible(frozen) // === false difference to object.isextensible() if the tar
get argument to this method is not an object (a primitive), then it will cause a typeerror.
Reflect.set() - JavaScript
syntax reflect.set(tar
get, propertykey, value[, receiver]) parameters tar
get the tar
get object on which to set the property.
... receiver optional the value of this provided for the call to tar
get if a setter is encountered.
... exceptions a typeerror, if tar
get is not an object.
...let obj = {} reflect.set(obj) // true reflect.
getownpropertydescriptor(obj, 'undefined') // { value: undefined, writable: true, enumerable: true, configurable: true } specifications specification ecmascript (ecma-262)the definition of 'reflect.set' in that specification.
Reflect.setPrototypeOf() - JavaScript
syntax reflect.setprototypeof(tar
get, prototype) parameters tar
get the tar
get object of which to set the prototype.
... exceptions a typeerror, if tar
get is not an object or if prototype is neither an object nor null.
...reflect.setprototypeof({}, null) // true // returns false if tar
get is not extensible.
...let tar
get = {} let proto = object.create(tar
get) reflect.setprototypeof(tar
get, proto) // false specifications specification ecmascript (ecma-262)the definition of 'reflect.setprototypeof' in that specification.
String.prototype.padStart() - JavaScript
syntax str.padstart(tar
getlength [, padstring]) parameters tar
getlength the length of the resulting string once the current str has been padded.
...if padstring is too long to stay within the tar
getlength, it will be truncated from the end.
... return value a string of the specified tar
getlength with padstring applied from the start.
... examples basic examples 'abc'.padstart(10); // " abc" 'abc'.padstart(10, "foo"); // "foofoofabc" 'abc'.padstart(6,"123465"); // "123abc" 'abc'.padstart(8, "0"); // "00000abc" 'abc'.padstart(1); // "abc" fixed width string number conversion // javascript version of: (unsigned) // printf "%0*d" width num function leftfillnum(num, tar
getlength) { return num.tostring().padstart(tar
getlength, 0); } const num = 123; console.log(leftfillnum(num, 5)); // expected output: "00123" specifications specification ecmascript (ecma-262)the definition of 'string.prototype.padstart' in that specification.
String - JavaScript
method 1 you can use the + operator to append multiple strings to
gether, like this: let longstring = "this is a very long string which needs " + "to wrap across multiple lines because " + "otherwise my code is unreadable." method 2 you can use the backslash character (\) at the end of each line to indicate that the string will continue on the next line.
... string.prototype.padend(tar
getlength [, padstring]) pads the current string from the end with a given string and returns a new string of the length tar
getlength.
... string.prototype.padstart(tar
getlength [, padstring]) pads the current string from the start with a given string and returns a new string of the length tar
getlength.
... string.prototype.anchor() <a name="name"> (hypertext tar
get) string.prototype.big() <big> string.prototype.blink() <blink> string.prototype.bold() <b> string.prototype.fixed() <tt> string.prototype.fontcolor() <font color="color"> string.prototype.fontsize() <font size="size"> string.prototype.italics() <i> string.prototype.link() <a href="url"> (link to url) string.prototype.small() <small> string.prototype.strike() <strike> string.p...
WeakMap - JavaScript
getting values from the map would involve iterating through all keys to find a match, then using the index of this match to retrieve the corresponding value from the array of values.
... weakmap.prototype.
get(key) returns the value associated to the key, or undefined if there is none.
... wm1.
get(o2); // "azerty" wm2.
get(o2); // undefined, because there is no key for o2 on wm2 wm2.
get(o3); // undefined, because that is the set value wm1.has(o2); // true wm2.has(o2); // false wm2.has(o3); // true (even if the value itself is 'undefined') wm3.set(o1, 37); wm3.
get(o1); // 37 wm1.has(o1); // true wm1.delete(o1); wm1.has(o1); // false implementing a weakmap-like class with a .clear() meth...
...od class clearableweakmap { constructor(init) { this._wm = new weakmap(init); } clear() { this._wm = new weakmap(); } delete(k) { return this._wm.delete(k); }
get(k) { return this._wm.
get(k); } has(k) { return this._wm.has(k); } set(k, v) { this._wm.set(k, v); return this; } } specifications specification ecmascript (ecma-262)the definition of 'weakmap' in that specification.
WebAssembly.Table() constructor - JavaScript
we then print out the table length and contents of the two indexes (retrieved via table.prototype.
get() to show that the length is two and both elements are null.
... var tbl = new webassembly.table({initial:2, element:"anyfunc"}); console.log(tbl.length); // "2" console.log(tbl.
get(0)); // "null" console.log(tbl.
get(1)); // "null" we then create an import object that contains the table: var importobj = { js: { tbl:tbl } }; finally, we load and instantiate a wasm module (table2.wasm) using the webassembly.instantiatestreaming() method.
... webassembly.instantiatestreaming(fetch('table2.wasm'), importobject) .then(function(obj) { console.log(tbl.length); console.log(tbl.
get(0)()); console.log(tbl.
get(1)()); }); note how you've got to include a second function invocation operator at the end of the accessor to actually invoke the referenced function and log the value stored inside it (e.g.
...
get(0)() rather than
get(0)) .
JavaScript typed arrays - JavaScript
g point number (16 significant digits e.g., 1.123...15) unrestricted double double bigint64array -263 to 263-1 8 64-bit two's complement signed integer bigint int64_t (signed long long) biguint64array 0 to 264-1 8 64-bit unsigned integer bigint uint64_t (unsigned long long) dataview the dataview is a low-level interface that provides a
getter/setter api to read and write arbitrary data to the buffer.
...it is big-endian by default and can be set to little-endian in the
getter/setter methods.
... multiple views on the same data things start to
get really interesting when you consider that you can create multiple views onto the same data.
...now we
get the output 0, 0, 2, 0, 4, 0, 6, 0.
Critical rendering path - Web Performance
the browser continues to parse the html making requests and building the dom, until it
gets to the end, at which point it constructs the css object model.
...the css object model
gets built as the css is parsed, but can't be used to build the render tree until it is completely parsed because styles that are going to be overwritten with later parsing should not be rendered to the screen.
... optimizing for crp improve page load speed by prioritizing which resources
get loaded, controlling the order in which they are loaded, and reducing the file sizes of those resources.
... performance tips include 1) minimizing the number of critical resources by deferring their download, marking them as async, or eliminating them alto
gether, 2) optimizing the number of requests required along with the file size of each request, and 3) optimizing the order in which critical resources are loaded by prioritizing the downloading critical assets, shorten the critical path length.
Using dns-prefetch - Web Performance
dns-prefetch is an attempt to resolve domain names before resources
get requested.
... this could be a file loaded later or link tar
get a user tries to follow.
...you can safely use them to
gether like so: <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin> <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> note: if a page needs to make connections to many third-party domains, preconnecting them all is counterproductive.
...browsers that don’t support preconnect will still
get some added benefit by falling back to dns-prefetch.
xlink:show - SVG: Scalable Vector Graphics
in case of a conflict, the tar
get attribute has priority, since it can express a wider range of values.
...this is similar to the effect achieved by an html <a> element with tar
get set to _blank.
...this is similar to the effect achieved by an html <a> element with tar
get set to _self.
...the tar
get attribute, determines its behavior.
Linking - SVG: Scalable Vector Graphics
the tar
get attribute on the svg <a> element doesn't work in mozilla firefox 1.5.
... when svg documents are embedded within a parent html document using the tag: page1.html: <html> <body> <p>this is a svg button:</p> <object width="100" height="50" type="image/svg+xml" data="button.svg"/> </body> </html> button.svg: <?xml version="1.1" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <a xlink:href="page2.html" tar
get="_top"> <g> <!-- button graphical elements here --> </g> </a> </svg> the specification says that the browser should navigate to the html document page2.html when the button graphics are clicked.
... however, tar
get does not work with mozilla's implementation of the svg <a> element in firefox 1.5.
... to
get around this, requires a little ugly javascript hacking: button.svg: <?xml version="1.1" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <g onclick="top.document.href='page2.html'" cursor="pointer"> <!-- button graphical elements here --> </g> </svg> example for an example of this solution at work see www.codedread.com.
Namespaces crash course - SVG: Scalable Vector Graphics
background it has been a long standing goal of the w3c to make it possible for different types of xml based content to be mixed to
gether in the same xml file.
... dom1 (don't use) dom2 (use these instead!) createattribute createattributens createelement createelementns
getattributenode
getattributenodens
getattribute
getattributens
getelementsbytagname
getelementsbytagnamens (also added to element)
getnameditem
getnameditemns hasattribute hasattributens removeattribute removeattributens removenameditem removenameditemns setattribute setattributens setattributenode set...
...so, to create an svg rect element using document.createelementns(), you must write: document.createelementns('http://www.w3.org/2000/svg', 'rect'); but to retrieve the value of the xparameter on an svg rect element, you must write: rect.
getattributens(null, 'x'); note that this isn't the case for parameters with a namespace prefix (parameters that don't belong to the same xml dialect as the element).
...hence to
get the value of the xlink:href parameter of an <a> element in svg you would write: elt.
getattributens('http://www.w3.org/1999/xlink', 'href'); for setting parameters that have a namespace, it is recommended (but not required) that you also include their prefix in the second parameter so that the dom can later be more easily converted back to xml (if for instance you want to send it back to the server).
Scripting - SVG: Scalable Vector Graphics
preventing default behavior in event code when writing drag and drop code, sometimes you'll find that text on the page
gets accidently selected while dragging.
...instead, you can use var svgdoc=document.embeds["name_of_svg"].
getsvgdocument(); to
get a reference to an embedded svg document instead.
... the best way to
get access to the document representing an svg document is to look at htmliframeelement.contentdocument (if the document is presented in an <iframe>) or htmlobjectelement.contentdocument (if the document is presented in an <object> element), like this: var svgdoc = document.
getelementbyid("iframe_element").contentdocument; in addition, the <iframe>, <embed>, and <object> elements offer a method,
getsvgdocument(), which returns the xmldocument representing the element's embedded svg or null if the element doesn't represent an svg document.
... you can also use document.
getelementbyid("svg_elem_name").
getsvgdocument(), which gives the same result.
Introduction to using XPath in JavaScript - XPath
note that, for the unordered subtype the single node returned might not be the first in document order, but for the ordered subtype you are guaranteed to
get the first matched node in the document order.
... var req = new xmlhttprequest(); req.open("
get", "chrome://yourextension/content/peopledb.xml", false); req.send(null); var xmldoc = req.responsexml; var nsresolver = xmldoc.creatensresolver( xmldoc.ownerdocument == null ?
...
getting specifically namespaced elements and attributes regardless of prefix if one wishes to provide flexibility in namespaces (as they are intended) by not necessarily requiring a particular prefix to be used when finding a namespaced element or attribute, one must use special techniques.
... for example, one might try (incorrectly) to grab an element with a namespaced attribute as follows: var xpathlink = someelements[local-name(@*)="href" and namespace-uri(@*)='http://www.w3.org/1999/xlink']; this could inadvertently grab some elements if one of its attributes existed that had a local name of "href", but it was a different attribute which had the tar
geted (xlink) namespace (instead of @href).
XPath snippets - XPath
if you can rely on id attributes, document.
getelementbyid() is still powerful, but it's not nearly as powerful as xpath.
... example: javascript code with the custom evaluatexpath() utility function // display the last names of all people in the doc var results = evaluatexpath(people, "//person/@last-name"); for (var i in results) alert("person #" + i + " has the last name " + results[i].value); //
get the 2nd person node results = evaluatexpath(people, "/people/person[2]"); //
get all the person nodes that have addresses in denver results = evaluatexpath(people, "//person[address/@city='denver']"); //
get all the addresses that have "south" in the street name results = evaluatexpath(people, "//address[contains(@street, 'south')]"); alert(results.length); docevaluatearray the following is a simple utility function to
get (ordered) xpath results into an array, regardless of wheth...
...context.ownerdocument : document); resolver = resolver || null; context = context || doc; result = doc.evaluate(expr, context, resolver, xpathresult.ordered_node_snapshot_type, null); for(i = 0; i < result.snapshotlength; i++) { a[i] = result.snapshotitem(i); } return a; }
getxpathforelement the following function allows one to pass an element and an xml document to find a unique string xpath expression leading back to that element.
... example: defining a
getxpathforelement() utility function function
getxpathforelement(el, xml) { var xpath = ''; var pos, tempitem2; while(el !== xml.documentelement) { pos = 0; tempitem2 = el; while(tempitem2) { if (tempitem2.nodetype === 1 && tempitem2.nodename === el.nodename) { // if it is element_node of the same name pos += 1; } tempitem2 = tempitem2.previoussibling; } xpath = "*[name()='"+el.nodename+"' and namespace-uri()='"+(el.namespaceuri===null?'':el.namespaceuri)+"']["+pos+']'+'/'+xpath; el = el.parentnode; } xpath = '/*'+"[name()='"+xml.documentelement.nodename+"' and namespace-uri()='"+(el.namespaceuri===null?'':el.namespaceuri)+"']"+'/'+xpath; xpath = xpath.replace(/\/$/, ''); return xpath; } resources xpath forum discussio...
Advanced Example - XSLT: Extensible Stylesheet Language Transformations
using the xsltprocessor.
getparameter() method, the code can figure whether to sort in ascending or descending order.
.../div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> // javascript var xslref; var xslloaded = false; var xsltprocessor = new xsltprocessor(); var mydom; var xmlref = document.implementation.createdocument("", "", null); function sort() { if (!xslloaded){ p = new xmlhttprequest(); p.open("
get", "example2.xsl", false); p.send(null); xslref = p.responsexml; xsltprocessor.importstylesheet(xslref); xslloaded = true; } // create a new xml document in memory xmlref = document.implementation.createdocument("", "", null); // we want to move a part of the dom from an html document to an xml document.
... // importnode is used to clone the nodes we want to process via xslt - true makes it do a deep clone var mynode = document.
getelementbyid("example"); var clonednode = xmlref.importnode(mynode, true); // after cloning, we append xmlref.appendchild(clonednode); // set the sorting parameter in the xsl file var sortval = xsltprocessor.
getparameter(null, "myorder"); if (sortval == "" || sortval == "descending") xsltprocessor.setparameter(null, "myorder", "ascending"); else xsltprocessor.setparameter(null, "myorder", "descending"); // initiate the transformation var fragment = xsltprocessor.transformtofragment(xmlref, document); // clear the contents document.
getelementbyid("example").innerhtml = ""; mydom = fragment; // add the new content from the tran...
...sformation document.
getelementbyid("example").appendchild(fragment) } // xsl stylesheet: <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:output method="html" indent="yes" /> <xsl:param name="myorder" /> <xsl:template match="/"> <xsl:apply-templates select="/div//div"> <xsl:sort select="." data-type="number" order="{$myorder}" /> </xsl:apply-templates> </xsl:template> <xsl:template match="div"> <xsl:copy-of select="." /> </xsl:template> </xsl:stylesheet> ...
simple-prefs - Archive of obsolete content
if you need to
get and set the general browser preferences, use preferences/service.
...
getting and setting preferences unless you've marked them as hidden, the user will be able to see and change the preferences in the add-on manager.
...by default, simple preferences are stored in a preference like: extensions.<addon-id>.<preference-name> for example, if you had a simple-pref named "somepreference" then you could
get its value like so: require('sdk/preferences/service').
get(['extensions', require('sdk/self').id, 'somepreference'].join('.')) this would give you the same value as: require('sdk/simple-prefs').prefs['somepreference'] the ability to change the default preferences branch is new in add-on sdk 1.15.
url - Archive of obsolete content
gettld(url) returns the top-level domain for the given url: that is, the highest-level domain under which individual domains may be registered.
... uses
getpublicsuffix() internally.
... var urls = require("sdk/url"); console.log(urls.
gettld("http://www.bbc.co.uk/")); // "co.uk" console.log(urls.
gettld("https://developer.mozilla.org/")); // "org" parameters url : string the url, as a string.
High-Level APIs - Archive of obsolete content
clipboard interact with the system clipboard, setting and
getting its contents.
... selection
get and set text and html selections in the current web page.
... wid
get create a simple user interface for an add-on in firefox's add-on bar.
lang/functional - Archive of obsolete content
let { method } = require("sdk/lang/functional"); let mynumber = { times: method(times), add: method(add), number: 0 }; function times (tar
get, x) { return tar
get.number *= x; } function add (tar
get, x) { return tar
get.number += x; } console.log(mynumber.number); // 0 mynumber.add(10); // 10 mynumber.times(2); // 20 mynumber.add(3); // 23 parameters lambda : function the function to be wrapped and returned.
...our hash // function will just parse the last name, as our naive // implementation assumes that they will share the same lineage let
getlineage = memoize(function (name) { // computes lineage return data; }, hasher); // hashing function takes a string of first and last name // and returns the last name.
... function hasher (input) { return input.split(" ")[1]; }
getlineage("homer simpson"); // computes and returns information for "simpson"
getlineage("lisa simpson"); // returns cached for "simpson" parameters fn : function the function that becomes memoized.
places/favicon - Archive of obsolete content
globals functions
getfavicon(object, callback) takes an object that represents a page's url and returns a promise that resolves with the favicon url for that page.
... let {
getfavicon } = require("sdk/places/favicon"); // string example
getfavicon("http://mozilla.org").then(function (url) { console.log(url); // http://mozorg.cdn.mozilla.net/media/img/favicon.ico }); // tab example require("sdk/tabs").open({ url: "http://mozilla.org", onready: function (tab) {
getfavicon(tab).then(function (url) { console.log(url); // http://mozorg.cdn.mozilla.net/media/img/favicon.ico }); } }); // an optional callback can be provided to handle // the promise's resolve and reject states
getfavicon("http://mozilla.org", function (url) { console.
...log(url); // http://mozorg.cdn.mozilla.net/media/img/favicon.ico }); parameters object : string|tab a value that represents the url of the page to
get the favicon url from.
remote/child - Archive of obsolete content
getframeforwindow finds the frame for a top level dom window.
... the event listener
gets a frame object as an argument.
... at this point you can't access frame's content yet, but you can add event listeners: const { frames } = require("sdk/remote/child"); frames.on("attach", function(frame) { console.log("new frame"); frame.addeventlistener("domcontentloaded", function(e) { console.log(e.tar
get.location.href); }); }); detach triggered when a frame is removed (for example, the user closed a tab).
ui/sidebar - Archive of obsolete content
if a new window is opened from a window that has a sidebar visible, the new window
gets a sidebar, too.
... on the sidebar end of the conversation, sidebar scripts
get a global variable addon that contains a port for sending and receiving messages.
... on the add-on side, you need to
get a worker object for the sidebar before you can send or receive messages.
Release notes - Archive of obsolete content
content scripts in page-mod
get detach events when the add-on is disabled or removed.
...
gettabforid() function added to tabs/utils.
... deprecated wid
get in favor of the new ui modules.
jpm-mobile - Archive of obsolete content
jpm usage is: jpm-mobile [command] [options] jpm supports the following global options: -h, --help - show a help message and exit -v, --version - print the jpm version number installation jpm-mobile is distributed using the node package manager npm, so to
get jpm-mobile you need to have npm installed, if you haven't already.
... jpm-mobile run -b fennec you can
get the package name by following command.
... jpm-mobile test -b fennec you can
get the package name by following command.
Add a Context Menu Item - Archive of obsolete content
when it's clicked, the selection is sent to the main add-on code, which just logs it: var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text = window.
getselection().tostring();' + ' self.postmessage(text);' + '});', onmessage: function (selectiontext) { console.log(selectiontext); } }); try it: run the add-on, load a web page, select some text and right-click.
...typically you'd store the image in your add-on's "data" directory, and construct the url using self.data.url(): var self = require("sdk/self"); var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text = window.
getselection().tostring();' + ' self.postmessage(text);' + '});', image: self.data.url("icon-16.png"), onmessage: function (selectiontext) { console.log(selectiontext); } }); adding an access key new in firefox 35.
...pressing the key selects the option when the context menu is open: var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log selection", context: contextmenu.selectioncontext(), contentscript: 'self.on("click", function () {' + ' var text = window.
getselection().tostring();' + ' self.postmessage(text);' + '});', accesskey: "l", onmessage: function (selectiontext) { console.log(selectiontext); } }); learning more to learn more about the context-menu module, see the context-menu api reference.
Displaying annotations - Archive of obsolete content
warning: this tutorial relies on the since-removed wid
get api and no longer works with firefox.
... the wid
get api is deprecated from firefox 29 onwards.
...in particular, for a simple button, try the action button or toggle button apis, and for a more complex wid
get try the toolbar or sidebar apis.
Alerts and Notifications - Archive of obsolete content
this works on windows, linux and (if growl is installed) mac os x: function popup(title, text) { try { components.classes['@mozilla.org/alerts-service;1'] .
getservice(components.interfaces.nsialertsservice) .showalertnotification(null, title, text, false, '', null); } catch(e) { // prevents runtime error on platforms that don't implement nsialertsservice } } if you need to display a comparable alert on a platform that doesn't support nsialertsservice, you can do this: function popup(title, msg) { var image = null; var win = components.classes['@mozilla.org/embedc...
...omp/window-watcher;1'] .
getservice(components.interfaces.nsiwindowwatcher) .openwindow(null, 'chrome://global/content/alerts/alert.xul', '_blank', 'chrome,titlebar=no,popup=yes', null); win.arguments = [image, title, msg, false, '']; } using notification box another way of non-modal notification and further interaction with users is using of xul elements notificationbox and notification (implicitly).
... var message = 'another pop-up blocked'; var box = gbrowser.
getnotificationbox(); var notification = box.
getnotificationwithvalue('popup-blocked'); if (notification) { notification.label = message; } else { var buttons = [{ label: 'button', accesskey: 'b', popup: 'blockedpopupoptions', callback: null }]; let priority = box.priority_warning_medium; box.appendnotification(message, 'popup-blocked', 'chrome://browser/skin/info.png', priority, buttons); } ...
Drag & Drop - Archive of obsolete content
next, setup the handlers so that files can be dropped on the application: function _dragover(aevent) { var dragservice = components.classes["@mozilla.org/wid
get/dragservice;1"].
getservice(components.interfaces.nsidragservice); var dragsession = dragservice.
getcurrentsession(); var supported = dragsession.isdataflavorsupported("text/x-moz-url"); if (!supported) supported = dragsession.isdataflavorsupported("application/x-moz-file"); if (supported) dragsession.candrop = true; } function _dragdrop(aevent) { var dragser...
...vice = components.classes["@mozilla.org/wid
get/dragservice;1"].
getservice(components.interfaces.nsidragservice); var dragsession = dragservice.
getcurrentsession(); var _ios = components.classes['@mozilla.org/network/io-service;1'].
getservice(components.interfaces.nsiioservice); var uris = new array(); // if sourcenode is not null, then the drop was from inside the application if (dragsession.sourcenode) return; // setup a transfer item to retrieve the file data var trans = components.classes["@mozilla.org/wid
get/transferable;1"].createinstance(components.interfaces.nsitransferable); trans.adddataflavor("text/x-moz-url"); trans.adddataflavor("application/x-moz-file"); for (var i=0; i<dragsession.numdropitems; i++) { var uri = null; ...
... dragsession.
getdata(trans, i); var flavor = {}, data = {}, length = {}; trans.
getanytransferdata(flavor, data, length); if (data) { try { var str = data.value.queryinterface(components.interfaces.nsisupportsstring); } catch(ex) { } if (str) { uri = _ios.newuri(str.data.split("\n")[0], null, null); } else { var file = data.value.queryinterface(components.interfaces.nsifile); if (file) uri = _ios.newfileuri(file); } } if (uri) uris.push(uri); } // use the array of file uris } the _dragover function checks the drag data to see if a simple text file or general purpose file types are available.
IsDefaultNamespace - Archive of obsolete content
the following is a snippet to
get isdefaultnamespace() supported across other browsers.
...node.attributes.length) { for (var i=0; i < node.attributes.length; i++) { var att = node.attributes[i]; if (att.localname === 'xmlns') { return att.value === namespaceuri; } } } if (node.parentnode) { // entityreferences may have to be skipped to
get to it return isdefaultnamespace(node.parentnode, namespaceuri); } else { return false; // unknown; } case 9: // document_node return isdefaultnamespace(node.documentelement, namespaceuri); case 6: // entity_node case 12: // notation_node case 10: // document_type_node case 11: /...
..._fragment_node return false; // unknown case 2: // attribute_node: if (node.ownerelement ) { return isdefaultnamespace(node.ownerelement , namespaceuri); } else { return false; // unknown } default: if (node.parentnode) { // entityreferences may have to be skipped to
get to it return isdefaultnamespace(node.parentnode, namespaceuri); } else { return false; // unknown } } } ...
Progress Listeners - Archive of obsolete content
in the examples below the progress listener is attached to the tabbrowser, which means you don't
get any notifications for inactive tabs.
... example: notification when the value in address bar changes a commonly asked question is how to
get notified whenever the url in the address bar (also known as location bar) changes.
... using the following code, you will
get notified when user navigates to another page (by clicking a link, using the back/forward button, by typing an address in the location bar, etc.) and also when user switches tabs.
QuerySelector - Archive of obsolete content
s', 'bar'); // add <bar xmlns="somens"/> foo.documentelement.appendchild(bar); alert(foo.$('bar').nodename); // gives 'bar' element.prototype.$ = function (selector) { // works for html, xul, and plain xml return this.queryselector(selector); }; html example: <h1><a>test!<a/></h1> <script> element.prototype.$ = function (selector) { return this.queryselector(selector); }; alert(document.
getelementsbytagname('h1')[0].$('a').nodename); // 'a' xul example: <hbox><vbox/></hbox> <script type="text/javascript"><![cdata[ element.prototype.$ = function (selector) { return this.queryselector(selector); }; var xulns = 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'; alert(document.
getelementsbytagnamens(xulns, 'hbox')[0].$('vbox').nodename); // vbox ]]></script> xml exam...
...ple: <foo xmlns="somens"><bar/></foo> in document earlier var foo = document.
getelementsbytagnamens('somens', 'foo')[0]; alert(foo.$('bar')); note that for plain xml, the # 'id' selector will not work with an 'id' attribute (since a such-named attribute need not necessarily be of type id in xml, though it is in html and xul), nor will it work with xml:id.
... however, it will work with attribute selectors that tar
get non-prefixed attributes (such as 'id', but not xml:id: http://www.w3.org/tr/selectors-api/#resolving) (even though css3 does support namespaced attribute selectors: http://www.w3.org/tr/css3-selectors/#attrnmsp and potentially xml:id as #: http://www.w3.org/tr/css3-selectors/#id-selectors ).
xml:base support in old browsers - Archive of obsolete content
var scheme = /(\w(\w|\d|\+|\- |\ .)*)\:\/\//; function
getxmlbaselink (xlink, thisitem) { var xmlbase = ''; if (!xlink.match(scheme)) { // only check for xml base if there is no protocol // tests for 'scheme' per http://www.ietf.org/rfc/rfc2396.txt' xmlbase =
getxmlbase (thisitem); if (!xmlbase.match(/\/$/) && !xlink.match(/\/$/)) { // if no preceding slash on xlink or trailing slash on xml:base, add one in between xmlbase += '/'; } else if ...
...should be from the host only link = loc.protocol + '//' + loc.host + link; } else { // if link is relative, it should be from full path, minus the file var dirpath = loc.pathname.substring(0, loc.pathname.lastindexof('/')-1); if (link.lastindexof('/') !== link.length-1) { link += '/'; } link = loc.protocol + '//' + loc.host + dirpath + link; } } return link; } function
getxmlbase (thisitem) { // fix: need to keep going up the chain if still a relative url!!!!!
...ocolpos; var xmlbase = ''; var abs = false; // avoid loop if node is not present if (!thisitem || !thisitem.nodename) { return xmlbase; } // check present element and higher up for xml:base // now check for the next matching local name up in the hierarchy (until the document root) while (thisitem.nodename !== '#document' && thisitem.nodename !== '#document-fragment') { att = thisitem.
getattribute('xml:base'); // xml: namespaces must use 'xml' prefix if (att) { protocolpos = att.indexof('//'); var protocolmatch = att.match(scheme); if (protocolmatch) { // if has protocol, can stop if (abs) { var skipfile = (att.indexof('///') === protocolpos) ?
Installing Extensions and Themes From Web Pages - Archive of obsolete content
web script example <script type="application/javascript"> <!-- function install (aevent) { for (var a = aevent.tar
get; a.href === undefined;) a = a.parentnode; var params = { "foo": { url: aevent.tar
get.href, iconurl: aevent.tar
get.
getattribute("iconurl"), hash: aevent.tar
get.
getattribute("hash"), tostring: function () { return this.url; } } }; installtrigger.install(params); return false; } //--> </script> <a href="http://www.example.com/foo.xpi" iconur...
... the install first creates a parameter block: var params = { "foo": { url: aevent.tar
get.href, iconurl: aevent.tar
get.
getattribute("iconurl"), hash: aevent.tar
get.
getattribute("hash"), tostring: function () { return this.url; } }; this specifies the display name (foo) for use in the confirmation dialog, the url to the extension (which is the link href, recall), the icon url to display in the confirmation dialog, a hash of the xpi file contents (to p...
...you could also use the old style parameter block ({ "foo": aevent.tar
get.href }) if you wanted - and didn't have an icon to use for the confirmation dialog.
Listening to events in Firefox extensions - Archive of obsolete content
check evt.tar
get for the tar
get of the event.
... for a tabbrowser, the above code will only
get events from the browser that is currently displayed at the time the event occurs.
... xulbrowserwindow xulbrowserwindow is an nsiwebprogresslistener used to
get progress events for the currently visible browser.
Security best practices in extensions - Archive of obsolete content
the privileges that a document
gets also depend on where it comes from.
...there are ways to
get around the content/chrome security barrier, if for example, you want a web page to send a notification to the add-on (or vice versa).
...the first is to always
get it from a trusted source.
Localizing an extension - Archive of obsolete content
we add to refreshinformation() the following code: var stringsbundle = document.
getelementbyid("string-bundle"); var changestring = stringsbundle.
getstring('changestring') + " "; var openstring = stringsbundle.
getstring('openstring') + " "; var lowstring = stringsbundle.
getstring('lowstring') + " "; var highstring = stringsbundle.
getstring('highstring') + " "; var volumestring = stringsbundle.
getstring('volumestring') + " "; this code
gets a reference to the string bundle ...
...element we added to stockwatcher2.xul by calling document.
getelementbyid(), specifying the id "string-bundle".
... then it fetches all the strings we need from the bundle, one by one, by calling the string bundle's
getstring() method, passing the appropriate key for each string.
Images, Tables, and Mysterious Gaps - Archive of obsolete content
it
gets even worse with small images, like ones that are one pixel tall, as illustrated in figure 7.
...
getting rid of this space could be as easy as putting each image in its own cell and making them all block-level, but let's leave them all to
gether in a single cell so we can illustrate another approach.
...if that line box
gets tall enough, space will begin to appear around the images.
Monitoring WiFi access points - Archive of obsolete content
<html> <head> <title>wifi monitor example</title> <script> var count = 0; function test() { } test.prototype = { onchange: function (accesspoints) { netscape.security.privilegemanager.enableprivilege('universalxpconnect'); var d = document.
getelementbyid("d"); d.innerhtml = ""; for (var i=0; i<accesspoints.length; i++) { var a = accesspoints[i]; d.innerhtml += "<p>" + a.mac + " " + a.ssid + " " + a.signal + "</p>"; } var c = document.
getelementbyid("c"); c.innerhtml = "<p>" + count++ + "</p>"; }, onerror: function (value) { alert("error: " +value); }, queryinterface: function(iid) { ...
...nnect'); if (iid.equals(components.interfaces.nsiwifilistener) || iid.equals(components.interfaces.nsisupports)) return this; throw components.results.ns_error_no_interface; }, } netscape.security.privilegemanager.enableprivilege('universalxpconnect'); var listener = new test(); var wifi_service = components.classes["@mozilla.org/wifi/monitor;1"].
getservice(components.interfaces.nsiwifimonitor); wifi_service.startwatching(listener); </script> </head> <body> <div id="d"><p></p></div> <div id="c"><p></p></div> </body> </html> the nsiwifilistener object the first thing the code above does is to prototype the listener object that will be receiving notifications of changes to the access point list.
...starting to monitor access points to start monitoring the access points, we instantiate the listener (on line 44), then
get access to the wifi monitor interface on line 45.
Using XML Data Islands in Mozilla - Archive of obsolete content
d like this: <script id="purchase-order" type="application/xml"> <purchaseorder xmlns="http://example.mozilla.org/purchaseorderml"> <lineitem> <name>line item 1</name> <price>1.25</price> </lineitem> <lineitem> <name>line item 2</name> <price>2.48</price> </lineitem> </purchaseorder> </script> the xml source text can then be retrieved like this: var ordersource = document.
getelementbyid("purchase-order").textcontent; the xml source text can be parsed into a dom tree using the domparser api: var parser = new domparser(); var doc = parser.parsefromstring(ordersource, "application/xml"); the html5 data block-based way shown here works in firefox, opera, webkit-based browsers such as chrome and safari, and ie9 while ie's xml data islands work only in ie.
...<title>xml data block demo</title> <script id="purchase-order" type="application/xml"> <purchaseorder xmlns="http://example.mozilla.org/purchaseorderml"> <lineitem> <name>line item 1</name> <price>1.25</price> </lineitem> <lineitem> <name>line item 2</name> <price>2.48</price> </lineitem> </purchaseorder> </script> <script> function rundemo() { var ordersource = document.
getelementbyid("purchase-order").textcontent; var parser = new domparser(); var doc = parser.parsefromstring(ordersource, "application/xml"); var lineitems = doc.
getelementsbytagnamens("http://example.mozilla.org/purchaseorderml", "lineitem"); var firstprice = lineitems[0].
getelementsbytagnamens("http://example.mozilla.org/purchaseorderml", "price")[0].textcontent; document.body.textcontent...
...for this demo, you must create an external document called purchase_order.xml: <!doctype html> <html> <head> <title>xml data block demo</title> <script> function rundemo() { var doc = document.
getelementbyid("purchase-order").contentdocument; var lineitems = doc.
getelementsbytagnamens("http://example.mozilla.org/purchaseorderml", "lineitem"); var firstprice = lineitems[0].
getelementsbytagnamens("http://example.mozilla.org/purchaseorderml", "price")[0].textcontent; document.
getelementbyid("output-box").textcontent = "the purchase order contains " + lineitems.length + " line items.
Using content preferences - Archive of obsolete content
var iosvc = components.classes["@mozilla.org/network/io-service;1"] .
getservice(components.interfaces.nsiioservice); var prefservice = components.classes["@mozilla.org/content-pref/service;1"] .
getservice(components.interfaces.nsicontentprefservice); // create a uri object referencing the site to save a preference for var uri = iosvc.newuri("http://developer.mozilla.org/", null, null); // set the value of the "devmo.somesetting" preference to "foo"...
... var value = prefservice.
getpref(uri, "devmo.somesetting"); built-in site-specific preferences preference name menu equivalent values notes browser.content.full-zoom view / zoom example: "1.10000002384186" (rounding variant of "1.1") related about:config preferences: browser.zoom.full boolean, set by the menu item view / zoom / zoom text only.
...starting in gecko 9.0, when in private browsing mode, the content preference service stores preferences in memory instead of on disk, and automatically for
gets them when leaving private browsing mode.
Embedding FAQ - Archive of obsolete content
you can
get more detailed information on what interfaces are required and which are optional to impelement here.
...here is the code : import org.eclipse.swt.swt; import org.eclipse.swt.browser.mozillabrowser; import org.eclipse.swt.browser.progressevent; import org.eclipse.swt.browser.progresslistener; import org.eclipse.swt.wid
gets.display; import org.eclipse.swt.wid
gets.shell; import org.mozilla.xpcom.nsidomdocument; public class test { public static void main(string args[]) { display display = new display(); shell shell = new shell(display); final mozillabrowser browser = new mozillabrowser(shell,wt.border); browser.seturl("http://www.google.com");...
... browser.addprogresslistener(new progresslistener() { public void changed(progressevent event) { } public void completed(progressevent event) { nsidomdocument doc = browser.
getdocument(); system.out.println(doc); } }); while (!shell.isdisposed()) { if (!display.readanddispatch()) { display.sleep(); } } } how to map a javascript function to a c++ function define an xpcom class defining the function you'll be doing in javascript.
Downloading Nightly or Trunk Builds - Archive of obsolete content
the same machines produce about every 24 hours a "nightly" build which can be downloaded by anyone if you know where to
get it: these are the nightly builds, and testers all over the world download them and test them, reporting as they go along on any bugs that hit them.
... anyone can be a tester, you don't need to
get approval before you can start testing.
...if one has questions about the way a particular nightly was built, the best way to
get that information is to download the executable, launch it, and then go to the "about:buildconfig" page, by typing this into the location bar.
Gecko Coding Help Wanted - Archive of obsolete content
you could spend years in it and still
get lost.
...someplace easy and straightforward, so you can
get a feel for the lay of the code.
...roc is willing to work closely with anyone with reasonable c++ experience to
get them started on this.
Selection - Archive of obsolete content
features can
get, set, and listen for selection events in html or plain text.
...this api currently lives in the future and must be imported for use: jetpack.future.import("selection");
getting and setting the selection the current version of jetpack.selection includes these formats: .text and .html
getting the selection the following is an example of
getting the selection from the user.
... jetpack.import.future("selection");var textofsel = jetpack.selection.text;var htmlofsel = jetpack.selection.html; setting the selection the following is an example of
getting the selection from the user.
Selection - Archive of obsolete content
features can
get, set, and listen for selection events in html or plain text.
...this api currently lives in the future and must be imported for use: jetpack.future.import("selection");
getting and setting the selection the current version of jetpack.selection includes these formats: .text and .html
getting the selection the following is an example of
getting the selection from the user.
... jetpack.import.future("selection"); var textofsel = jetpack.selection.text; var htmlofsel = jetpack.selection.html; setting the selection the following is an example of
getting the selection from the user.
Selection - Archive of obsolete content
features can
get, set, and listen for selection events in html or plain text.
...this api currently lives in the future and must be imported for use: jetpack.future.import("selection");
getting and setting the selection the current version of jetpack.selection includes these formats: .text and .html
getting the selection the following is an example of
getting the selection from the user.
... jetpack.import.future("selection"); var textofsel = jetpack.selection.text; var htmlofsel = jetpack.selection.html; setting the selection the following is an example of
getting the selection from the user.
Nanojit - Archive of obsolete content
you can
get nanojit by cloning the tamarin-redux mercurial repository at http://hg.mozilla.org/tamarin-redux.
... fragment *f = fragmento->
getanchor((void *)0xdeadbeef); f->lirbuf = buf; f->root = f; // create a lir writer lirbufwriter out(buf); // write a few lir instructions to the buffer: add the first parameter // to the constant 2.
... lins *rec_ins = out.insskip(sizeof(guardrecord) + sizeof(sideexit)); guardrecord *guard = (guardrecord *) rec_ins->payload(); memset(guard, 0, sizeof(*guard)); sideexit *exit = (sideexit *)(guard + 1); guard->exit = exit; guard->exit->tar
get = f; f->lastins = out.insguard(lir_loop, out.insimm(1), rec_ins); // compile the fragment.
Overview of how downloads work - Archive of obsolete content
one way is to encounter a file with an unknown content type, the other is to choose "save link tar
get as" from the context menu of a link.
...
get the .dia file here: mozilla_downloads.dia downloads via "save link tar
get as" and friends this diagram is an uml sequence diagram, and was created using dia.
...
get the .dia file here: mozilla_downloads_path2.dia original document information author: christian biesinger ...
Extensions - Archive of obsolete content
to support prism specifically, you'll need to add prism to the list of tar
get applications in the extension's install.rdf file.
... the code snippet will look something like this: <em:tar
getapplication> <!– prism –> <description> <em:id>prism@developer.mozilla.org</em:id> <em:minversion>0.8</em:minversion> <em:maxversion>1.0.0.*</em:maxversion> </description> </em:tar
getapplication> in addition to the install manifest changes, you may want to expose your extension into the prism ui.
...this usually means extracting and editing the install.rdf file to add prism as a tar
get application.
RDF Datasource How-To - Archive of obsolete content
it supersedes (and borrows from) the original document put to
gether by robert churchill.
...this value, when prefixed with "rdf:", is a datasource identifier, and may be used with nsirdfservice::
getdatasource() to retrieve your datasource from the rdf service.
... for example, the above datasource would be accessable as follows: nsirdfservice* rdf; rv = nsservicemanager::
getservice(krdfservicecid, kirdfserviceiid, (nsisupports**) &rdf); if (ns_succeeded(rv)) { nsirdfdatasource* mydatasource; rv = rdf->
getdatasource("rdf:my-datasource", &mydatasource); if (ns_succeeded(rv)) { // ...do something to mydatasource here...
Standalone XPCOM - Archive of obsolete content
standalone xpcom is a tree configuration that builds a minimal set of libraries (shared mostly) that can be used to
get all features of xpcom.
...this should
get built by default.
...
get xpcom/tests directory upto date and documented.
The new nsString class implementation (1999) - Archive of obsolete content
the nsstring class is very lightweight since it
gets its functionality from the nsstrimpl static library.
...note: the com rules imply that everyone needs to use the same allocators, that they acquire via a global com service called co
getmalloc().
...to wit: they want to ensure that the underlying buffers cannot be corrupted or altered erroneously they want to ensure that the appropriate set of conversion functions
get applied they want some control over the usage pattern of strings, such that the 2-byte (ucs2) form is used whenever possible, and some restrictions are applied to the use of 1-byte (ascii) nscstrings.
XBL 1.0 Reference - Archive of obsolete content
bindings binding content children implementation constructor destructor field property
getter setter method parameter body handlers handler resources stylesheet image binding attachment and detachment attachment using css attachment using element.style property <constructor> call <destructor> call binding documents dom interfaces the nsidomdocumentxbl interface anonymous content introduction scoping and access using the dom content generation rules f...
...or generation attribute forwarding insertion points <children> handling dom changes event flow and tar
geting flow and tar
geting across scopes focus and blur events mouseover and mouseout events anonymous content and css selectors and scopes binding stylesheets binding implementations introduction methods properties inheritance of implementations event handlers example - sticky notes updated and adjusted for the current firefox implementation.
... this example is tar
geted to demonstrate the xbl usage rather than to be a practically useful application.
Unix stub installer - Archive of obsolete content
the unix stub installer project resides at: <http://lxr.mozilla.org/seamonkey/sou...ard/unix/src2/> how do we
get setup to debug the unix stub installer?
... build the unix installer (debug or non-debug tar
get) by typing "make" in the src2 directory grab a nightly build, say from <http://ftp.mozilla.org/pub/mozilla/n...staller.tar.gz> gunzip and untar the build to some temporary location like /tmp.
... how we
get setup to debug the xpinstall engine from the unix stub installer?
Install Wizards (aka: Stub Installers) - Archive of obsolete content
the install wizards used to install mozilla are lightweight stubs tar
geted to be around 200 kb disk footprint.
...it then proceeds to extract the xpinstall engine and feed it the downloaded software packages to install.) the stub installer code includes: the logic to display the install wizard wid
gets and dialogs the code that reads in the configuration file (config.ini) and dynamically installs from the net or from local xpi modules found next to the installer binary the code that processes user selections the code that calls the xpinstall engine through xpistub the libxpnet code that is statically linked in the stub installers are written in code native to the platform using native wid...
...
get toolkits including the windows api for windows, the mac toolbox for the mac, and gtk for the unix version.
dirCreate - Archive of obsolete content
description the input parameter is a filespecobject that you have already created with the install object's
getfolder method.
...note that the
getfolder method does not require that the folder or directory you specify exist in order for the object reference to be a valid one.
... example f =
getfolder("program", "mynewdirectory"); err = file.dircreate(f); ...
windowsShortcut - Archive of obsolete content
method of file object syntax int windowsshortcut( folderobject atar
get, folderobject ashortcutpath, string adescription, folderobject aworkingpath, string aparams, folderobject aicon, number aiconid); parameters the windowsshortcut method has the following parameters: atar
get a filespecobject representing the absolute path (including filename) to file that the shortcut will be created for.
... aworkingpath a filespecobject representing the absolute path to the working dir for where atar
get will is to be run from.
... aparams parameters that atar
get requires.
addFile - Archive of obsolete content
you create this object by passing a string representing the directory to the
getfolder method.
...some file transfer programs will convert apple binaries to this format on transfer if you transfer them from a macintosh to a unix/windows machine before zipping up those files on that tar
get system.
... example var xpisrc = "file.txt"; initinstall("adding a file", "addfile", "1.0.1.7", 1); f =
getfolder("program"); setpackagefolder(f); addfile(xpisrc); if (0 ==
getlasterror()) performinstall(); else cancelinstall(); ...
registerChrome - Archive of obsolete content
filespecobjects like that required by this function are created using the
getfolder method on the install object.
...in a few cases you may
get a registry error.
... registerchrome( package | delayed_chrome,
getfolder("plugins"), "resources"); ...
Install Object - Archive of obsolete content
the following two lines, for example, are equivalent: f =
getfolder("program"); f = install.
getfolder("program"); an installation script is composed of calls to the install object, and generally takes the following form: initialize the installation call initinstall with the name of the installation and the necessary registry and version information.
... add the files to the installation add files to the installation by calling
getfolder to
get file objects and passing those object refs to addfile as many times as necessary.
... perform installation check that the files have been added successfully (e.g., by checking the error return codes from many of the main installation methods, and go ahead with the install if everything is in order: performorcancel(); function performorcancel() { if (0 ==
getlasterror()) performinstall(); else cancelinstall(); } for complete script examples, see script examples.
Return Codes - Archive of obsolete content
invalid_path_err -219 the path provided to
getfolder was invalid.
... patch_bad_checksum_tar
get -221 the checksum generated for the source file does not match the checksum in the xpi file.
... download_error -228 problem with download script_error -229 error in the script already_exists -230 file already exists locally is_file -231 expected tar
get directoy and got file source_does_not_exist -232 source file/dir not found source_is_directory -233 expected source file and got directory source_is_file -234 expected source directory and got file insufficient_disk_space -235 not enough disk space for install filename_t...
Methods - Archive of obsolete content
getvalue retrieves the value of an arbitrary key.
...
getvaluenumber retrieves the value of a key, when that value is an integer.
...
getvaluestring retrieves the value of a key, when that value is a string.
WinReg Object - Archive of obsolete content
instead, you construct an instance of this object by calling the
getwinregistry method of the install object.
...to manipulate such values, use the
getvaluestring and setvaluestring methods.
... to manipulate other values, use the
getvalue and setvalue methods.
XPInstall API reference - Archive of obsolete content
objects install properties methods adddirectory addfile alert cancelinstall confirm deleteregisteredfile execute gestalt
getcomponentfolder
getfolder
getlasterror
getwinprofile
getwinregistry initinstall loadresources logcomment patch performinstall refreshplugins registerchrome reseterror setpackagefolder installtrigger no properties methods compareversion enabled ...
...
getversion install installchrome startsoftwareupdate installversion properties methods compareto init tostring file no properties methods copy dircreate dir
getparent dirremove dirrename diskspaceavailable execute exists isdirectory isfile macalias moddate moddatechanged move remove rename size windows
getshortname windowsregisterserver windowsshortcut winprofile no properties methods
getstring writestring winreg no properties methods createkey deletekey ...
... deletevalue enumkeys enumvaluenames
getvalue
getvaluenumber
getvaluestring iskeywritable keyexists setrootkey setvalue setvaluenumber setvaluestring valueexists winregvalue constructor other information return codes see complete list examples trigger scripts and install scripts code samples file.macalias file.windowsshortcut install.adddirectory install.addfile installtrigger.installchrome installtrigger.startsoftwareupdate windows install ...
sizemode - Archive of obsolete content
this attribute is used to save and restore the state of a window (to
gether with the persist attribute) and for css styles (e.g.
... to
get the window state from javascript code, use window.windowstate.
... listen to the sizemodechange event dispatched to the dom window to
get notified when the window state changes.
XUL Events - Archive of obsolete content
the event handler should be placed on an observer.checkboxstatechan
gethe checkboxstatechange event is executed when the state of a <checkbox> element has changed.closethe close event is executed when a request has been made to close the window when the user presses the close button.commandthe command event is executed when an element is activated.commandupdatethe commandupdate event is executed when a command update occurs on a <commandset>.
...the default action of the event can be prevented to prevent the popup to appear.popupshownthe popupshown event is executed when a <menupopup>, <panel> or <tooltip> has become visible.radiostatechan
gethe radiostatechange event is executed when the state of a <radio> element has changed.valuechan
gethe valuechange event is executed when the value of an element, <progress> for example, has changed.
... the tar
get of this event is the element that was under the mouse pointer when the mouse wheel was scrolled, similar to the click event.
Uploading and Downloading Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files |
getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes).
...the formdata object can then simply be passed to xmlhttprequest: function upload(posturl, fieldname, filepath) { var formdata = new formdata(); formdata.append(fieldname, new file(filepath)); var req = new xmlhttprequest(); req.open("post", posturl); req.onload = function(event) { alert(event.tar
get.responsetext); }; req.send(formdata); } http put you can also upload a file using an http put operation.
... function uploadput(posturl, filepath) { var req = new xmlhttprequest(); req.open("put", posturl); req.setrequestheader("content-type", "text/plain"); req.onload = function(event) { alert(event.tar
get.responsetext); } req.send(new file(filepath)); } in this example, a new input stream is created for a file, and is passed to the xmlhttprequest's send method.
Methods - Archive of obsolete content
eselectedtab appendcustomtoolbar appendgroup appenditem appendnotification blur cancel canceldialog centerwindowonscreen checkadjacentelement clearresults clearselection click close collapsetoolbar contains decrease decreasepage docommand ensureelementisvisible ensureindexisvisible ensureselectedelementisvisible expandtoolbar extra1 extra2 focus
getbrowseratindex
getbrowserfordocument
getbrowserfortab
getbrowserindexfordocument
getbutton
getdefaultsession
geteditor
getelementsbyattribute
getelementsbyattributens
getformattedstring
gethtmleditor
getindexoffirstvisiblerow
getindexofitem
getitematindex
getnextitem
getnotificationbox
getnotificationwithvalue
getnumberofvisiblerows
getpagebyid
getpreviousitem...
...
getresultat
getresultcount
getresultvalueat
getrowcount
getsearchat
getselecteditem
getsession
getsessionbyname
getsessionresultat
getsessionstatusat
getsessionvalueat
getstring goback gobackgroup godown goforward goforwardgroup gohome goto gotoindex goup hidepopup increase increasepage insertitem insertitemat invertselection loadgroup loadonetab loadtabs loaduri loaduriwithflags makeeditable movebyoffset moveto movetoalertposition onsearchcomplete ontextentered ontextreverted openpopup openpopupatscreen opensubdialog openwindow preferenceforelement reload reloadalltabs reloadtab reloadwithflags removeallitems removeallnotifications removealltabsbut removecurrentnotification removecurren...
...oindex select selectall selectitem selectitemrange selecttabatindex setselectionrange showpane showpopup sizeto startediting stop stopediting swapdocshells syncsessions timedselect toggleitemselection related dom element methods dom:element.addeventlistener dom:element.appendchild dom:element.comparedocumentposition dom:element.dispatchevent dom:element.
getattribute dom:element.
getattributenode dom:element.
getattributenodens dom:element.
getattributens dom:element.
getelementsbytagname dom:element.
getelementsbytagnamens dom:element.
getfeature fixme: brokenlink dom:element.
getuserdata dom:element.hasattribute dom:element.hasattributens dom:element.hasattributes dom:element.haschildnodes dom:element.insertbefore dom:element.ise...
MenuModification - Archive of obsolete content
<script> function addtomenu() { var menu = document.
getelementbyid("edit-menu"); menu.appenditem("insert", "insert"); } </script> <menu id="edit-menu"/> <button label="add" oncommand="addtomenu()"/> in this example, the addtomenu function is called when the button is pressed.
... <script> function addsubmenu() { var popup = document.
getelementbyid("file-popup"); var newmenu = document.createelement("menu"); popup.appendchild(newmenu); newmenu.label = "new"; newmenu.appenditem("document", "doc"); newmenu.appenditem("image", "image"); } </script> <menu label="file" onpopupshowing="addsubmenu()"> <menupopup id="file-popup"/> </menu>.
... <script> function addsubmenu() { var popup = document.
getelementbyid("file-popup"); if (popup.haschildnodes()) return; var newmenu = document.createelement("menu"); popup.appendchild(newmenu); newmenu.label = "new"; newmenu.appenditem("document", "doc"); newmenu.appenditem("image", "image"); } </script> the haschildnodes method may be used to check if a node has any children.
Menus - Archive of obsolete content
other user interfaces call this type of wid
get a combobox.
...it is a good idea to group related commands to
gether on a menu and use separators between different groups.
...for example, to have an item initially hidden in a window: function initmenus() { var item = document.
getelementbyid("menu-file-open"); item.hidden = true; } the hidden property is set to true to hide the menu with the id 'menu-fileopen'.
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
a simple document.
getelementbyid('browsertoolbarpalette') will not work.
... the advantage to adding the toolbar button to the palette rather than creating an element and then appendchild to the toolbar (document.
getelementbyid('nav-bar')) or appendchild to the addon bar (document.
getelementbyid('addon-bar')) is that once in the toolbar palette, users can configure it through the customize menu.
... solution: check to be sure your stylesheet is correct, make sure your contents.rdf (or chrome.manifest) is correct, and be sure you didn't for
get to apply the stylesheet to customizetoolbar.xul.
Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
er> </handlers> </binding> handlers example the following example adds some key handlers to create a very primitive local clipboard: example 1 : source <binding id="clipbox"> <content> <xul:textbox/> </content> <implementation> <field name="clipboard"/> </implementation> <handlers> <handler event="keypress" key="x" modifiers="control" action="this.clipboard=document.
getanonymousnodes(this)[0].value; document.
getanonymousnodes(this)[0].value='';"/> <handler event="keypress" key="c" modifiers="control" action="this.clipboard=document.
getanonymousnodes(this)[0].value;"/> <handler event="keypress" key="v" modifiers="control" action="document.
getanonymousnodes(this)[0].value=this.clipboard ?
...the code works as follows: this.clipboard=document.
getanonymousnodes(this)[0].value; the first element of the anonymous content array is retrieved which gives a reference to the textbox element, which happens to be the first (and only) element within the content element.
... document.
getanonymousnodes(this)[0].value='' the text of the textbox is then assigned a value of a null string.
Broadcasters and Observers - Archive of obsolete content
you should declare all your broadcasters inside a broadcasterset element so that they are all kept to
gether.
... example 3 : source view <broadcasterset> <broadcaster id="colorchanger" style="color: black"/> </broadcasterset> <button label="test"> <observes element="colorchanger" attribute="style" onbroadcast="alert('color changed');"/> </button> <button label="observer" oncommand="document.
getelementbyid('colorchanger').setattribute('style','color: red');" /> two buttons have been created, one labeled test and the other labeled observer.
...the script here
gets a reference to the broadcaster and changes the style of it to have a color that is red.
Content Panels - Archive of obsolete content
this is the wid
get used by the mozilla browser for its tabbed browsing interface.
...that means that when a script loaded inside the browser tries to
get the topmost window, it will
get the outer xul window.
...instead, you would want to restrict the web page to only
getting access to the web page content.
Creating Dialogs - Archive of obsolete content
var somefile=document.
getelementbyid('enterfile').value; window.opendialog("chrome://findfile/content/showdetails.xul","showmore", "chrome",somefile); in this example the dialog showdetails.xul is displayed.
...for example: var fl = window.arguments[0]; document.
getelementbyid('thefile').value = fl; this is an effective way to pass values to the new window.
...="select favourite fruit"/> <radio id="orange" label="oranges because they are fruity"/> <radio id="violet" selected="true" label="strawberries because of their colour"/> <radio id="yellow" label="bananas because they are pre-packaged"/> </groupbox> </dialog> the buttons elements can be accessed with the following javascript // the accept button var acceptbutt = document.documentelement.
getbutton("accept") more examples more examples in dialogs and prompts (code snippets).
Groupboxes - Archive of obsolete content
« previousnext » this section describes a way to include elements into groups groupboxes the groupbox element is used to group related xul elements to
gether, much like the html fieldset element is used to group html elements.
...radio groups you can use the radiogroup element to group radio elements to
gether.
...any radio buttons placed inside the radio group will be grouped to
gether, even if they are inside nested boxes.
Introduction to XBL - Archive of obsolete content
this language is used for declaring the behavior of xul wid
gets.
...each binding describes the behavior of a xul wid
get.
... binding example the box is generic enough that you can use it to create custom wid
gets (although you can use any element, even one you make up yourself).
More Menu Features - Archive of obsolete content
this involves the use of two attributes: type to indicate the type of check, and name to group commands to
gether.
...in order to group a set of menu items to
gether, you need to put a name attribute on each one to group.
...they are grouped to
gether because they all have the same name.
Updating Commands - Archive of obsolete content
all we need to do is
get the needed controller and call the command.
... a simple way of doing this is the following: var controller = document.commanddispatcher.
getcontrollerforcommand("cmd_paste"); if (controller && controller.iscommandenabled("cmd_paste")){ controller.docommand(command); } the code above first retrieves the controller for the 'cmd_paste' command from the command dispatcher.
...it just
gets the necessary controller, calls its iscommandenabled method, and then enables or disables the command.
Using Visual Studio as your XUL IDE - Archive of obsolete content
to combine both, you can also add your own xbl elements to the xul schema to
get autocompletion-support and validation for those in your xul files.
...5.1 localization using dtd you will
get validation errors in visual studio, if you are localizing your xul files.
...5.3 javascript related you will
get validation errors for javascript code whenever using the keywords "const" and "let".
arrowscrollbox - Archive of obsolete content
ents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width disabled type: boolean
gets and sets the value of the disabled attribute.
... tabindex type: integer
gets and sets the value of the tabindex attribute.
... inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
commandset - Archive of obsolete content
attributes commandupdater, events, oncommandupdate, tar
gets example <commandset> <command id="cmd_open" oncommand="alert('open!');"/> <command id="cmd_help" oncommand="alert('help!');"/> </commandset> attributes commandupdater type: boolean if true, the commandset is used for updating commands.
... tar
gets type: comma-separated list of element ids a comma-separated list of element ids that the command updater will update upon.
...rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
datepicker - Archive of obsolete content
disabled type: boolean
gets and sets the value of the disabled attribute.
... tabindex type: integer
gets and sets the value of the tabindex attribute.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
dialog - Archive of obsolete content
ydisclosure, buttonaccesskeyextra1, buttonaccesskeyextra2, buttonaccesskeyhelp, buttonalign, buttondir, buttondisabledaccept, buttonlabelaccept, buttonlabelcancel, buttonlabeldisclosure, buttonlabelextra1, buttonlabelextra2, buttonlabelhelp, buttonorient, buttonpack, buttons, defaultbutton, title properties buttons, defaultbutton methods acceptdialog, canceldialog, centerwindowonscreen,
getbutton, movetoalertposition examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" buttonlabelcancel="cancel" buttonlabelaccept="save"> <dialogheader title="options" description="my preferences"...
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(),...
...
getbutton( type ) return type: button element returns the button element in the dialog corresponding to the given type.
key - Archive of obsolete content
this should be set to the value capturing to indicate during the event capturing phase or tar
get to indicate at the tar
get element or left out entirely for the bubbling phase.
...rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
...for example: // modify some attributes let key = document.
getelementbyid(key_id); key.setattribute("modifiers", "alt shift"); // apply the changes let keyset = document.
getelementbyid(keyset_id); keyset.parentnode.appendchild(keyset); ...
panel - Archive of obsolete content
label type: string
gets and sets the value of the label attribute.
... position type: string
gets and sets the value of the position attribute.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(),...
resizer - Archive of obsolete content
note: starting in gecko 2.0, you can also specify a tar
get element using the element attribute, to use the resizer to resize the specified element instead of the window.
...as some platforms provide this resizing grip automatically, this type of resizer element will be hidden and ensure that the window does not
get an extra resizer.
...rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
scrollbox - Archive of obsolete content
if the user made the window smaller, the outer box would
get smaller in response and sprout its scroll bars.
... we wanted our vbox to
get smaller and sprout its scroll bars instead.
...rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
<statusbarpanel> - Archive of obsolete content
properties image type: image url
gets and sets the value of the image attribute.
... label type: string
gets and sets the value of the label attribute.
...rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
XUL - Archive of obsolete content
xul tutorial a guided tutorial that will help you
get started with xul, originally from xulplanet.
... documentation xul tutorial a guided tutorial that will help you
get started with xul, originally from xulplanet.
...you can
get it here.
Building XULRunner - Archive of obsolete content
please read and follow the general build documentation for instructions on how to
get sources and set up build prerequisites.
... you can also check the user agent string in firefox help/about menu to
get the mapping from a certain binary firefox version to the corresponding xulrunner version.
... for instance, in firefox 2.0.0.9 you will
get : mozilla/5.0 (windows; u; windows nt 5.1; en-us; rv:1.8.1.9) gecko/20071025 firefox/2.0.0.9 therefore the xulrunner version for this firefox version is : 1.8.1.9 fetching sources from mercurial as with all other mozilla products, one would fetch recent sources from mercurial.
XULRunner Hall of Fame - Archive of obsolete content
source yoono desktop win/mac application to
get all your friend updates, update your status and share stuff easily across facebook, myspace, twitter, and more - all at once!
... pyjamas-desktop a python web wid
get toolkit (similar to pyqt4 and pygtk2) that uses xulrunner dom to implement the wid
gets and event handling.
... python-hulahop is required python-hulahop from the olpc sugarlabs a python gtk wid
get with xulrunner embedded, providing full access to nsi dom and all other xulrunner interfaces, in a gtk window.
Using LDAP XPCOM with XULRunner - Archive of obsolete content
#ifdef ns_win32 moz_dll_prefix "nsldap32v50" moz_dll_suffix, moz_dll_prefix "nsldappr32v50" moz_dll_suffix, #endif //ns_win32 #ifdef ns_unix moz_dll_prefix "ldap50" moz_dll_suffix, moz_dll_prefix "prldap50" moz_dll_suffix, #endif //ns_unix nsnull }; // component.dll on windows, libcomponent.dll on linux static char krealcomponent[] = moz_dll_prefix "mozldap" moz_dll_suffix; nsresult ns
getmodule(nsicomponentmanager* acompmgr, nsifile* alocation, nsimodule* *aresult) { nsresult rv; nscomptr<nsifile> libraries; rv = alocation->
getparent(
getter_addrefs(libraries)); if (ns_failed(rv)) return rv; nscomptr<nsilocalfile> library(do_queryinterface(libraries)); if (!library) return ns_error_unexpected; library->setnativeleafname(ns_literal_cs...
... } library->setnativeleafname(ns_literal_cstring(krealcomponent)); prlibrary *lib; rv = library->load(&lib); if (ns_failed(rv)) return rv; ns
getmoduleproc
getmoduleproc = (ns
getmoduleproc) pr_findfunctionsymbol(lib, ns_
get_module_symbol); if (!
getmoduleproc) return ns_error_failure; return
getmoduleproc(acompmgr, alocation, aresult); } then change your .mozconfig to add this line: ac_add_options --enable-extensions=ldapstub rebuild xulrunner.
...don't for
get to clean your profile.
MacFAQ - Archive of obsolete content
here's how to implement command-line trapping when the app is already running, without
getting into appleevents or c++ code.
...denwindow" title="" width="0" height="0" persist="screenx screeny width height sizemode" > <!-- load the mozilla helpers --> <script type="application/javascript" src="chrome://global/content/nsusersettings.js" /> <script><![cdata[ function debug(alogstring) { var mconsoleservice = components.classes["@mozilla.org/consoleservice;1"] .
getservice(components.interfaces.nsiconsoleservice) mconsoleservice.logstringmessage("myxul: " + alogstring + "\n"); } function checkotherwindows() { var singletonwindowtype = nspreferences.copyunicharpref("toolkit.singletonwindowtype"); var windowmediator = components.classes["@mozilla.org/appshell/window-mediator;1"] .
getservice(components.in...
...terfaces.nsiwindowmediator); var win = windowmediator.
getmostrecentwindow(singletonwindowtype); if (win) { window.close(); win.focus(); } } if (window.arguments && window.arguments[0]){ try { var cmdline = window.arguments[0] .queryinterface(components.interfaces.nsicommandline); for (var i = 0; i < cmdline.length; ++i) { debug(cmdline.
getargument(i)) } } catch(ex) { debug(window.arguments[0]) // do something with window.arguments[0] //nspreferences.setunicharpref("myxul.cmdlinevalue", window.arguments[0]) } window.addeventlistener("load", checkotherwindows , false); } ]]></script> </window> ...
Make your xulrunner app match the system locale - Archive of obsolete content
the first step is to
get the code we're about to write to run before any of the locale specific resources are loaded.
...the code described lives in the pybridge component's onstartup method which
gets called automatically.
... from xpcom import components ps_cls = components.classes["@mozilla.org/preferences-service;1"] ps = ps_cls.
getservice(components.interfaces.nsiprefservice) branch = ps.
getbranch("general.useragent.") branch.setcharpref("locale", lang) i also set the language environment variable to match the system locale so that python's
gettext functionality will work (it pulls straight from language instead of using setlocale): os.environ["language"] = lang ...
XULRunner - Archive of obsolete content
getting started with xulrunner a short introduction to xulrunner.
... overview development plan what xulrunner provides xulrunner faq nightly builds: unstable-trunk documentation
getting started with xulrunner short tutorial on building desktop applications with xulrunner.
... build documentation learn how to
get the source and build it.
ant script to assemble an extension - Archive of obsolete content
s@users.sf.net> <project name="blogmark" default="createxpi"> <property name="version" value="1.3-rc1"/> <property name="description" value="new context-menu item to add the current page in your blogmarks"/> xpi file is created after "chrome/blogmark.jar" is created, which is then stuffed into "blogmark.xpi" <tar
get name="createxpi" depends="createjar" description="assemble the final build blogmark.xpi"> <zip destfile="blogmark-${version}.xpi"> <zipfileset dir="." includes="chrome/blogmark.jar" /> <zipfileset dir="." includes="install.rdf" /> </zip> </tar
get> everything inside the chrome directory is...
... zipped into chrome/blogmark.jar <tar
get name="createjar" depends="templates" description="assemble the jar"> <jar destfile="chrome/blogmark.jar"> <fileset dir="chrome/"> <include name="**/*"/> <exclude name="**/*~"/> <exclude name="**/*.tpl.*"/> <exclude name="blogmark.jar"/> </fileset> </jar> </tar
get> <tar
get name="templates" description="generate files from templates."> <copy file="chrome/content/blogmark/contents.rdf.tpl.xml" tofile="chrome/content/blogmark/contents.rdf" overwrite="true"> ...
... overwrite="true"> <filterchain> <replacetokens> <token key="version" value="${version}"/> <token key="description" value="${description}"/> </replacetokens> </filterchain> </copy> </tar
get> </project> ...
nsIContentPolicy - Archive of obsolete content
shouldload() will never
get this, because it does not represent content to be loaded (the actual load triggered by the refresh will go through shouldload() as expected).
... shouldprocess() will
get this for, for example <meta> refresh elements and http refresh headers.
... char* previous = nsnull; nscomptr<nsicategorymanager> catman; servman->
getservicebycontractid(ns_categorymanager_contractid, ns_
get_iid(nsicategorymanager),
getter_addrefs(catman)); rv = catman->addcategoryentry("content-policy", component_classname, component_contractid, pr_true, pr_true, &previous); javascript developers can also implement an xpcom component that extends nsicontentpolicy.
2006-11-03 - Archive of obsolete content
summary: mozilla.dev.builds - october 28th to november 3rd 2006 no such file or directory (build problem on winxp) november 2nd: kenoa complained that when he is compiling using cygwin on win32 he
gets the following error no such file or directory1: /cygdrive/c/mozilla/mail/config/mozconfig client.mk:339: /cygdrive/c/mozilla/.mozconfig.mk: no such file or directory he claims that the file ".mozconfig" exists in /cygdrive/c/mozilla/mail/config/mozconfig the disable-crypto cause problem originally posted on november 2nd: gxk is building minimo using the code base from sept.
... when he builds using the disable.crypto option he encounters the following problem: no rule to make tar
get `../../dist/lib/components/libpipboot.a', needed by `minimo'.
... problem compiling with vs 2003 .net phil is trying to compile firefox for the first time and is
getting an error when doing so: building deps for /cygdrive/c/mozilla/toolkit/airbag/airbag/src/common/windows/guid_string.cc make[1]: leaving directory `/cygdrive/c/mozilla/obj-i686-pc-cygwin' make: *** [build] error 2 he also noted that he is using make 3.80-1.
2006-11-24 - Archive of obsolete content
building xpcom components with msvs 2005 november 21st: buffaloaf is having trouble
getting a personal xpcom component to work under xulrunner when compiled with msvs 2005.
..."component returned failure code: 0x80570016 (ns_error_xpc_gs_returned_failure) [nsijscid.
getservice]" nsresult: "0x80570016 (ns_error_xpc_gs_returned_failure)" location: "js frame :: chrome://modzilla/content/js/pkg_zillacom.js :: <top_level> :: line 1202" data: no] he is running xulrunner v1.8.0.4.
... the build is working properly with the default toolkit, but when he tries to add ac_add_options --enable-default-toolkit=gtk2 to his .mozconfig file he
gets an error.
2006-11-03 - Archive of obsolete content
a discussion of how to
get firefox to be able to install extensions for other products (e.g.
... meetings nov 1 gecko 1.9/gran paradiso status meeting:
get agenda here.
... bon echo status meeting: october 31st, 2006: (possibly final meeting)
get notes here weekly project status meeting monday oct 30 1pm *pst*:
get notes here ...
2006-11-17 - Archive of obsolete content
alex vincent ran into some difficulty with xulrunner extension manager not recognizing xulwid
gets for verbosio?
... however he found out that it was a result of his flat-chrome version of xul wid
gets and works fine with the jarred-chrome version.
...nickolay ponomarev lets us know that processing instructions are now added to xul document's dom this also means, you can no longer use document.firstchild in xul scripts to
get the root element of a xul document and the xml-stylesheet and xul-overlay processing instructions outside the prolog no longer have any effect peter.sei...@gmail.com runs into some difficulties deploying xulrunner 1.8 on os x?
2006-10-27 - Archive of obsolete content
help for
getting html element width info discussion on retrieving width information on html elements when using the gecko engine.
... it was determined that the offsetwidth property can be used to
get this value.
... multiple presshells discussion on why current interfaces allow for multiple presshells and how the relationships work for the following objects: docshell, presshell, prescontext, document, domwindow, wid
get, docshell and contentviewer.
NPAPI plugin developer guide - Archive of obsolete content
g-in display nesting rules for html elements using the appropriate attributes using the embed element for plug-in display using custom embed attributes plug-in references plug-in development overview writing plug-ins registering plug-ins ms windows unix mac os x drawing a plug-in instance handling memory sending and receiving streams working with urls
getting version and ui information displaying messages on the status line making plug-ins scriptable building plug-ins building, platforms, and compilers building carbonized plug-ins for mac os x type libraries installing plug-ins native installers xpi plug-ins installations plug-in installation and the windows registry initialization and destruction initializ...
...ation instance creation instance destruction shutdown initialize and shutdown example drawing and event handling the npwindow structure drawing plug-ins printing the plug-in setting the window
getting information windowed plug-ins mac os windows unix event handling for windowed plug-ins windowless plug-ins specifying that a plug-in is windowless invalidating the drawing area forcing a paint message making a plug-in opaque making a plug-in transparent creating pop-up menus and dialog boxes event handling for windowless plug-ins streams receiving a stream telling the plug-in when a stream is created telling the plug-in when a stream is deleted finding out how much data the plug-in can accept writing the strea...
...m to the plug-in sending the stream in random-access mode sending the stream in file mode sending a stream creating a stream pushing data into the stream deleting the stream example of sending a stream urls
getting urls
getting the url and displaying the page posting urls posting data to an http server uploading files to an ftp server sending mail memory allocating and freeing memory mac os flushing memory (mac os only) version, ui, and status information displaying a status line message
getting agent information
getting the current version finding out if a feature exists reloading a plug-in ...
NPClass - Archive of obsolete content
syntax struct npclass { uint32_t structversion; npallocatefunctionptr allocate; npdeallocatefunctionptr deallocate; npinvalidatefunctionptr invalidate; nphasmethodfunctionptr hasmethod; npinvokefunctionptr invoke; npinvokedefaultfunctionptr invokedefault; nphaspropertyfunctionptr hasproperty; np
getpropertyfunctionptr
getproperty; npsetpropertyfunctionptr setproperty; npremovepropertyfunctionptr removeproperty; npenumerationfunctionptr enumerate; npconstructfunctionptr construct; }; warning: don't call these routines directly.
...
getproperty called by npn_
getproperty() to
get the value of the specified property on a given npobject.
... npvariant *result); typedef bool (*npinvokedefaultfunctionptr)(npobject *npobj, const npvariant *args, uint32_t argcount, npvariant *result); typedef bool (*nphaspropertyfunctionptr)(npobject *npobj, npidentifier name); typedef bool (*np
getpropertyfunctionptr)(npobject *npobj, npidentifier name, npvariant *result); typedef bool (*npsetpropertyfunctionptr)(npobject *npobj, npidentifier name, const npvariant *value); typedef bool (*npremovepropertyfunctionptr)(npobject *npobj, npidentifier name); typedef bool (...
NPEvent - Archive of obsolete content
values: 0 nullevent 1 mousedown 2 mouseup 3 keydown 4 keyup 5 autokey 6 updateevt 7 diskevt 8 activateevt 15 osevt 23 khighlevelevent
getfocusevent 0, 1 (true, false) losefocusevent adjustcursorevent 0, 1 (true, false) for information about these events, see the mac os developer documentation.
... in addition to these standard types, the browser provides three additional event types that can be passed in the what field of the eventrecord:
getfocusevent: sent when the instance could become the focus of subsequent key events, when the user clicks the instance or presses the tab key to focus the instance.
...no key events are sent to the instance until the next
getfocusevent.
NPWindow - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary contains information about the tar
get into which the plug-in instance can draw.
...t x; /* coordinates of top left corner */ uint32_t y; /* relative to a netscape page */ uint32_t width; /* maximum window size */ uint32_t height; nprect cliprect; /* clipping rectangle coordinates */ #ifdef xp_unix void * ws_info; /* platform-dependent additional data */ #endif /* xp_unix */ npwindowtype type; /* window or drawable tar
get */ } npwindow; fields the data structure has the following fields: window platform-specific handle to a native window element in the netscape window hierarchy on windows (hwnd) and unix (x window id).
... a windowless plug-in is drawn into a tar
get called a drawable, which can be defined in several ways depending on the platform.
Adobe Flash - Archive of obsolete content
in general, to invoke a macromedia-defined method on a flash animation in netscape gecko browsers: use dom methods to
get a handle to the html element that spawns the plugin.
... var myflash = document.
getelementbyid("myflash").setvariable("myvar", sendtext); a more expanded code example that shows how example 2 was created is shown in this source listing.
...-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" id="myflash" width="250" height="150" viewastext> <param name="movie" value="js2flash.swf" /> <param name="quality" value="high"></param> <embed src="js2flash.swf" width="250" height="150" swliveconnect="true" quality="high" pluginspage="http://www.macromedia.com/go/
getflashplayer" type="application/x-shockwave-flash" name="myflash"> </embed> </object> .....
Shipping a plugin as a Toolkit bundle - Archive of obsolete content
for a plugin the manifest only needs to be very simple: <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>mypluginid@myplugin.com</em:id> <em:name>my plugin</em:name> <em:version>1.0</em:version> <em:tar
getapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>4.0.*</em:maxversion> </description> </em:tar
getapplication> <em:unpack>true</em:unpack> </description> </rdf> this contains 5 required pieces of information.
... the tar
get application block says which versions of an application the plugin is compatible with.
...there can be multiple tar
getapplication blocks listed.
SAX - Archive of obsolete content
set the handlers handlers are user-defined objects implementing sax handler interfaces, depending on what kind of information they need to
get from the parser.
...r: function print(s) { dump(s + "\n"); } xmlreader.contenthandler = { // nsisaxcontenthandler startdocument: function() { print("startdocument"); }, enddocument: function() { print("enddocument"); }, startelement: function(uri, localname, qname, /*nsisaxattributes*/ attributes) { var attrs = []; for(var i=0; i<attributes.length; i++) { attrs.push(attributes.
getqname(i) + "='" + attributes.
getvalue(i) + "'"); } print("startelement: namespace='" + uri + "', localname='" + localname + "', qname='" + qname + "', attributes={" + attrs.join(",") + "}"); }, endelement: function(uri, localname, qname) { print("endelement: namespace='" + uri + "', localname='" + localname + "', qname='" + qname + "...
...'"); }, characters: function(value) { print("characters: " + value); }, processinginstruction: function(tar
get, data) { print("processinginstruction: tar
get='" + tar
get + "', data='" + data + "'"); }, ignorablewhitespace: function(whitespace) { // don't care }, startprefixmapping: function(prefix, uri) { // don't care }, endprefixmapping: function(prefix) { // don't care }, // nsisupports queryinterface: function(iid) { if(!iid.equals(components.interfaces.nsisupports) && !iid.equals(components.interfaces.nsisaxcontenthandler)) throw components.results.ns_error_no_interface; return this; } }; start parsing the xml reader component can parse xml from a string, an nsiinputstream, or asynchronously via the ns...
Updating an extension to support multiple Mozilla applications - Archive of obsolete content
this is done by adding new <tar
getapplication> tags to the install.rdf file, like this: <!-- describe the thunderbird versions we support --> <em:tar
getapplication> <description> <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> </description> </em:tar
getapplication> <!-- describe the sunbird versions...
... we support --> <em:tar
getapplication> <description> <em:id> {718e30fb-e89b-41dd-9da7-e25a45638b28}</em:id> <em:minversion>0.2</em:minversion> <em:maxversion>0.4.*</em:maxversion> </description> </em:tar
getapplication> these two blocks indicate that the extension supports thunderbird versions 1.5 through 2.0.0.x, sunbird versions 0.2 through 0.4.x.
...e need to add lines to the manifest for thunderbird and sunbird, like this: # thunderbird overlay chrome://messenger/content/messenger.xul chrome://stockwatcher2/content/stockwatcher2.xul # sunbird overlay chrome://calendar/content/calendar.xul chrome://stockwatcher2/content/stockwatcher2.xul these lines cause the main thunderbird message list window and the main window in sunbird to be the tar
get of the overlays we apply in the stockwatcher2.xul file.
Developing cross-browser and cross-platform pages - Archive of obsolete content
function hideelement(id_attribute_value) { if (document.
getelementbyid && document.
getelementbyid(id_attribute_value) && document.
getelementbyid(id_attribute_value).style ) { document.
getelementbyid(id_attribute_value).style.visibility = "hidden"; }; } // example: // <button type="button" onclick="hideelement('d1');">hide div</button> // <div id="d1">some text</div> these repeated calls to document.
getelementbyid are not the most eff...
... the top-level if clause looks to see if there is support for a method called
getelementbyid on the document object, which is the one of the most basic levels of support for the dom in a browser.
... if there is, the code sees if document.
getelementbyid(id_attribute_value) returns a reference to an existing element, which it then checks for a style object.
Using workers in extensions - Archive of obsolete content
function refreshinformation() { if (!symbol) { throw "no symbol set!"; } var fullurl = "http://quote.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&e=.csv&s=" + symbol; function inforeceived() { var output = httprequest.responsetext; if (output) { postmessage(output.trim()); } httprequest = null; } var httprequest = new xmlhttprequest(); httprequest.open("
get", fullurl, true); httprequest.onload = inforeceived; httprequest.send(null); } setinterval(function() { refreshinformation(); }, 10*60*1000); onmessage = function(event) { if (event.data) { symbol = event.data.touppercase(); } refreshinformation(); } when the worker thread is started, the main body of this code (in lines 26-35) is executed.
...let's take a look: startup: function() { // register to receive notifications of preference changes this.prefs = components.classes["@mozilla.org/preferences-service;1"] .
getservice(components.interfaces.nsiprefservice) .
getbranch("stockwatcher2."); this.prefs.queryinterface(components.interfaces.nsiprefbranch2); this.prefs.addobserver("", this, false); this.tickersymbol = this.prefs.
getcharpref("symbol").touppercase(); this.worker = new worker("chrome://stockwatcher2/content/ticker_worker.js"); // small little dance to
get 'this' to ref...
... observe: function(subject, topic, data) { if (topic != "nspref:changed") { return; } switch(data) { case "symbol": this.tickersymbol = this.prefs.
getcharpref("symbol").touppercase(); this.worker.postmessage(this.tickersymbol); break; } }, the key here is line 10, which sends the new ticker symbol to monitor to the ticker thread by calling its postmessage() method.
Processing XML with E4X - Archive of obsolete content
since a greater than sign is not escaped, it is possible to
get an xml error if the cdata closing sequence (]]>) is included.
...son> <name>bob smith</name> <likes> <os>linux</os> <browser>firefox</browser> <language>javascript</language> <language>python</language> </likes> </person>; alert(person.name); // bob smith alert(person['name']); // bob smith alert(person.likes.browser); // firefox alert(person['likes'].browser); // firefox if you access something with more than one matching element, you
get back an xmllist: alert(person.likes.language.length()); // 2 as with the dom, * can be used to access all child nodes: alert(person.likes.*.length()); // 4 while the .
...if you create an xmllist as a subset of an existing xml object and then modify the original xml object, the xmllist will not reflect those changes; you will need to re-create it to
get the most recent updates: var languages = <languages> <lang>javascript</lang> <lang>python</lang> </languages>; var lang = languages.lang; alert(lang.length()); // alerts 2 languages.lang += <lang>ruby</lang>; alert(lang.length()); // still alerts 2 lang = languages.lang; // re-create the xmllist alert(lang.length()); // alerts 3 searching and filtering e4x provides special op...
JavaArray - Archive of obsolete content
for example: var javastring = new java.lang.string("hello world!"); var bytearray = javastring.
getbytes(); bytearray[0] // returns 72 bytearray[1] // returns 101 any java data brought into javascript is converted to javascript data types.
... examples example: instantiating a javaarray in javascript in this example, the javaarray bytearray is created by the java.lang.string.
getbytes method, which returns an array.
... var javastring = new java.lang.string("hello world!"); var bytearray = javastring.
getbytes(); example: instantiating a javaarray in javascript with the newinstance method in javascript 1.4, you can use a javaclass object as the argument for the newinstance method which creates the array, as shown in the following code: var dogs = java.lang.reflect.array.newinstance(java.lang.string, 5); in javascript 1.1, use a class object returned by java.lang.class.forname as the argument for the newinstance method, as shown in the following code: var datatype = java.lang.class.forname("java.lang.string"); var dogs = java.lang.reflect.array.newinstance(datatype, 5); ...
JavaObject - Archive of obsolete content
var thestring = new java.lang.string("hello, world"); thestring.startswith("hello"); // returns true example: accessing inherited methods because
getclass is a method of object, and java.lang.string extends object, the string class inherits the
getclass method.
... consequently,
getclass is also a method of the javaobject which instantiates string in javascript.
... var thestring = new java.lang.string("hello, world"); thestring.
getclass(); // returns java.lang.string see also javaarray, javaclass, javapackage, packages ...
Building Mozilla XForms - Archive of obsolete content
getting started things to know first: the xforms extension has a dependency on the schema-validation extension, so you need to build both (that's done automatically) mozilla switched from cvs to mercurial starting with firefox 3.5.
...firefox 3.5 and up:
get the source code if you want to build xforms for firefox up to 3.0, you already have the required source code, it's part of your cvs checkout.
...starting with firefox 3.5, you need to do two more mercurial checkouts: cd extensions hg clone http://hg.mozilla.org/xforms hg clone http://hg.mozilla.org/schema-validation that's it, you now have everything you need to
get started.
XForms Custom Controls Examples - Archive of obsolete content
output showing images <binding id="output-image" extends="chrome://xforms/content/xforms.xml#xformswid
get-base"> <content> <html:div> <html:img anonid="content"/> </html:div> </content> <implementation implements="nsixformsuiwid
get"> <method name="refresh"> <body> var img = document.
getanonymouselementbyattribute(this, "anonid", "content"); img.setattribute("src", this.stringvalue); return true; </body> </method> </implementation> </binding> output showing xhtml <binding id="output-xhtml" extends="chrome://xforms/content/xforms-xhtml.xml#xformswidg...
...et-output"> <content> <children includes="label"/> <xhtml:div class="xf-value" anonid="content"></xhtml:div> <children/> </content> <implementation implements="nsixformsuiwid
get"> <field name="_domparser">null</field> <property name="domparser" readonly="true"> <
getter> if (!this._domparser) this._domparser = new domparser(); return this._domparser; </
getter> </property> <method name="refresh"> <body> //
get new value, parse, and import it.
... var val = this.stringvalue; var newdom = this.domparser.parsefromstring(val, "text/xml"); var impnode = document.importnode(newdom.firstchild, true); //
get content node, clean it, and update it var content = document.
getanonymouselementbyattribute(this, "anonid", "content"); if (content.firstchild) { content.removechild(content.firstchild); } content.appendchild(impnode); return true; </body> </method> </implementation> </binding> ...
RFE to the XForms API - Archive of obsolete content
mozilla xforms doens't offer any service you can
get via xpcom.
... as an example, the nsixformsaccessors interface which allows a user to
get/set the value of an instance node and
get the state of an instance node, is exposed by the nsixformsdelegate interface using the accessors property.
... ability to
get nsixformsaccessors for instance node we need the ability to
get to the nsixformsaccessors interface on a node by specifying the node via an xpath expression or by specifying the instance node directly (see bug 312956).
Windows Media in Netscape - Archive of obsolete content
mple of directly instantiating the control programmatically (without an object element) and scripting it: try { var player = null; if (window.activexobject) { player = new activexobject("wmplayer.ocx.7"); } else if(window.geckoactivexobject) { player = new geckoactivexobject("wmplayer.ocx.7"); } } catch(e) { ; } if (player) { player.currentplaylist = player.mediacollection.
getbyname('preludesteel'); player.controls.play(); } callbacks from within windows media player to web pages: script for event netscape 7.1 supports ie's <script for="activexcontrol" event="activexcontrolevent"> script elements.
...instead of doing that, this is the recommendation and workaround for netscape 7.1: <script for="player" event="scriptcommand(type, param)"> if (type == "text") { var cap = document.
getelementbyid("captext"); cap.innerhtml = param; } </script> more detailed examples are available in the final section on examples and sample code.
...for example, the following uses dhtml behaviors to associate a set of behaviors with a span element, which is then interrogated for its version number (the script attempts to verify that the windows media player control is at version 9): <span style="behavior:url(#default#clientcaps)" id="cc"></span> <script language=javascript> var cv = cc.
getcomponentversion( "{6bf52a52-394a-11d3-b153-00c04f79faa6}", "componentid" ); if (cv == null || cv == "") { top.location.href = "http://foo.bar.foo/checkref"; } </script> netscape 7.1 does not support ie's dhtml behaviors.
3D collision detection - Game development
this is overkill, however — testing all the vertices is unnecessary, as we can
get away with just calculating the distance between the aabb's closest point (not necessarily a vertex) and the sphere's center, seeing if it is less than or equal to the sphere's radius.
... we can
get this value by clamping the sphere's center to the aabb's limits.
... in javascript, we'd do this test like so: function intersect(sphere, box) { //
get box closest point to sphere center by clamping var x = math.max(box.minx, math.min(sphere.x, box.maxx)); var y = math.max(box.miny, math.min(sphere.y, box.maxy)); var z = math.max(box.minz, math.min(sphere.z, box.maxz)); // this is the same as ispointinsidesphere var distance = math.sqrt((x - sphere.x) * (x - sphere.x) + (y - sphere.y) * (y - sphere.y) + (z - sphere.z) * (z - sphere.z)); return distance < sphere.radius; } using a physics engine 3d physics engines provide collision detection algorithms, most of them based on bounding volumes as well.
Building up a basic demo with the PlayCanvas engine - Game development
we will try putting to
gether a simple demo first — a cube rendered on the screen.
... <!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: playcanvas demo</title> <style> body { margin: 0; padding: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="playcanvas-latest.js"></script> <canvas id="application-canvas"></canvas> <script> var canvas = document.
getelementbyid("application-canvas"); /* all our javascript code goes here */ </script> </body> </html> it contains some basic information like the document <title>, and some css to set the width and height of the <canvas> element that playcanvas will use to 100% so that it will fill the entire available viewport space.
...the box look better now, but it could
get some colors to look even better - for that we need to create material for it.
Mobile touch controls - Game development
pure javascript approach we could implement touch events on our own — setting up event listeners and assigning relevant functions to them would be quite straightforward: var el = document.
getelementsbytagname("canvas")[0]; el.addeventlistener("touchstart", handlestart); el.addeventlistener("touchmove", handlemove); el.addeventlistener("touchend", handleend); el.addeventlistener("touchcancel", handlecancel); this way, touching the game's <canvas> on the mobile screen would emit events, and thus we could manipulate the game in any way we want (for example, moving the space ship around)...
...we can
get the first touch (e.touches[0], our example is not multitouch-enabled), extract the pagex and pagey variables and set the player's ship position on the screen by subtracting the canvas offset (distance from the canvas and the edge of the screen) and half the player's width and height.
... you can quickly
get the coordinates of the most recently active pointer via the this.game.input.x and this.game.input.y variables.
Tiles and tilemaps overview - Game development
this is simply all of the required tiles grouped to
gether in a single image file.
...a high-level algorithm could be: for (var column = 0; column < map.columns; column++) { for (var row = 0; row < map.rows; row++) { var tile = map.
gettile(column, row); var x = column * map.tilesize; var y = row * map.tilesize; drawtile(tile, x, y); } } you can read more about this and see an example implementation in square tilemaps implementation: static maps.
...the most common case is to use this logic grid to handle collisions, but other uses are possible as well: character spawning points, detecting whether some elements are placed to
gether in the right way to trigger a certain action (like in tetris or bejeweled), path-finding algorithms, etc.
2D breakout game using pure JavaScript - Game development
to
get the most out of this series of articles you should already have basic to intermediate javascript knowledge.
... lesson details all the lessons — and the different versions of the mdn breakout game we are building to
gether — are available on github: create the canvas and draw on it move the ball bounce off the walls paddle and keyboard controls game over build the brick field collision detection track the score and win mouse controls finishing up starting with pure javascript is the best way to
get a solid knowledge of web game development.
... next steps ok, let's
get started!
2D breakout game using Phaser - Game development
to
get the most out of this series of articles you should already have basic to intermediate javascript knowledge.
... lesson details all the lessons — and the different versions of the mdn breakout game we are building to
gether — are available on github: initialize the framework scaling load the assets and print them on screen move the ball physics bounce off the walls player paddle and controls game over build the brickfield collision detection the score win the game extra lives animations and tweens buttons randomizing gameplay as a note on learning paths — starting with pure javascript is the best way to
get a solid knowledge of web game development.
... next steps ok, let us
get started!
Game development
the learning area is a good place to go to
get started with the basics.
... to
get started, see: about emscripten for an introduction including high-level details.
... emscripten tutorial for a tutorial to teach you how to
get started.
Distributed Denial of Service - MDN Web Docs Glossary: Definitions of Web-related terms
a distributed denial-of-service (ddos) is an attack in which many compromised systems are made to attack a single tar
get, in order to swamp server resources and block legitimate users.
...eventually, the assailant instructs the controlled machines to launch an attack against a specified tar
get.
...the overflow of data to the tar
get causes saturation in the tar
get machine so that it cannot respond or responds very slowly to legitimate traffic (hence the name "denial of service").
Test your skills: HTML accessibility - Learn web development
if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
... assume that these inputs will be part of a larger form, and wrap them in an element that associates them all to
gether as a single related group.
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
Images, media, and form elements - Learn web development
we are using attribute selectors to tar
get the different input types.
... button, input, select, textarea { font-family : inherit; font-size : 100%; } form elements and box-sizing across browsers form elements use different box sizing rules for different wid
gets.
...ing to 0 on all elements, then add these back in when styling particular controls button, input, select, textarea { box-sizing: border-box; padding: 0; margin: 0; } other useful settings in addition to the rules mentioned above, you should also set overflow: auto on <textarea>s to stop ie showing a scrollbar when there is no need for one: textarea { overflow: auto; } putting it all to
gether into a "reset" as a final step, we can wrap up the various properties discussed above into the following "form reset" to provide a consistent base to work from.
Test your skills: Images and Form elements - Learn web development
if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
...your task is to make the following changes to the way this form looks: use attribute selectors to tar
get the search field and button inside .myform.
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
Organizing your CSS - Learn web development
keep it consistent if you
get to set the rules for the project or are working alone, then the most important thing to do is to keep things consistent.
... you may have used a css property in a specific way to
get around older browser incompatibilities, for example: .box { background-color: red; /* fallback for older browsers that don't support gradients */ background-image: linear-gradient(to right, #ff0000, #aa0000); } perhaps you followed a tutorial to achieve something, and the css is a little non-obvious.
...by using the include functionality in sass (partials) these can then all be compiled to
gether into one, or a small number of stylesheets to actually link into your website.
Combinators - Learn web development
if you remove the > that designates this as a child combinator, you end up with a descendant selector and all <li> elements will
get a red border.
... if you insert some other element such as a <h2> in between the <h1> and the <p>, you will find that the paragraph is no longer matched by the selector and so does not
get the background and foreground color applied when the element is adjacent.
...that said, your knowledge of combinators will come in very useful if you need to
get to something in your document and are unable to access the html, perhaps due to it being generated by a cms.
Test your skills: sizing - Learn web development
if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
...test this box by removing the content from the html to make sure you still
get a 100 pixel tall box even with no content.
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
Styling tables - Learn web development
styling our table let's work through styling our table example to
gether.
... we've coupled this with a width of 100%, meaning that the table will fill any container it is put in, and be nicely responsive (although it would still need some more work to
get it looking good on narrow screen widths).
... at this point, our table already looks a lot better: some simple typography now we'll
get our text sorted out a bit.
Test your skills: backgrounds and borders - Learn web development
this aim of this skill test is to
get you working with css backgrounds and borders using the skills you have learned in the previous lesson.
... if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
Flexbox - Learn web development
introducing a simple example in this article we are going to
get you to work through a series of exercises to help you understand how flexbox works.
... to
get started, you should make a local copy of the first starter file — flexbox0.html from our github repo — load it in a modern browser (like firefox or chrome), and have a look at the code in your code editor.
...you can always refer back to it if you
get confused about any of the terms being used.
Test your skills: Flexbox - Learn web development
the aim of this task is to
get you working with flexbox and demonstrate your understanding of how flex items behave.
... if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
Test your skills: floats - Learn web development
the aim of this task is to
get you working with the css float and clear properties covered in our lesson on floats.
... if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
Test your skills: Grid Layout - Learn web development
this aim of this task is to
get you working with css grid layout, and test that you understand how a grid and grid items behave.
... if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
Test your skills: Multicol - Learn web development
the aim of this task is to
get you working with the css column-count, column-width, column-gap, column-span and column-rule properties and values covered in our lesson on multiple-column layout.
... if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
Supporting older browsers - Learn web development
every website is different in terms of tar
get audience.
...you can even link your google analytics account to
get analysis based on your user data.
...a user with a very limited feature phone might not
get much of your css, but the content will flow in a way that makes reading easy.
Test your skills: Media Queries and Responsive Design - Learn web development
this aim of this task is to
get you working with responsive web design with a practical task.
... if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
CSS layout - Learn web development
we have put to
gether a course that includes all the essential information you need to work towards your goal.
...
get started prerequisites before starting this module, you should already: have basic familiarity with html, as discussed in the introduction to html module.
...this article will give you all you need to know to
get started with page layout, then test your grid skills before moving on.
CSS first steps - Learn web development
we have put to
gether a course that includes all the essential information you need to work towards your goal.
...
get started prerequisites before starting this module, you should have: basic familiarity with using computers, and using the web passively (i.e.
...
getting started with css in this article we will take a simple html document and apply css to it, learning some practical things about the language along the way.
Styling text - Learn web development
we have put to
gether a course that includes all the essential information you need to work towards your goal.
...
get started prerequisites before starting this module, you should already have basic familiarity with html, as discussed in the introduction to html module, and be comfortable with css fundamentals, as discussed in introduction to css.
... typesetting a community school homepage in this assessment we'll test your understanding of styling text by
getting you to style the text for a community school's homepage.
What do common web layouts contain? - Learn web development
often used to tar
get tablets, since they have medium-size screens.
...(even many desktop-users prefer viewing things in small windows rather than full-screen.) the real fun begins when you start mixing them all to
gether: … these are just examples and you're quite free to lay things out as you want.
...blogs usually have two columns, a fat one for the main content and a thin one for stuff on the side (like wid
gets, secondary navigation levels, and ads).
How can we design for all types of users? - Learn web development
modern browsers
get around this rule by pretending that you're asking for "16 pixels when the user sets a zoom factor of 100%".
...original size */ the same problem expressed with ems: body { font-size:1em; } /* 1em = 100% of the browser's base font size, so in most cases this will render as 16 pixels */ h1 { font-size:2em; } /* twice the size of the body, thus 32 pixels */ span.subheading { font-size:0.5em; } /* half the size of the h1, thus 16 pixels to come back to the original size */ as you can see, the math quickly
gets daunting when you have to keep track of the parent, the parent's parent, the parent's parent's parent, and so on.
...we can style the div either to set its width (using the width property) or its maximum width so that it never
gets too large (using the max-width property).
How do I start to design my website? - Learn web development
so when you
get an idea and want to turn it into a website, there are a few questions you should answer before anything else: what exactly do i want to accomplish?
...you must sit down and structure your ideas to
get a clear view of what path you must take to make your ideas a reality.
...what matters is to have a vision of what you want and how to
get there.
How do you upload your files to a web server? - Learn web development
you'd need to
get such details from your hosting provider.
... again, you would have to
get the connection credentials from your hosting provider, but this way you'd have a gui to enter them in.
... we've covered the basics of using this in the publishing your website article from our
getting started with the web guide, so we aren't going to repeat it all here.
How do I use GitHub Pages? - Learn web development
publishing content github is a very important and useful community to
get involved in, and git/github is a very popular version control system — most tech companies now use it in their workflow.
... this may seem a bit scary at first, but don't worry — you'll soon
get the hang of the basics.
...to do this, from the homepage of your repository choose settings, then scroll down until you
get to the github pages section.
Common questions - Learn web development
the term "web server" can refer to the hardware or software that serves websites to clients across the web — or both of them working to
gether.
...in this article we discuss how much everything costs and what you
get for what you pay (or don't pay).
... this article shows how to publish your site online with ftp tools — one of the most common ways to
get a website online so others can access it from their computers.
Example 3 - Learn web development
this is the third example that explain how to build custom form wid
gets.
... change states html content <form class="no-wid
get"> <select name="myfruit" tabindex="-1"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select" tabindex="0"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .wid
get select, .no-wid
get .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { positio...
...hlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-wid
get"); form.classlist.add("wid
get"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); }...
Test your skills: Form validation - Learn web development
if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
... note: regular expressions are really challenging if you are new to them, but don't despair — have a go and see where you
get to; there is no shame in asking for some help.
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
Test your skills: Other controls - Learn web development
if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
... other controls 1 in our first "other controls" assessment, we'll
get you to create a multi-line text input.
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
Multimedia and Embedding - Learn web development
we have put to
gether a course that includes all the essential information you need to work towards your goal.
...
get started prerequisites before starting this module, you should have a reasonable understanding of the basics of html, as previously covered in introduction to html.
... assessments the following assessments will test your understanding of the html basics covered in the guides above: mozilla splash page in this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles,
getting you to add some images and video to a funky splash page all about mozilla!
HTML table advanced features and accessibility - Learn web development
this is useful for all readers wishing to
get a quick idea of whether the table is useful to them as they scan the page, but particularly for blind users.
... adding structure with <thead>, <tfoot>, and <tbody> as your tables
get a bit more complex in structure, it is useful to give them more structural definition.
..."clothes" therefore should
get an attribute of scope="colgroup", whereas the others would
get an attribute of scope="col".
Assessment: Structuring planet data - Learn web development
previous overview: tables in our table assessment, we provide you with some data on the planets in our solar system, and
get you to structure it into an html table.
... if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
Test your skills: Functions - Learn web development
if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
... you'll want to clear the canvas before drawing, so that when the code is updated in the case of the live version, you don't
get lots of rectangles drawn on top of one another.
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
JavaScript building blocks - Learn web development
we have put to
gether a course that includes all the essential information you need to work towards your goal.
...
get started prerequisites before starting this module, you should have some familiarity with the basics of html and css, and you should have also worked through our previous module, javascript first steps.
...here you'll
get some practice with building up your own custom function.
Test your skills: Arrays - Learn web development
if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
... finally, join the array items to
gether in a single string called mystring, with a separator of " - ".
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
Test your skills: JSON - Learn web development
if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
...you'll need to parse it into json before you can
get any data out of it.
...you can
get around these restrictions using cors, but this is beyond the scope of what we are teaching here.
Test your skills: Object basics - Learn web development
if you
get stuck, then ask us for help — see the assessment or further help section at the bottom of this page.
... split: a number representing the year the band split up, or false if they are still to
gether.
...this is a good practice to
get into — it's very hard to help someone with a coding problem if you can't see their code.
What is web performance? - Learn web development
any other assets can continue to load in the background while the user
gets on with primary tasks, and sometimes we only load assets when they are actually needed (this is called lazy loading).
... the measurement of how long it takes the site to
get to a usable start after it has started loading is called time to interactive.
... conclusion that's it for now; we hope our brief overview of the web performance topic helped you to
get an idea of what it is all about, and made you excited to learn more.
Ember resources and troubleshooting - Learn web development
there have been a coupleof new ideas put to
gether into the form of addons that use the public apis, ember-set-helper and ember-box.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react
getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember
getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivi...
...ty: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue
getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte
getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Using Vue computed properties - Learn web development
the list summary method will
get the number of finished todoitems, and return a string reporting this.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react
getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember
getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivi...
...ty: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue
getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte
getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Vue conditional rendering: editing existing todos - Learn web development
getting back out of edit mode first, we need to add an itemedited() method to our todoitem component's methods.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react
getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember
getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivi...
...ty: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue
getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte
getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Vue resources - Learn web development
vue forum — the official forum for
getting help with vue.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react
getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember
getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivi...
...ty: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue
getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte
getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Package management basics - Learn web development
without modern build tools, dependencies like this might be included in your project using a simple <script> element, but this might not work right out of the box and you will likely need some modern tooling to bundle your code and dependencies to
gether when they are released on the web.
... a bundle is the term that’s generally used to refer to a single file on your web server that contains all the javascript for your software — typically compressed as much as possible to help reduce the time it takes to
get your software downloaded and displayed in your visitors’ browser.
... using the package ecosystem let’s run through an example to
get you started with using a package manager and registry to install a command line utility.
Accessibility Features in Firefox
it also assists users of input aids because there are far fewer keys to type to
get the desired location.
... for example, it is possible to navigate to the desired link by pressing 2 letter keys rather than tabbing through many links to
get there.
...developers, please see our dhtml accessibility documentation and
get involved in writing tools and websites using this new technology.
Accessibility Information for Core Gecko Developers
html accessibility dynamic web content is not accessible because it uses vanilla <div>s and <span>s combined with javascript rather than declarative markup to describe the behavior of custom wid
gets such as menus and tree views.
... these wid
gets are often not even keyboard focusable, and assistive technologies do not understand these wid
gets.
... this document shows several interactive desktop-style wid
gets that are accessible by keyboards and assistive technologies, and outlines a plan being developed by ibm, mozilla, and the wai protocols and formats working group (pfwg) to address the issue of dhtml accessibility.
Embedding API for Accessibility
text zoom on a per-window basis the nsidomwindow::
gettextzoom(float *zoomfactor) and nsidomwindow::settextzoom(float zoomfactor) methods can be used to set a wide range of text zoom factors on a content window.
...be aware that in debug builds, this can cause a great number of assertions (bug 71598) to use prefs in embedding, use something like the following code: #include "nsipref.h"; nsresult rv; nscomptr<nsipref> prefs(do_
getservice(ns_pref_contractid, &rv)); prefs->setboolpref("bool.pref.name", pr_true /* or pr_false */); prefs->setintpref("int.pref.name", newvalue); prefs->setcharpref("string.pref.name", newcharstarvalue); to manually add a pref to your settings, add a line like the following to your prefs.js: user_pref("accessibility.browsewithcaret", true); accessibility prefs reference the following is ...
...ingsite1.com http://www.popupsite2.com"); user_pref("capability.policy.popupsites.windowinternal.open","noaccess"); // or turn it off everywhere: user_pref("capability.policy.default.windowinternal.open","noaccess"); // override popping up new windows on tar
get=anything user_pref("browser.block.tar
get_new_window", true); // override popup windows at beginning of new page load (blocks most popup advertisements) user_pref("dom.disable_open_during_load", true); moz 0.8 client side redirects set...
Multiprocess on Windows
interceptortar
getptr<t> no-op deleter: used to annotate pointers whose reference counts must never be touched.
...there is also a mozilla::mscom::
getter_addrefs() function that allows these pointers to receive outparams.
... simple example now you know about mainthreadhandoff::wrapinterface and about the smart pointers, you're ready to wrap an interface: accessible* myaccessible = ....; mozilla::mscom::stauniqueptr<iaccessible> acctowrap; myaccessible->
getnativeinterface(mozilla::mscom::
getter_addrefs(acctowrap)); mozilla::mscom::proxyuniqueptr<iaccessible> wrapped; hresult hr = mozilla::mscom::mainthreadhandoff::wrapinterface(mozilla::move(acctowrap), mozilla::mscom::
getter_addrefs(wrapped)); if (failed(hr)) { // handle your error here } // the wrapped interface should be given to the at from within the mta.
Mozilla’s UAAG evaluation report
developers interested in this problem can look at the
getalternatetext() method -- see the cvs history for suggestions.
... turn window.open off for particular sites: user_pref("capability.policy.popupsites.sites", "http://www.annoyingsite1.com http://www.popupsite2.com"); user_pref("capability.policy.popupsites.windowinternal.open", "noaccess"); or turn it off everywhere: user_pref("capability.policy.default.windowinternal.open", "noaccess"); override popping up new windows on tar
get=anything: user_pref("browser.tar
get_new_blocked", true); override popup windows at beginning of new page load (blocks most popup advertisements): user_pref("dom.disable_open_during_load", true); 5.4 selection and focus in viewport.
...it does, however, support the look and feel of wid
gets on various operating systems, when the classic theme is selected (on by default).
Index
675 creating an appealing add-on listing add-ons, beginner, guide, webextension, publishing there are two essential steps to
getting people to use your add-on: they need to discover your add-on and open the listing page, then the listing page needs to encourage them to click the add to firefox button.
... the content you add to a listing is therefore vital: from making effective use of keywords in your descriptions, to
get visibility in external search engine results, through having an icon that attracts a user’s attention from a category list, to screenshots that show how useful your add-on is.
...if you just want to
get started, head to the submit a new add-on page on amo.
Creating JavaScript callbacks in components
here is an example of how to use the callback system: var wordhandler = { onword : function(word) { alert(word); } }; var stringparser = /*
get a reference to the parser somehow */ stringparser.addobserver(wordhandler); stringparser.parse("pay no attention to the man behind the curtain"); you can find examples of this pattern all over the mozilla codebase.
...remember (or discover) that addeventlistener is a method of the nsidomeventtar
get interface and is defined as such: void addeventlistener(in domstring type, in nsidomeventlistener listener, in boolean usecapture); however, it is extremely common to see developers pass a normal javascript function for the listener instead of an nsidomeventlistener implementation: function doload(event) { // do something here } window.addeventliste...
...now we can create a callback javascript function to handle the onword event: function handleword(word) { alert(word); } var stringparser = /*
get a reference to the parser somehow */ stringparser.addobserver(handleword); stringparser.parse("pay no attention to the man behind the curtain"); yes, you can still use the normal interface-based callback implementation too.
Creating MozSearch plugins
lugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> <url type="application/x-suggestions+json" method="
get" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchterms}" /> <url type="text/html" method="
get" template="http://search.yahoo.com/search"> <param name="p" value="{searchterms}"/> <param name="ei" value="utf-8"/> <mozparam name="fr" condition="pref" pref="yahoo-fr" /> </url> <searchform>http://search.yahoo.com/</searchform> </searchplugin> let's say the us...
...4xmavcok9armhbzaw0aecibhkalc0mdy7x9abna3obazxiaa6ikecglmvqhwwyjyul2d4v2cpg8vzswx7ghyaaak7aoif7saboqcmn4ha3ahfsidtgpq%2fvlz8p4mskj2w9h8ggbjevxvhdo4fquqg%2fkdypqcg4h8luiacnq%2fsobmyi8basajfpcj1aaeejwvqqlpabxmh5bjjqi0gi9dtaagdbbccavlkgmq7ykczxpcqxquzhaeccj4xgml493ug21zd%2badaxh0wlm4a9mzpxjkjiiawtar5pqmalacabquulttbgccagcnnzgabbgamj5thwgvjlaaaaabjru5erkjggg%3d%3d</image> <url type="text/html" method="
get" template="http://developer.mozilla.org/en/docs/special:search?search={searchterms}"/> <searchform>http://developer.mozilla.org/en/docs/special:search</searchform> </searchplugin> notice in this case that instead of using <param> to define parameters to the search engine, they're simply embedded inside the template url.
... this is actually the preferred way to do things when using
get as the method.
Creating a spell check dictionary add-on
if there already is one, try contacting the author to
get it updated, or contact amo editors if the author does not respond.
...em:id>locale-code@dictionaries.addons.mozilla.org</em:id> <em:version>version number</em:version> <em:type>64</em:type> <em:unpack>true</em:unpack> <em:name>name</em:name> <!-- other install.rdf metadata such as em:localized, em:description, em:creator, em:developer, em:translator, em:contributor or em:homepageurl --> <!-- firefox --> <em:tar
getapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>18.0a1</em:minversion> <em:maxversion>46.0</em:maxversion> </description> </em:tar
getapplication> <!-- thunderbird --> <em:tar
getapplication> <description> <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id> <em:minvers...
...ion>18.0a1</em:minversion> <em:maxversion>22.0</em:maxversion> </description> </em:tar
getapplication> <!-- seamonkey --> <em:tar
getapplication> <description> <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id> <em:minversion>2.15a1</em:minversion> <em:maxversion>2.49</em:maxversion> </description> </em:tar
getapplication> </description> </rdf> there are some rules about how you should adapt the install.rdf file: if you are creating a new dictionary add-on, we recommend that the em:id consists of your locale code followed by @dictionaries.addons.mozilla.org, but if there is more than one dictionary for your language (for example the german "old spelling" versus "new spelling" dictionaries), you may need to ...
Debugging on Windows
enable it by going its configuration menu in "debug > other debugging tar
gets > child process debugging settings", and ticking the box.
...you will
get a dialog box asking if you would like to debug.
...type/copy/drag the memory address of "int 3" into the memory view to
get it to update on that part of the memory.
Gecko Logging
sync print each log synchronously, this is useful to check behavior in real time or
get logs immediately before crash.
...many rust libraries use the log crate to log messages, which works to
gether with env_logger at the application level to control what's actually printed via rust_log.
... you can set an overall logging level, though it could be quite verbose: set rust_log="debug" you can also tar
get individual modules by path: set rust_log="style::style_resolver=debug" for linux/macos users, you need to use export rather than set.
Inner and outer windows
they
get displayed in the outer window, which is contained in the "physical" browser window.
...if the document currently being displayed asks "what window am i in?", it
gets the outer window as the answer.
...you can
get the window containing the frame from the window.parent property.
Message manager overview
it's a chromemessagebroadcaster object, which implements the following interfaces: nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster you can access the global message manager like this: // chrome script let globalmm = cc["@mozilla.org/globalmessagemanager;1"] .
getservice(ci.nsimessagelistenermanager); window message manager the window message manager is associated with a specific browser window, and operates on every <browser> (that is, every content tab) loaded into that window: loadframescript() loads the given script into every <browser> in that browser window broadcastasyncmessage() sends the message to every <browser> in that browser window.
... accessing process message managers you can access the global parent process manager with code like this: // parent process let parentprocessmessagemanager = cc["@mozilla.org/parentprocessmessagemanager;1"] .
getservice(ci.nsimessagebroadcaster); you can also access it as the ppmm property of services.jsm.
... // child process script let childprocessmessagemanager = cc["@mozilla.org/childprocessmessagemanager;1"] .
getservice(ci.nsisyncmessagesender); parent process message manager the parent process message manager lives in the implements nsimessagelistenermanager nsimessagebroadcaster child process message manager implements nsimessagelistenermanager nsimessagesender loading scripts per child process since the process message managers do not support script loading the only way to implement per-child process code is to use a frame script which imports a custom javascript module (jsm).
mozbrowsercontextmenu
general info specification non standard interface customevent bubbles yes cancelable yes tar
get <iframe> default action none properties property type description tar
get read only eventtar
get the browser iframe type read only domstring the type of event.
... systemtar
gets an array containing one or more menusystem objects (see the menusystem object, below), containing details of the standard menu(s) that will be shown.
...in the case of an image or video context menu, this is the src of the image or video clicked on to
get the context menu.
HTTP Cache
represents a distinct storage area (or scope) to put and
get cache entries mapped by urls into and from it.
... other parallel openers of the same cache entry are blocked (wait) for invocation of their oncacheentryavailable until one of the following occurs: the writer simply throws the entry away: other waiting opener in line
gets the entry again as "new", the cycle repeats.
... the writer stored all necessary meta data in the cache entry and called metadataready on it: other consumers now
get the entry and may examine and potentially modify the meta data and read the data (if any) of the cache entry.
How to add a build-time test
writing a test is good, but it is even more helpful if that test
gets executed.
...the first link, though, is the "check" tar
get in a makefile.
... for now, enclose your test-related code (in the makefile) with ifdef enable_tests run the test program from the "check" tar
get in the makefile.
Code Samples
getting the directory where your add-on is located if you need to determine the directory in which your add-on is installed, code like the following will do the trick.
... components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.
getaddonbyid("yourextensionid", function(addon) { var addonlocation = addon.
getresourceuri("").queryinterface(components.interfaces.nsifileurl).file.path; }); accessing file and version information components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.
getaddonbyid("my-addon@foo.com", function(addon) { alert("my extension's version is " + addon.version); alert("did i remember to include that file.txt file in my xpi?
..."yes!" : "no"); alert("let's pretend i did, it's available from the url " + addon.
getresourceuri("file.txt").spec); }); uninstall an add-on components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.
getaddonbyid("youraddon@youraddon.com", function(addon) { addon.uninstall(); }); disable an add-on components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.
getaddonbyid("youraddon@youraddon.com", function(addon) { if (addon.isactive) addon.userdisabled = addon.isactive; }); listening for add-on uninstall this example sets a variable beinguninstalled that you can check when you
get a profile-before-change message to do cleanup for your add-on on uninstall.
Dict.jsm
method overview dict copy(); boolean del(string akey); object
get(string akey, [optional] object adefault); boolean has(string akey); array listitems(); array listkeys(); array listvalues(); void set(string akey, object avalue); string tojson(); string tostring(); properties attribute type description count number the number of items in the dictionary.
...
get() returns the value corresponding to the specified key.
... object
get( string akey, [optional] object adefault ); parameters akey the key whose value should be returned.
DownloadList
a reference to a downloadlist object can be obtained using the downloads.
getlist() function.
... method overview promise<array<download>>
getall(); promise add(download adownload); promise remove(download adownload); promise addview(object aview); promise removeview(object aview); void removefinished([optional] function afilterfn); methods
getall() retrieves a snapshot of the downloads that are currently in the list.
...promise<array<download>>
getall(); parameters none.
Log.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/log.jsm"); basic usage components.utils.import("resource://gre/modules/log.jsm"); //
get a logger, give it a name unique to this chunk of code.
... // use dots to create a hierarchy, this way you can later change // the log level of sets of loggers under some common root let log = log.repository.
getlogger("myextension.myclass"); log.level = log.level.debug; // a console appender logs to the browser console.
...: addappender(); level logstructured(); name parent removeappender(); updateappenders(); and the methods mentioned below: logger methods loggerrepository(); length: 0 keys of prototype:
getlogger(); rootlogger storagestreamappender(); length: 1 keys of prototype: doappend();
getinputstream(); newoutputstream(); outputstream reset(); structuredformatter(); length: 0 keys of prototy...
WebChannel.jsm
method overview listen(function callback); stoplistening(); send(object message, eventtar
get tar
get); attributes id string webchannel id methods listen() registers the callback for messages on this channel.
... parameters none send() sends messages over the webchannel id using the "webchannelmessa
getocontent" event.
...me code let channel = new webchannel(webchannelid, services.io.newuri("https://mozilla.org", null, null)); // receive messages channel.listen(function (webchannelid, message, sendercontext) { // send messages channel.send({ data: { greeting: true } }, sendercontext); }); webpage code receive messages from an existing webchannel in content code window.addeventlistener("webchannelmessa
getocontent", function(e) { // receive messages console.log(e.detail); }, true); send messages to an existing webchannel in chrome code window.dispatchevent(new window.customevent("webchannelmessa
getochrome", { detail: { id: webchannelid, message: { something: true } } })); ...
What every Mozilla translator should know
to keep the track of what's going on, it's also a good idea to read the planet mozilla l10n when you have a problem use the above mailing lists the person in charge of the mozilla l10n is axel hecht (l10n at mozilla.com), pike on irc another interesting way of
getting help is the irc channel #l10n at irc.mozilla.org useful tools the l10n dashboard pontoon narro translate toolkit koala 0.1 mozillatranslator mercurial the hg is organized into several repositories, sometimes called branches.
...search plugins, protocol handlers, rss/live bookmarks), you will need to upload a patch with the suggested changes to bugzilla and
get approval before pushing those changes to your hg repository.
...asking for approval (use the appropriate branch) if you
get the approval you will see who_is_ap:approval1.8.xxx+ now, you can upload the changes approved to the cvs server.
Basics
however, mathml documents tend to be verbose and you might
get lost trying to locate a mathml fragment with the usual view source.
...> <msup> <mi>y</mi> <mn>4</mn> </msup> </mrow> <mo>+</mo> <msup> <mi>y</mi> <mn>5</mn> </msup> </mrow> </maction> </mtd> </mtr> </mtable> </mtd> </mtr> </mtable> </math> </div> css content .control { text-decoration: none; font-weight: bold; font-size: 200%; } input { color: red; } [class="inputmath"] { border: 1px dotted; } javascript content function setselection(id,value) { document.
getelementbyid(id).setattribute("selection",value); } function expand() { setselection("a11","2"); setselection("a12","2"); setselection("a13","2"); setselection("a21","2"); setselection("a22","2"); setselection("a23","2"); setselection("a31","2"); setselection("a32","2"); setselection("a33","2"); setselection("a41","2"); setselection("a42","2"); setselection("a43","2"); } function un...
...() { setselection("a11","1"); setselection("a12","1"); setselection("a13","1"); setselection("a21","1"); setselection("a22","1"); setselection("a23","1"); setselection("a31","1"); setselection("a32","1"); setselection("a33","1"); setselection("a41","1"); setselection("a42","1"); setselection("a43","1"); } function incrementinput(inputid, increment) { var inputelement = document.
getelementbyid(inputid); var size = parseint(inputelement.size) + increment; if (size <= 0) size = 1 inputelement.size = size; } and there could be more...
MathML In Action
you already have a mathml-enabled build but what you see on the screenshot is not what you
get?
.../mn> <mi>a</mi> </mrow> </mfrac> </mrow> </mstyle> </math> </p> javascript content function zoomtoggle() { if (this.hasattribute("mathsize")) { this.removeattribute("mathsize"); } else { this.setattribute("mathsize", "200%"); } } function load() { document.
getelementbyid("zoomablemath").
...
getting involved is part of your contribution towards enriching gecko with an elegant standards-compliant mathml renderer.
Mozilla Quirks Mode Behavior
(this also applies to
getelementsbyclassname.) stylesheets linked in the document with an advisory mime type of text/css will still be treated as css even if the server gives a content-type header other than text/css.
... there are a bunch of quirks to
get percentage heights on images, tables, objects, and applets (etc.?) to "work" (the way they did in netscape navigator 4), even though css says that percentage heights should behave like 'auto' heights when the parent element doesn't have a fixed height.
...[see nstableframe::
getdeflationforbackground and figure out what really differs, and when it started differing.] gecko had bug 248239, where table cells acted as they had box-sizing:border-box applied for the purpose of the height property.
Mozilla Style System
the style context has a
getter for each struct, and nsiframe, which represents the concept of a css box (or rendering object), also has
getters that forward to the frame's style context.
... thus, typical calling code looks like this: if (aframe->
getstyledisplay()->mopacity < 1.0f) return pr_true; or like this: const nsstyleposition *stylepos = aframe->
getstyleposition(); if (stylepos->mwidth.
getunit() == estyleunit_coord) { nscoord w = stylepos->mwidth.
getcoordvalue(); ...
... } else if (stylepos->mwidth.
getunit() == estyleunit_percent) { ...
JS::PerfMeasurement
tches context switches involving the profiled thread ::cpu_migrations .cpu_migrations migrations of the profiled thread from one cpu core to another these events map directly to "generic events" in the linux 2.6.31+ <linux/perf_event.h> interface, and so unfortunately are a little vague in their specification; for instance, we can't tell you exactly which level of cache you
get misses for if you measure cache_misses.
... you bitwise-or the ones you want to
gether and pass them to the constructor.
... all presently-measurable events are measured with counters, not timers; that is, there is no defined relation between the numbers you
get from this interface, and wall-clock time.
Leak-hunting strategies and tips
--jesse) dropping a reference on the floor by: for
getting to release (because you weren't using nscomptr when you should have been): see bug 99180 or bug 93087 for an example or bug 28555 for a slightly more interesting one.
... if you really need to debug leaks that involve js objects closely, you can
get detailed printouts of the paths js uses to mark objects when it is determining the set of live objects by using the functions added in bug 378261 and bug 378255.
...
getting symbol information for system libraries windows setting the environment variable _nt_symbol_path to something like symsrv*symsrv.dll*f:\localsymbols*http://msdl.microsoft.com/download/symbols as described in microsoft's article.
Power profiling overview
intel power gad
get: pkg and pp0 planes; windows, mac and linux.
... power profiling how-to this section aims to put to
gether all the above information and provide a set of strategies for finding, diagnosing and fixing cases of high power consumption.
...via tools/power/rapl, or mach power on mac, or intel power gad
get on windows) for the comparisons.
Preferences system
reference information about them is available below: preferences system documentation: introduction:
getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes use code for a typical preferences window may look like this: <prefwindow id="apppreferences" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="pane1" label="&pane1.title;"> <preferences> <preference id="pref1" name="pref.na...
...you should be careful to read the higs for the platforms you are tar
geting and use the xul preprocessor if necessary to set different window titles as appropriate.
... you should also be careful to specify the width of the window (in em) as appropriate using the preprocessor for each tar
geted platform, as well as the height (in em) for platforms where the window size does not change as the selected panel is changed (e.g.
Crash reporting
this system is combination of projects: google breakpad client and server libraries mozilla-specific crash reporting user interface and bootstrap code socorro collection and reporting server where did my crash
get submitted?
...type about:crashes into your location bar to
get a page listing both submitted and unsubmitted crash reports.
... for more information, see how to
get a stacktrace for a bug report.
PR EnumerateAddrInfo
enumerates each of the possible network addresses of a praddrinfo structure, acquired from pr_
getaddrinfobyname.
...to continue an enumeration (thereby
getting successive addresses from the praddrinfo structure), the value should be set to the function's last returned value.
... addrinfo a pointer to a praddrinfo structure returned by pr_
getaddrinfobyname.
PR_NewThreadPrivateIndex
you use this index with pr_setthreadprivate and pr_
getthreadprivate.
...you pass this index to pr_setthreadprivate and pr_
getthreadprivate to set and retrieve data associated with the index.
...a thread can
get access only to its own thread-specific data.
PR_ReadDir
gets a pointer to the next entry in the directory.
...the reason can be retrieved via pr_
geterror.
... if the end of the directory is reached, pr_readdir returns null, and pr_
geterror returns pr_no_more_files_error.
NSPR
legacy nspr content older nspr content is available in svn for browsing and/or migration to this site
getting nspr nspr is available in various source and binary packages, depending on your platform: windows: build the source package, using the nspr build instructions.
... ubuntu: install the libnspr4-dev package via apt-
get.
... debian: install the libnspr4-dev package via apt-
get.
Building NSS
get the source nss and nspr use mercurial for source control like other mozilla projects.
... to check out the latest sources for nss and nspr--which may not be part of a stable release--use the following commands: hg clone https://hg.mozilla.org/projects/nspr hg clone https://hg.mozilla.org/projects/nss to
get the source of a specific release, see nss releases.
... build with make alternatively, there is a make tar
get called "nss_build_all", which produces a similar result.
NSS 3.14 release notes
the following functions have been added to the libssl library included in nss 3.14 ssl_versionrange
get (in ssl.h) ssl_versionrange
getdefault (in ssl.h) ssl_versionrange
getsupported (in ssl.h) ssl_versionrangeset (in ssl.h) ssl_versionrangesetdefault (in ssl.h) to better ensure interoperability with peers that support tls 1.1, nss has altered how it handles certain ssl protocol layer events.
... the following functions have been added to the libssl library included in nss 3.14: dtls_importfd (in ssl.h) dtls_
gethandshaketimeout (in ssl.h) ssl_
getsrtpcipher (in ssl.h) ssl_setrtpciphers (in ssl.h) support for aes-gcm support for aes-gcm has been added to the nss pkcs #11 module (softoken), based upon the draft 7 of pkcs #11 v2.30.
... bugs fixed in nss 3.14 this bugzilla query returns all the bugs fixed in nss 3.14: https://bugzilla.mozilla.org/buglist.cgi?list_id=4643675;resolution=fixed;classification=components;query_format=advanced;product=nss;tar
get_milestone=3.14 ...
NSS 3.19 release notes
a new api (cert_
getimposednameconstraints) has been added that allows one to lookup imposed constraints.
... new functions in cert.h cert_
getimposednameconstraints - check if any imposed constraints exist for the given certificate, and if found, return the constraints as encoded certificate extensions.
... bugs fixed in nss 3.19 this bugzilla query returns all the bugs fixed in nss 3.19: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.19 acknowledgements the nss development team would like to thank karthikeyan bhargavan from inria for responsibly disclosing the issue in bug 1086145.
NSS 3.28 release notes
ssl_signatureschemepref
get allows an application to learn the currently supported and enabled signature schemes for a socket.
... new functions to configure signature schemes are provided: ssl_signatureschemeprefset, ssl_signatureschemepref
get.
... bugs fixed in nss 3.28 this bugzilla query returns all the bugs fixed in nss 3.28: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.28 compatibility nss 3.28 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.43 release notes
new in nss 3.43 new functionality new functions in sechash.h hash_
gethashoidtagbyhashtype - convert type hash_hashtype to type secoidtag in sslexp.h ssl_sendcertificaterequest - allow server to request post-handshake client authentication.
...ly if the system fips mode flag is set bug 1528262 - add a -j option to the strsclnt command to specify sigschemes bug 1513909 - add manual for nss-policy-check bug 1531074 - fix a deref after a null check in seckey_setpublicvalue bug 1517714 - properly handle esni with hrr bug 1529813 - expose hkdf-expand-label with mechanism bug 1535122 - align tls 1.3 hkdf trace levels bug 1530102 - use
getentropy on compatible versions of freebsd.
... this bugzilla query returns all the bugs fixed in nss 3.43: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.43 compatibility nss 3.43 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.44 release notes
new in nss 3.44 new functionality new functions in lib/certdb/cert.h cert_
getcertificateder - access the der-encoded form of a certcertificate.
... bugs fixed in nss 3.44 1501542 - implement checkarmsupport for android 1531244 - use __builtin_bswap64 in crypto_primitives.h 1533216 - cert_decodecertpackage() crash with netscape certificate sequences 1533616 - sdb_
getattributevaluenolock should make at most one sql query, rather than one for each attribute 1531236 - provide accessor for certcertificate.dercert 1536734 - lib/freebl/crypto_primitives.c assumes a big endian machine 1532384 - in nss test certificates, use @example.com (not @bogus.com) 1538479 - post-handshake messages after async server authentication break when using record layer separation 1521578 - x25519 support in pk1...
... disabled 1549848 - allow building nss for ios using gyp 1549847 - nss's sqlite compilation warnings make the build fail on ios 1550041 - freebl not building on ios simulator 1542950 - macos cipher test timeouts this bugzilla query returns all the bugs fixed in nss 3.44: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.44 compatibility nss 3.44 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS Sample Code sample4
certcertificate *cert = null; seckeypublickey *pubkey = null; seckeyprivatekey *pvtkey = null; int modulus_len, i, outlen; char *buf1 = null; char *buf2 = null; /* initialize nss */ pk11_setpasswordfunc(passwdcb); rv = nss_init("."); if (rv != secsuccess) { fprintf(stderr, "nss initialization failed (err %d)\n", pr_
geterror()); goto cleanup; } cert = pk11_findcertfromnickname("testca", null); if (cert == null) { fprintf(stderr, "couldn't find cert testca in nss db (err %d)\n", pr_
geterror()); goto cleanup; } pubkey = cert_extractpublickey(cert); if (pubkey == null) { fprintf(stderr, "couldn't extract public key from cert testca (err %d)\n", pr_
geterror()...
... /* initialize buf1 */ for (i=0;i<modulus_len;i++) { buf1[i]= (i %26) + 'a'; } buf1[modulus_len-1] = '\0'; fprintf(stderr, "buffer being encrypted = \n%s\n", buf1); /* encrypt buf1, result will be in buf2 */ rv = pk11_pubencryptraw(pubkey, buf2, buf1, modulus_len, null); if (rv != secsuccess) { fprintf(stderr, "encrypt with public key failed (err %d)\n", pr_
geterror()); goto cleanup; } pvtkey = pk11_findkeybyanycert(cert, null); if (pvtkey == null) { fprintf(stderr, "couldn't find private key for cert testca (err %d)\n", pr_
geterror()); goto cleanup; } /* clear buf1 */ for (i=0;i<modulus_len;i++) { buf1[i]= '\0'; } /* decrypt buf2, result will be in buf1 */ rv = pk11_pubdecryptraw(pvtkey, buf1, &outle...
...n, modulus_len, buf2, modulus_len); if (rv != secsuccess) { fprintf(stderr, "decrypt with private key failed (err %d)\n", pr_
geterror()); goto cleanup; } fprintf(stderr, "result of decryption, outlen = %d\n", outlen); fprintf(stderr, "result of decryption, buf = \n%s\n", buf1); exit(0); cleanup: if (cert) cert_destroycertificate(cert); if (pubkey) seckey_destroypublickey(pubkey); if (pvtkey) seckey_destroyprivatekey(pvtkey); if (buf1) free(buf1); if (buf2) free(buf2); exit(1); } char *passwdcb(pk11slotinfo *info, prbool retry, void *arg) { if (!retry) return pl_strdup("test"); else return null; } ...
FIPS mode of operation
general-purpose functions fc_
getfunctionlist fc_initialize fc_finalize fc_
getinfo slot and token management functions fc_
getslotlist fc_
getslotinfo fc_
gettokeninfo fc_waitforslotevent fc_
getmechanismlist fc_
getmechanisminfo fc_inittoken fc_initpin fc_setpin session management functions fc_opensession fc_closesession fc_closeallsessions fc_
getsessioninfo fc_
getoperationstate fc_setoperationstate fc_login fc_logout object management functions these functions manage certificates and keys.
... fc_createobject fc_copyobject fc_destroyobject fc_
getobjectsize fc_
getattributevalue fc_setattributevalue fc_findobjectsinit fc_findobjects fc_findobjectsfinal encryption functions these functions support triple des and aes in ecb and cbc modes.
... parallel function management functions fc_
getfunctionstatus fc_cancelfunction ...
SSL functions
function name/documentation source code nss versions nss_
getclientauthdata mxr 3.2 and later nss_setdomesticpolicy mxr 3.2 and later nss_setexportpolicy mxr 3.2 and later nss_setfrancepolicy mxr 3.2 and later nssssl_versioncheck mxr 3.2.1 and later ssl_authcertificate mxr 3.2 and later ssl_authcertificatehook mxr 3.2 and later ssl_badcerthook mxr ...
...3.2 and later ssl_certdbhandleset mxr 3.2 and later ssl_canbypass mxr 3.11.7 and later ssl_cipherpolicy
get mxr 3.2 and later ssl_cipherpolicyset mxr 3.2 and later ssl_cipherpref
get mxr 3.2 and later ssl_cipherpref
getdefault mxr 3.2 and later ssl_cipherprefset mxr 3.2 and later ssl_cipherprefsetdefault mxr 3.2 and later ssl_clearsessioncache mxr 3.2 and later ssl_configmpserversidcache mxr 3.2 and later ssl_configsecureserver mxr 3.2 and later ssl_configserversessionidcache mxr 3.2 and later ssl_datapending mxr 3.2 and later ssl_forcehandshake mxr 3.2 and later ssl_forcehandshak...
...ewithtimeout mxr 3.11.4 and later ssl_
getchannelinfo mxr 3.4 and later ssl_
getciphersuiteinfo mxr 3.4 and later ssl_
getclientauthdatahook mxr 3.2 and later ssl_
getmaxservercachelocks mxr 3.4 and later ssl_
getsessionid mxr 3.2 and later ssl_
getstatistics mxr 3.2 and later ssl_handshakecallback mxr 3.2 and later ssl_importfd mxr 3.2 and later ssl_inheritmpserversidcache mxr 3.2 and later ssl_invalidatesession mxr 3.2 and later ssl_localcertificate mxr 3.4 and later ssl_option
get mxr 3.2 and later ssl_option
getdefault mxr 3.2 and later ssl_optionset mxr 3.2 and later ssl_opt...
NSS tools : signtool
you typically
get a certificate from an independent ca if you want to sign software that will be distributed over the internet.
...for example, you can use it with the -l option to
get detailed information about a particular signing certificate.
... you use the -l option to
get a list of signing certificates only, including the signing ca for each.
Network Security Services
if you're a developer and would like to contribute to nss, you might want to read the documents highlevel overview of internal details of nss and
getting started with nss.
...
getting started nss releases this page contains information about the current and past releases of nss.
...
get the source code and build it instructions on how to build nss on the different supported platforms.
Download Rhino
source in addition to
getting the source from the zip files above, the source code for rhino can be found in github at https://github.com/mozilla/rhino.
... to
get the source, use the command git clone https://github.com/mozilla/rhino.git rhino uses gradle as its build system.
... running the ./gradlew tasks command at the top directory of the rhino distribution will print the list of available build tar
gets.
Rhino overview
the class context should be obtained from the security manager (see java.lang.securitymanager.
getclasscontext()).
...if it is the interpreter class, call the
getinterpretersecuritydomain() method of context to obtain the security domain of the currently executing interpreted script or function.
... otherwise, it must be a generated class, and an embedding can call
getsecuritydomain() in the class implementing securitysupport.
The JavaScript Runtime
these types are implemented with the following java types and values: javascript fundamental type java type undefined a singleton object defined by context.
getundefinedtype() null null boolean java.lang.boolean number java.lang.number, that is, any of java.lang.byte, java.lang.short, java.lang.integer, java.lang.float, or java.lang.double.
... instead, every property accessor method in scriptable (has,
get, set, remove,
getattributes, and setattributes) has overloaded forms that take either a string or an int argument.
...for example, evaluating the expression obj["3"] will invoke the
get(int, scriptable) method even though the property name was presented in the script as a string.
64-bit Compatibility
if this happens you will
get an assert that points directly to the ill-typed lir.
...a native integer is the size used for intptr_t/uintptr_t, which is usually the width of a general-purpose register on the tar
get cpu.
... stobj_
get_fslot - returns jsval-width lins stobj_
get_dslot - returns jsval-width lins stobj_set_dslot - stores jsval-width lins stobj_set_fslot - stores jsval-width lins box_jsval - returns jsval-width lins unbox_jsval - expects jsval-width lins ...
JS::CurrentGlobalOrNull
if there is no javascript running on the context, this returns the context's global, i.e., js_
getglobalobject(cx).
... note that js_
getglobalobject() and context globals are becoming obsolete.
... see also mxr id search for js::currentglobalornull js_
getglobalforobject bug 899245 ...
JSAutoByteString
str jsstring * a pointer to jsstring to
get initial content by calling js_encodestring(cx, str).
... if jsautobytestring instance is initialized with jsautobytestring bytes(cx, str); style, it calls js_encodestring(cx, str) to
get the string to take ownership.
... note that the js_encodestring call in constructor and some encode* methods may fail and
get null.
JSNewResolveOp
setting jsclass_new_resolve and jsclass_new_resolve_
gets_start further extends this hook by passing in the starting object on the prototype chain via *objp.
...when using jsclass_new_resolve_
gets_start, the resolve hook must therefore null *objp to signify "not resolved".
... with only jsclass_new_resolve and no jsclass_new_resolve_
gets_start, the hook can assume *objp is null on entry.
JSObject
see js_
getprototype.
...see js_
getparent.
...each property has a name, a
getter, a setter, and property attributes.
JSObjectOps.defineProperty
syntax jsbool (*jsdefinepropop)(jscontext *cx, jsobject *obj, jsid id, jsval value, jspropertyop
getter, jspropertyop setter, unsigned int attrs); name type description cx jscontext * pointer to the js context in which the property is being defined.
...
getter jspropertyop the
getter for the new property.
... description define obj[id], an own property of obj named id, having the given initial value, with the specified
getter, setter, and attributes.
JSPrincipals
obsolete since jsapi 13
getprincipalarray void * (*)(jscontext *, jsprincipals *) pointer to the function that returns an array of principal definitions.
...
getprincipalarray is a pointer to the function that retrieves the principals for this object or script.
... see also mxr id search for jsprincipals js_newglobalobject js_holdprincipals js_dropprincipals bug 715417 - removed
getprincipalarray and globalprivilegesenabled bug 728250 - added dump method, removed codebase, destroy, and subsume properties bug 884676 - changed refcount type to mozilla::atomic ...
JS_CallFunction
if js engine fails to
get the function, it returns false.
... calling js_callfunction is safe only if the fun argument could be passed to js_
getfunctionobject safely: that is, it is a function implemented by a jsnative or jsfastnative or the result of a call to js_compilefunction, js_compileucfunction, js_compilefunctionforprincipals, or js_compileucfunctionforprincipals.
... see also mxr id search for js_callfunction mxr id search for js_callfunctionname mxr id search for js_callfunctionvalue js_compilefunction js_definefunction js_definefunctions js_
getfunctionobject js_newfunction js_valuetofunction bug 965830 ...
JS_DefineFunction
it also becomes the name property of the new function object and can be accessed using js_
getfunctionid.
...this becomes the new function object's length property and can be accessed using js_
getfunctionarity.
...see also mxr id search for js_definefunction mxr id search for js_defineucfunction mxr id search for js_definefunctionbyid js_callfunctionname js_callfunctionvalue js_compilefunction js_definefunctions js_defineobject js_defineproperties js_defineproperty js_
getfunctionobject js_newfunction bug 607695 - added js_definefunctionbyid ...
JS_DefineOwnProperty
descriptor is supposed to be a property descriptor, this means you need to create an object with properties such as value, writable,
get or set.
...a
getter or setter defined with this functions will be observable from js code.
... see also js_setproperty js_
getpropertydescriptorbyid object.defineproperty bug 1017323 ...
JS_HasArrayLength
obj jsobject * array object to
get the length of.
...this function differs from js_
getarraylength in the treatment of errors and unusual cases, like when an object's length is negative or not a number.
...see also js_defineelement js_deleteelement js_
getarraylength js_
getelement js_isarrayobject js_lookupelement js_newarrayobject js_setarraylength js_setelement bug 657298 ...
JS_LookupProperty
use js_
getpropertydescriptorbyid instead.
...use js_
getpropertyattributes to distinguish these cases.
... js_lookupproperty differs from js_
getproperty in that js_lookupproperty does not invoke the
get handler for the property.
JS_SetInterruptCallback
syntax jsinterruptcallback js_setinterruptcallback(jsruntime *rt, jsinterruptcallback callback); jsinterruptcallback js_
getinterruptcallback(jsruntime *rt); void js_requestinterruptcallback(jsruntime *rt); name type description rt jsruntime * the runtime.
...(in this case, the callback may terminate the script by returning false.) js_
getinterruptcallback returns the currently installed interrupt callback, or null if none is currently installed.
... see also mxr id search for js_setinterruptcallback mxr id search for js_
getinterruptcallback mxr id search for js_requestinterruptcallback bug 977287 ...
JSDBGAPI
breakpoints js_settrap js_
gettrapopcode js_cleartrap js_clearscripttraps js_clearalltraps js_handletrap js_setinterrupt js_clearinterrupt watchpoints js_setwatchpoint js_clearwatchpoint js_clearwatchpointsforobject js_clearallwatchpoints inspecting the stack js_pctolinenumber js_linenumbertopc js_
getfunctionscript js_
getfunctionnative js_
getfunctionfastnative js_
getscriptprincipals typedef jsstackframe js_frameiterator js_
getframescript js_
getframepc js_
getscriptedcaller js_stackframeprincipals js_evalframeprincipals js_
getframeannotation js_setframeannotation js_
getframeprincipalarray js_isnativeframe js_
getframeobject js_
getframescopechain js_
getframecallobj...
...ect js_
getframethis js_
getframefunction js_
getframefunctionobject js_isconstructorframe js_isdebuggerframe js_
getframereturnvalue js_setframereturnvalue js_
getframecalleeobject js_
getscriptfilename js_
getscriptbaselinenumber js_
getscriptlineextent js_
getscriptversion js_
gettopscriptfilenameflags js_
getscriptfilenameflags js_flagscriptfilenameprefix jsfilename_null jsfilename_system jsfilename_protected evaluating debug code js_evaluateinstackframe examining object properties typedef jspropertydesc jspd_enumerate jspd_readonly jspd_permanent jspd_alias jspd_argument jspd_variable jspd_exception jspd_error typedef jspropertydescarray js_propertyiterator js_
getpropertydesc js_
getpropertydescarray js_putpropertydescarray hooks js_set...
...debuggerhandler js_setsourcehandler js_setexecutehook js_setcallhook js_setobjecthook js_setthrowhook js_setdebugerrorhook js_setnewscripthook js_setdestroyscripthook js_
getglobaldebughooks js_setcontextdebughooks memory usage js_
getobjecttotalsize js_
getfunctiontotalsize js_
getscripttotalsize system objects js_issystemobject js_newsystemobject profiling these functions can be used to profile a spidermonkey application using the mac profiler, shark.
SpiderMonkey 1.8
in spidermonkey 1.8.1 they will be removed and replaced with a new set of apis (js_
getsecuritycallbacks and friends, bug 451729).
...in spidermonkey 1.8, it is no longer necessary to make a special build to
get this behavior.
... js_encodestring is a new variation on js_
getstringbytes that returns a newly allocated, writable buffer which the application must js_free.
SpiderMonkey 38
get it here mozilla-esr38 you will find it in "firefox extended support release 38" package on hg release platform support spidermonkey 38 is supported on all the platforms where firefox 38 runs.
...s_symbol (bug 645416) jsid_to_symbol (bug 645416) jsprop_define_late (bug 825199) jsprop_ignore_enumerate (bug 1037770) jsprop_ignore_permanent (bug 1037770) jsprop_ignore_readonly (bug 1037770) jsprop_ignore_value (bug 1037770) jsprop_propop_accessors (bug 1088002) jsprop_redefine_nonconfigurable (bug 1101123) js_addfinalizecallback (bug 996785) js_defineconstintegers (bug 1066020) js_
getflatstringcharat (bug 1034627) js_
getfunctionscript (bug 1069694) js_
getlatin1flatstringchars (bug 1037869) js_
getlatin1internedstringchars (bug 1037869) js_
getlatin1stringcharsandlength (bug 1032726) js_
getstringcharat (bug 1034627) js_
gettwobyteexternalstringchars (bug 1034627) js_
gettwobyteflatstringchars (bug 1037869) js_
gettwobyteinternedstringchars (bug 1037869) js_
gettwobytestringc...
...on (bug 1089026) js_convertarguments (bug 1125784) js_convertargumentsva (bug 1125784) js_convertstub (bug 1103152) js_defineownproperty (bug 1017323) js_deletepropertystub (bug 1103152) js_doubletoint32 (bug 1112774) js_doubletouint32 (bug 1112774) js_enumeratestub (bug 1103152) js_evaluatescript (bug 1100579) js_evaluateucscript (bug 1100579) js_executescriptversion (bug 1095660) js_
getflatstringchars (bug 1037869) js_
getfunctioncallback (bug 1103269) js_
getinternedstringchars (bug 1037869) js_
getinternedstringcharsandlength (bug 1037869) js_
getstringcharsandlength (bug 1037869) js_
getstringcharsz (bug 1037869) js_
getstringcharszandlength (bug 1037869) js_
gettypename (bug 1037718) js_isabouttobefinalized (bug 650161) js_lookupelement (bug 1094176) js_lookupproperty (bu...
Exploitable crashes
if you see a hex address such as 0x292c2830 rather than a function name such as nslistboxbodyframe::
getrowcount at the top of the stack, a bug has caused the program to transfer control to a "random" part of memory that isn't part of the program.
...if you're not sure what rating to give, err on the higher side so the bug will
get more attention.
...to
get them go to the mac developer center downloads section -> other downloads -> search for "crashwrangler".
Implementation Details
supported features interfaces refer to specific pages to
get information of supported interfaces for interested at api: core: gecko interfaces windows: msaa, ia2, ienumvariant and isimpledom* interfaces linux: at-spi roles refer to specific pages to
get information of supported roles for interested at api: gecko msaa ia2 at-spi states refer to specific pages to
get information of supported states for interested at api: gecko msaa ia2 at-spi relations refer to specific pages to
get information of supported relations for interested at api: gecko msaa ia2 at-spi attributes object attributes refer to specific pages to
get information of supported object attributes for interested at api: gecko msaa ia2 at-spi text at...
...tributes refer to specific pages to
get information of supported text attributes for interested at api: gecko msaa - doesn't have a way to expose text attributes, use ia2 ia2 at-spi document attributes refer to specific pages to
get information of supported document attributes for interested at api: gecko/msaa/ia2 - document attributes are not exposed.
...at-spi events refer to specific pages to
get information of supported events for interested at api: gecko msaa ia2 at-spi implementation features this section highlights special features of at apis implementation by gecko.
XForms Accessibility
get build subsections below explain how you can obtain accessible xforms-enabled build.
... forms controls module some of form control elements may be represented in few ways by different wid
gets.
... submit invokes the submission of the selected instance data to its tar
get destination (see the spec, the docs).
extISessionStorage
return type method boolean has(in astring aname) void set(in astring aname, in nsivariant avalue) nsivariant
get(in astring aname, in nsivariant adefaultvalue) attributes attribute type description events readonly attribute extievents the events object for the storage supports: "change" methods has() determines if a storage item exists with the given name.
... void set(in astring aname, in nsivariant avalue) parameters aname the name of an item return value
get()
gets the value of a storage item with the given name.
... nsivariant
get(in astring aname, in nsivariant adefaultvalue) parameters aname the name of an item return value value of the item or the given default value if no item exists with the given name.
XPCOM glue
this is typically done using gre_
getgrepathwithproperties.
...however, when using threadsafe to
gether with the glue libraries from gecko 1.8 or later, a special step needs to be taken to use ns_impl_threadsafe_isupportsn.
... linux and mac: write the linker options exactly as stated (just replacing the /path/to/sdk/), otherwise you
get an undefined symbol: ...ns_tabledrivenqi...qitableentry...
Preface
following along with the examples there are a couple of different ways to
get xpcom onto your machine so you can begin to create components.
...if you don't already have the mozilla source, then an even easier way to
get and use xpcom is to download the gecko sdk, which is a collection of libraries and tools that features the xpcom component framework.
...details about downloading the sdk, building, and
getting programmatic access to gecko components are provided in the appendix to this book, setting up the gecko sdk.
Setting up the Gecko SDK
first, you need to
get the sdk, this project uses the following tools to compile the extension for use.
... /* additional members */ nsstring mname; }; #endif cspecialthing.cpp #include "cspecialthing.h" ns_impl_isupports1(cspecialthing, ispecialthing) cspecialthing::cspecialthing() { /* member initializers and constructor code */ mname.assign(l"default name"); } cspecialthing::~cspecialthing() { /* destructor code */ } /* attribute astring name; */ ns_imethodimp cspecialthing::
getname(nsastring & aname) { aname.assign(mname); return ns_ok; } ns_imethodimp cspecialthing::setname(const nsastring & aname) { mname.assign(aname); return ns_ok; } /* long add (in long a, in long b); */ ns_imethodimp cspecialthing::add(print32 a, print32 b, print32 *_retval) { *_retval = a + b; return ns_ok; } this is generally your code.
... #include "nsigenericfactory.h" #include "cspecialthing.h" ns_generic_factory_constructor(cspecialthing) static nsmodulecomponentinfo components[] = { { specialthing_classname, specialthing_cid, specialthing_contractid, cspecialthingconstructor, } }; ns_impl_ns
getmodule("specialthingsmodule", components) next step is a makefile for gmake.
Making cross-thread calls using runnables
#include "nsthreadutils.h" class piresulttask : public nsrunnable { public: piresulttask(picallback callback, const nsacstring& result) : mcallback(callback) , mresult(result) , mworkerthread(do_
getcurrentthread()) { moz_assert(!ns_ismainthread()); // this should be running on the worker thread } ns_imethod run() { moz_assert(ns_ismainthread()); // this method is supposed to run on the main thread!
...unnable { public: picalculatetask(picallback callback, int digits) : mcallback(callback) , mdigits(digits) { } ns_imethod run() { nscstring result; calculatepi(mdigits, result); nscomptr<nsirunnable> resultrunnable = new piresulttask(mcallback, result); ns_dispatchtomainthread(resultrunnable); } private: picallback mcallback; int mdigits; }; putting it all to
gether to start a new thread, create it using the thread manager: #include "nsxpcomcidinternal.h" void calculatepiasynchronously(int digits, picallback callback) { // to create a new thread,
get the thread manager nscomptr<nsithreadmanager> tm = do_
getservice(ns_threadmanager_contractid); nscomptr<nsithread> mythread; nsresult rv = tm->newthread(0, 0,
getter_addrefs(mythread)); if (ns_fail...
...ed(rv)) { // in case of failure, call back immediately with an empty string which indicates failure callback(emptycstring()); return; } nscomptr<nsirunnable> r = new picalculatetask(callback, digits); mythread->dispatch(r, nsieventtar
get::dispatch_normal); // the result callback will shut down the worker thread, we can let it go here...
XPCOM hashtable guide
rface pointers nsisupportshashkey reference-counted concrete classes nsrefptrhashkey there are a number of more esoteric hashkey classes in nshashkeys.h, and you can always roll your own if none of these fit your needs (make sure you're not duplicating an existing hashkey class though!) once you've determined what hashtable and hashkey classes you need, you can put it all to
gether.
... there are three key methods,
get, put, and remove, which retrieve entries from the hashtable, write entries into the hashtable, and remove entries from the hashtable respectively.
... the hashtables that hold references to pointers (nsrefptrhashtable and nsinterfacehashtable) also have
getweak methods that return non-addrefed pointers.
Detailed XPCOM hashtable guide
at this point, use the functions putentry/
getentry/removeentry to alter the hashtable.
...use the put(),
get(), and remove() methods to alter the table.
...the appropriate entries are
getentry and putentry.
How to build a binary XPCOM component using Visual Studio
development setup the simplest way to
get an xpcom component built is to use the gecko sdk.
...cialthing(); protected: /* additional members */ nsstring mname; }; #endif cpp file: #include "comp-impl.h" ns_impl_isupports1(cspecialthing, ispecialthing) cspecialthing::cspecialthing() { /* member initializers and constructor code */ mname.assign(l"default name"); } cspecialthing::~cspecialthing() { /* destructor code */ } /* attribute astring name; */ ns_imethodimp cspecialthing::
getname(nsastring & aname) { aname.assign(mname); return ns_ok; } ns_imethodimp cspecialthing::setname(const nsastring & aname) { mname.assign(aname); return ns_ok; } /* long add (in long a, in long b); */ ns_imethodimp cspecialthing::add(print32 a, print32 b, print32 *_retval) { *_retval = a + b; return ns_ok; } lastly, we need to create the module implementation.
... i put this to
gether from some samples i found on the mdc site: #include "nsigenericfactory.h" #include "comp-impl.h" ns_generic_factory_constructor(cspecialthing) static nsmodulecomponentinfo components[] = { { specialthing_classname, specialthing_cid, specialthing_contractid, cspecialthingconstructor, } }; ns_impl_ns
getmodule("specialthingsmodule", components) assuming you have the right sdk and setup the include and lib folders correctly, the project should build your xpcom component.
Components.classes
usage in order to retrieve the object for a given contractid, you can query the components.classes array as follows: var clazz0 = components.classes["@mozilla.org/messenger;1"]; clazz0 is the class object for the contractid @mozilla.org/messenger;1, which is not usually used by itself, but whose createinstance and
getservice methods can be used to create a new instance of the component or to access the singleton instance, if the contract id represents a service.
... to access a service (a singleton component, only single instance of which exists at any time), you should use
getservice instead of createinstance: var os = components.classes["@mozilla.org/observer-service;1"] .
getservice(components.interfaces.nsiobserverservice); the first time anyone accesses a service, the corresponding component is created under the hood.
... shortcuts it's a common practice to abbreviate components.classes and components.interfaces by storing a reference to the object as a constant: const cc = components.classes, ci = components.interfaces; var os = cc["@mozilla.org/observer-service;1"] .
getservice(ci.nsiobserverservice); a less known trick, useful when creating multiple instances of the same component, is to use the new operator on the class object: var clazz = components.classes["@mozilla.org/supports-array;1"]; var inst = new clazz(components.interfaces.nsisupportsarray); this implicitly calls the createinstance() method for you.
Components.lastResult
this is because failure result codes
get converted by xpconnect into exceptions that are thrown into the calling javascript method.
... in cases where components.lastresult is used, it is best to
get it right away after the tar
get call is made and save it in a local variable to test its value rather than doing multiple tests against components.lastresult.
... this is because many 'components' properties and methods are themselves implemented using xpconnect and subsequent calls to components.lastresult might reflect the result of 'implicit' xpconnect calls rather than the result of the tar
get call.
nsDirectoryService
example code #include "nsxpcom.h" #include "nscomptr.h" #include "nsdirectoryservicedefs.h" #include "nsiservicemanager.h" #include "nsiproperties.h" /** *
get the location of the system's "temp" directory.
... */ nsresult
gettempdir(nsifile **aresult) { nsresult rv; nscomptr<nsiservicemanager> svcmgr; rv = ns_
getservicemanager(
getter_addrefs(svcmgr)); if (ns_failed(rv)) return rv; nscomptr<nsiproperties> directory; rv = svcmgr->
getservicebycontractid("@mozilla.org/file/directory_service;1", ns_
get_iid(nsiproperties),
getter_addrefs(directory)); if (ns_failed(rv)) return rv; rv = directory->
get(ns_os_temp_dir, ns_
get_iid(nsifile), aresult); return rv; } note that ns_os_temp_dir is defined in nsdirectoryservicedefs.h along with a number of other directory service keys.
... see also using nsidirectoryservice nsiproperties.
get() nsidirectoryserviceprovider ...
NS ConvertASCIItoUTF16 external
class declaration method overview constructors
get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral find ...
...methods constructors void ns_convertasciitoutf16_external(const nsacstring&) - source parameters nsacstring& astr void ns_convertasciitoutf16_external(const char*, pruint32) - source parameters char* adata pruint32 alength
get prunichar*
get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source parameters nsstring_external& astring nsastring& operator=(const nsastring&) - source parameters nsastring& astring nsastring& operator=(const prunichar*) - source parameters...
...prunichar charat(pruint32) const - source parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source
get the length, begin writing, and optionally set the length of a string all in one operation.
NS ConvertUTF16toUTF8 external
class declaration method overview constructors
get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar ...
...methods constructors void ns_convertutf16toutf8_external(const nsastring&) - source parameters nsastring& astr void ns_convertutf16toutf8_external(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength
get char*
get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const char*) - source parameters ...
... charat char charat(pruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source
get the length, begin writing, and optionally set the length of a string all in one operation.
NS ConvertUTF8toUTF16 external
class declaration method overview constructors
get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral find ...
...methods constructors void ns_convertutf8toutf16_external(const nsacstring&) - source parameters nsacstring& astr void ns_convertutf8toutf16_external(const char*, pruint32) - source parameters char* adata pruint32 alength
get prunichar*
get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source parameters nsstring_external& astring nsastring& operator=(const nsastring&) - source parameters nsastring& astring nsastring& operator=(const prunichar*) - source parameters...
...prunichar charat(pruint32) const - source parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source
get the length, begin writing, and optionally set the length of a string all in one operation.
NS LossyConvertUTF16toASCII external
class declaration method overview constructors
get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar ...
...methods constructors void ns_lossyconvertutf16toascii_external(const nsastring&) - source parameters nsastring& astr void ns_lossyconvertutf16toascii_external(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength
get char*
get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const char*) - source parameters ...
... charat char charat(pruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source
get the length, begin writing, and optionally set the length of a string all in one operation.
PromiseFlatCString (External)
class declaration method overview
get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar rfindchar ...
...methods
get char*
get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginrea...
... charat char charat(pruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source
get the length, begin writing, and optionally set the length of a string all in one operation.
PromiseFlatString (External)
class declaration method overview
get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral find rfind ...
...methods
get prunichar*
get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source parameters nsstring_external& astring nsastring& operator=(const nsastring&) - source parameters nsastring& astring nsastring& operator=(const prunichar*) - source parameters prunichar* aptr nsastring& operator=(prunichar) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint32) - source parameters prunich...
...prunichar charat(pruint32) const - source parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source
get the length, begin writing, and optionally set the length of a string all in one operation.
nsACString_internal
literal(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char operator= adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar data members no public members.
...uple& tuple pruint32 pos cut void cut(pruint32, pruint32) - source parameters pruint32 cutstart pruint32 cutlength setcapacity void setcapacity(pruint32) - source buffer sizing parameters pruint32 newcapacity setlength void setlength(pruint32) - source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength
getdata pruint32
getdata(const char**) const - source
get a const pointer to the string's internal buffer.
...parameters char** data
getmutabledata pruint32
getmutabledata(char**, pruint32) - source
get a pointer to the string's internal buffer, optionally resizing the buffer first.
nsAString_internal
literal(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char operator= adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar data members no public members.
...uple& tuple pruint32 pos cut void cut(pruint32, pruint32) - source parameters pruint32 cutstart pruint32 cutlength setcapacity void setcapacity(pruint32) - source buffer sizing parameters pruint32 newcapacity setlength void setlength(pruint32) - source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength
getdata pruint32
getdata(const prunichar**) const - source
get a const pointer to the string's internal buffer.
...parameters prunichar** data
getmutabledata pruint32
getmutabledata(prunichar**, pruint32) - source
get a pointer to the string's internal buffer, optionally resizing the buffer first.
nsAutoString (External)
class declaration method overview
get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral find rfind ...
...methods
get prunichar*
get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source parameters nsstring_external& astring nsastring& operator=(const nsastring&) - source parameters nsastring& astring nsastring& operator=(const prunichar*) - source parameters prunichar* aptr nsastring& operator=(prunichar) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint32) - source parameters prunich...
...prunichar charat(pruint32) const - source parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source
get the length, begin writing, and optionally set the length of a string all in one operation.
nsCAutoString (External)
class declaration method overview
get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar rfindchar ...
...methods
get char*
get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginrea...
... charat char charat(pruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source
get the length, begin writing, and optionally set the length of a string all in one operation.
nsCString external
class declaration method overview constructors
get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar ...
... void nscstring_external(const nscstring_external&) - source parameters nscstring_external& astring void nscstring_external(const nsacstring&) - source parameters nsacstring& areadable void nscstring_external(const char*, pruint32) - source parameters char* adata pruint32 alength
get char*
get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const char*) - source parameters ...
... charat char charat(pruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source
get the length, begin writing, and optionally set the length of a string all in one operation.
nsDependentCString external
class declaration method overview constructors rebind
get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind ...
...methods constructors void nsdependentcstring_external() - source void nsdependentcstring_external(const char*, pruint32) - source parameters char* adata pruint32 alength rebind void rebind(const char*, pruint32) - source parameters char* adata pruint32 alength
get char*
get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const char*) - source parameters ...
... charat char charat(pruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source
get the length, begin writing, and optionally set the length of a string all in one operation.
nsDependentCSubstring
literal(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char operator= adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar base classes nsacstring_internal data members no public members.
...uple& tuple pruint32 pos cut void cut(pruint32, pruint32) - source parameters pruint32 cutstart pruint32 cutlength setcapacity void setcapacity(pruint32) - source buffer sizing parameters pruint32 newcapacity setlength void setlength(pruint32) - source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength
getdata pruint32
getdata(const char**) const - source
get a const pointer to the string's internal buffer.
...parameters char** data
getmutabledata pruint32
getmutabledata(char**, pruint32) - source
get a pointer to the string's internal buffer, optionally resizing the buffer first.
nsDependentString external
class declaration dependent strings method overview constructors rebind
get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lower...
...s constructors void nsdependentstring_external() - source void nsdependentstring_external(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength rebind void rebind(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength
get prunichar*
get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source parameters nsstring_external& astring nsastring& operator=(const nsastring&) - source parameters nsastring& astring nsastring& operator=(const prunichar*) - source parameters...
...prunichar charat(pruint32) const - source parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source
get the length, begin writing, and optionally set the length of a string all in one operation.
nsDependentSubstring
literal(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char operator= adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate
getdata
getmutabledata setisvoid stripchar base classes nsastring_internal data members no public members.
...uple& tuple pruint32 pos cut void cut(pruint32, pruint32) - source parameters pruint32 cutstart pruint32 cutlength setcapacity void setcapacity(pruint32) - source buffer sizing parameters pruint32 newcapacity setlength void setlength(pruint32) - source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength
getdata pruint32
getdata(const prunichar**) const - source
get a const pointer to the string's internal buffer.
...parameters prunichar** data
getmutabledata pruint32
getmutabledata(prunichar**, pruint32) - source
get a pointer to the string's internal buffer, optionally resizing the buffer first.
nsLiteralCString (External)
class declaration method overview rebind
get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar ...
...methods rebind void rebind(const char*, pruint32) - source parameters char* adata pruint32 alength
get char*
get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar ...
... charat char charat(pruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source
get the length, begin writing, and optionally set the length of a string all in one operation.
nsLiteralString (External)
class declaration method overview rebind
get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar ...
...methods rebind void rebind(const char*, pruint32) - source parameters char* adata pruint32 alength
get char*
get() const - source operator= nscstring_external& operator=(const nscstring_external&) - source parameters nscstring_external& astring nsacstring& operator=(const nsacstring&) - source parameters nsacstring& astring nsacstring& operator=(const char*) - source parameters char* aptr nsacstring& operator=(char) - source parameters char achar ...
... charat char charat(pruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source
get the length, begin writing, and optionally set the length of a string all in one operation.
nsString external
class declaration basic strings method overview constructors
get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral ...
... void nsstring_external(const nsstring_external&) - source parameters nsstring_external& astring void nsstring_external(const nsastring&) - source parameters nsastring& areadable void nsstring_external(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength
get prunichar*
get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source parameters nsstring_external& astring nsastring& operator=(const nsastring&) - source parameters nsastring& astring nsastring& operator=(const prunichar*) - source parameters...
...prunichar charat(pruint32) const - source parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source
get the length, begin writing, and optionally set the length of a string all in one operation.
imgICache
that means that using
getservice in order to obtain it will yield incorrect results.
... use the following snippet to obtain a relevant image cache for a given document or channel (where relevantdocument is a document object that contains images you care about, or relevantchannel is an nsichannel that is used for fetching images): var tools = components.classes["@mozilla.org/image/tools;1"].
getservice(components.interfaces.imgitools); var cache = tools.
getimgcachefordocument(relevantdocument); // alternatively, tools.
getimgcacheforchannel(relevantchannel) if there is no relevant document or channel, null may be passed, but this will cause any image cache requests to use the permanent storage cache (ie.
... findentryproperties() find properties used to
get properties such as 'type' and 'content-disposition' 'type' is a nsisupportscstring containing the images' mime type such as 'image/png' 'content-disposition' will be a nsisupportscstring containing the header if you call this before any data has been loaded from a uri, it will succeed, but come back empty.
mozIStorageAggregateFunction
var standarddeviationfunc = { _numbers: [], onstep: function(aarguments) { this._numbers.push(aarguments.
getint32(0)); }, onfinal: function() { let total = 0; let ilength = this._numbers.length; this._numbers.foreach(function(elt) { total += elt }); let mean = total / this._numbers.length; let data = this._numbers.map(function(elt) { let value = elt - mean; return value * value; }); total = 0; data.foreach(function(elt) { total += elt }); this._numbers...
...class standarddeviationfunc : public mozistorageaggregatefunction { public: ns_imethod onstep(mozistoragevaluearray *aarguments) { print32 value; nsresult rv = aarguments->
getint32(&value); ns_ensure_success(rv, rv); mnumbers.appendelement(value); } ns_imethod onfinal(nsivariant **_result) { print64 total = 0; for (pruint32 i = 0; i < mnumbers.length(); i++) total += mnumbers[i]; print32 mean = total / mnumbers.length(); nstarray<print64> data(mnumbers); for (pruint32 i = 0; i < data.length(); i++) { print32 value = data...
...nscomptr<mozistoragestatement> stmt; rv = dbconn->createstatement(ns_literal_cstring( "select stddev(value) from some_table"),
getter_addrefs(stmt) ); ns_ensure_success(rv, rv); prbool hasmore; while (ns_succeeded(stmt->executestep(&hasmore)) && hasmore) { // handle the results } ...
nsIAbCard
complex properties are expected to be accessed through a call to
getproperty.
... inherits from: nsisupports method overview astring
getcardvalue(in string name) void setcardvalue(in string attrname, in astring value) void copy(in nsiabcard srccard) boolean equals(in nsiabcard card) string converttobase64encodedxml() astring converttoxmlprintdata() string converttoescapedvcard() astring generatename(in long agenerateformat,[optional] in nsistringbundle abundle) astring generatephoneticname(in boolean alastnamefirst) attributes attribute type description firstname astring lastname astring phoneticfirstname astring ...
... allowremotecontent boolean allow remote content to be displayed in html mail received from this contact methods
getcardvalue() astring
getcardvalue(in string name) parameters name the attribute you want the value for.
nsIAboutModule
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview unsigned long
geturiflags(in nsiuri auri); nsichannel newchannel(in nsiuri auri); constants constant value description uri_safe_for_untrusted_content (1 << 0) a flag that indicates whether a uri is safe for untrusted content.
... methods
geturiflags() a method to
get the flags that apply to a given about: uri.
...unsigned long
geturiflags( in nsiuri auri ); parameters auri return value a combination of the flags above corresponding to the appropriate flags for this about uri.
nsIAsyncInputStream
method overview void asyncwait(in nsiinputstreamcallback acallback, in unsigned long aflags, in unsigned long arequestedcount, in nsieventtar
get aeventtar
get); void closewithstatus(in nsresult astatus); constants constant value description wait_closure_only (1<<0) if passed to asyncwait(), this flag overrides the default behavior, causing the oninputstreamready notification to be suppressed until the stream becomes closed (either as a result of closewithstatus()/close being called on the stream or possibly due to some error in t...
...void asyncwait( in nsiinputstreamcallback acallback, in unsigned long aflags, in unsigned long arequestedcount, in nsieventtar
get aeventtar
get ); parameters acallback this object is notified when the stream becomes ready.
...aeventtar
get specify null to receive notification on any thread (possibly even recursively on the calling thread, that is synchronously), or specify that the notification be delivered to a specific event tar
get.
nsIAsyncOutputStream
method overview void asyncwait(in nsioutputstreamcallback acallback, in unsigned long aflags, in unsigned long arequestedcount, in nsieventtar
get aeventtar
get); void closewithstatus(in nsresult reason); constants constant value description wait_closure_only (1<<0) if passed to asyncwait(), this flag overrides the default behavior, causing the onoutputstreamready notification to be suppressed until the stream becomes closed (either as a result of closewithstatus()/close being called on the stream or possibly due to some error in t...
...void asyncwait( in nsioutputstreamcallback acallback, in unsigned long aflags, in unsigned long arequestedcount, in nsieventtar
get aeventtar
get ); parameters acallback this object is notified when the stream becomes ready.
...aeventtar
get specify null to receive notification on any thread (possibly even recursively on the calling thread, that is synchronously), or specify that the notification be delivered to a specific event tar
get.
nsIAsyncStreamCopier
inherits from: nsirequest last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview void asynccopy(in nsirequestobserver aobserver, in nsisupports aobservercontext); void init(in nsiinputstream asource, in nsioutputstream asink, in nsieventtar
get atar
get, in boolean asourcebuffered, in boolean asinkbuffered, in unsigned long achunksize, in boolean aclosesource, in boolean aclosesink); methods asynccopy() starts the copy operation.
...void init( in nsiinputstream asource, in nsioutputstream asink, in nsieventtar
get atar
get, in boolean asourcebuffered, in boolean asinkbuffered, in unsigned long achunksize, in boolean aclosesource, in boolean aclosesink ); parameters asource contains the data to be copied.
...atar
get specifies the thread on which the copy will occur.
nsIAutoCompleteInput
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview acstring
getsearchat(in unsigned long index); void onsearchbegin(); void onsearchcomplete(); boolean ontextentered(); boolean ontextreverted(); void selecttextrange(in long startindex, in long endindex); attributes attribute type description completedefaultindex boolean if a search result has its defaultindex set, this will optionally try to complete the text i...
... methods
getsearchat() returns the name of one of the autocomplete search session objects.
... acstring
getsearchat( in unsigned long index ); parameters index the index number of the search session object whose name is to be returned.
nsIBidiKeyboard
wid
get/public/nsibidikeyboard.idlscriptable this interface lets the application detect bidirectional writer users, and do some magic for them.
... note: this throws ns_error_not_implemented if the wid
get layer doesn't provide this information.
... remarks implementation windows this implementation uses win32 api to
get the language of the keyboard layout, and the direction of those languages.
nsICRLManager
inherits from: nsisupports last changed in gecko 1.7 method overview wstring computenextautoupdatetime(in nsicrlinfo info, in unsigned long autoupdatetype, in double noofdays); void deletecrl(in unsigned long crlindex); nsiarray
getcrls(); void importcrl([array, size_is(length)] in octet data, in unsigned long length, in nsiuri uri, in unsigned long type, in boolean dosilentdownload, in wstring crlkey); void reschedulecrlautoupdate(); boolean updatecrlfromurl(in wstring url, in wstring key); constants constant value description type_autoupdate_time_based 1 type_autoupdate_freq_based 2 methods computenextautoupdatetime() wstring computenextautoupdatetime( ...
...void deletecrl( in unsigned long crlindex ); parameters crlindex
getcrls()
get a list of crl entries in the db.
... nsiarray
getcrls(); parameters none.
nsIContentFrameMessageManager
examples once you obtain the conten frame messge manager, you can send messages to listeners who registered with services.mm.addmessagelistener
get content message manager from browser this could would run in a nsidomwindow scope.
... var acfmm = gbrowser.selectedbrowser._docshell.queryinterface(ci.nsiinterfacerequestor).
getinterface(ci.nsicontentframemessagemanager);
get content message manager from content window window here is a html window or any window inside a tab, this code would run from a framescript.
... var acfmm = window.queryinterface(ci.nsiinterfacerequestor) .
getinterface(ci.nsidocshell) .queryinterface(ci.nsiinterfacerequestor) .
getinterface(ci.nsicontentframemessagemanager); ...
nsICookieManager2
in acstring aname, in acstring avalue, in boolean aissecure, in boolean aishttponly, in boolean aissession, in print64 aexpiry); boolean cookieexists(in nsicookie2 acookie); unsigned long countcookiesfromhost(in autf8string ahost); boolean findmatchingcookie(in nsicookie2 acookie, out unsigned long acountfromhost); obsolete since gecko 1.9 nsisimpleenumerator
getcookiesfromhost(in autf8string ahost); void importcookies(in nsifile acookiefile); methods add() adds a cookie.
...
getcookiesfromhost() returns an enumerator of cookies that would be returned to a given host, ignoring the cookie flags isdomain, issecure, and ishttponly.
... nsisimpleenumerator
getcookiesfromhost( in autf8string ahost ); parameters ahost the host string to look for, such as "google.com".
nsICrashReporter
minidumppath nsilocalfile
get or set the path on the local system to which minidumps will be written when a crash happens.
... serverurl nsiurl
get or set the url to which crash reports will be submitted.
... exceptions thrown ns_error_failure on
get if no url is set.
nsIDOMStorage
method overview void clear(); domstring
getitem(in domstring key); domstring key(in unsigned long index); void removeitem(in domstring key); void setitem(in domstring key, in domstring data); attributes attribute type description length unsigned long the number of keys stored in the session store.
...
getitem() returns from session storage the data corresponding to the specified key.
... domstring
getitem( in domstring key ); parameters key the key for which data should be returned.
nsIDOMStorage2
last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports method overview void clear(); domstring
getitem(in domstring key); domstring key(in unsigned long index); void removeitem(in domstring key); void setitem(in domstring key, in domstring data); attributes attribute type description length unsigned long the number of keys stored in local storage.
...
getitem() returns from local storage the data corresponding to the specified key.
... domstring
getitem( in domstring key ); parameters key the key for which data should be returned.
nsIDispatchSupport
inherits from: nsisupports last changed in gecko 1.7 method overview void comvariant2jsval(in comvariantptr comvar, out jsval val); unsigned long
gethostingflags(in string acontext); boolean isclassmarkedsafeforscripting(in nscidref cid, out boolean classexists); boolean isclasssafetohost(in jscontextptr cx, in nscidref cid, in boolean capscheck, out boolean classexists); boolean isobjectsafeforscripting(in voidptr theobject, in nsiidref id); void jsval2comvariant(in jsval var, out comvariant comvar); methods comvariant2jsval() converts a com variant to a jsval.
...
gethostingflags() return the activex security and hosting flags.
...unsigned long
gethostingflags( in string acontext ); parameters acontext return value isclassmarkedsafeforscripting() test if the specified class is marked safe for scripting.
nsIDownload
mimeinfo nsimimeinfo provides the tar
gets relevant mime information, including its mime type, helper application, and whether or not the helper should be executed automatically once the download is complete.
... tar
get nsiuri the tar
get of the transfer.
... tar
getfile nsilocalfile indicates the location at which the downloaded file will be (or is, if the download is complete) stored.
nsIDownloadManagerUI
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void
getattention(); void show([optional] in nsiinterfacerequestor awindowcontext, [optional] in unsigned long aid, [optional] in short areason); attributes attribute type description visible boolean true if the download manager ui is visible; otherwise false.
... methods
getattention() calls attention to the download manager's user interface if it's already open.
... void
getattention(); parameters none.
nsIDownloadProgressListener
you can
get the new state of the download from this object.
... onsecuritychange() called when the level of security being used while downloading changes; for example, if the initial request is made via https but the download switches to http, this function
gets called to notify you of that transition.
... example var dm = components.classes["@mozilla.org/download-manager;1"] .
getservice(components.interfaces.nsidownloadmanager); dm.addlistener({ onsecuritychange : function(prog, req, state, dl) { }, onprogresschange : function(prog, req, prog, progmax, tprog, tprogmax, dl) { }, onstatechange : function(prog, req, flags, status, dl) { }, ondownloadstatechange : function(state, dl) { } }); even if you do not want to use some of the listeners, you must include all...
nsIDragDropHandler
use this to register where the listeners should attach (something that implements nspidomeventtar
get which is what we end up using under the hood).
... last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports method overview void detach(); void hookupto(in nsidomeventtar
get attachpoint, in nsiwebnavigation navigator); methods detach() unregisters all handlers related to drag and drop.
...void hookupto( in nsidomeventtar
get attachpoint, in nsiwebnavigation navigator ); parameters attachpoint the receiver to which to attach drag handlers.
nsIFrameLoaderOwner
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview [noscript, notxpcom] alreadyaddrefed_nsframeloader
getframeloader(); void swapframeloaders(in nsiframeloaderowner aotherowner); attributes attribute type description frameloader nsiframeloader the frame loader owned by this nsiframeloaderowner.
... methods
getframeloader() returns the frame loader object owned by this object.
... [noscript, notxpcom] alreadyaddrefed_nsframeloader
getframeloader(); parameters none.
nsIFrameScriptLoader
methods void loadframescript(in astring aurl, in boolean aallowdelayedload, [optional] in boolean aruninglobalscope) void removedelayedframescript(in astring aurl); jsval
getdelayedframescripts(); loadframescript() load a script in the remote frame.
... frame scripts are essentially per-tab, so they don't
get reloaded when the user navigates.
...
getdelayedframescripts() returns all delayed scripts that will be loaded once a (remote) frame becomes available.
nsIGlobalHistory2
inherits from: nsisupports last changed in gecko 1.7 this interface replaces and deprecates nsiglobalhistory method overview void adduri(in nsiuri auri, in boolean aredirect, in boolean atoplevel, in nsiuri areferrer); boolean isvisited(in nsiuri auri); void setpa
getitle(in nsiuri auri, in astring atitle); methods adduri() add a uri to global history.
...setpa
getitle() set the page title for the given uri.
...void setpa
getitle( in nsiuri auri, in astring atitle ); parameters auri the nsiuri for which to set to the title.
nsIHTTPHeaderListener
modules/plugin/base/public/nsihttpheaderlistener.idlscriptable this interface allows plugin authors to access http response headers after issuing an nsipluginhost.
geturl or nsipluginhost.posturl call.
... inherits from: nsisupports last changed in gecko 1.9 (firefox 3) note: the plugin author must provide an instance to {
geturl,posturl}() that implements both nsipluginstreamlistener and nsihttpheaderlistener.
... this instance is passed in through {
geturl,posturl}()'s streamlistener parameter.
nsIJSCID
inherits from: nsijsid last changed in gecko 1.7 method overview nsisupports createinstance(); nsisupports
getservice(); methods createinstance() nsisupports createinstance(); parameters none.
... return value
getservice() nsisupports
getservice(); parameters none.
... return value see also see components.classes for usage patterns of the createinstance() and
getservice() methods.
nsIMemoryReporterManager
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) implemented by @mozilla.org/memory-reporter-manager;1 as a service: var reportermanager = components.classes["@mozilla.org/memory-reporter-manager;1"] .
getservice(components.interfaces.nsimemoryreportermanager); each memory reporter object, which implements nsimemoryreporter interface, provides information for a given code area.
...reporter(in nsimemorymultireporter reporter); void registerreporter(in nsimemoryreporter reporter); void unregistermultireporter(in nsimemorymultireporter reporter); void unregisterreporter(in nsimemoryreporter reporter); attributes attribute type description explicit print64
gets the total size of explicit memory allocations, both at the operating system level (for example, via mmap, virtualalloc) and at the heap level (for example, via malloc(), calloc(), operator new).
... resident print64
gets the resident size (that is rss, physical memory used).
nsIMimeConverter
decodemimeheader() string
getstringproperty(in string propertyname); parameters propertyname the name of the property to retrieve.
... b64encoderinit()
get an integer property.
... unsigned long
getuint32property(in string propertyname); parameters propertyname the name of the property to retrieve.
nsIModule
inherits from: nsisupports last changed in gecko 0.9.9 method overview boolean canunload(in nsicomponentmanager acompmgr); void
getclassobject(in nsicomponentmanager acompmgr, in nscidref aclass, in nsiidref aiid, [retval, iid_is(aiid)] out nsqiresult aresult); void registerself(in nsicomponentmanager acompmgr, in nsifile alocation, in string aloaderstr, in string atype); void unregisterself(in nsicomponentmanager acompmgr, in nsifile alocation, in string aloaderstr); methods canunload() this method may be queried to determine whether or not the component module...
...
getclassobject() obtains a class object from a nsimodule for a given cid and iid pair.
...void
getclassobject( in nsicomponentmanager acompmgr, in nscidref aclass, in nsiidref aiid, [retval, iid_is(aiid)] out nsqiresult aresult ); parameters acompmgr the global component manager.
nsIMsgRuleAction
defined in comm-central/ mailnews/ base/ search/ public/ nsimsgfilter.idl [scriptable, uuid(190a2a18-d245-473a-a402-9f0814598c7f)] interface nsimsgruleaction : nsisupports { attribute nsmsgruleactiontype type; // tar
get priority..
... throws an exception if the action is not priority attribute nsmsgpriorityvalue priority; // tar
get folder..
... throws an exception if the action is not move to folder attribute acstring tar
getfolderuri; // tar
get label.
nsIMsgSearchSession
void addsearchterm(in nsmsgsearchattribvalue attrib, in nsmsgsearchopvalue op, in nsimsgsearchvalue value, in boolean booleanand, in string arbitraryheader); nsimsgsearchterm createterm(); void appendterm(in nsimsgsearchterm term); void registerlistener(in nsimsgsearchnotify listener); void unregisterlistener(in nsimsgsearchnotify listener); void
getnthsearchterm(in long whichterm, in nsmsgsearchattribvalue attrib, in nsmsgsearchopvalue op, in nsimsgsearchvalue value); long countsearchscopes(); void
getnthsearchscope(in long which,out nsmsgsearchscopevalue scopeid, out nsimsgfolder folder); void addscopeterm(in nsmsgsearchscopevalue scope, in nsimsgfolder folder); void adddirectoryscopeterm(in nsmsgsearchsc...
... void unregisterlistener (in nsimsgsearchnotify listener); parameters listener
getnthsearchterm() void
getnthsearchterm(in long whichterm, in nsmsgsearchattribvalue attrib, in nsmsgsearchopvalue op, in nsimsgsearchvalue value); parameters whichterm attrib op value note: this parameter should be an out.
... countsearchscopes() long countsearchscopes();
getnthsearchscope() void
getnthsearchscope(in long which, out nsmsgsearchscopevalue scopeid, out nsimsgfolder folder); parameters which return values scopeid folder addscopeterm() add a scope (e.g.
nsIMsgSendLater
to create an instance, use var msgsendlater = components.classes["@mozilla.org/messengercompose/sendlater;1"] .
getservice(components.interfaces.nsimsgsendlater); method overview void sendunsentmessages(in nsimsgidentity identity); void removelistener(in nsimsgsendlaterlistener listener); void addlistener(in nsimsgsendlaterlistener listener); nsimsgfolder
getunsentmessagesfolder](in nsimsgidentity identity); attributes attribute type description msgwindow nsimsgwindow methods s...
...
getunsentmessagesfolder()
get the unsent messages folder for an identity.
... nsimsgfolder
getunsentmessagesfolder(in nsimsgidentity identity); parameters identity the nsimsgidentity to
get the folder for.
nsINavHistoryQueryResultNode
method overview void
getqueries([optional] out unsigned long querycount, [retval,array,size_is(querycount)] out nsinavhistoryquery queries); attributes attribute type description folderitemid long long for both simple folder nodes and simple-folder-query nodes, this is set to the concrete itemid of the folder.
... methods
getqueries() returns the queries that build the node's children; only valid for result_type_query nodes.
... void
getqueries( out unsigned long querycount, optional from gecko 2.0 [retval,array,size_is(querycount)] out nsinavhistoryquery queries ); parameters querycount optional from gecko 2.0 the number of queries in the queries array.
nsIProcessScriptLoader
methods void loadprocessscript(in astring aurl, in boolean aallowdelayedload) void removedelayedprocessscript(in astring aurl); jsval
getdelayedprocessscripts(); loadprocessscript() load a script in the child process.
... for example: let ppmm = services.ppmm.
getchildat(1); ppmm.loadprocessscript('data:,dump("foo\n");', true); parameters name type description aurl string url for the script to load.
...
getdelayedprocessscripts() returns all delayed scripts that will be loaded once a child process becomes available.
nsIPrompt
the parentage is hidden by the
getinterface though which it is obtained.
...normally you would use the prompt service as it is more flexible, but sometimes a callback will request an nsiprompt via nsiinterfacerequestor.
getinterface().
... to
get an instance, call the nsiwindowwatcher.
getnewprompter().
nsISearchEngine
last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports method overview void addparam(in astring name, in astring value, in astring responsetype); nsisearchsubmission
getsubmission(in astring data, [optional] in astring responsetype, [optional] in astring purpose); boolean supportsresponsetype(in astring responsetype); attributes attribute type description alias astring an optional shortcut alias for the engine.
...
getsubmission()
gets a nsisearchsubmission object that contains information about what to send to the search engine, including the uri and postdata, if applicable.
... nsisearchsubmission
getsubmission( in astring data, [optional] in astring responsetype, [optional] in astring purpose ); parameters data data to add to the submission object.
nsISelection
nsidomrange
getrangeat(in long index); void modify(in domstring alter, in domstring direction, in domstring granularity); void removeallranges(); void removerange(in nsidomrange range); void selectallchildren(in nsidomnode parentnode); void selectionlanguagechange(in boolean langrtl); domstring tostring(); attributes attribute type descr...
... native code only!extendnative void extendnative( in nsinode parentnode, in long offset ); parameters parentnode offset
getrangeat() returns the nsidomrange at the specified index.
... nsidomrange
getrangeat( in long index ); parameters index return value the nsidomrange requested modify() modifies the selection.
nsIStringBundleService
to access this service, use: var stringbundleservice = components.classes["@mozilla.org/intl/stringbundle;1"] .
getservice(components.interfaces.nsistringbundleservice); method overview nsistringbundle createbundle(in string aurlspec); nsistringbundle createextensiblebundle(in string aregistrykey); void flushbundles(); wstring formatstatusmessage(in nsresult astatus, in wstring astatusarg); methods createbundle() nsistringbundle createbundle( in string aurlspec...
... on the return value object on you can call functions like
getstringfromname and formatstringfromname see nsistringbundle.
... flushbundles() flushes the string bundle cache - useful when the locale changes or when we need to
get some extra memory back.
nsIThreadManager
last changed in gecko 1.9 (firefox 3) inherits from: nsisupports method overview nsithread
getthreadfromprthread(in prthread prthread); native code only!
... methods native code only!
getthreadfromprthread given a prthread, this method returns the corresponding nsithread.
... nsithread
getthreadfromprthread( in prthread prthread ); parameters prthread the prthread for which to retrieve the corresponding nsithread.
nsITraceableChannel
after that your nsistreamlistener implementation will
get the response data and will be able to pass the data on to the original nsistreamlistener (possibly modifying it).
...holds chunks as they come, onstoprequest we join these junks to
get the full source this.responsebody; // we'll set this to the this.responsestatuscode; this.deferreddone = { promise: null, resolve: null, reject: null }; this.deferreddone.promise = new promise(function(resolve, reject) { this.resolve = resolve; this.reject = reject; }.bind(this.deferreddone)); object.freeze(this.deferreddone); this.promisedone = this.deferreddone.promise; } tra...
...cinglistener.prototype = { ondataavailable: function(arequest, acontext, ainputstream, aoffset, acount) { var istream = new binaryinputstream(ainputstream) // binaryainputstream var sstream = new storagestream(8192, acount, null); // storagestream // not sure why its 8192 but thats how eveyrone is doing it, we should ask why var ostream = new binaryoutputstream(sstream.
getoutputstream(0)); // binaryoutputstream // copy received data as they come.
nsITransport
method overview void close(in nsresult areason); nsiinputstream openinputstream(in unsigned long aflags, in unsigned long asegmentsize, in unsigned long asegmentcount); nsioutputstream openoutputstream(in unsigned long aflags, in unsigned long asegmentsize, in unsigned long asegmentcount); void seteventsink(in nsitransporteventsink asink, in nsieventtar
get aeventtar
get); constants open flags.
...void seteventsink( in nsitransporteventsink asink, in nsieventtar
get aeventtar
get ); parameters asink receives transport layer notifications.
... aeventtar
get indicates the event tar
get to which the notifications should be delivered.
nsIURIFixup
ifixup;1 as a service: var urifixup = components.classes["@mozilla.org/docshell/urifixup;1"] .createinstance(components.interfaces.nsiurifixup); method overview nsiuri createexposableuri(in nsiuri auri); nsiuri createfixupuri(in autf8string auritext, in unsigned long afixupflags); nsiuri keywordtouri(in autf8string akeyword); nsiurifixupinfo
getfixupuriinfo(in autf8string auritext, in unsigned long afixupflags); constants constant value description fixup_flag_none 0 no fixup flags.
... exceptions thrown ns_error_unknown_protocol when we can not
get a protocol handler service for the uri scheme.
...
getfixupuriinfo() same as createfixupuri, but returns information about what it corrected (e.g.
nsIUpdate
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsiupdatepatch
getpatchat(in unsigned long index); nsidomelement serialize(in nsidomdocument updates); attributes attribute type description appversion astring the application version of this update.
... version astring the application version of the update.obsolete since gecko 2.0 methods
getpatchat() retrieves a patch.
... nsiupdatepatch
getpatchat( in unsigned long index ); parameters index the index of the patch to retrieve.
nsIVersionComparator
the service can be accessed directly via services.vc after loading services.jsm or with the following code: var versioncomparator = components.classes["@mozilla.org/xpcom/version-comparator;1"] .
getservice(components.interfaces.nsiversioncomparator); method overview long compare(in acstring a, in acstring b); methods compare() compare two version strings.
...s smaller than 0, then a < b equals 0 then version, then a==b is bigger than 0, then a > b example function compareversions(a,b) { var x = services.vc.compare(a,b); if(x == 0) return a + "==" + b; else if(x > 0) return a + ">" + b; return a + "<" + b; } dump(compareversions("1.0pre", "1.0")); example - compare current browser version this example here uses nsixulappinfo component to
get the version of the browser that the code is running in.
...reresult = services.vc.compare(curentbrowserversion, comparetothisversion); if (compareresult == -1) { //currentbrowserversion is less than '25.*' (comparetothisversion) } else if (compareresult == 0) { //currentbrowserversion is '25.*' (comparetothisversion) } else if (compareresult == 1) { //currentbrowserversion is greater than '25.*' (comparetothisversion) } else { //will never
get here as services.vc.compare only returns -1, 0, or 1 } see also toolkit version format ...
nsIWebNavigationInfo
docshell/base/nsiwebnavigationinfo.idlscriptable exposes a way to
get information on the capabilities of gecko web navigation objects.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) implemented by: @mozilla.org/webnavigation-info;1 as a service: var webnavigationinfo = components.classes["@mozilla.org/webnavigation-info;1"] .
getservice(components.interfaces.nsiwebnavigationinfo); method overview unsigned long istypesupported(in acstring atype, in nsiwebnavigation awebnav); constants support type constants constant value description unsupported 0 returned by istypesupported() to indicate lack of support for a type.
...example let webnavigationinfo_service = components.classes["@mozilla.org/webnavigation-info;1"] .
getservice(components.interfaces.nsiwebnavigationinfo); let support_code = webnavigationinfo_service.istypesupported(contenttype, null); if (support_code == webnavigationinfo_service.unsupported) { dump("unsupported content-type: not displaying in the browser\n"); } see also nsiwebnavigation ...
nsIWindowsShellService
inherits from: nsishellservice last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview string
getregistryentry(in long ahkeyconstant, in string asubkeyname, in string avaluename); obsolete since gecko 1.8 void restorefilesettings(in boolean aforallusers); obsolete since gecko 1.9 void shortcutmaintenance(); attributes attribute type description desktopbackgroundcolor unsigned long the desktop background color, visible when no background image is used, or if the background image is centered and does not fill the entire screen.
...obsolete since gecko 1.8 methods
getregistryentry() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) retrieves a windows registry entry value.
... string
getregistryentry( in long ahkeyconstant, in string asubkeyname, in string avaluename ); parameters ahkeyconstant the starting key, using the constants defined above.
nsIXPCScriptable
contextptr cx, in jsobjectptr obj); void postcreate(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj); prbool addproperty(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval id, in jsvalptr vp); prbool delproperty(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval id, in jsvalptr vp); prbool
getproperty(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval id, in jsvalptr vp); prbool setproperty(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval id, in jsvalptr vp); prbool enumerate(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj); prbool newenumerate(in nsixpconnectwrappednative wrapp...
... constants constant value description want_precreate 1 << 0 want_create 1 << 1 want_postcreate 1 << 2 want_addproperty 1 << 3 want_delproperty 1 << 4 want_
getproperty 1 << 5 want_setproperty 1 << 6 want_enumerate 1 << 7 want_newenumerate 1 << 8 indicates that the object wants to have its newenumerate method called.
...xpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval id, in jsvalptr vp ); parameters wrapper cx obj id vp return value delproperty() prbool delproperty( in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval id, in jsvalptr vp ); parameters wrapper cx obj id vp return value
getproperty() prbool
getproperty( in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval id, in jsvalptr vp ); parameters wrapper cx obj id vp return value ns_success_i_did_something if this method does something.
nsIXSLTProcessor
to create an instance, use: var xsltprocessor = components.classes["@mozilla.org/document-transformer;1?type=xslt"] .createinstance(components.interfaces.nsixsltprocessor); method overview void clearparameters(); nsivariant
getparameter(in domstring namespaceuri, in domstring localname); void importstylesheet(in nsidomnode style); void removeparameter(in domstring namespaceuri, in domstring localname); void reset(); void setparameter(in domstring namespaceuri, in domstring localname, in nsivariant value); nsidomdocument transformtodocument(in nsidomnode source); nsidomdocumentfragment transformtofragment(in ...
...
getparameter()
gets a parameter if previously set by setparameter().
...nsivariant
getparameter( in domstring namespaceuri, in domstring localname ); parameters namespaceuri the namespaceuri of the xslt parameter.
nsIXULSortService
content/xul/templates/public/nsixulsortservice.idlscriptable a service used to sort the contents of a xul wid
get.
...void insertcontainernode( in nsirdfcompositedatasource db, in nsrdfsortstate sortstateptr, in nsicontent root, in nsicontent trueparent, in nsicontent container, in nsicontent node, in boolean anotify ); parameters db sortstateptr root trueparent container node anotify sort() sort the contents of the wid
get containing anode using asortkey as the comparison key, and asorthints as how to sort.
... void sort( in nsidomnode anode, in astring asortkey, in astring asorthints ); parameters anode a node in the xul wid
get whose children are to be sorted.
nsIXULWindow
void assumechromeflagsarefrozen(); void center(in nsixulwindow arelative, in boolean ascreen, in boolean aalert); nsixulwindow createnewwindow(in print32 achromeflags, in nsiappshell aappshell); nsidocshelltreeitem
getcontentshellbyid(in wstring id); void removechildwindow(in nsixulwindow achild); void showmodal(); attributes attribute type description chromeflags pruint32 chromeflags are from nsiwebbrowserchrome.
...
getcontentshellbyid() the content shell specified by the supplied id.
... nsidocshelltreeitem
getcontentshellbyid( in wstring id ); parameters id the id of the content shell, which is the same as the "type" attribute on the containing frame element.
nsIXmlRpcClient
call this before using this object void
getdata ( in string serverurl ) ; parameters serverurl url of server side object on which methods should be called setauthentication() set authentication info if needed.
...via nsixpconnect::
getpendingexception()->data a nsixmlrpcfault object can be retreieved with more information on the fault.
... parameters listener a nsixmlrpcclientlistener that will
get notified of xml-rpc events ctxt a context to be passed on to the listener methodname remote method to call arguments array of arguments to pass to the remote method count void asynccall ( in nsixmlrpcclientlistener listener, in nsisupports ctxt, in string methodname, [array, size_is(count)] in nsisupports arguments, in pruint32 count ); createtype() convenience: return the correct nsisupportsprimitive for a given xml-rpc type, or nsisupportsarray or nsidictionary.
nsPIPromptService
this interface defines the meaning of each indexes of
getint(), setint(),
getstring() and setstring() of the nsidialogparamblock interface but they are defined on in c++.
... the indexes for
getstring() and setstring() are: emsg the value is 0.
... the indexes for
getint() and setint() are: ebuttonpressed the value is 0.
XPCOM reference
core xpcom functionsxpcom provides a number of global functions which are used to initialize and shut down the xpcom library, as well as to allocate memory,
get access to services, and to instantiate interfaces.foldersthe folder classes all implement the nsimsgfolder interface.
...this macro is meant for critical errors; like assertions, ns_errors should not be reachable.ns_if_addrefmacrons_if_releasemacrons_releasemacrons_warningmacrons
getmoduleprocthis function prototype provides the xpcom entry-point into a module.nsiabcard/thunderbird3the nsiabcard interface is used to represent and manipulate cards in the address book.
...(i'm fully aware that this will be a great point of discussion and probably will end in tears, but since i'm the first person to apparently take a swing at this, i
get first dibs.)xpcom primitivean xpcom primitive is an xpcom object that "boxes" a value of a primitive type.
Performance
therefore, if you are doing many transactions in a row, you will
get significant performance improvements by surrounding them in a transaction.
...one major problem is that the queue of file operations will
get very long if there are many transactions.
... consistency: the database won't
get corrupted.
Using nsIPasswordManager
getting nsipasswordmanager to
get a component implementing nsipasswordmanager, use the following: var passwordmanager = components.classes["@mozilla.org/passwordmanager;1"] .
getservice(components.interfaces.nsipasswordmanager); storing a password to store a password in the password manager, you need three things: a hostname/url (you'll need this to retrieve the passwo...
...the example below should serve as a starting point: // the host name of the password we are looking for var querystring = 'http://www.example.com'; // ask the password manager for an enumerator: var e = passwordmanager.enumerator; // step through each password in the password manager until we find the one we want: while (e.hasmoreelements()) { try { //
get an nsipassword object out of the password manager.
... var pass = e.
getnext().queryinterface(components.interfaces.nsipassword); if (pass.host == querystring) { // found it!
XPCOM ABI
abi naming each abi is named with a string [tar
get_xpcom_abi] of the following format: {cpu_arch}-{tar
get_compiler_abi} {cpu_arch} [platforms] represents the cpu architecture and may be either: x86 - i386 and higher series (including x86-64 cpus in 32-bit mode) ppc - powerpc series alpha - alpha series x86_64 - amd64/emt64 series in 64-bit mode (32-bit mode is still considered x86) sparc - sparc series ia64 - itanium series {tar
get_c...
...to retrieve the abi of your firefox or thunderbird, open the error console (accessible through tools | error console) and evaluate the following javascript code: components.classes["@mozilla.org/xre/app-info;1"] .
getservice(components.interfaces.nsixulruntime) .xpcomabi if either the cpu architecture or the c++ compiler are unknown, the application wouldn't have an xpcom abi string and attempts to
get it will result in error ns_error_not_available.
... note: tar
get_xpcom_abi in the mozilla build system, the variable storing the xpcom abi is named tar
get_xpcom_abi.
XPCOM ownership guidelines
all "factory" and "
getter" functions produce owning pointers.
...this is terrific for factory functions, but can be problematic for mere
getters.
...it's easier to write `
getter's and `setter's; and you don't need to put anything in your destructor.
xptcall FAQ
the core invoke function has the declaration: xptc_public_api(nsresult) xptc_invokebyindex(nsisupports* that, pruint32 methodindex, pruint32 paramcount, nsxptcvariant* params); nsxptcvariant is a discriminated union of the types that can be passed as parameters to the tar
get function (including void* to represent arbitrary pointer types).
... if anyone has credible ideas about how to
get the required functionality in a cross platform way and/or without resorting to assembly code i'd love to hear about it.
...we need to
get moving on
getting xptcall working everywhere!
Xptcall Porting Status
<font color="white">done</font> nt alpha bob meader <bob@guiduck.com> bob writes: enclosed is xptcall for alpha/nt tar
get..
... it is a variation of the iris port (only tar
geted for win32).
...we're all in this to
gether.
nsIMsgCloudFileProvider
acstring urlforfile(in nsilocalfile afile); parameters afile the previously uploaded file to
get the url for.
... if awithui is false, and the credentials are stale, the onstoprequest of the acallback nsirequestlistener will
get the autherr status code passed to it.
... createexistingaccount() for an init'ed nsimsgcloudfileprovider, attempts to communicate with the service provider in order to
get the proper credentials for starting uploads.
MailNews fakeserver
wo properties: us, and them; us is an array of responses we sent, them an array of commands received resettest none nothing prepares the server for the next test without closing the connection start port number nothing starts the server listening stop none nothing stops the server and closes the connection using fakeserver in qa testing debug output from fakeservers it is possible to
get the fakeservers to dump to the console the commands they have sent and received.
... [constructor] daemon flags n/a flags are defined below addgroup group name (string), is postable nothing adds the group (resetting if it exists) addarticle newsarticle object nothing adds the message to all groups in the article's group list addarticletogroup newsarticle object, group (string), integral key for group nothing adds the message to the specified group with the specified key
getgroup group name group object group is a map key->article, with the additional properties: flags, keys (array of keys), nextkey (next key to use for new articles)
getgroupstats group name array of [size, min, max] the size is an estimate if nntp_real_length is not specified in the daemon flags.
...
getarticle message id newsarticle object pretty self-explanatory newsarticle api name arguments returns notes [constructor] text (as a string) n/a initializes all fields headers (property) map of header (lower-case) -> value body (property) text of body messageid (property) message id fulltext (property) full text as message without modification except added headers.
Use SQLite
if you'd like to use an sqlite database in your extension you'll need to look over the storage docs for an api reference, however this code should
get you started.
...
getservice(ci.nsiproperties); var dbfile = dirservice.
get("profd", ci.nsifile); dbfile.append("tbird.sqlite"); var dbservice = cc["@mozilla.org/storage/service;1"].
...
getservice(ci.mozistorageservice); var dbconnection; if (!dbfile.exists()) dbconnection = this._dbcreate(dbservice, dbfile); else { dbconnection = dbservice.opendatabase(dbfile); } this.dbconnection = dbconnection; }, _dbcreate: function(adbservice, adbfile) { var dbconnection = adbservice.opendatabase(adbfile); this._dbcreatetables(dbconnection); return dbconnection; }, _dbcreatetables: function(adbconnection) { for(var name in this.dbschema.tables) adbconnection.createtable(name, this.dbschema.tables[name]); }, }; window.addeventlistener("load", function(e) { tbirdsqlite.onload(e); }, false); this is another practical sample on how to handle opendatabase and sql queries on the client side, using in-memory (blob) sto...
Theme Packaging
see the install.rdf reference for more information: em:id em:version em:type em:tar
getapplication em:name em:internalname optional install.rdf properties em:description em:creator em:contributor em:homepageurl em:updateurl note that if your theme will be made available on the https://addons.mozilla.org website, it may not include an updateurl.
... sample install.rdf file <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>{18b64b56-d42f-428d-a88c-baa413bc413f}</em:id> <em:version>1.0</em:version> <em:type>4</em:type> <!-- tar
get application this extension can install into, with minimum and maximum supported versions.
... --> <em:tar
getapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>0.8</em:minversion> <em:maxversion>0.9</em:maxversion> </description> </em:tar
getapplication> <!-- front end metadata --> <em:name>new theme 1</em:name> <em:description>a test theme for thunderbird</em:description> <em:creator>ben goodger</em:creator> <em:contributor>john doe</em:contributor> <em:homepageurl>http://www.bengoodger.com/</em:homepageurl> <!-- front end integration hooks (used by theme manager)--> <em:internalname>newtheme1</em:internalname> </description> </rdf> the following are some common tar
get application guids that you can use in your tar
getapplication properties: thunderbird {3550...
Virtualenv
getting virtualenv virtualenv is a python package.
... if you're running ubuntu, there is also an ubuntu package available: sudo apt-
get install python-virtualenv virtualenv.py may also be run as standalone software with the same functionality.
...in order to
get the virtualenv's python binary on your path, you should source the bin/activate script on unix or run activate.bat on windows.
Working with ArrayBuffers
this example is based on the fact that the imagedata returned from canvasrenderingcontext2d.
getimagedata is a uint8clampedarray view for an arraybuffer.
... the following codeblock provides a basic example of
getting and setting uint8clampedarray and arraybuffer of imagedata: // context is a canvasrenderingcontext2d of some canvas var imagedata = context.
getimagedata(x, y, w, h); var array = imagedata.data; // array is a uint8clampedarray var buffer = imagedata.data.buffer; // buffer is a arraybuffer // incomingbuffer is a typedarray var imagedata2 = context.createimagedata(w, h); imagedata2.data.set(incomingbuffer); further, if you have a byte array pixelbuffer, and you need to create imagedata from it.
...pixelbuffer.tostring(); // "ctypes.uint8_t.ptr(ctypes.uint64("0x352e0000"))" var imgwidth = 400; var imgheight = 400; var myimgdat = new imagedata(imgwidth, imgheight); method 1: passing arraytype cdata to uint8clampedarray.prototype.set one method is to
get into a js-ctypes array, and then set it into the imagedata, as illustrated by the following code example.
ctypes
similar to
getlasterror under windows, available only for windows.
... credit for this example is to nmaier (stackoverflow ::
getting tb_button is crashing and not working) example of cast and functiontype on windows components.utils.import("resource://gre/modules/ctypes.jsm"); var kernel = ctypes.open("kernel32.dll"); var hmodule = ctypes.uint32_t; var hwnd = ctypes.uint32_t; var lpctstr = ctypes.jschar.ptr; var lpcstr = ctypes.char.ptr; var loadlibrary = kernel.declare("loadlibraryw", ctypes.winapi_abi, hmodule, lpctst...
...r); var
getprocaddress = kernel.declare("
getprocaddress", ctypes.winapi_abi, ctypes.void_t.ptr, hmodule, lpcstr); var huser = loadlibrary("user32"); var funcptr =
getprocaddress(huser, "messageboxw"); // now we have a pointer to a function, let's cast it to the right type var messageboxtype = ctypes.functiontype(ctypes.winapi_abi, ctypes.int32_t, [hwnd, lpctstr, lpctstr, ctypes.uint32_t]); funcptr = ctypes.cast(funcptr, messageboxtype.ptr); funcptr(0, "test1", "test2", 0); credit for this example is to wladimir palant (stackoverflow :: how to call a function using pointer in js-ctypes) ...
Flash Activation: Browser Comparison - Plugins
if a flash element is not visible to the user, the user will not
get a visible prompt.
...this can be done by calling a javascript function when the plugin is activated: function plugincreated() { // we don't need to see the plugin, so hide it by resizing var plugin = document.
getelementbyid('myplugin'); plugin.height = 0; plugin.width = 0; plugin.callpluginmethod(); } the html, by default, specifies the flash object to be a size that makes it visible, like this: <!-- give the plugin an initial size so it is visible --> <object type="application/x-shockwave-flash" data="myapp.swf" id="myplugin" width="300" height="300"> <param name="callback" value="pluginc...
...r html with a callback that calls the javascript function plugincreated(), like this: <object type="application/x-my-plugin" data="somedata.mytype" id="myplugin"> <param name="callback" value="plugincreated()"> </object> the plugincreated() function is then responsible for the setup of your script and any calls back into the plugin that you need to make: function plugincreated() { document.
getelementbyid('myplugin').callpluginmethod(); } ...
Preferences System
reference information about them is available below: preferences system documentation: introduction:
getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes use code for a typical preferences window may look like this: <prefwindow id="apppreferences" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="pane1" label="&pane1.title;"> <preferences> <preference id="pref1" name="pref.na...
...you should be careful to read the higs for the platforms you are tar
geting and use the xul preprocessor if necessary to set different window titles as appropriate.
... you should also be careful to specify the width of the window (in em) as appropriate using the preprocessor for each tar
geted platform, as well as the height (in em) for platforms where the window size does not change as the selected panel is changed (e.g.
DOM Inspector FAQ - Firefox Developer Tools
instead,
get the xul document to load as you normally would (e.g., by invoking commands or opening windows via standard application use), then locate it in the inspect chrome document menu.
...what are they, why are they there, and how can i
get rid of them?
...for example, if you search nodes' tags for "tab", you'll
get matches for tabpanel and tabbox as well as tab.
Debugger.Frame - Firefox Developer Tools
(if more than one debugger instance is debugging the same code, each debugger
gets a separate debugger.frame instance for a given frame.
...each property is a read-only accessor property whose
getter returns the current value of the corresponding parameter.
... when the referent frame is popped, the argument value’s properties’
getters throw an error.
Tutorial: Set a breakpoint - Firefox Developer Tools
var dbg = new debugger; // make the tab's top window a debuggee, and
get a // debugger.object referring to the window.
... var windowdo = dbg.adddebuggee(tabs[0].content); //
get a debugger.object referring to the window's `report` // function.
... var reportdo = windowdo.
getownpropertydescriptor('report').value; // set a breakpoint at the entry point of `report`.
Aggregate view - Firefox Developer Tools
each type
gets a row in the table, and rows are ordered by the amount of memory occupied by objects of that type.
... let's
get an allocation trace: open the memory tool check "record call stacks" load https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html take a snapshot select "view/aggregate" select "group by/call stack" you should see something like this: this is telling us that 93% of the total heap snapshot was allocated in functions called from "alloc.js", line 35 (our initial createtoolba...
...so it's good for
getting an overview of where your program is memory-hungry.
Edit Shape Paths in CSS - Firefox Developer Tools
each side of the rectangle can be tar
geted after clicking on the shapes icon to activate the shape path editor, and dragging each side will update the values for the top, right, bottom, and left offset values.
... double-click anywhere on a line of the shape and you will
get a new point to adjust.
... if your shape is a polygon, you also
get the ability to rotate it around an axis.
CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
in the css pane in the css pane's rules view, any instance of a display: grid declaration
gets a grid icon included within it: .
...the above and below screenshots should give you further hints on how to
get to this.
... a tar
get icon that when clicked immediately selects the html element that this grid entry relates to, inside the html pane.
Animating CSS properties - Firefox Developer Tools
average frame rate here is 46.67fps, well below the tar
get of 60fps.
...with only 16.7ms in our total bud
get, it's not surprising we are missing a consistently high frame rate.
...we're averaging nearly 60fps, and apart from one dip near the start, we're
getting a consistently high frame rate.
Intensive JavaScript - Firefox Developer Tools
we can select one of these periods and have a closer look at it in the main waterfall view: here, when we pressed the button, the browser ran a javascript function, or series of functions, that blocked the main thread for 71.73ms, or more than four times our frame bud
get.
...here's the code, to
gether with its immediate caller: const iterations = 50; const multiplier = 1000000000; function calculateprimes(iterations, multiplier) { var primes = []; for (var i = 0; i < iterations; i++) { var candidate = i * (multiplier * math.random()); var isprime = true; for (var c = 2; c <= math.sqrt(candidate); ++c) { if (candidate % c === 0) { // not prime isprime = false; break; } } if (isprime) { primes.push(candidate); } } return primes; } f...
...as long as each function is reasonably small, the browser should be able to keep inside its frame bud
get.
The JavaScript input interpreter - Firefox Developer Tools
this means that if you've hit a breakpoint in a function you
get autocomplete for objects local to the function.
... you
get autocomplete suggestions for array elements, as well: you can enable or disable autocompletion via the settings ("gear") menu in the web console toolbar.
...there are three ways to select an iframe using cd(): you can pass the iframe dom element: var frame = document.
getelementbyid("frame1"); cd(frame); you can pass a css selector that matches the iframe: cd("#frame1"); you can pass the iframe's global window object: var frame = document.
getelementbyid("frame1"); cd(frame.contentwindow); to switch the context back to the top-level window, call cd() with no arguments: cd(); for example, suppose we have a document that embeds an iframe: <!doctype html> <ht...
ANGLE_instanced_arrays - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... constants this extension exposes one new constant, which can be used in the gl.
getvertexattrib() method: ext.vertex_attrib_array_divisor_angle returns a glint describing the frequency divisor used for instanced rendering when used in the gl.
getvertexattrib() as the pname parameter.
... examples enabling the extension: var ext = gl.
getextension('angle_instanced_arrays'); specifications specification status comment angle_instanced_arraysthe definition of 'angle_instanced_arrays' in that specification.
AbstractRange - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/abstractrange" tar
get="_top"><rect x="1" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">abstractrange</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties collapsed read only a boolea...
...blue nodes are text nodes, containing the text that
gets shown onscreen.
...the code to do that looks like the following: let paranode = document.queryselector("p"); let paratextnode = paranode.childnodes[1]; let range = document.createrange(); range.setstart(paratextnode, 6); range.setend(paratextnode, paratextnode.length-1); let fragment = range.clonecontents(); document.body.appendchild(fragment); first we
get references to the paragraph node itelf as well as to the second child node within the paragraph.
AnalyserNode.maxDecibels - Web APIs
the maxdecibels property of the analysernode interface is a double value representing the maximum power value in the scaling range for the fft analysis data, for conversion to unsigned byte/float values — basically, this specifies the maximum value for the range of results when using
getfloatfrequencydata() or
getbytefrequencydata().
... when
getting data from
getfloatfrequencydata() or
getbytefrequencydata(), any frequencies with an amplitude of maxdecibels or higher will be returned as +1.0 or 255, respectively.
... analyser.fftsize = 256; var bufferlength = analyser.frequencybincount; console.log(bufferlength); var dataarray = new uint8array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { drawvisual = requestanimationframe(draw); analyser.
getbytefrequencydata(dataarray); canvasctx.fillstyle = 'rgb(0, 0, 0)'; canvasctx.fillrect(0, 0, width, height); var barwidth = (width / bufferlength) * 2.5; var barheight; var x = 0; for(var i = 0; i < bufferlength; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',50,50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight/2); ...
AnalyserNode.minDecibels - Web APIs
the mindecibels property of the analysernode interface is a double value representing the minimum power value in the scaling range for the fft analysis data, for conversion to unsigned byte/float values — basically, this specifies the minimum value for the range of results when using
getfloatfrequencydata() or
getbytefrequencydata().
... when
getting data from
getfloatfrequencydata() or
getbytefrequencydata(), any frequencies with an amplitude of mindecibels or lower will be returned as 0.0 or 0, respectively.
... analyser.fftsize = 256; var bufferlength = analyser.frequencybincount; console.log(bufferlength); var dataarray = new uint8array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { drawvisual = requestanimationframe(draw); analyser.
getbytefrequencydata(dataarray); canvasctx.fillstyle = 'rgb(0, 0, 0)'; canvasctx.fillrect(0, 0, width, height); var barwidth = (width / bufferlength) * 2.5; var barheight; var x = 0; for(var i = 0; i < bufferlength; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',50,50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight/2); ...
Animation.effect - Web APIs
the animation.effect property of the web animations api
gets and sets the tar
get effect of an animation.
... the tar
get effect may be either an effect object of a type based on animationeffectreadonly, such as keyframeeffect, or null.
... syntax var effect = animation.effect; animation.effect = animationeffectreadonly value a animationeffectreadonly object describing the tar
get animation effect for the animation, or null to indicate no active effect.
Animation.startTime - Web APIs
an animation’s start time is the time value of its documenttimeline when its tar
get keyframeeffect is scheduled to begin playback.
... examples in the running on web animations api example, the we can sync all new animated cats by giving them all the same starttime as the original running cat: var catrunning = document.
getelementbyid ("withwaapi").animate(keyframes, timing); /* a function that makes new cats.
... waapicats.appendchild(newcat); } reduced time precision to offer protection against timing attacks and fingerprinting, the precision of animation.starttime might
get rounded depending on browser settings.
AudioNode.connect() - Web APIs
the connect() method of the audionode interface lets you connect one of the node's outputs to a tar
get, which may be either another audionode (thereby directing the sound data to the specified node) or an audioparam, so that the node's output data is automatically used to change the value of that parameter over time.
... notsupportederror the specified connection would create a cycle (in which the audio loops back through the same nodes repeatedly) and there are no delaynodes in the cycle to prevent the resulting waveform from
getting stuck constructing the same audio frame indefinitely.
...next, it will mix it to
gether with any other such outputs, and the intrinsic parameter value (the value the audioparam would normally have without any audio connections), including any timeline changes scheduled for the parameter.
AudioNode - Web APIs
or convolvernode), or volume control (like gainnode) <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" tar
get="_top"><rect x="151" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: an audionode can be tar
get of events, therefore it implements the eventtar
get interface.
... methods also implements methods from the interface eventtar
get.
AudioParam.value - Web APIs
the web audio api's audioparam interface property value
gets or sets the value of this audioparam at the current time.
...this is reflected by the value
getter, which returns the value of the parameter as of the audio rendering engine's most recent render quantum, or moment at which audio buffers are processed and updated.
...these ramped or gradiated value-changing methods include linearramptovalueattime(), settar
getattime(), and setvaluecurveattime().
AudioWorkletProcessor - Web APIs
the constructor of the deriving class is
getting called with an options object, so you can perform a custom initialization procedures — see constructor page for details.
...this method
gets called for each block of 128 sample-frames and takes input and output arrays and calculated values of custom audioparams (if they are defined) as parameters.
... optionally, if you want custom audioparams on your node, you can supply a parameterdescriptors property as a static
getter on the processor.
AuthenticatorResponse.clientDataJSON - Web APIs
the clientdatajson property of the authenticatorresponse interface stores a json string in an arraybuffer, representing the client data that was passed to credentialscontainer.create() or credentialscontainer.
get().
... properties after the clientdatajson object is converted from an arraybuffer to a javascript object, it will have the following properties: type a string which is either "webauthn.
get" when an existing credential is retrieved or "webauthn.create" when a new credential is created.
... examples function arraybuffertostr(buf) { return string.fromcharcode.apply(null, new uint8array(buf)); } // pk is a publickeycredential that is the result of a create() or
get() promise var clientdatastr = arraybuffertostr(pk.clientdatajson); var clientdataobj = json.parse(clientdatastr); console.log(clientdataobj.type); // "webauthn.create" or "webauthn.
get" console.log(clientdataobj.challenge); // base64 encoded string containing the original challenge console.log(clientdataobj.origin); // the window.origin specifications specification status ...
BaseAudioContext.createBuffer() - Web APIs
examples first, a couple of simple trivial examples, to help explain how the parameters are used: var audioctx = new audiocontext(); var buffer = audioctx.createbuffer(2, 22050, 44100); if you use this call, you will
get a stereo buffer (two channels), that, when played back on an audiocontext running at 44100hz (very common, most normal sound cards run at this rate), will last for 0.5 seconds: 22050 frames / 44100hz = 0.5 seconds.
... var audioctx = new audiocontext(); var buffer = audioctx.createbuffer(1, 22050, 22050); if you use this call, you will
get a mono buffer (one channel), that, when played back on an audiocontext running at 44100hz, will be automatically *resampled* to 44100hz (and therefore yield 44100 frames), and last for 1.0 second: 44100 frames / 44100hz = 1 second.
...reo buffer at the sample rate of the audiocontext var myarraybuffer = audioctx.createbuffer(2, audioctx.samplerate * 3, audioctx.samplerate); // fill the buffer with white noise; // just random values between -1.0 and 1.0 for (var channel = 0; channel < myarraybuffer.numberofchannels; channel++) { // this gives us the actual arraybuffer that contains the data var nowbuffering = myarraybuffer.
getchanneldata(channel); for (var i = 0; i < myarraybuffer.length; i++) { // math.random() is in [0; 1.0] // audio needs to be in [-1.0; 1.0] nowbuffering[i] = math.random() * 2 - 1; } } //
get an audiobuffersourcenode.
BaseAudioContext.createPeriodicWave() - Web APIs
you can think of it as the result of a fourier transform, where you
get frequency domain values from time domain value.
... here, with createperiodicwave(), you specify the frequencies, and the browser performs an inverse fourier transform to
get a time domain buffer for the frequency of the oscillator.
... here, we only set one component at full volume (1.0) on the fundamental tone, so we
get a sine wave.
BaseAudioContext.createScriptProcessor() - Web APIs
lector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function
getdata() { request = new xmlhttprequest(); request.open('
get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } ...
...is the song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.
getchanneldata(channel); var outputdata = outputbuffer.
getchanneldata(channel); // loop through the 4096 samples for (var sample = 0; sample < inputbuffer.length; sample++) { // make output equal to the same as the input outputdata[sample] = inputdata[sample]; // add noise to each output sample outputdata[sample] += ((math.random() * 2) - 1) * 0.2; }...
... } }
getdata(); // wire up play button playbutton.onclick = function() { source.connect(scriptnode); scriptnode.connect(audioctx.destination); source.start(); } // when the buffer source stops playing, disconnect everything source.onended = function() { source.disconnect(scriptnode); scriptnode.disconnect(audioctx.destination); } specifications specification status comment web audio apithe definition of 'createscriptprocessor' in that specification.
BluetoothDevice - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/bluetoothdevice" tar
get="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">bluetoothdevice</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} interface interface bluetoothdevice { readonly attribute domstring id; readonly attribute domstring?
...gatt; readonly attribute frozenarray uuids; promise watchadvertisements(); void unwatchadvertisements(); readonly attribute boolean watchingadvertisements; }; bluetoothdevice implements eventtar
get; bluetoothdevice implements bluetoothdeviceeventhandlers; bluetoothdevice implements characteristiceventhandlers; bluetoothdevice implements serviceeventhandlers; properties bluetoothdevice.id read only a domstring that uniquely identifies a device.
BluetoothRemoteGATTServer - Web APIs
interface interface bluetoothremotegattserver { readonly attribute bluetoothdevice device; readonly attribute boolean connected; promise<bluetoothremotegattserver> connect(); void disconnect(); promise<bluetoothremotegattservice>
getprimaryservice(bluetoothserviceuuid service); promise<sequence<bluetoothremotegattservice>>
getprimaryservices(optional bluetoothserviceuuid service); }; properties bluetoothremotegattserver.connectedread only a boolean value that returns true while this script execution environment is connected to this.device.
... bluetoothremotegattserver.
getprimaryservice() returns a promise to the primary bluetoothgattservice offered by the bluetooth device for a specified bluetoothserviceuuid.
... bluetoothremotegattserver.
getprimaryservices() returns a promise to a list of primary bluetoothgattservice objects offered by the bluetooth device for a specified bluetoothserviceuuid.
Body.body - Web APIs
the body read-only property of the body mixin is a simple
getter used to expose a readablestream of the body contents.
... example in our simple stream pump example we fetch an image, expose the response's stream using response.body, create a reader using readablestream.
getreader(), then enqueue that stream's chunks into a second, custom readable stream — effectively creating an identical copy of the image.
... const image = document.
getelementbyid('tar
get'); // fetch the original image fetch('./tortoise.png') // retrieve its body as readablestream .then(response => response.body) .then(body => { const reader = body.
getreader(); return new readablestream({ start(controller) { return pump(); function pump() { return reader.read().then(({ done, value }) => { // when no more data needs to be consumed, close the stream if (done) { controller.close(); return; } // enqueue the next data chunk into our tar
get stream controller.enqueue(value); return pump(); }); } } }) }) .then(stream => new response(stream)) .then(response => response.blob()) .then(blob => url.createobje...
Body.text() - Web APIs
example in our fetch text example (run fetch text live), we have an <article> element and three links (stored in the mylinks array.) first, we loop through all of these and give each one an onclick event handler so that the
getdata() function is run — with the link's data-page identifier passed to it as an argument — when one of the links is clicked.
... when
getdata() is run, we create a new request using the request() constructor, then use it to fetch a specific .txt file.
... let myarticle = document.queryselector('article'); let mylinks = document.queryselectorall('ul a'); for(let i = 0; i <= mylinks.length-1; i++) { mylinks[i].onclick = function(e) { e.preventdefault(); let linkdata = e.tar
get.
getattribute('data-page');
getdata(linkdata); } }; function
getdata(pageid) { console.log(pageid); var myrequest = new request(pageid + '.txt'); fetch(myrequest).then(function(response) { return response.text().then(function(text) { myarticle.innerhtml = text; }); }); } specifications specification status comment fetchthe definition of 't...
CDATASection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" tar
get="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></...
...a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/text" tar
get="_top"><rect x="436" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">text</text></a><polyline points="511,25 521,20 521,30 511,25" stroke="#d4dde4" fill="none"/><line x1="521" y1="25" x2="529" y2="25" stroke="#d4dde4"/><line x1="529" y1="25" x2="529" y2="90" stroke="#d4dde4"/><line x1="529" y1="90" x2="512" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cdatasection" tar
get="_top"><rect x="391" y="65" width="120" heigh...
Determining the dimensions of elements - Web APIs
most of the time these are the same as width and height of element.
getboundingclientrect(), when there aren't any transforms applied to the element.
... in case of transforms, the offsetwidth and offsetheight returns the element's layout width and height, while
getboundingclientrect() returns the rendering width and height.
... as an example, if the element has width: 100px; and transform: scale(0.5); the
getboundingclientrect() will return 50 as the width, while offsetwidth will return 100.
Cache.matchAll() - Web APIs
if this argument is omitted, you will
get a copy of all responses in this cache.
... ignoremethod: a boolean that, when set to true, prevents matching operations from validating the request http method (normally only
get and head are allowed.) it defaults to false.
...if the url matches you will
get a match regardless of the response object having a vary header or not.
Cache - Web APIs
items in a cache do not
get updated unless explicitly requested; they don’t expire unless deleted.
... // (see /docs/web/api/request/clone) return fetch(event.request.clone()).then(function(response) { console.log(' response for %s from network is: %o', event.request.url, response); if (response.status < 400 && response.headers.has('content-type') && response.headers.
get('content-type').match(/^font\//i)) { // this avoids caching responses that we know are errors (i.e.
...by doing so, we
get to keep // the original response object which we will return back to the controlled page.
CanvasPattern.setTransform() - Web APIs
the pattern
gets applied if you set it as the current fillstyle and
gets drawn onto the canvas when using the fillrect() method, for example.
... html <canvas id="canvas"></canvas> <svg id="svg1"></svg> javascript var canvas = document.
getelementbyid('canvas'); var ctx = canvas.
getcontext('2d'); var svg1 = document.
getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); }; note that newer browser versions started to support dommatrix as an input to settransform(), so for example you could replace the svgmatrix in the above example with the following: const matrix = new dommatrix([1, .2, .8, 1, 0, 0]); edit the code below and see your...
... </div> <textarea id="code" class="playable-code" style="height:120px"> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); };</textarea> var canvas = document.
getelementbyid('canvas'); var ctx = canvas.
getcontext('2d'); var textarea = document.
getelementbyid('code'); var reset = document.
getelementbyid('reset'); var edit = document.
getelementbyid('edit'); var code = textarea.value; var svg1 = document.
getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.va...
CanvasRenderingContext2D.clip() - Web APIs
only those parts of the checkerboard pattern that are within the clipping region
get drawn.
... const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // create circular clipping region ctx.beginpath(); ctx.arc(100, 75, 50, 0, math.pi * 2); ctx.clip(); // draw stuff that
gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height); ctx.fillstyle = 'orange'; ctx.fillrect(0, 0, 100, 100); result specifying a path and a fillrule this example saves two rectan...
... html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // create clipping path let region = new path2d(); region.rect(80, 10, 20, 130); region.rect(40, 50, 100, 50); ctx.clip(region, "evenodd"); // draw stuff that
gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.clip' in that specification.
CanvasRenderingContext2D.closePath() - Web APIs
const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 140); // move pen to bottom-left corner ctx.lineto(120, 10); // line to top corner ctx.lineto(220, 140); // line to bottom-right corner ctx.closepath(); // line to bottom-left corner ctx.stroke(); result closing just one sub-path this example draws a smiley face consisting of three disconn...
... note: although closepath() is called after all the arcs have been created, only the last arc (sub-path)
gets closed.
... const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.beginpath(); ctx.arc(240, 20, 40, 0, math.pi); ctx.moveto(100, 20); ctx.arc(60, 20, 40, 0, math.pi); ctx.moveto(215, 80); ctx.arc(150, 80, 65, 0, math.pi); ctx.closepath(); ctx.linewidth = 6; ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.closepath' in that specification.
CanvasRenderingContext2D.lineTo() - Web APIs
const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.beginpath(); // start a new path ctx.moveto(30, 50); // move the pen to (30, 50) ctx.lineto(150, 100); // draw a line to (150, 100) ctx.stroke(); // render the path result drawing connected lines each call of lineto() (and similar methods) automatically adds to the current sub-path, which means that all the li...
...nes will all be stroked or filled to
gether.
... html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.moveto(90, 130); ctx.lineto(95, 25); ctx.lineto(150, 80); ctx.lineto(205, 25); ctx.lineto(210, 130); ctx.linewidth = 15; ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.lineto' in that specification.
CanvasRenderingContext2D.setLineDash() - Web APIs
if the number of elements in the array is odd, the elements of the array
get copied and concatenated.
... html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // dashed line ctx.beginpath(); ctx.setlinedash([5, 15]); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); // solid line ctx.beginpath(); ctx.setlinedash([]); ctx.moveto(0, 100); ctx.lineto(300, 100); ctx.stroke(); result some common patterns this example illustrates a variety of common line dash patterns.
... function drawdashedline(pattern) { ctx.beginpath(); ctx.setlinedash(pattern); ctx.moveto(0, y); ctx.lineto(300, y); ctx.stroke(); y += 20; } const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); let y = 15; drawdashedline([]); drawdashedline([1, 1]); drawdashedline([10, 10]); drawdashedline([20, 5]); drawdashedline([15, 3, 3, 3]); drawdashedline([20, 3, 3, 3, 3, 3, 3, 3]); drawdashedline([12, 3, 3]); // equals [12, 3, 3, 12, 3, 3] result specifications specification status comment html living standardthe definition of '...
CanvasRenderingContext2D.setTransform() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.settransform(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0, 100, 100); result retrieving and passing a dommatrix object in the following example, we have two <canvas> elements.
... we apply a transform to the first one's context using the first type of settransform() and draw a square on it, then retrieve the matrix from it using canvasrenderingcontext2d.
gettransform().
... html <canvas width="240"></canvas> <canvas width="240"></canvas> css canvas { border: 1px solid black; } javascript const canvases = document.queryselectorall('canvas'); const ctx1 = canvases[0].
getcontext('2d'); const ctx2 = canvases[1].
getcontext('2d'); ctx1.settransform(1, .2, .8, 1, 0, 0); ctx1.fillrect(25, 25, 50, 50); let storedtransform = ctx1.
gettransform(); console.log(storedtransform); ctx2.settransform(storedtransform); ctx2.beginpath(); ctx2.arc(50, 50, 50, 0, 2 * math.pi); ctx2.fill(); result specifications specification status comment html living standardthe ...
Manipulating video using canvas - Web APIs
var processor; processor.doload = function doload() { this.video = document.
getelementbyid('video'); this.c1 = document.
getelementbyid('c1'); this.ctx1 = this.c1.
getcontext('2d'); this.c2 = document.
getelementbyid('c2'); this.ctx2 = this.c2.
getcontext('2d'); let self = this; this.video.addeventlistener('play', function() { self.width = self.video.videowidth / 2; self.height = self.video.videoheight / 2; self.timercallback(); ...
... processor.computeframe = function computeframe() { this.ctx1.drawimage(this.video, 0, 0, this.width, this.height); let frame = this.ctx1.
getimagedata(0, 0, this.width, this.height); let l = frame.data.length / 4; for (let i = 0; i < l; i++) { let r = frame.data[i * 4 + 0]; let g = frame.data[i * 4 + 1]; let b = frame.data[i * 4 + 2]; if (g > 100 && r > 100 && b < 43) frame.data[i * 4 + 3] = 0; } this.ctx2.putimagedata(frame, 0, 0); return; } when this routine is called, the vide...
... the result is: line 3 fetches a copy of the raw graphics data for the current frame of video by calling the
getimagedata() method on the first context.
Optimizing canvas - Web APIs
mycanvas.offscreencanvas = document.createelement('canvas'); mycanvas.offscreencanvas.width = mycanvas.width; mycanvas.offscreencanvas.height = mycanvas.height; mycanvas.
getcontext('2d').drawimage(mycanvas.offscreencanvas, 0, 0); avoid floating-point coordinates and use integers instead sub-pixel rendering occurs when you render objects on a canvas without whole values.
...nvas.height; var scaletofit = math.min(scalex, scaley); var scaletocover = math.max(scalex, scaley); stage.style.transformorigin = '0 0'; //scale from top left stage.style.transform = 'scale(' + scaletofit + ')'; turn off transparency if your application uses canvas and doesn’t need a transparent backdrop, set the alpha option to false when creating a drawing context with htmlcanvaselement.
getcontext().
... var ctx = canvas.
getcontext('2d', { alpha: false }); more tips batch canvas calls to
gether.
Canvas API - Web APIs
html <canvas id="canvas"></canvas> javascript the document.
getelementbyid() method
gets a reference to the html <canvas> element.
... next, the htmlcanvaselement.
getcontext() method
gets that element's context—the thing onto which the drawing will be rendered.
... const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 150, 100); result reference htmlcanvaselement canvasrenderingcontext2d canvasgradient canvasimagesource canvaspattern imagebitmap imagedata renderingcontext textmetrics offscreencanvas path2d imagebitmaprenderingcontext note: the interfaces related to the webglrenderingcontext are referenced under webgl.
ClipboardItem - Web APIs
gettype() returns a promise that resolves with a blob of the requested mime type, or an error if the mime type is not found.
...then utilizing the clipboarditem.types property to set the
gettype() argument and return the corresponding blob object.
... async function
getclipboardcontents() { try { const clipboarditems = await navigator.clipboard.read(); for (const clipboarditem of clipboarditems) { for (const type of clipboarditem.types) { const blob = await clipboarditem.
gettype(type); // we can now use blob here } } } catch (err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eventsthe definition of 'clipboarditem' in that specification.
Comment - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" tar
get="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></...
...a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/comment" tar
get="_top"><rect x="436" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">comment</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no specific property, but inherits those of its parent, characterdata, and indirectly those of node.
Content Index API - Web APIs
feature detection and interface access here we
get a reference to the serviceworkerregistration, then check for the index property, which gives us access to the content index interface.
... async function createreadinglist() { // access our service worker registration const registration = await navigator.serviceworker.ready; //
get our index entries const entries = await registration.index.
getall(); // create a containing element const readinglistelem = document.createelement('div'); // test for entries if (!array.length) { // if there are no entries, display a message const message = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' re...
...they are accessible from the workerglobalscope.self property: // service worker script self.registration.index.add(item); self.registration.index.delete(item.id); const contentindexitems = self.registration.index.
getall(); contentdelete event when an item is removed from the user agent interface, a contentdelete event is received by the service worker.
DataTransfer.effectAllowed - Web APIs
<!doctype html> <html lang=en> <title>examples of datatransfer.{dropeffect,effectallowed} properties</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #tar
get { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.datatransfer.setdata("text", ev.tar
get.id); ev.datatransfer.effectal...
...lowed = "move"; } function drop_handler(ev) { console.log("drop: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.preventdefault(); //
get the id of the tar
get and add the moved element to the tar
get's dom var data = ev.datatransfer.
getdata("text"); ev.tar
get.appendchild(document.
getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } </script> <body> <h1>examples <code>datatransfer</code>.{<code>dropeffect</code>, <code>effectallowed</code>} properties</h1> <div> <p id="source" ondragstart="dragstart_handler(ev...
...ent);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="tar
get" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'effectallowed' in that specification.
DataTransfer.items - Web APIs
<!doctype html> <html lang=en> <title>examples of datatransfer.{types,items} properties</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #tar
get { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart: tar
get.id = " + ev.tar
get.id); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.datatransfer.setdata("text/plain", ev.tar
get.id); ev.datatransfer.effectallowed = "move"; } function drop_handler(ev) { console.log("drop...
...: tar
get.id = " + ev.tar
get.id); ev.preventdefault(); //
get the id of the tar
get and add the moved element to the tar
get's dom var data = ev.datatransfer.
getdata("text"); ev.tar
get.appendchild(document.
getelementbyid(data)); // print each format type if (ev.datatransfer.types != null) { for (var i=0; i < ev.datatransfer.types.length; i++) { console.log("...
...o move ev.datatransfer.dropeffect = "move" } </script> <body> <h1>examples of <code>datatransfer</code>.{<code>types</code>, <code>items</code>} properties</h1> <ul> <li id="i1" ondragstart="dragstart_handler(event);" draggable="true">drag item 1 to the drop zone</li> <li id="i2" ondragstart="dragstart_handler(event);" draggable="true">drag item 2 to the drop zone</li> </ul> <div id="tar
get" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'items' in that specification.
DataTransfer.types - Web APIs
<!doctype html> <html lang=en> <title>examples of datatransfer.{types,items} properties</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #tar
get { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart: tar
get.id = " + ev.tar
get.id); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.datatransfer.setdata("text/plain", ev.tar
get.id); ev.datatransfer.effectallowed = "move"; } function drop_handler(ev) { console.log("drop...
...: tar
get.id = " + ev.tar
get.id); ev.preventdefault(); //
get the id of the tar
get and add the moved element to the tar
get's dom var data = ev.datatransfer.
getdata("text"); ev.tar
get.appendchild(document.
getelementbyid(data)); // print each format type if (ev.datatransfer.types != null) { for (var i=0; i < ev.datatransfer.types.length; i++) { console.log("...
...o move ev.datatransfer.dropeffect = "move" } </script> <body> <h1>examples of <code>datatransfer</code>.{<code>types</code>, <code>items</code>} properties</h1> <ul> <li id="i1" ondragstart="dragstart_handler(event);" draggable="true">drag item 1 to the drop zone</li> <li id="i2" ondragstart="dragstart_handler(event);" draggable="true">drag item 2 to the drop zone</li> </ul> <div id="tar
get" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'types' in that specification.
DedicatedWorkerGlobalScope - Web APIs
properties this interface inherits properties from the workerglobalscope interface, and its parent eventtar
get, and therefore implements properties from windowtimers, windowbase64, and windoweventhandlers.
... event handlers this interface inherits event handlers from the workerglobalscope interface, and its parent eventtar
get, and therefore implements event handlers from windowtimers, windowbase64, and windoweventhandlers.
... methods this interface inherits methods from the workerglobalscope interface, and its parent eventtar
get, and therefore implements methods from windowtimers, windowbase64, and windoweventhandlers.
DisplayMediaStreamConstraints.audio - Web APIs
if a boolean is specified, a value of true indicates that an audio track should be included in the stream returned by
getdisplaymedia(), if an appropriate audio source exists and the user agent supports audio on display media.
... if a mediatrackconstraints object is given, and an audio source is available, an audio track matching the settings given in the constraints object is included in the mediastream returned by
getdisplaymedia().
... if no audio source is available, or the user agent doesn't support audio tracks with
getdisplaymedia(), the returned mediastream has no audio track, but no error occurs.
DisplayMediaStreamConstraints.video - Web APIs
the displaymediastreamconstraints dictionary's video property is used to configure the video track in the stream returned by
getdisplaymedia().
... if a boolean is specified, a value of true (the default) indicates that the stream returned by
getdisplaymedia() should be in whatever format the user agent feels is best.
... constraints specific to screen sharing these constraints apply to mediatrackconstraints objects specified as part of the displaymediastreamconstraints object's video property when using
getdisplaymedia() to obtain a stream for screen sharing.
DisplayMediaStreamConstraints - Web APIs
the displaymediastreamconstraints dictionary is used to specify whether or not to include video and/or audio tracks in the mediastream to be returned by
getdisplaymedia(), as well as what type of processing must be applied to the tracks.
... properties audio a boolean or mediatrackconstraints value; if a boolean, this value simply indicates whether or not to include an audio track in the mediastream returned by
getdisplaymedia().
... video if true (the default), the display contents are included in a mediastreamtrack within the stream provided by
getdisplaymedia().
Document: drag event - Web APIs
this div is draggable </div> </div> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dropzone"></div> css #draggable { width: 200px; height: 20px; text-align: center; background: white; } .dropzone { width: 200px; height: 20px; background: blueviolet; margin-bottom: 10px; padding: 10px; } javascript var dragged; /* events fired on the draggable tar
get */ document.addeventlistener("drag", function(event) { }, false); document.addeventlistener("dragstart", function(event) { // store a ref.
... on the dragged elem dragged = event.tar
get; // make it half transparent event.tar
get.style.opacity = .5; }, false); document.addeventlistener("dragend", function(event) { // reset the transparency event.tar
get.style.opacity = ""; }, false); /* events fired on the drop tar
gets */ document.addeventlistener("dragover", function(event) { // prevent default to allow drop event.preventdefault(); }, false); document.addeventlistener("dragenter", function(event) { // highlight potential drop tar
get when the draggable element enters it if (event.tar
get.classname == "dropzone") { event.tar
get.style.background = "purple"; } }, false); document.addeventlistener("dragleave", function(event) { // reset background of potential drop tar
get when the draggable element leaves it ...
... if (event.tar
get.classname == "dropzone") { event.tar
get.style.background = ""; } }, false); document.addeventlistener("drop", function(event) { // prevent default action (open as link for some elements) event.preventdefault(); // move dragged elem to the selected drop tar
get if (event.tar
get.classname == "dropzone") { event.tar
get.style.background = ""; dragged.parentnode.removechild( dragged ); event.tar
get.appendchild( dragged ); } }, false); specifications specification status comment html living standardthe definition of 'drag event' in that specification.
Document: dragenter event - Web APIs
the dragenter event is fired when a dragged element or text selection enters a valid drop tar
get.
... the tar
get object is the immediate user selection (the element directly indicated by the user as the drop tar
get), or the <body> element.
... bubbles yes cancelable yes default action reject immediate user selection as potential tar
get element.
DocumentOrShadowRoot.activeElement - Web APIs
if so, you can
get more detail by using the object's selectionstart and selectionend properties.
...you can
get the current selection using window.
getselection().
...morbi sed euismod diam.</textarea> </form> <p>active element id: <b id="output-element"></b></p> <p>selected text: <b id="output-text"></b></p> javascript function onmouseup(e) { const activetextarea = document.activeelement; const selection = activetextarea.value.substring( activetextarea.selectionstart, activetextarea.selectionend ); const outputelement = document.
getelementbyid('output-element'); const outputtext = document.
getelementbyid('output-text'); outputelement.innerhtml = activetextarea.id; outputtext.innerhtml = selection; } const textarea1 = document.
getelementbyid('ta-example-one'); const textarea2 = document.
getelementbyid('ta-example-two'); textarea1.addeventlistener('mouseup', onmouseup, false); textarea2.addeventlistener('mouseup', onmou...
DocumentOrShadowRoot - Web APIs
documentorshadowroot.pointerlockelement read only returns the element set as the tar
get for mouse events while the pointer is locked.
... it returns null if lock is pending, the pointer is unlocked, or if the tar
get is in another document.
... documentorshadowroot.
getselection() returns a selection object representing the range of text selected by the user, or the current position of the caret.
Events and the DOM - Web APIs
eventtar
get.addeventlistener // assuming mybutton is a button element mybutton.addeventlistener('click', greet, false) function greet(event){ // print and have a look at the event object // always print arguments in case of overlooking any other arguments console.log('greet:', arguments) alert('hello world') } this is the method you should use in modern web pages.
... note: internet explorer 6–8 didn't support this method, offering a similar eventtar
get.attachevent api instead.
... more details can be found on the eventtar
get.addeventlistener reference page.
Document Object Model (DOM) - Web APIs
once an event is triggered, the event handlers
get executed.
... dom interfaces attr cdatasection characterdata childnode comment customevent document documentfragment documenttype domerror domexception domimplementation domstring domtimestamp domstringlist domtokenlist element event eventtar
get htmlcollection mutationobserver mutationrecord namednodemap node nodefilter nodeiterator nodelist nondocumenttypechildnode parentnode processinginstruction selection range text textdecoder textencoder timeranges treewalker url window worker xmldocument obsolete dom interfaces the document object model has been highly simplified.
... type svganimatedangle svganimatedboolean svganimatedenumeration svganimatedinteger svganimatedlength svganimatedlengthlist svganimatednumber svganimatednumberlist svganimatedpathdata svganimatedpoints svganimatedpreserveaspectratio svganimatedrect svganimatedstring svganimatedtransformlist smil-related interfaces elementtimecontrol timeevent other svg interfaces
getsvgdocument shadowanimation svgcolorprofilerule svgcssrule svgdocument svgexception svgexternalresourcesrequired svgfittoviewbox svglangspace svglocatable svgrenderingintent svgstylable svgtests svgtransformable svgunittypes svguseelementshadowroot svgurireference svgviewspec svgzoomandpan svgzoomevent specifications specification status ...
EXT_disjoint_timer_query.queryCounterEXT() - Web APIs
syntax void ext.querycounterext(query, tar
get); parameters query a webglquery object for which to record the current time.
... tar
get a glenum specifying the tar
get of the time query.
... examples var ext = gl.
getextension('ext_disjoint_timer_query'); var startquery = ext.createqueryext(); var endquery = ext.createqueryext(); ext.querycounterext(startquery, ext.timestamp_ext); // ...
EXT_sRGB - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... constants this extension exposes the following constants, which can be used in the teximage2d(), texsubimage2d(), renderbufferstorage() and
getframebufferattachmentparameter() methods.
... examples var ext = gl.
getextension('ext_srgb'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, 0, ext.srgb_ext, 512, 512, 0, ext.srgb_ext, gl.unsigned_byte, image); specifications specification status comment ext_srgbthe definition of 'ext_srgb' in that specification.
Element: fullscreenchange event - Web APIs
html <h1>fullscreenchange event example</h1> <div id="fullscreen-div"> <button id="toggle-fullscreen">toggle fullscreen mode</button> </div> javascript document.
getelementbyid('fullscreen-div').addeventlistener('fullscreenchange', (event) => { // document.fullscreenelement will point to the element that // is in fullscreen mode if there is one.
... if (document.fullscreenelement) { console.log(`element: ${document.fullscreenelement.id} entered fullscreen mode.`); } else { console.log('leaving full-screen mode.'); } }); document.
getelementbyid('toggle-fullscreen').addeventlistener('click', (event) => { if (document.fullscreenelement) { // exitfullscreen is only available on the document object.
... document.exitfullscreen(); } else { document.
getelementbyid('fullscreen-div').requestfullscreen(); } }); specifications specification status fullscreen api living standard ...
Element.hasPointerCapture() - Web APIs
syntax tar
getelement.haspointercapture(pointerid); parameters pointerid the pointerid of a pointerevent object.
... examples <html> <script> function downhandler(ev) { const el = document.
getelementbyid("tar
get"); // element 'tar
get' will receive/capture further events el.setpointercapture(ev.pointerid); /* ...
... } } function init() { const el = document.
getelementbyid("tar
get"); el.onpointerdown = downhandler; } </script> <body onload="init();"> <div id="tar
get">touch this element with a pointer.</div> </body> </html> specifications specification status comment pointer events – level 2the definition of 'haspointercapture()' in that specification.
Element.innerHTML - Web APIs
the element property innerhtml
gets or sets the html or xml markup contained within the element.
...use node.textcontent to
get a raw copy of these text nodes' contents.
... javascript function log(msg) { var logelem = document.queryselector(".log"); var time = new date(); var timestr = time.tolocaletimestring(); logelem.innerhtml += timestr + ": " + msg + "<br/>"; } log("logging mouse events inside this container..."); the log() function creates the log output by
getting the current time from a date object using tolocaletimestring(), and building a string with the timestamp and the message text.
Element: mouseout event - Web APIs
mouseout is added to the list to color the tar
geted element orange when the mouse exits it.
... html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test = document.
getelementbyid("test"); // briefly make the list purple when the mouse moves off the // <ul> element test.addeventlistener("mouseleave", function( event ) { // highlight the mouseleave tar
get event.tar
get.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.tar
get.style.color = ""; }, 1000); }, false); // briefly make an <li> orange when the mouse moves off of it test.addeventlistener("mouseou...
...t", function( event ) { // highlight the mouseout tar
get event.tar
get.style.color = "orange"; // reset the color after a short delay settimeout(function() { event.tar
get.style.color = ""; }, 500); }, false); result specifications specification status ui eventsthe definition of 'mouseout' in that specification.
Element.msZoomTo() - Web APIs
syntax element.mszoomto(arguments); parameters args[in] type: mszoomtooptions contentx[in]: the x-coordinate of the content that is the tar
get of the scroll/zoom.
... contenty[in]: the y-coordinate of the content that is the tar
get of the scroll/zoom.
... example /* zooming in on an element while still keeping it centered in the viewport */ var args = { contentx: tar
get.offsetleft + tar
get.offsetwidth/2; contenty: tar
get.offsettop + tar
get.offsetheight/2; scalefactor: 2.0; } zoomer.mszoomto(args); see also microsoft api extensions ...
Element.name - Web APIs
name
gets or sets the name property of an element in the dom.
... name can be used in the document.
getelementsbyname() method, a form and with the form elements collection.
... syntax htmlelement.name = string let elname = htmlelement.name let fcontrol = htmlformelement.elementname let controlcollection = htmlformelement.elements.elementname example <form action="" name="forma"> <input type="text" value="foo"> </form> <script type="text/javascript"> //
get a reference to the first element in the form let formelement = document.forms['forma'].elements[0] // give it a name formelement.name = 'inputa' // show the value of the input alert(document.forms['forma'].elements['inputa'].value) </script> notes in internet explorer (ie), the name property of dom objects created using document.createelement() can't be set or modified.
Element.onfullscreenchange - Web APIs
syntax tar
getdocument.onfullscreenchange = fullscreenchangehandler; value an event handler for the fullscreenchange event, indicating that the element has changed in or out of full-screen mode.
...this function determines which element it was called on by checking the value of event.tar
get, then compares the document's fullscreenelement value to the element to see if they're the same node.
... let elem = document.queryselector("video"); elem.onfullscreenchange = handlefullscreenchange; if (!document.fullscreenelement) { elem.requestfullscreen().then({}).catch(err => { alert(`error attempting to enable full-screen mode: ${err.message} (${err.name})`); }); } else { document.exitfullscreen(); } } function handlefullscreenchange(event) { let elem = event.tar
get; let isfullscreen = document.fullscreenelement === elem; adjustmycontrols(isfullscreen); } specifications specification status comment fullscreen apithe definition of 'onfullscreenchange' in that specification.
Element: paste event - Web APIs
a handler for this event can access the clipboard contents by calling
getdata() on the event's clipboarddata property.
... examples live example html <div class="source" contenteditable="true">try copying text from this box...</div> <div class="tar
get" contenteditable="true">...and pasting it into this one</div> css div.source, div.tar
get { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const tar
get = document.queryselector('div.tar
get'); tar
get.addeventlistener('paste', (event) => { let paste = (event.clipboarddata || window.clipboarddata).
getdata('text'); ...
... paste = paste.touppercase(); const selection = window.
getselection(); if (!selection.rangecount) return false; selection.deletefromdocument(); selection.
getrangeat(0).insertnode(document.createtextnode(paste)); event.preventdefault(); }); result specifications specification status clipboard api and events working draft ...
Element.scrollLeft - Web APIs
the element.scrollleft property
gets or sets the number of pixels that an element's content is scrolled from its left edge.
... syntax
getting the value //
get the number of pixels scrolled var sleft = element.scrollleft; sleft is an integer representing the number of pixels that element has been scrolled from the left edge.
... example html <div id="container"> <div id="content">click the button to slide right!</div> </div> <button id="slide" type="button">slide right</button> css #container { width: 100px; height: 100px; border: 1px solid #ccc; overflow-x: scroll; } #content { width: 250px; background-color: #ccc; } javascript const button = document.
getelementbyid('slide'); button.onclick = function () { document.
getelementbyid('container').scrollleft += 20; }; result specifications specification status comment css object model (cssom) view modulethe definition of 'scrollleft' in that specification.
Element.setAttribute() - Web APIs
to
get the current value of an attribute, use
getattribute(); to remove an attribute, call removeattribute().
... since the specified value
gets converted into a string, specifying null doesn't necessarily do what you expect.
... dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens
getattribute (dom 1)
getattributens
getattributenode
getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status comment domthe definition of 'setattribute()' in that specification.
File.lastModified - Web APIs
example reading from file input <input type="file" multiple id="fileinput"> const fileinput = document.queryselector('#fileinput'); fileinput.addeventlistener('change', (event) => { // files is a filelist object (similar to nodelist) const files = event.tar
get.files; for (let file of files) { const date = new date(file.lastmodified); console.log(`${file.name} has a last modified date of ${date}`); } }); try the results out below: dynamically created files if a file is created dynamically, the last modified time can be supplied in the new file() constructor function.
... if it is missing, lastmodified inherits the current time from date.now() at the moment the file object
gets created.
... filewithdate = new file([], 'file.bin', { lastmodified: new date(2017, 1, 1), }); console.log(filewithdate.lastmodified); //returns 1485903600000 const filewithoutdate = new file([], 'file.bin'); console.log(filewithoutdate.lastmodified); //returns current time reduced time precision to offer protection against timing attacks and fingerprinting, the precision of somefile.lastmodified might
get rounded depending on browser settings.
File.lastModifiedDate - Web APIs
example // fileinput is a htmlinputelement: <input type="file" multiple id="myfileinput"> var fileinput = document.
getelementbyid("myfileinput"); // files is a filelist object (simliar to nodelist) var files = fileinput.files; for (var i = 0; i < files.length; i++) { alert(files[i].name + " has a last modified date of " + files[i].lastmodifieddate); } reduced time precision to offer protection against timing attacks and fingerprinting, the precision of somefile.lastmodifieddate.
gettime() might
get rounded d...
... // reduced time precision (2ms) in firefox 60 somefile.lastmodifieddate.
gettime(); // 1519211809934 // 1519211810362 // 1519211811670 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled somefile.lastmodifieddate.
gettime(); // 1519129853500 // 1519129858900 // 1519129864400 // ...
File - Web APIs
file objects are generally retrieved from a filelist object returned as a result of a user selecting files using the <input> element, from a drag and drop operation's datatransfer object, or from the moz
getasfile() api on an htmlcanvaselement.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/blob" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">blob</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4...
..."/><a xlink:href="/docs/web/api/file" tar
get="_top"><rect x="116" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">file</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor file() returns a newly constructed file.
FileSystem - Web APIs
basic concepts there are two ways to
get access to a filesystem object: you can directly ask for one representing a sandboxed file system created just for your web app directly by calling window.requestfilesystem().
... you can
get it from a file system entry object, through its filesystem property.
... 7alternate name alternate name uses the non-standard name: domfilesystemedge full support ≤18prefixed notes full support ≤18prefixed notes prefixed implemented with the vendor prefix: webkitnotes edge only supports this api in drag-and-drop scenarios using the the datatransferitem.webkit
getasentry() method.
FileSystemDirectoryEntry.createReader() - Web APIs
function readdirectory(directory) { let dirreader = directory.createreader(); let entries = []; let
getentries = function() { dirreader.readentries(function(results) { if (results.length) { entries = entries.concat(toarray(results));
getentries(); } }, function(error) { /* handle error -- error is a fileerror object */ }); };
getentries(); return entries; } this works by creating an internal function,
getentries(), which calls itself recursively...
... to
get all the entries in the directory, concatenating each batch to the array.
... each iteration, readentries() is called to
get more entries.
FileSystemDirectoryReader.readEntries() - Web APIs
let dropzone = document.
getelementbyid("dropzone"); let listing = document.
getelementbyid("listing"); function scanfiles(item, container) { let elem = document.createelement("li"); elem.innerhtml = item.name; container.appendchild(elem); if (item.isdirectory) { let directoryreader = item.createreader(); let directorycontainer = document.createelement("ul"); container.appendchild(directorycontainer); ...
...zone.addeventlistener("dragover", function(event) { event.preventdefault(); }, false); the event handler that kicks everything off, of course, is the handler for the drop event: dropzone.addeventlistener("drop", function(event) { let items = event.datatransfer.items; event.preventdefault(); listing.innerhtml = ""; for (let i=0; i<items.length; i++) { let item = items[i].webkit
getasentry(); if (item) { scanfiles(item, listing); } } }, false); this fetches the list of datatransferitem objects representing the items dropped from event.datatransfer.items.
...for each one, we call its webkit
getasentry() method to obtain a filesystementry representing the file.
FileSystemFlags.create - Web APIs
filesystemflags is only used when calling filesystemdirectoryentry.
getfile() or filesystemdirectoryentry.
getdirectory().
... syntax filesystemflags.create = booleanvalue values the table below describes the result of each possible combination of these flags depending on whether or not the tar
get file or directory path already exists.
... option values file/directory condition result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is
getfile() or
getdirectory() the successcallback is called with a filesystemfileentry if
getfile() was called or a filesystemdirectoryentry if
getdirectory() was called.
FileSystemFlags.exclusive - Web APIs
the exclusive property on the filesystemflags dictionary is used in tandem with the create property to determine whether or not it's acceptable to require that the file not already exist when the reference to it is created by calling filesystemdirectoryentry.
getfile() or filesystemdirectoryentry.
getdirectory().
... syntax filesystemflags.exclusive = booleanvalue values the table below describes the result of each possible combination of these flags depending on whether or not the tar
get file or directory path already exists.
... option values file/directory condition result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is
getfile() or
getdirectory() the successcallback is called with a filesystemfileentry if
getfile() was called or a filesystemdirectoryentry if
getdirectory() was called.
FileSystemFlags - Web APIs
methods which accept an options parameter of this type may specify zero or more of these flags as fields in an object, like this: datadirectoryentry.
getdirectory("workspace", { create: true }, function(entry) { }); here, we see that the create property is provided, with a value of true, indicating that the directory should be created if it's not already there.
... values and results the table below describes the result of each possible combination of these flags depending on whether or not the tar
get file or directory path already exists.
... option values file/directory condition result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is
getfile() or
getdirectory() the successcallback is called with a filesystemfileentry if
getfile() was called or a filesystemdirectoryentry if
getdirectory() was called.
File and Directory Entries API support in Firefox - Web APIs
there are only two ways to
get access to file system entries at this time: the <input> element, using the htmlinputelement.webkitentries property to access an array of filesystementry objects describing file system entries you can then read.
... using drag and drop by calling the datatransferitem.
getasentry() method, which lets you
get a filesystemfileentry or filesystemdirectoryentry for files dropped on a drop zone.
... you can't use the localfilesystem.requestfilesystem() method to
get access to a specified local file system.
FocusEvent() - Web APIs
the focusevent() constructor returns a newly created focusevent object with an optional eventtar
get.
... when the event has both a source and a destination, the relatedtar
get value must be set to the other tar
get.
... focuseventinit optional is a focuseventinit dictionary, having the following fields: "relatedtar
get", optional and defaulting to null, is an eventtar
get representing the secondary tar
get of a focusevent.
FocusEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/uievent" tar
get="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/focusevent" tar
get="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">focusevent</text></a></svg></div> ...
... focusevent.relatedtar
get is an eventtar
get representing a secondary tar
get for this event.
FormData - Web APIs
you can also pass it directly to the urlsearchparams constructor if you want to generate query parameters in the way a <form> would do if it were using simple
get submission.
... formdata.
get() returns the first value associated with a given key from within a formdata object.
... formdata.
getall() returns an array of all the values associated with a given key from within a formdata.
Guide to the Fullscreen API - Web APIs
let's consider this <video> element: <video controls id="myvideo"> <source src="somevideo.webm"></source> <source src="somevideo.mp4"></source> </video> we can put that video into full-screen mode as follows: var elem = document.
getelementbyid("myvideo"); if (elem.requestfullscreen) { elem.requestfullscreen(); } this code checks for the existence of the requestfullscreen() method before calling it.
...to
get the same fullscreen behavior in webkit, you need to add your own "width: 100%; height: 100%;" css rules to the element yourself: #myvideo:-webkit-full-screen { width: 100%; height: 100%; } on the other hand, if you're trying to emulate webkit's behavior on gecko, you need to place the element you want to present inside another element, which you'll make fullscreen instead, and use css rules to adjust the inner element to matc...
...
getting out of full screen mode the user always has the ability to exit fullscreen mode of their own accord; see things your users want to know.
GlobalEventHandlers.ondblclick - Web APIs
syntax tar
get.ondblclick = functionref; value functionref is a function name or a function expression.
...you may prefer to use the eventtar
get.addeventlistener() method instead, since it's more flexible.
... html <p>double click anywhere in this example.</p> <p id="log"></p> javascript let log = document.
getelementbyid('log'); document.ondblclick = logdoubleclick; function logdoubleclick(e) { log.textcontent = `position: (${e.clientx}, ${e.clienty})`; } result specifications specification status comment html living standardthe definition of 'ondblclick' in that specification.
GlobalEventHandlers.ondrag - Web APIs
syntax var draghandler = tar
getelement.ondrag; return value draghandler the drag event handler for element tar
getelement.
... <!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #tar
get { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.tar
get.id); } function drop_handler(ev) { console.log("drop"); ev.currenttar
get.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.
getdata("text"); ev.tar
get.appendchild(document.
...
getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <!-- <div class="source"> --> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="tar
get" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'ondrag' in that specification.
GlobalEventHandlers.ondragover - Web APIs
syntax var dragoverhandler = tar
getelement.ondragover; return value dragoverhandler the dragover event handler for element tar
getelement.
... <!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #tar
get { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.tar
get.id); } function drop_handler(ev) { console.log("drop"); ev.currenttar
get.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.
getdata("text"); ev.tar
get.appendchild(do...
...cument.
getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="tar
get" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'ondragover' in that specification.
GlobalEventHandlers.ondragstart - Web APIs
syntax var dragstarthandler = tar
getelement.ondragstart; return value dragstarthandler the dragstart event handler for element tar
getelement.
... <!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #tar
get { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.tar
get.id); } function drop_handler(ev) { console.log("drop"); ev.currenttar
get.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.
getdata("text"); ev.tar
get.appendchild(...
...document.
getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="tar
get" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'ondragstart' in that specification.
GlobalEventHandlers.ondrop - Web APIs
syntax var drophandler = tar
getelement.ondrop; return value drophandler the drop event handler for element tar
getelement.
... <!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #tar
get { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.tar
get.id); } function drop_handler(ev) { console.log("drop"); ev.currenttar
get.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.
getdata("text"); ev.tar
get.appendchild(document.g...
...tdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div class="source"> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="tar
get" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'ondrop' in that specification.
GlobalEventHandlers.onkeypress - Web APIs
syntax tar
get.onkeypress = functionref; value functionref is a function name or a function expression.
... html <input> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.
getelementbyid('log'); input.onkeypress = logkey; function logkey(e) { log.textcontent += ` ${e.code}`; } result filter keys with a regular expression this example filters the characters typed into a form field using a regular expression.
...*/ (function () { const ssecret = /* choose your hidden word...: */ "exit"; let noffset = 0; document.onkeypress = function(opevt) { let oevent = opevt || window.event, nchr = oevent.charcode, snodetype = oevent.tar
get.nodename.touppercase(); if (nchr === 0 || oevent.tar
get.contenteditable.touppercase() === "true" || snodetype === "textarea" || snodetype === "input" && oevent.tar
get.type.touppercase() === "text") { return true; } if (nchr !== ssecret.charcodeat(noffset)) { noffset = nchr === ssecret.charcodeat(0) ?
GlobalEventHandlers.onpointercancel - Web APIs
syntax tar
getelement.onpointercancel = cancelhandler; var cancelhandler = tar
getelement.onpointercancel; value cancelhandler the pointercancel event handler for element tar
getelement.
... <html> <script> function cancelhandler(ev) { // process the pointercancel event } function init() { var el = document.
getelementbyid('tar
get1'); el.onpointercancel = cancelhandler; } </script> <body onload="init();"> <div id="tar
get1"> touch me ...
... </div> <div id="tar
get2" onpointercancel="cancelhandler(event)"> touch me ...
GlobalEventHandlers.onpointerenter - Web APIs
syntax tar
getelement.onpointerenter = enterhandler; var enterhandler = tar
getelement.onpointerenter; value enterhandler the pointerenter event handler for element tar
getelement.
... <html> <script> function enterhandler(ev) { // process the pointerenter event } function init() { let el = document.
getelementbyid('tar
get1'); el.onpointerenter = enterhandler; } </script> <body onload="init();"> <div id="tar
get1"> touch me ...
... </div> <div id="tar
get2" onpointerenter="enterhandler(event)"> touch me ...
GlobalEventHandlers.onpointerleave - Web APIs
syntax eventtar
get.onpointerleave = leavehandler; var leavehandler = eventtar
get.onpointerleave; value leavehandler the eventlistener which will be invoked to handle pointerleave events sent to the tar
get.
... <html> <script> function leavehandler(ev) { // process the pointerleave event } function init() { var el=document.
getelementbyid("tar
get1"); el.onpointerleave = leavehandler; } </script> <body onload="init();"> <div id="tar
get1"> touch me ...
... </div> <div id="tar
get2" onpointerleave="leavehandler(event)"> touch me ...
GlobalEventHandlers.onpointermove - Web APIs
syntax tar
getelement.onpointermove = movehandler; var movehandler = tar
getelement.onpointermove; value movehandler the pointermove event handler for element tar
getelement.
... <html> <script> function movehandler(ev) { // process the pointermove event } function init() { let el=document.
getelementbyid('tar
get1'); el.onpointermove = movehandler; } </script> <body onload="init();"> <div id="tar
get1"> touch me ...
... </div> <div id="tar
get2" onpointermove="movehandler(event)"> touch me ...
GlobalEventHandlers.onpointerout - Web APIs
syntax tar
getelement.onpointerout = outhandler; var outhandler = tar
getelement.onpointerout; value outhandler the pointerout event handler for element tar
getelement.
... <html> <script> function outhandler(ev) { // process the pointerout event } function init() { let el=document.
getelementbyid('tar
get1'); el.onpointerout = outhandler; } </script> <body onload="init();"> <div id="tar
get1"> touch me ...
... </div> <div id="tar
get2" onpointerout="outhandler(event)"> touch me ...
GlobalEventHandlers.onpointerover - Web APIs
syntax tar
getelement.onpointerover = overhandler; var overhandler = tar
getelement.onpointerover; value overhandler the pointerover event handler for element tar
getelement.
... <html> <script> function overhandler(ev) { // process the pointerover event } function init() { let el = document.
getelementbyid('tar
get1'); el.onpointerover = overhandler; } </script> <body onload="init();"> <div id="tar
get1"> touch me ...
... </div> <div id="tar
get2" onpointerover="overhandler(event)"> touch me ...
GlobalEventHandlers.onpointerup - Web APIs
syntax tar
getelement.onpointerup = uphandler; var uphandler = tar
getelement.onpointerup; value uphandler the pointerup event handler for element tar
getelement.
... <html> <script> function uphandler(ev) { // process the pointerup event } function init() { let el = document.
getelementbyid('tar
get1'); el.onpointerup = uphandler; } </script> <body onload="init();"> <div id="tar
get1"> touch me ...
... </div> <div id="tar
get2" onpointerup="uphandler(event)"> touch me ...
GlobalEventHandlers.onscroll - Web APIs
syntax tar
get.onscroll = functionref value functionref a function name, or a function expression.
... for greater flexibility, you can pass a scroll event to the eventtar
get.addeventlistener() method instead.
... html <textarea>1 2 3 4 5 6 7 8 9</textarea> <p id="log"></p> css textarea { width: 4rem; height: 8rem; font-size: 3rem; } javascript const textarea = document.queryselector('textarea'); const log = document.
getelementbyid('log'); textarea.onscroll = logscroll; function logscroll(e) { log.textcontent = `scroll position: ${e.tar
get.scrolltop}`; } result specifications specification status comment html living standardthe definition of 'onscroll' in that specification.
GlobalEventHandlers.ontouchend - Web APIs
syntax var endhandler = tar
getelement.ontouchend; return value endhandler the touchend event handler for element tar
getelement.
... <html> <script> function endtouch(ev) { // process the event } function init() { var el=document.
getelementbyid("tar
get1"); el.ontouchend = endtouch; } </script> <body onload="init();"> <div id="tar
get1"> touch me ...
... </div> <div id="tar
get2" ontouchend="endtouch(event)"> touch me ...
GlobalEventHandlers.ontransitionend - Web APIs
if the transition is removed from its tar
get node before the transition completes execution, the transitionend event won't be generated.
... one way this can happen is by changing the value of the transition-property attribute which applies to the tar
get.
... syntax var transitionendhandler = tar
get.ontransitionend; tar
get.ontransitionend = function value a function to be called when a transitionend event occurs indicating that a css transition has completed on the tar
get, where the tar
get object is an html element (htmlelement), document (document), or window (window).
HTMLBRElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbrelement" tar
get="_top"><rect x="361" y="65" width="130" he...
HTMLBodyElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbodyelement" tar
get="_top"><rect x="341" y="65" width="150" ...
HTMLCanvasElement.mozOpaque - Web APIs
this has been standardized as setting the alpha option to false when creating a drawing context with htmlcanvaselement.
getcontext().
... syntax var opaque = canvas.mozopaque; canvas.mozopaque = true; examples given this <canvas> element: <canvas id="canvas" width="300" height="300" moz-opaque></canvas> you can
get or set the mozopaque property.
... var canvas = document.
getelementbyid('canvas'); console.log(canvas.mozopaque); // true // deactivate it canvas.mozopaque = false; specifications not part of any standard.
HTMLCanvasElement.toDataURL() - Web APIs
examples given this <canvas> element: <canvas id="canvas" width="5" height="5"></canvas> you can
get a data-url of the canvas with the following lines: var canvas = document.
getelementbyid('canvas'); var dataurl = canvas.todataurl(); console.log(dataurl); // "data:image/png;base64,ivborw0kggoaaaansuheugaaaauaaaafcayaaacnby // blaaaadeleqvqimwngobmaaabpaafei8araaaaaelftksuqmcc" setting image quality with jpegs var fullquality = canvas.todataurl('image/jpeg', 1.0); // data:image/jpeg;base64,/9...
...g class="grayscale" src="mypicture.png" alt="description of my picture" /> javascript window.addeventlistener('load', removecolors); function showcolorimg() { this.style.display = 'none'; this.nextsibling.style.display = 'inline'; } function showgrayimg() { this.previoussibling.style.display = 'inline'; this.style.display = 'none'; } function removecolors() { var aimages = document.
getelementsbyclassname('grayscale'), nimgslen = aimages.length, ocanvas = document.createelement('canvas'), octx = ocanvas.
getcontext('2d'); for (var nwidth, nheight, oimgdata, ograyimg, npixel, apix, npixlen, nimgid = 0; nimgid < nimgslen; nimgid++) { ocolorimg = aimages[nimgid]; nwidth = ocolorimg.offsetwidth; nheight = ocolorimg.offsetheight; ocanvas.width = nwi...
...dth; ocanvas.height = nheight; octx.drawimage(ocolorimg, 0, 0); oimgdata = octx.
getimagedata(0, 0, nwidth, nheight); apix = oimgdata.data; npixlen = apix.length; for (npixel = 0; npixel < npixlen; npixel += 4) { apix[npixel + 2] = apix[npixel + 1] = apix[npixel] = (apix[npixel] + apix[npixel + 1] + apix[npixel + 2]) / 3; } octx.putimagedata(oimgdata, 0, 0); ograyimg = new image(); ograyimg.src = ocanvas.todataurl(); ograyimg.onmouseover = showcolorimg; ocolorimg.onmouseout = showgrayimg; octx.clearrect(0, 0, nwidth, nheight); ocolorimg.style.display = "none"; ocolorimg.parentnode.insertbefore(ograyimg, ocolorimg); } } specifications specification status comment html living standardthe definition of '...
HTMLDListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldlistelement" tar
get="_top"><rect x="331" y="65" width="160"...
HTMLDataElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldataelement" tar
get="_top"><rect x="341" y="65" width="150" ...
HTMLDataListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldatalistelement" tar
get="_top"><rect x="301" y="65" width="1...
HTMLDivElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldivelement" tar
get="_top"><rect x="351" y="65" width="140" h...
HTMLDocument - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" tar
get="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a><polyline...
... points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldocument" tar
get="_top"><rect x="386" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="446" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldocument</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} for the purposes of web development, you can generally think of htmldocument as an alias for document, upon which htmldocument is based.
HTMLElement.offsetLeft - Web APIs
however, for inline-level elements (such as span) that can wrap from one line to the next, offsettop and offsetleft describe the positions of the first border box (use element.
getclientrects() to
get its width and height), while offsetwidth and offsetheight describe the dimensions of the bounding border box (use element.
getboundingclientrect() to
get its position).
... example var colortable = document.
getelementbyid("t1"); var toleft = colortable.offsetleft; if (toleft > 5) { // large left offset: do something here } this example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.
...</span> <span id="longspan">long span that wraps within this div.</span> </div> <div id="box" style="position: absolute; border-color: red; border-width: 1; border-style: solid; z-index: 10"> </div> <script type="text/javascript"> var box = document.
getelementbyid("box"); var longspan = document.
getelementbyid("longspan"); box.style.left = longspan.offsetleft + document.body.scrollleft + "px"; box.style.top = longspan.offsettop + document.body.scrolltop + "px"; box.style.width = longspan.offsetwidth + "px"; box.style.height = longspan.offsetheight + "px"; </script> specification specification status comment css object model (cssom) view modu...
HTMLElement.onpaste - Web APIs
note that there is currently no dom-only way to obtain the text being pasted; you'll have to use an nsiclipboard to
get that information.
... syntax tar
get.onpaste = functionref; value functionref is a function name or a function expression.
... html <h3>play with this text area:</h3> <textarea id="editor" rows="3">try copying and pasting text into this field!</textarea> <h3>log:</h3> <p id="log"></p> javascript function logcopy(event) { log.innertext = 'copied!\n' + log.innertext; } function logpaste(event) { log.innertext = 'pasted!\n' + log.innertext; } const editor = document.
getelementbyid('editor'); const log = document.
getelementbyid('log'); editor.oncopy = logcopy; editor.onpaste = logpaste; result specification whatwg standard ...
HTMLEmbedElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlembedelement" tar
get="_top"><rect x="331" y="65" width="160"...
HTMLFieldSetElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlfieldsetelement" tar
get="_top"><rect x="301" y="65" width="1...
HTMLHRElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlhrelement" tar
get="_top"><rect x="361" y="65" width="130" he...
HTMLHeadElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlheadelement" tar
get="_top"><rect x="341" y="65" width="150" ...
HTMLHeadingElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlheadingelement" tar
get="_top"><rect x="311" y="65" width="18...
HTMLHtmlElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlhtmlelement" tar
get="_top"><rect x="341" y="65" width="150" ...
HTMLIFrameElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmliframeelement" tar
get="_top"><rect x="321" y="65" width="170...
HTMLImageElement.alt - Web APIs
for compatibility reasons, browsers generally will accept an image without an alt attribute, but you should try to
get into the habit of using it.
... vivamus consectetur rhoncus elit e
get porta.
... vivamus consectetur rhoncus elit e
get porta.
HTMLImageElement.x - Web APIs
let logbox = document.queryselector("pre"); let tbl = document.
getelementbyid("userinfo") let log = msg => { logbox.innerhtml += `${msg}<br>`; } let cell = tbl.rows[1].cells[2]; let image = cell.queryselector("img"); log(`image's global x: ${image.x}`); log(`image's global y: ${image.y}`); this uses the <table>'s rows property to
get a list of the rows in the table, from which it looks up row 1 (which, being a zero-based index, means the second row from th...
...then it looks at that <tr> (table row) element's cells property to
get a list of the cells in that row.
... from there, we can
get the <img> element itself from the cell by calling queryselector() on the htmltablecellelement representing that cell.
HTMLImageElement.y - Web APIs
let logbox = document.queryselector("pre"); let tbl = document.
getelementbyid("userinfo") let log = msg => { logbox.innerhtml += `${msg}<br>`; } let cell = tbl.rows[1].cells[2]; let image = cell.queryselector("img"); log(`image's global x: ${image.x}`); log(`image's global y: ${image.y}`); this uses the <table>'s rows property to
get a list of the rows in the table, from which it looks up row 1 (which, being a zero-based index, means the second row from th...
...then it looks at that <tr> (table row) element's cells property to
get a list of the cells in that row.
... from there, we can
get the <img> element itself from the cell by calling queryselector() on the htmltablecellelement representing that cell.
HTMLLIElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllielement" tar
get="_top"><rect x="361" y="65" width="130" he...
HTMLLabelElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllabelelement" tar
get="_top"><rect x="331" y="65" width="160"...
HTMLLegendElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllegendelement" tar
get="_top"><rect x="321" y="65" width="170...
HTMLMapElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmapelement" tar
get="_top"><rect x="351" y="65" width="140" h...
HTMLMediaElement.onencrypted - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" tar
get="_top"><rect x="331" y="65" width="160"...
HTMLMediaElement.onwaitingforkey - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" tar
get="_top"><rect x="331" y="65" width="160"...
HTMLMenuElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmenuelement" tar
get="_top"><rect x="341" y="65" width="150" ...
HTMLMenuItemElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmenuitemelement" tar
get="_top"><rect x="301" y="65" width="1...
HTMLMeterElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmeterelement" tar
get="_top"><rect x="331" y="65" width="160"...
HTMLModElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmodelement" tar
get="_top"><rect x="351" y="65" width="140" h...
HTMLOListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlolistelement" tar
get="_top"><rect x="331" y="65" width="160"...
HTMLOptGroupElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptgroupelement" tar
get="_top"><rect x="301" y="65" width="1...
HTMLOptionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptionelement" tar
get="_top"><rect x="321" y="65" width="170...
HTMLOutputElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloutputelement" tar
get="_top"><rect x="321" y="65" width="170...
HTMLParagraphElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlparagraphelement" tar
get="_top"><rect x="291" y="65" width="...
HTMLParamElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlparamelement" tar
get="_top"><rect x="331" y="65" width="160"...
HTMLPictureElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlpictureelement" tar
get="_top"><rect x="311" y="65" width="18...
HTMLPreElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlpreelement" tar
get="_top"><rect x="351" y="65" width="140" h...
HTMLProgressElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlprogresselement" tar
get="_top"><rect x="301" y="65" width="1...
HTMLQuoteElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlquoteelement" tar
get="_top"><rect x="331" y="65" width="160"...
HTMLSelectElement.autofocus - Web APIs
the htmlselectelement.autofocus property is a boolean that reflects the autofocus html attribute, which indicates whether the associated <select> element will
get input focus when the page loads, unless the user overrides it.
...if there are several, the first element with the attribute set inserted, usually the first such element on the page,
get the initial focus.
... syntaxedit abool = aselectelement.autofocus; //
get the value of autofocus aselectelement.autofocus = abool; // set the value of autofocus example html <select id="myselect" autofocus> <option>option 1</option> <option>option 2</option> </select> javascript // check if the autofocus attribute on the <select> var hasautofocus = document.
getelementbyid('myselect').autofocus; specifications specification status comment html living standardthe definition of 'autofocus' in that specifi...
HTMLSourceElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlsourceelement" tar
get="_top"><rect x="321" y="65" width="170...
HTMLSpanElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlspanelement" tar
get="_top"><rect x="341" y="65" width="150" ...
HTMLStyleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlstyleelement" tar
get="_top"><rect x="331" y="65" width="160"...
HTMLTableCaptionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecaptionelement" tar
get="_top"><rect x="261" y="65" widt...
HTMLTableCellElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecellelement" tar
get="_top"><rect x="291" y="65" width="...
HTMLTableColElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecolelement" tar
get="_top"><rect x="301" y="65" width="1...
HTMLTableElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltableelement" tar
get="_top"><rect x="331" y="65" width="160"...
HTMLTableRowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablerowelement" tar
get="_top"><rect x="301" y="65" width="1...
HTMLTableSectionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablesectionelement" tar
get="_top"><rect x="261" y="65" widt...
HTMLTemplateElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltemplateelement" tar
get="_top"><rect x="301" y="65" width="1...
HTMLTimeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltimeelement" tar
get="_top"><rect x="341" y="65" width="150" ...
HTMLTitleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltitleelement" tar
get="_top"><rect x="331" y="65" width="160"...
HTMLTrackElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltrackelement" tar
get="_top"><rect x="331" y="65" width="160"...
HTMLUListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlulistelement" tar
get="_top"><rect x="331" y="65" width="160"...
HTMLUnknownElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" tar
get="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlunknownelement" tar
get="_top"><rect x="311" y="65" width="18...
HTMLVideoElement.msZoom - Web APIs
mszoom is a read/write property which
gets or sets whether the video frame is trimmed, on the top and bottom or left and right, to fit the video display.
... example this examples
gets a video object and sets the mszoom property to true.
... var myvideo = document.
getelementbyid("videotag1"); myvideo.mszoom = true; myvideo.play(); see also htmlvideoelement microsoft api extensions ...
HTMLVideoElement.videoHeight - Web APIs
the media's clean aperture (the sub-rectangle centered within the media that matches the tar
get aspect ratio).
... the tar
get device's resolution.
... let v = document.
getelementbyid("myvideo"); v.addeventlistener("resize", ev => { let w = v.videowidth; let h = v.videoheight; if (w && h) { v.style.width = w; v.style.height = h; } }, false); note that this only applies the change if both the videowidth and the videoheight are non-zero.
HTMLVideoElement.videoWidth - Web APIs
the media's clean aperture (the sub-rectangle centered within the media that matches the tar
get aspect ratio).
... the tar
get device's resolution.
... let v = document.
getelementbyid("myvideo"); v.addeventlistener("resize", ev => { let w = v.videowidth; let h = v.videoheight; if (w && h) { v.style.width = w; v.style.height = h; } }, false); note that this only applies the change if both the videowidth and the videoheight are non-zero.
Headers - Web APIs
headers.
get() returns a bytestring sequence of all the values of a header within a headers object with a given name.
... obsolete methods headers.
getall() used to return an array of all the values of a header within a headers object with a given name; this method has now been deleted from the spec, and headers.
get() now returns all values of a given name instead of just the first one.
... examples in the following snippet, we create a new header using the headers() constructor, add a new header to it using append(), then return that header value using
get(): var myheaders = new headers(); myheaders.append('content-type', 'text/xml'); myheaders.
get('content-type') // should return 'text/xml' the same can be achieved by passing an array of arrays or an object literal to the constructor: var myheaders = new headers({ 'content-type': 'text/xml' }); // or, using an array of arrays: myheaders = new headers([ ['content-type', 'text/xml'] ]); myheaders.
get('content-type') // should return 'text/xml' specifications specification status comment fetchthe definition of 'headers' in that specification.
Working with the History API - Web APIs
adding and modifying history entries using pushstate() changes the referrer that
gets used in the http header for xmlhttprequest objects created after you change the state.
... if the user clicks back once again, the url will change to http://mozilla.org/foo.html, and the document will
get a popstate event, this time with a null state object.
...however, if you read the history.state property, you'll
get back the state object you would have gotten if a popstate had fired.
IDBDatabase: versionchange event - Web APIs
bubbles no cancelable no interface event event handler property onversionchange examples this example opens a database and, on success, adds a listener to versionchange: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.tar
get.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.
...createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.addeventlistener('success', event => { const db = event.tar
get.result; db.addeventlistener('versionchange', event => { console.log('the version of this database has changed'); }); }); the same example, using the onversionchange event handler property: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.tar
get.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }...
...); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = event.tar
get.result; db.onversionchange = event => { console.log('the version of this database has changed'); }; }; ...
IDBObjectStoreSync - Web APIs
method overview any add (in any value, in optional any key) raises (idbdatabaseexception); idbindexsync createindex (in domstring name, in domstring storename, in domstring keypath, in optional boolean unique); any
get (in any key) raises (idbdatabaseexception); idbcursorsync opencursor (in optional idbkeyrange range, in optional unsigned short direction) raises (idbdatabaseexception); idbindexsync openindex (in domstring name) raises (idbdatabaseexception); any put (in any value, in optional any key) raises (idbdatabaseexception); void remove (in any key) raises (idbdatab...
...
get() retrieves and returns the value from this object store for the record that corresponds to the given key.
... any
get ( in any key ) raises (idbdatabaseexception); parameters key the key that identifies the record to be retrieved.
IDBRequest.error - Web APIs
you
get this error, for example, if you try to add a new key that already exists in the record.
... example the following example requests a given record title, onsuccess
gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then puts the updated record back into the object store.
...for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); //
get the do-do list with the specified title var objectstoretitlerequest = objectstore.
get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item // back into the database var updatetitlerequest = objectstore.put(data); // when this ...
IDBRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" tar
get="_top"><rect x="151" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from eventtar
get.
... methods no methods, but inherits methods from eventtar
get.
IDBTransaction - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbtransaction" tar
get="_top"><rect x="151" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbtransaction</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} transactions are started when the transaction is created, not when the first request is placed; for example consider this: var trans1 = db.transaction("foo", "readwrite"); var trans2 = db.transaction("foo", "readwrite"); var objectstore2 = trans2.objectstore("foo") var objectstore1 = trans1.objectstore("foo") objectstore2.put("2", "key"); objectstore1.put("1", "key")...
... methods inherits from: eventtar
get idbtransaction.abort() rolls back all the changes to objects in the database associated with this transaction.
InputEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/uievent" tar
get="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/inputevent" tar
get="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">inputevent</text></a></svg></div> ...
... inputevent.
gettar
getranges() returns an array of static ranges that will be affected by a change to the dom if the input event is not canceled.
IntersectionObserver.observe() - Web APIs
the intersectionobserver method observe() adds an element to the set of tar
get elements being watched by the intersectionobserver.
... one observer has one set of thresholds and one root, but can watch multiple tar
get elements for visibility changes in keeping with those.
... syntax intersectionobserver.observe(tar
getelement); parameters tar
getelement an element whose visibility within the root is to be monitored.
IntersectionObserver.root - Web APIs
the intersectionobserver interface's read-only root property identifies the element or document whose bounds are treated as the bounding box of the viewport for the element which is the observer's tar
get.
... syntax var root = intersectionobserver.root; value a element or document object whose bounding box is used as the bounds of the viewport for the purposes of determining how much of the tar
get element is visible.
... the intersection of this bounding rectangle, offset by any margins specified in the options passed to the intersectionobserver() constructor, the tar
get element's bounds, minus the bounds of every element or other object which overlaps the tar
get element, is considered to be the visible area of the tar
get element.
IntersectionObserver.rootMargin - Web APIs
this lets you, for example, adjust the bounds outward so that the tar
get element is considered 100% visible even if a certain number of pixels worth of width or height is clipped away, or treat the tar
get as partially hidden if an edge is too close to the edge of the root's bounding box.
...these offsets are added to the corresponding values in the root's bounding box before the intersection between the resulting rectangle and the tar
get element's bounds.
...the browser is permitted to alter the values if rootmargin isn't specified when the object was instantiated, it defaults to the string "0px 0px 0px 0px", meaning that the intersection will be computed between the root element's unmodified bounds rectangle and the tar
get's bounds.
IntersectionObserverEntry.isIntersecting - Web APIs
the intersectionobserverentry interface's read-only isintersecting property is a boolean value which is true if the tar
get element intersects with the intersection observer's root.
... syntax var isintersecting = intersectionobserverentry.isintersecting; value a boolean value which indicates whether the tar
get element has transitioned into a state of intersection (true) or out of a state of intersection (false).
... example in this simple example, an intersection callback is used to update a counter of how many tar
geted elements are currently intersecting with the intersection root.
Keyboard - Web APIs
methods keyboard.
getlayoutmap() returns a promise that resolves with an instance of keyboardlayoutmap which is a map-like object with functions for retrieving the strings associated with specific physical keys.
... example the following example demonstrates how to
get the location- or layout-specific string associated with the key that corresponds to the 'w' key on an english qwerty keyboard.
... if (navigator.keyboard) { var keyboard = navigator.keyboard; keyboard.
getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.
get('keyw'); window.alert('press ' + upkey + ' to move up.'); }); } else { // do something else.
KeyboardEvent.code - Web APIs
code values are for each one.</p> <div id="output"> </div> css #output { font-family: arial, helvetica, sans-serif; border: 1px solid black; } javascript window.addeventlistener("keydown", function(event) { let str = "keyboardevent: key='" + event.key + "' | code='" + event.code + "'"; let el = document.createelement("span"); el.innerhtml = str + "<br/>"; document.
getelementbyid("output").appendchild(el); }, true); try it out to ensure that keystrokes go to the sample, click in the output box below before pressing keys.
... let shipsize = { width: 30, height: 30 }; let position = { x: 200, y: 200 }; let moverate = 9; let turnrate = 5; let angle = 0; let spaceship = document.
getelementbyid("spaceship"); next comes the function updateposition().
...moverate); break; case "keyw": case "arrowup": // handle "forward" updateposition(moverate); break; case "keya": case "arrowleft": // handle "turn left" angle -= turnrate; break; case "keyd": case "arrowright": // handle "turn right" angle += turnrate; break; } refresh(); // consume the event so it doesn't
get handled twice event.preventdefault(); }, true); try it out to ensure that keystrokes go to the sample code, click inside the black game play field below before pressing keys.
KeyboardEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/uievent" tar
get="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/keyboardevent" tar
get="_top"><rect x="231" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="296" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">keyboardevent</text></a></svg><...
... keyboardevent.
getmodifierstate() returns a boolean indicating if a modifier key such as alt, shift, ctrl, or meta, was pressed when the event was created.
KeyboardLayoutMap - Web APIs
keyboardlayoutmap.
get() returns the element with the given key from the keyboardlayoutmap object.
... examples the following example demonstrates how to
get the location- or layout-specific string associated with the key that corresponds to the 'w' key on an english qwerty keyboard.
... var keyboard = navigator.keyboard; keyboard.
getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.
get('keyw'); window.alert('press ' + upkey + ' to move up.'); }) specifications specification status comment keyboard mapthe definition of 'keyboardlayoutmap' in that specification.
Keyboard API - Web APIs
keyboard provides the keyboard.
getlayoutmap method, which returns a promise that resolves with a keyboardlayoutmap object that contains members for converting codes to keys.
... the following example demonstrates how to
get the location-specific or layout-specific string associated with the key labeled w on an english qwerty keyboard.
... if (navigator.keyboard) { var keyboard = navigator.keyboard; keyboard.
getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.
get('keyw'); window.alert('press ' + upkey + ' to move up.'); }); } else { // do something else.
MediaKeyMessageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/mediakeymessageevent" tar
get="_top"><rect x="116" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeymessageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mediakeymessageevent() creates a new instance of mediakeymessageevent.
... mediakeymessageevent.messa
getype read only indicates the type of message.
MediaStream.onaddtrack - Web APIs
this event is fired when the browser adds a track to the stream (such as when a rtcpeerconnection is renegotiated or a stream being captured using htmlmediaelement.capturestream()
gets a new set of tracks because the media element being captured loaded a new source.
... the addtrack event does not
get fired when javascript code explicitly adds tracks to the stream (by calling addtrack()).
... stream.onaddtrack = function(event) { let tracklist = document.
getelementbyid("tracks"); let label = document.createelement("li"); label.innerhtml = event.track.kind + ": " + event.track.label; tracklist.appendchild(label); }; specifications specification status comment media capture and streamsthe definition of 'mediastream.onaddtrack' in that specification.
MediaStream.onremovetrack - Web APIs
this event is fired when the browser removes a track from the stream (such as when a rtcpeerconnection is renegotiated or a stream being captured using htmlmediaelement.capturestream()
gets a new set of tracks because the media element being captured loaded a new source.
... the removetrack event does not
get fired when javascript code explicitly removes tracks from the stream (by calling removetrack()).
... stream.onremovetrack = function(event) { let tracklist = document.
getelementbyid("tracks"); let label = document.createelement("li"); label.innerhtml = "removed: " + event.track.kind + ": " + event.track.label; tracklist.appendchild(label); }; specifications specification status comment media capture and streamsthe definition of 'mediastream.onremovetrack' in that specification.
MediaStreamTrackAudioSourceNode - Web APIs
example in this example, we grab a media (audio + video) stream from navigator.
getusermedia, feed the media into a <video> element to play then mute the audio, but then also feed the audio into a mediastreamaudiosourcenode.
... var pre = document.queryselector('pre'); var video = document.queryselector('video'); var myscript = document.queryselector('script'); var range = document.queryselector('input'); //
getusermedia block - grab stream // put it into a mediastreamaudiosourcenode // also output the visuals into a video element if (navigator.mediadevices) { console.log('
getusermedia supported.'); navigator.mediadevices.
getusermedia ({audio: true, video: true}) .then(function(stream) { video.srcobject = stream; video.onloadedmetadata = function(e) { video.play()...
... = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination, so we can play the // music and adjust the volume using the mouse cursor source.connect(biquadfilter); biquadfilter.connect(audioctx.destination); //
get new mouse pointer coordinates when mouse is moved // then set new gain value range.oninput = function() { biquadfilter.gain.value = range.value; } }) .catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('
getusermedia not supported on your browser!'); } // dump script to pre element pre...
MediaStream Recording API - Web APIs
your dataavailable event handler
gets called every time there's data ready for you to do with as you will; the event has a data attribute whose value is a blob that contains the media data.
...to do so, you'll need to call navigator.mediadevices.enumeratedevices() to
get a list of the available media devices.
... navigator.mediadevices.enumeratedevices() .then(function(devices) { devices.foreach(function(device) { let menu = document.
getelementbyid("inputdevices"); if (device.kind == "audioinput") { let item = document.createelement("option"); item.innerhtml = device.label; item.value = device.deviceid; menu.appendchild(item); } }); }); code similar to this can be used to let the user restrict the set of devices they wish to use.
MediaTrackConstraints.deviceId - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.deviceid as returned by a call to mediadevices.
getsupportedconstraints().
...that means that a given track will only return one value for the deviceid when you call
getcapabilities().
... because of this, there's no use for the device id when calling mediastreamtrack.applyconstraints(), since there is only one possible value; however, you can record a deviceid and use it to ensure that you
get the same source for multiple calls to
getusermedia().
MediaTrackConstraints.groupId - Web APIs
if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.groupid as returned by a call to mediadevices.
getsupportedconstraints().
...that means that a given track will only return one value for the groupid when you call
getcapabilities(), and keep in mind that this value will change for each browsing session.
... because of this, there's no use for the group id when calling mediastreamtrack.applyconstraints(), since there is only one possible value, and you can't use it to ensure the same group is used across multiple browsing sessions when calling
getusermedia().
MediaTrackSettings.deviceId - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.deviceid property you provided when calling either
getusermedia().
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.deviceid as returned by a call to mediadevices.
getsupportedconstraints().
... since there is a one-to-one pairing of id with each source, all tracks with the same source will share the same id for any given origin, so mediastreamtrack.
getcapabilities() will always return exactly one value for deviceid.
MediaTrackSettings.groupId - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.groupid property you provided when calling either
getusermedia().
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.groupid as returned by a call to mediadevices.
getsupportedconstraints().
... since this property isn't stable across browsing sessions, its usefulness when calling
getusermedia() is generally limited to ensuring that tasks performed during the same browsing session use devices from the same group (or that they don't use devices from the same group).
MediaTrackSettings - Web APIs
this value is specific to the source of the track's data and is not usable for setting constraints; it can, however, be used for initially selecting media when calling mediadevices.
getusermedia().
...this value is specific to the source of the track's data and is not usable for setting constraints; it can, however, be used for initially selecting media when calling mediadevices.
getusermedia().
...this value is a tar
get value; actual latency may vary to some extent for various reasons.
Using the Media Capabilities API - Web APIs
support for
getting real-time feedback about the playback of media, so your code can make informed decisions about adapting the stream's quality or other settings to manage the user's perceived media performance and quality.
...tion> <option>2500</option> <option>800</option> </select> </li> </ul> <p><input type="button" value="test this video configuration" id="tryit"></p> </form> <ul id="results"></ul> javascript let mc = { videoconfiguration : new object(), tryit: function () { mc.createconfiguration(); mc.testit(); }, createconfiguration: function () { var size = document.
getelementbyid('size').value.split('x'); mc.videoconfiguration = { type: 'file', video: { contenttype: document.
getelementbyid('codec').value, width: size[0], height: size[1], bitrate: document.
getelementbyid('bitrate').value, framerate: document.
getelementbyid('framerate').value, } } }, testit: function () { let content = '';...
...' is ' : ' is not ') + 'power efficient.'; var ul = document.
getelementbyid("results") li.innerhtml = content; ul.appendchild(li); }).catch((error) => { var li = document.createelement('li'), ul = document.
getelementbyid("results"); li.innertext = 'codec ' + mc.videoconfiguration.video.contenttype + ' threw an error: ' + error; ul.appendchild(li); }); } } document.
getelementbyid('tryit').addeventlisten...
MessageEvent - Web APIs
the messageevent interface represents a message received by a tar
get object.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 13.333333333333334%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 80" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/messageevent" tar
get="_top"><rect x="116" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">messageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor messageevent() creates a new messageevent.
MessagePort - Web APIs
methods inherits methods from its parent, eventtar
get postmessage() sends a message from the port, and optionally, transfers ownership of objects to other browsing contexts.
... start() starts the sending of messages queued on the port (only needed when using eventtar
get.addeventlistener; it is implied when using messageport.onmessage.) close() disconnects the port, so it is no longer active.
... event handlers inherits event handlers from its parent, eventtar
get onmessage an eventlistener called when messageevent of type message is fired on the port—that is, when the port receives a message.
msPlayToPreferredSourceUri - Web APIs
msplaytopreferredsourceuri is a read/write property which
gets or sets the path to the preferred media source.
... this enables the playto tar
get device to stream the media content, which can be drm protected, from a different location, such as a cloud media server.
... syntax ptr = object.msplaytopreferredsourceuri; value msplaytopreferredsourceuri enables a playto reference (a uri or url) for streaming content on the playto tar
get device from a different location, such as a cloud media server.
MutationObserverInit.attributes - Web APIs
subtree lets you specify whether to watch the tar
get node and all of its descendants (true), or just the tar
get node (false).
... function callback(mutationlist) { mutationlist.foreach(function(mutation) { switch(mutation.type) { case "attributes": notifyuser("attribute name " + mutation.attributename + " changed to " + mutation.tar
get[mutation.attributename] + " (was " + mutation.oldvalue + ")"); break; } }); } var tar
getnode = document.queryselector("#tar
get"); var observer = new mutationobserver(callback); observer.observe(tar
getnode, { attributes: true, attributeoldvalue: true }); the callback() function—which will be passed into the observe() method when starting the observer, looks at ea...
...for any items representing an attribute change (which can be detected by the value of mutationrecord.type being "attributes"), a function called notifyuser() is used to tell the user the name of the attribute that changed as well as the attribute's new value (mutation.tar
get[mutation.attributename]) and its old value (mutation.oldvalue).
NDEFReader - Web APIs
properties in addition to the properties listed below, ndefreader inherits properties from its parent interface, eventtar
get.
... methods the ndefreader interface inherits the methods of eventtar
get, its parent interface.
... ndefreader.scan() called to activate the reader (after ensuring hardware and ua compatibility and obtaining permission from the user) or
get an error explaining why feature is not available.
NamedNodeMap - Web APIs
namednodemap.
getnameditem() returns a attr, corresponding to the given name.
... namednodemap.
getnameditemns() returns a attr identified by a namespace and related local name.
... obsolete added
getnameditemns(), setnameditemns() and removenameditemns() document object model (dom) level 1 specificationthe definition of 'namednodemap' in that specification.
Navigator - Web APIs
navigator.battery read only returns a batterymanager object you can use to
get information about the battery charging status.
... navigator.mediadevices returns a reference to a mediadevices object which can then be used to
get information about available media devices (mediadevices.enumeratedevices()), find out what constrainable properties are supported for media on the user's computer and user agent (mediadevices.
getsupportedconstraints()), and to request access to media using mediadevices.
getusermedia().
... navigator.
getusermedia() after having prompted the user for permission, returns the audio or video stream associated to a camera or microphone on the local computer.
NavigatorPlugins.plugins - Web APIs
function
getflashversion() { var flash = navigator.plugins.nameditem('shockwave flash'); if (typeof flash != 'object') { // flash is not present return undefined; } if(flash.version){ return flash.version; } else { //no version property (e.g.
... var pluginslength = navigator.plugins.length; document.body.innerhtml = pluginslength + " plugin(s)<br>" + '<table id="plugintable"><thead>' +'<tr><th>name</th><th>filename</th><th>description</th><th>version</th></tr>' +'</thead><tbody></tbody></table>'; var table = document.
getelementbyid('plugintable'); for(var i = 0; i < pluginslength; i++) { let newrow = table.insertrow(); newrow.insertcell().textcontent = navigator.plugins[i].name; newrow.insertcell().textcontent = navigator.plugins[i].filename; newrow.insertcell().textcontent = navigator.plugins[i].description; newrow.insertcell().textcontent = navigator.plugins[i].version?navigator.plugins[i].version:""...
...; } notes the plugin object exposes a small interface for
getting information about the various plugins installed in your browser.
Node.childNodes - Web APIs
to
get data from node objects, use their properties.
... (for example, to
get the name of the first childnode: elementnodereference.childnodes[1].nodename.) the document object itself has 2 children: the doctype declaration and the root element, typically referred to as documentelement.
...to
get a collection of only elements, use parentnode.children instead.
Node.insertBefore() - Web APIs
example example 1 <div id="parentelement"> <span id="childelement">foo bar</span> </div> <script> // create the new node to insert let newnode = document.createelement("span") //
get a reference to the parent node let parentdiv = document.
getelementbyid("childelement").parentnode // begin test case [ 1 ] : existing childelement (all works correctly) let sp2 = document.
getelementbyid("childelement") parentdiv.insertbefore(newnode, sp2) // end test case [ 1 ] // begin test case [ 2 ] : childelement is of type undefined let sp2 = undefined // non-existent node of id "childelem...
...delement is of type "undefined" ( string ) let sp2 = "undefined" // non-existent node of id "childelement" parentdiv.insertbefore(newnode, sp2) // generates "type error: invalid argument" // end test case [ 3 ] </script> example 2 <div id="parentelement"> <span id="childelement">foo bar</span> </div> <script> // create a new, plain <span> element let sp1 = document.createelement("span") //
get the reference element let sp2 = document.
getelementbyid("childelement") //
get the parent element let parentdiv = sp2.parentnode // insert the new element into before sp2 parentdiv.insertbefore(sp1, sp2) </script> note: there is no insertafter() method.
... //
get the parent element let parentelement = document.
getelementbyid('parentelement') //
get the parent's first child let thefirstchild = parentelement.firstchild // create a new element let newelement = document.createelement("div") // insert the new element before the first child parentelement.insertbefore(newelement, thefirstchild) when the element does not have a first child, then firstchild is...
NonDocumentTypeChildNode.nextElementSibling - Web APIs
syntax var nextnode = elementnodereference.nextelementsibling; example <div id="div-01">here is div-01</div> <div id="div-02">here is div-02</div> <script type="text/javascript"> var el = document.
getelementbyid('div-01').nextelementsibling; console.log('siblings of div-01:'); while (el) { console.log(el.nodename); el = el.nextelementsibling; } </script> this example outputs the following into the console when it loads: siblings of div-01: div script polyfill for internet explorer 8 this property is unsupported prior to ie9, so the following snippet can be used to add suppor...
...t to ie8: // source: https://github.com/alhadis/snippets/blob/master/js/polyfills/ie8-child-elements.js if(!("nextelementsibling" in document.documentelement)){ object.defineproperty(element.prototype, "nextelementsibling", {
get: function(){ var e = this.nextsibling; while(e && 1 !== e.nodetype) e = e.nextsibling; return e; } }); } polyfill for internet explorer 9+ and safari // source: https://github.com/jserz/js_piece/blob/master/dom/nondocumenttypechildnode/nextelementsibling/nextelementsibling.md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('nextelementsibling')) { return; } object.defineproperty(item, 'nextelementsibling', { configurable: true, enumer...
...able: true,
get: function () { var el = this; while (el = el.nextsibling) { if (el.nodetype === 1) { return el; } } return null; }, set: undefined }); }); })([element.prototype, characterdata.prototype]); specifications specification status comment domthe definition of 'childnodenextelementsibling' in that specification.
NonDocumentTypeChildNode.previousElementSibling - Web APIs
syntax prevnode = elementnodereference.previouselementsibling; example <div id="div-01">here is div-01</div> <div id="div-02">here is div-02</div> <li>this is a list item</li> <li>this is another list item</li> <div id="div-03">here is div-03</div> <script> let el = document.
getelementbyid('div-03').previouselementsibling; document.write('<p>siblings of div-03</p><ol>'); while (el) { document.write('<li>' + el.nodename + '</li>'); el = el.previouselementsibling; } document.write('</ol>'); </script> this example outputs the following into the page when it loads: siblings of div-03 1.
...div polyfills polyfill for internet explorer 8 this property is unsupported prior to ie9, so the following snippet can be used to add support to ie8: // source: https://github.com/alhadis/snippets/blob/master/js/polyfills/ie8-child-elements.js if(!("previouselementsibling" in document.documentelement)){ object.defineproperty(element.prototype, "previouselementsibling", {
get: function(){ var e = this.previoussibling; while(e && 1 !== e.nodetype) e = e.previoussibling; return e; } }); } polyfill for internet explorer 9+ and safari // source: https://github.com/jserz/js_piece/blob/master/dom/nondocumenttypechildnode/previouselementsibling/previouselementsibling.md (function (arr) { arr.foreach(function (item) { if (item.hasownpro...
...perty('previouselementsibling')) { return; } object.defineproperty(item, 'previouselementsibling', { configurable: true, enumerable: true,
get: function () { let el = this; while (el = el.previoussibling) { if (el.nodetype === 1) { return el; } } return null; }, set: undefined }); }); })([element.prototype, characterdata.prototype]); specifications specification status comment domthe definition of 'nondocumenttypechildnode.previouselementsibling' in that specification.
OES_standard_derivatives - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... constants this extension exposes one new constant, which can be used in the hint() and
getparameter() methods.
... glsl built-in functions the following new functions can be used in glsl shader code, if this extension is enabled: gentype dfdx(gentype) gentype dfdy(gentype) gentype fwidth(gentype) examples enabling the extensions: gl.
getextension('oes_standard_derivatives'); gl.
getextension('ext_shader_texture_lod'); shader code that avoids artifacts when wrapping texture coordinates: <script type="x-shader/x-fragment"> #extension gl_ext_shader_texture_lod : enable #extension gl_oes_standard_derivatives : enable uniform sampler2d mytexture; varying vec2 texcoord; void main(){ gl_fragcolor = texture2dgradext(mytexture, mod(texcoord...
OES_vertex_array_object - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... constants this extension exposes one new constant, which can be used in the gl.
getparameter() method: ext.vertex_array_binding_oes returns a webglvertexarrayobject object when used in the gl.
getparameter() method as the pname parameter.
... examples var oes_vao_ext = gl.
getextension('oes_vertex_array_object'); var vao = oes_vao_ext.createvertexarrayoes(); oes_vao_ext.bindvertexarrayoes(vao); // ...
OrientationSensor.populateMatrix() - Web APIs
the populatematrix method of the orientationsensor interface populates the given tar
get matrix with the rotation matrix based on the latest sensor reading.
... syntax orientationinstance.populatematrix(tar
getmatrix) because orientationsensor is a base class, populatematrix may only be read from one of its derived classes.
... parameters tar
getmatrix tbd return value undefined example // tbd specifications specification status comment orientation sensorthe definition of 'populatematrix' in that specification.
OscillatorNode.setPeriodicWave() - Web APIs
you can think of it as the result of a fourier transform, where you
get frequency domain values from time domain value.
... here, with createperiodicwave(), you specify the frequencies, and the browser performs a an inverse fourier transform to
get a time domain buffer for the frequency of the oscillator.
... here, we only set one component at full volume (1.0) on the fundamental tone, so we
get a sine wave.
Using the Payment Request API - Web APIs
const checkoutbutton = document.
getelementbyid('checkout-button'); if (window.paymentrequest) { let request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); checkoutbutton.addeventlistener('click', function() { request.show().then(function(paymentresponse) { // handle successful payment }).catch(function(error) { // handle cancelled or failed payment.
... const checkoutbutton = document.
getelementbyid('checkout-button'); checkoutbutton.innertext = "loading..."; if (window.paymentrequest) { let request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); request.canmakepayment().then(function(canmakeafastpayment) { if (canmakeafastpayment) { checkoutbutton.innertext = "fast checkout with w3c"; } else { checkoutbutton.inne...
... const additionaldetailscontainer = document.
getelementbyid('additional-details-container'); additionaldetailscontainer.style.display = 'block'; window.scrollto(additionaldetailscontainer.
getboundingclientrect().x, 0); }).catch(function(error) { // handle error.
PerformanceEventTiming - Web APIs
performanceeventtiming.tar
get returns the associated event's last tar
get, if it is not removed.
... examples the following example shows how to use the api for all events: const observer = new performanceobserver(function(list) { const perfentries = list.
getentries().foreach(entry => { // full duration const inputduration = entry.duration; // input delay (before processing event) const inputdelay = entry.processingstart - entry.starttime; // synchronous event processing time (between start and end dispatch).
... const po = new performanceobserver((entrylist) => { entrylist.
getentries().foreach(onfirstinputentry); }); // observe entries of type `first-input`, including buffered entries, // i.e.
PerformanceObserver.observe() - Web APIs
may not be used to
gether with the "type" or "buffered" options.
... may not be used to
gether with the entrytypes option.
... var observer = new performanceobserver(function(list, obj) { var entries = list.
getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status comment ...
PerformancePaintTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" tar
get="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25"...
... stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancepainttiming" tar
get="_top"><rect x="201" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancepainttiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties (for "paint" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "paint".
... example function showpainttimings() { if (window.performance) { let performance = window.performance; let performanceentries = performance.
getentriesbytype('paint'); performanceentries.foreach( (performanceentry, i, entries) => { console.log("the time to " + performanceentry.name + " was " + performanceentry.starttime + " milliseconds."); }); } else { console.log('performance timing isn\'t supported.'); } } the code above produces console output something like the following: the time to first-paint was 2785.915 millisecond...
PeriodicWave - Web APIs
you can think of it as the result of a fourier transform, where you
get frequency domain values from time domain value.
... here, with createperiodicwave(), you specify the frequencies, and the browser performs an inverse fourier transform to
get a time domain buffer for the frequency of the oscillator.
... here, we only set one component at full volume (1.0) on the fundamental tone, so we
get a sine wave.
PhotoCapabilities - Web APIs
a photocapabilities object is retrieved by calling imagecapture.
getphotocapabilities().
... example the following example, extracted from chrome's image capture / photo resolution sample, uses the results from
getphotocapabilities() to modify the size of an input range.
... const input = document.queryselector('input[type="range"]'); var imagecapture; navigator.mediadevices.
getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.
getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.
getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.track.
getsettings(); input.min = photocapabilities.imagewidth.min; input.max = photocapabilities.imagewidth.max; input.step = photocapabilities.imagewidth.step; return imagecapture.
getphotosettings(); }) .then(photosettings => { input.value = p...
ProgressEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/progressevent" tar
get="_top"><rect x="116" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">progressevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor progressevent() creates a progressevent event with the given parameters.
... var progressbar = document.
getelementbyid("p"), client = new xmlhttprequest() client.open("
get", "magical-unicorns") client.onprogress = function(pe) { if(pe.lengthcomputable) { progressbar.max = pe.total progressbar.value = pe.loaded } } client.onloadend = function(pe) { progressbar.value = pe.loaded } client.send() specifications specification status comment xmlhttprequestthe defin...
PublicKeyCredential.response - Web APIs
an authenticatorresponse is either: an authenticatorattestationresponse (when the publickeycredential is created via credentialscontainer.create()) an authenticatorassertionresponse (when the publickeycredential is obtained via credentialscontainer.
get()).
... in order to validate the creation of credentials, a relying party's server needs both: this response the extensions of the client (given by publickeycredential.
getclientextensionresults()) to validate the demand.
...le.com" }, user: { id: new uint8array(16) /* from the server */, name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey: options }) .then(function (pubkeycredential) { var response = pubkeycredential.response; var clientextresults = pubkeycredential.
getclientextensionresults(); // send response and client extensions to the server so that it can validate // and create credentials }).catch(function (err) { // deal with any error }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'response' in that specification.
PushRegistrationManager - Web APIs
returns an interface to register or unregister a push registration,
get an active registration, or check the permission status of the registration.
... pushregistrationmanager.
getregistration() returns a promise that resolves the pushregistration associated with the current webapp.
... samsung internet android no support no
getregistration experimentaldeprecatedchrome no support noedge no support nofirefox ?
RTCDataChannel - Web APIs
propertiesalso inherits properties from: eventtar
getbinarytype the property binarytype on the rtcdatachannel interface is a domstring which specifies the type of javascript object which should be used to represent binary data received on the rtcdatachannel.
...ction.reliable read only the read-only rtcdatachannel property reliable indicates whether or not the data channel is reliable.stream read only the deprecated (and never part of the official specification) read-only rtcdatachannel property stream returns an id number (between 0 and 65,535) which uniquely identifies the rtcdatachannel.event handlersalso inherits event handlers from: eventtar
getonbufferedamountlow the rtcdatachannel.onbufferedamountlow property is an eventhandler which specifies a function the browser calls when the bufferedamountlow event is sent to the rtcdatachannel.
...hen a message is received from the other peer.onopen the rtcdatachannel.onopen property is an eventhandler which specifies a function to be called when the open event is fired; this is a simple event which is sent when the data channel's underlying data transport—the link over which the rtcdatachannel's messages flow—is established or re-established.methodsalso inherits methods from: eventtar
getclose()the rtcdatachannel.close() method closes the rtcdatachannel.
RTCIceCandidatePair - Web APIs
the rtcicecandidatepair dictionary describes a pair of ice candidates which to
gether comprise a description of a viable connection between two webrtc endpoints.
... it is used as the return value from rtcicetransport.
getselectedcandidatepair() to identify the currently-selected candidate pair identified by the ice agent.
... var icetransport = pc.
getsenders()[0].transport.icetransport; var localproto = document.
getelementbyid("local-protocol"); var remoteproto = document.
getelementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = function(event) { var pair = icetransport.
getselectedcandidatepair(); localprotocol.innertext = pair.local.protocol.touppercase(); remoteprotocol.innertext = pair.remote.protocol.touppercas...
RTCIceTransport: selectedcandidatepairchange event - Web APIs
to
gether, the candidates can be used to establish a connection to be used by the rtcicetransport, and, by extension, by an rtcpeerconnection.
... let icetransport = pc.
getsenders[0].transport.icetransport; let localprotoelem = document.
getelementbyid("local-protocol"); let remoteprotoelem = document.
getelementbyid("remote-protocol"); icetransport.addeventlistener("selectedcandidatepairchange", ev => { let pair = icetransport.
getselectedcandidatepair(); localprotoelem.innertext = pair.local.protocol.touppercase(); remoteprotoelem.innertext = pair.remote.protocol.touppercas...
... let icetransport = pc.
getsenders[0].transport.icetransport; let localprotoelem = document.
getelementbyid("local-protocol"); let remoteprotoelem = document.
getelementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = ev => { let pair = icetransport.
getselectedcandidatepair(); localprotoelem.innertext = pair.local.protocol.touppercase(); remoteprotoelem.innertext = pair.remote.protocol.touppercase(); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'selectedcandidatepairchange' in that specification.
RTCInboundRtpStreamStats - Web APIs
this id is stable across multiple calls to
getstats().
...this id is stable across multiple calls to
getstats().
...this id is stable across multiple calls to
getstats().
RTCOutboundRtpStreamStats - Web APIs
this id is stable across multiple calls to
getstats().
... tar
getbitrate a value indicating the bit rate the rtcrtpsender's codec is configured to attempt to achieve in its output media.
... totalencodedbytestar
get a cumulative sum of the tar
get frame sizes (the tar
geted maximum size of the frame in bytes when the codec is asked to compress it) for all of the frames encoded so far.
RTCPeerConnection.setRemoteDescription() - Web APIs
errorcallback a function matching the signautre rtcpeerconnectionerrorcallback which
gets called if the description can't be set.
... function handleoffer(msg) { createmypeerconnection(); mypeerconnection.setremotedescription(msg.description).then(function () { return navigator.mediadevices.
getusermedia(mediaconstraints); }) .then(function(stream) { document.
getelementbyid("local_video").srcobject = stream; return mypeerconnection.addstream(stream); }) .then(function() { return mypeerconnection.createanswer(); }) .then(function(answer) { return mypeerconnection.setlocaldescription(answer); }) .then(function() { // send the answer to the remote peer us...
...ing the signaling server }) .catch(handle
getusermediaerror); } after creating our rtcpeerconnection and saving it as mypeerconnection, we pass the description included in the received offer message, msg, directly into setremotedescription() to tell the user agent's webrtc layer what configuration the caller has proposed using.
RTCSctpTransport - Web APIs
you don't create rtcsctptransport objects yourself; instead, you
get access to the rtcsctptransport for a given rtcpeerconnection through its sctp property.
... properties also inherits properties from: eventtar
get rtcsctptransport.maxchannelsread only an integer value indicating the maximum number of rtcdatachannels that can be open simultaneously.
... methods this interface has no methods, but inherits methods from: eventtar
get example tbd specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcsctptransport' in that specification.
Range.selectNodeContents() - Web APIs
example range = document.createrange(); referencenode = document.
getelementsbytagname("div")[0]; range.selectnodecontents(referencenode); live sample this example lets the user select and deselect a paragraph with buttons.
...window.
getselection() and selection.removeallranges() are used to deselect it.
... html <p id="p"><b>use the buttons below</b> to select or deselect the contents of this paragraph.</p> <button id="select-button">select paragraph</button> <button id="deselect-button">deselect paragraph</button> javascript const p = document.
getelementbyid('p'); const selectbutton = document.
getelementbyid('select-button'); const deselectbutton = document.
getelementbyid('deselect-button'); selectbutton.addeventlistener('click', e => { // clear any current selection const selection = window.
getselection(); selection.removeallranges(); // select paragraph const range = document.createrange(); range.selectnodecontents(p); selection.addrange(range); }); deselectbutton.addeventlistener('click', e => { const selection = window.
getselection(); selection.removeallranges(); ...
Range.setStart() - Web APIs
main st.<br> dodge city, ks<br> 67801<br> usa</p> <hr> <p>nodes in the original address:</p> <ol id="log"></ol> javascript const address = document.
getelementbyid('address'); const log = document.
getelementbyid('log'); // log info address.childnodes.foreach(node => { const li = document.createelement('li'); li.textcontent = `${node.nodename}, ${node.nodevalue}`; log.appendchild(li); }); // highlight the street and city const startoffset = 2; // start at third node: 101 e.
...const endoffset = 5; // end at fifth node: dodge city, ks const range = document.createrange(); range.setstart(address, startoffset); range.setend(address, endoffset); const mark = document.createelement('mark'); range.surroundcontents(mark); result
get characters from a text node this example uses the range.setstart() and range.setend() methods to define the contents of a range.
... html <p id="content">0123456789</p> <p id="log"></p> javascript const element = document.
getelementbyid('content'); const textnode = element.childnodes[0]; const range = document.createrange(); range.setstart(textnode, 0); // start at first character range.setend(textnode, 5); // end at fifth character document.
getelementbyid('log').textcontent = range; result specifications specification status comment domthe definition of 'range.setstart()' in that specification.
ReadableStreamDefaultReader.ReadableStreamDefaultReader() - Web APIs
note: you generally wouldn't use this constructor manually; instead, you'd use the readablestream.
getreader() method.
... examples in the following simple example, a previously-created custom readablestream is read using a readablestreamdefaultreader created using
getreader().
... function fetchstream() { const reader = stream.
getreader(); let charsreceived = 0; // read() returns a promise that resolves // when a value has been received reader.read().then(function processtext({ done, value }) { // result objects contain two properties: // done - true if the stream has already given you all its data.
ReadableStreamDefaultReader.cancel() - Web APIs
to read those chunks still and not completely
get rid of the stream, you'd use readablestreamdefaultcontroller.close().
... examples in the following simple example, a previously-created custom readablestream is read using a readablestreamdefaultreader created using
getreader().
... function fetchstream() { const reader = stream.
getreader(); let charsreceived = 0; // read() returns a promise that resolves // when a value has been received reader.read().then(function processtext({ done, value }) { // result objects contain two properties: // done - true if the stream has already given you all its data.
ReadableStreamDefaultReader.read() - Web APIs
it is read using a readablestreamdefaultreader created using
getreader().
... function fetchstream() { const reader = stream.
getreader(); let charsreceived = 0; // read() returns a promise that resolves // when a value has been received reader.read().then(function processtext({ done, value }) { // result objects contain two properties: // done - true if the stream has already given you all its data.
... async function* maketextfilelineiterator(fileurl) { const utf8decoder = new textdecoder("utf-8"); let response = await fetch(fileurl); let reader = response.body.
getreader(); let {value: chunk, done: readerdone} = await reader.read(); chunk = chunk ?
Request - Web APIs
request.method read only contains the request's method (
get, post, etc.) request.mode read only contains the mode of the request (e.g., cors, no-cors, same-origin, navigate.) request.redirect read only contains the mode for how redirects are handled.
... request implements body, so it also inherits the following properties: body read only a simple
getter used to expose a readablestream of the body contents.
... you could then fetch this api request by passing the request object in as a parameter to a windoworworkerglobalscope.fetch() call, for example and
get the response: fetch(request) .then(response => { if (response.status === 200) { return response.json(); } else { throw new error('something went wrong on api server!'); } }) .then(response => { console.debug(response); // ...
SVGAElement - Web APIs
svgaelement.tar
get read only it corresponds to the tar
get attribute of the given element.
... example in the example below, the tar
get attribute of the <a> element is set to _blank and when the link is clicked, it logs to notify whether the condition is met or not.
... var linkref = document.queryselector("a"); linkref.tar
get = "_self"; linkref.onclick = function(){ if (linkref.tar
get === "_blank") { console.log("blank!"); linkref.tar
get = "_self"; } else { console.log("sorry!
SVGClipPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgclippathelement" tar
get="_top"><rect x="301" y="65" width="180"...
SVGComponentTransferFunctionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" tar
get="_top"><rect x="131" y...
SVGCursorElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcursorelement" tar
get="_top"><rect x="321" y="65" width="160" h...
SVGDescElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgdescelement" tar
get="_top"><rect x="341" y="65" width="140" hei...
SVGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement, svgelementinstance svgelement.datasetread only a domstringmap object which provides a list of key/value pairs of na...
SVGFEBlendElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeblendelement" tar
get="_top"><rect x="311" y="65" width="170" ...
SVGFEColorMatrixElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecolormatrixelement" tar
get="_top"><rect x="251" y="65" width=...
SVGFEComponentTransferElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecomponenttransferelement" tar
get="_top"><rect x="191" y="65" ...
SVGFECompositeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecompositeelement" tar
get="_top"><rect x="271" y="65" width="2...
SVGFEDiffuseLightingElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfediffuselightingelement" tar
get="_top"><rect x="211" y="65" wi...
SVGFEDisplacementMapElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedisplacementmapelement" tar
get="_top"><rect x="211" y="65" wi...
SVGFEDistantLightElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedistantlightelement" tar
get="_top"><rect x="241" y="65" width...
SVGFEDropShadowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedropshadowelement" tar
get="_top"><rect x="261" y="65" width="...
SVGFEFloodElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefloodelement" tar
get="_top"><rect x="311" y="65" width="170" ...
SVGFEGaussianBlurElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfegaussianblurelement" tar
get="_top"><rect x="241" y="65" width...
SVGFEImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeimageelement" tar
get="_top"><rect x="311" y="65" width="170" ...
SVGFEMergeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemergeelement" tar
get="_top"><rect x="311" y="65" width="170" ...
SVGFEMergeNodeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemergenodeelement" tar
get="_top"><rect x="271" y="65" width="2...
SVGFEMorphologyElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemorphologyelement" tar
get="_top"><rect x="261" y="65" width="...
SVGFEOffsetElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeoffsetelement" tar
get="_top"><rect x="301" y="65" width="180"...
SVGFEPointLightElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfepointlightelement" tar
get="_top"><rect x="261" y="65" width="...
SVGFESpecularLightingElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfespecularlightingelement" tar
get="_top"><rect x="201" y="65" w...
SVGFESpotLightElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfespotlightelement" tar
get="_top"><rect x="271" y="65" width="2...
SVGFETileElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfetileelement" tar
get="_top"><rect x="321" y="65" width="160" h...
SVGFETurbulenceElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeturbulenceelement" tar
get="_top"><rect x="261" y="65" width="...
SVGFilterElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfilterelement" tar
get="_top"><rect x="321" y="65" width="160" h...
SVGGradientElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" tar
get="_top"><rect x="301" y="65" width="180"...
SVGMPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmpathelement" tar
get="_top"><rect x="331" y="65" width="150" he...
SVGMaskElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmaskelement" tar
get="_top"><rect x="341" y="65" width="140" hei...
SVGMetadataElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmetadataelement" tar
get="_top"><rect x="301" y="65" width="180"...
SVGPatternElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgpatternelement" tar
get="_top"><rect x="311" y="65" width="170" ...
SVGScriptElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgscriptelement" tar
get="_top"><rect x="321" y="65" width="160" h...
SVGStopElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgstopelement" tar
get="_top"><rect x="341" y="65" width="140" hei...
SVGStyleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgstyleelement" tar
get="_top"><rect x="331" y="65" width="150" he...
SVGSymbolElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgsymbolelement" tar
get="_top"><rect x="321" y="65" width="160" h...
SVGTitleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" tar
get="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline...
... points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" tar
get="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtitleelement" tar
get="_top"><rect x="331" y="65" width="150" he...
SVGViewElement - Web APIs
svgviewelement.viewtar
get an svgstringlist corresponding to the viewtar
get attribute of the given <view> element.
... a list of domstring values which contain the names listed in the viewtar
get attribute.
... each of the domstring values can be associated with the corresponding element using the
getelementbyid() method call.
ScriptProcessorNode.onaudioprocess - Web APIs
lector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function
getdata() { request = new xmlhttprequest(); request.open('
get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } ...
...is the song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.
getchanneldata(channel); var outputdata = outputbuffer.
getchanneldata(channel); // loop through the 4096 samples for (var sample = 0; sample < inputbuffer.length; sample++) { // make output equal to the same as the input outputdata[sample] = inputdata[sample]; // add noise to each output sample outputdata[sample] += ((math.random() * 2) - 1) * 0.2; }...
... } }
getdata(); // wire up play button playbutton.onclick = function() { source.connect(scriptnode); scriptnode.connect(audioctx.destination); source.start(); } // when the buffer source stops playing, disconnect everything source.onended = function() { source.disconnect(scriptnode); scriptnode.disconnect(audioctx.destination); } specifications specification status comment web audio apithe definition of 'onaudioprocess' in that specification.
Using server-sent events - Web APIs
the client script is on example.com: const evtsource = new eventsource("//api.example.com/ssedemo.php", { withcredentials: true } ); once you've instantiated your event source, you can begin listening for messages from the server by attaching a handler for the message event: evtsource.onmessage = function(event) { const newelement = document.createelement("li"); const eventlist = document.
getelementbyid("list"); newelement.innerhtml = "message: " + event.data; eventlist.appendchild(newelement); } this code listens for incoming messages (that is, notices from the server that do not have an event field on them) and appends the message text to a list in the document's html.
...: {"username": "bobby", "time": "02:33:48"} event: usermessage data: {"username": "bobby", "time": "02:34:11", "text": "hi everyone."} event: userdisconnect data: {"username": "bobby", "time": "02:34:23"} event: usermessage data: {"username": "sean", "time": "02:34:36", "text": "bye, bobby."} mixing and matching you don't have to use just unnamed messages or typed events; you can mix them to
gether in a single event stream.
... event: userconnect data: {"username": "bobby", "time": "02:33:48"} data: here's a system message of some kind that will
get used data: to accomplish some task.
ServiceWorkerGlobalScope - Web APIs
this interface inherits from the workerglobalscope interface, and its parent eventtar
get, and therefore implements properties from windowtimers, windowbase64, and windoweventhandlers.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 12.142857142857142%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 85" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/work...
...erglobalscope" tar
get="_top"><rect x="151" y="1" width="170" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">workerglobalscope</text></a><polyline points="321,25 331,20 331,30 321,25" stroke="#d4dde4" fill="none"/><line x1="331" y1="25" x2="361" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/serviceworkerglobalscope" tar
get="_top"><rect x="361" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="481" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">serviceworkerglobalscope</text></a></s...
ShadowRoot - Web APIs
documentorshadowroot.
getselection() returns a selection object representing the range of text selected by the user, or the current position of the caret.
... connectedcallback() { console.log('custom square element added to page.'); updatestyle(this); } attributechangedcallback(name, oldvalue, newvalue) { console.log('custom square element attributes changed.'); updatestyle(this); } in the updatestyle() function itself, we
get a reference to the shadow dom using element.shadowroot.
...use standard dom traversal techniques to find the <style> element inside the shadow dom and then update the css found inside it: function updatestyle(elem) { var shadow = elem.shadowroot; var childnodes = shadow.childnodes; for(var i = 0; i < childnodes.length; i++) { if(childnodes[i].nodename === 'style') { childnodes[i].textcontent = 'div {' + 'width: ' + elem.
getattribute('l') + 'px;' + 'height: ' + elem.
getattribute('l') + 'px;' + 'background-color: ' + elem.
getattribute('c') + ';' + '}'; } } } specifications specification status comment domthe definition of 'interface shadowroot' in that specification.
SharedWorkerGlobalScope - Web APIs
properties this interface inherits properties from the workerglobalscope interface, and its parent eventtar
get, and therefore implements properties from windowtimers, windowbase64, and windoweventhandlers.
... event handlers this interface inherits event handlers from the workerglobalscope interface, and its parent eventtar
get, and therefore implements event handlers from windowtimers, windowbase64, and windoweventhandlers.
... methods this interface inherits methods from the workerglobalscope interface, and its parent eventtar
get, and therefore implements methods from windowtimers, windowbase64, and windoweventhandlers.
SpeechRecognitionResult.item() - Web APIs
the item
getter of the speechrecognitionresult interface is a standard
getter that allows speechrecognitionalternative objects within the result to be accessed via array syntax.
... // it has a
getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0.
... // these also have
getters so they can be accessed like arrays.
SpeechRecognitionResult - Web APIs
speechrecognitionresult.length read only returns the length of the "array" — the number of speechrecognitionalternative objects contained in the result (also referred to as "n-best alternatives".) methods speechrecognitionresult.item a standard
getter that allows speechrecognitionalternative objects within the result to be accessed via array syntax.
... // it has a
getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0.
... // these also have
getters so they can be accessed like arrays.
SpeechRecognitionResultList.item() - Web APIs
the item
getter of the speechrecognitionresultlist interface is a standard
getter — it allows speechrecognitionresult objects in the list to be accessed via array syntax.
... // it has a
getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0.
... // these also have
getters so they can be accessed like arrays.
SpeechRecognitionResultList - Web APIs
methods speechrecognitionresultlist.item a standard
getter that allows speechrecognitionresult objects in the list to be accessed via array syntax.
... // it has a
getter so it can be accessed like an array // the first [0] returns the speechrecognitionresult at position 0.
... // these also have
getters so they can be accessed like arrays.
SpeechSynthesis.onvoiceschanged - Web APIs
the onvoiceschanged property of the speechsynthesis interface represents an event handler that will run when the list of speechsynthesisvoice objects that would be returned by the speechsynthesis.
getvoices() method has changed (when the voiceschanged event fires.) this may occur when speech synthesis is being done on the server-side and the voices list is being determined asynchronously, or when client-side voices are installed/uninstalled while a speech synthesis application is running.
...}; examples this could be used to populate a list of voices that the user can choose between when the event fires (see our speak easy synthesis demo.) note that firefox doesn't support it at present, and will just return a list of voices when speechsynthesis.
getvoices() is fired.
... var voices = []; function populatevoicelist() { voices = synth.
getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } specifications specification status comment ...
SpeechSynthesisUtterance.lang - Web APIs
the lang property of the speechsynthesisutterance interface
gets and sets the language of the utterance.
... examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.
getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].
getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.lang = 'en-us'; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'lang' in that specification.
SpeechSynthesisUtterance.pitch - Web APIs
the pitch property of the speechsynthesisutterance interface
gets and sets the pitch at which the utterance will be spoken at.
... examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.
getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].
getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = 1.5; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'pitch' in that specification.
SpeechSynthesisUtterance.rate - Web APIs
the rate property of the speechsynthesisutterance interface
gets and sets the speed at which the utterance will be spoken at.
... examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.
getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].
getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.rate = 1.5; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'rate' in that specification.
SpeechSynthesisUtterance.text - Web APIs
the text property of the speechsynthesisutterance interface
gets and sets the text that will be synthesised when the utterance is spoken.
... examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.
getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].
getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } console.log(utterthis.text); synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'text' in that specification.
SpeechSynthesisUtterance.volume - Web APIs
the volume property of the speechsynthesisutterance interface
gets and sets the volume that the utterance will be spoken at.
... examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.
getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].
getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.volume = 0.5; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'volume' in that specification.
StaticRange - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/abstractrange" tar
get="_top"><rect x="1" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">abstractrange</text></a><polyline points="131,25 141,20 141,30 131,25" stroke="#d4dde4" fill="none"/><line x1="141" y1="25" x2="171" y2="25" st...
...roke="#d4dde4"/><a xlink:href="/docs/web/api/staticrange" tar
get="_top"><rect x="171" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">staticrange</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor staticrange() creates a new staticrange object given the staticrangeinit dictionary specifying the default values for its properties.
... living standard static ran
gethe definition of 'staticrange' in that specification.
Using writable streams - Web APIs
getting access to the underlying sink.
... writing to actually write content to the stream we call the sendmessage() function, passing it a message to be written and the stream to write to: sendmessage("hello, world.", writablestream); the sendmessage() definition looks like so: function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.
getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // ca...
... defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } so here we create a writer to write the chunks to the stream using writablestream.
getwriter().
StylePropertyMapReadOnly - Web APIs
stylepropertymapreadonly.
get() returns the value of the specified property.
... stylepropertymapreadonly.
getall() returns an array of cssstylevalue objects containing the values for the provided property.
... //
get the element const myelement = document.queryselector('p'); //
get the <dl> we'll be populating const styleslist = document.queryselector('#output'); // retrieve all computed styles with computedstylemap() const stylepropertymap = myelement.computedstylemap(); // iterate thru the map of all the properties and values, adding a <dt> and <dd> for each for (const [prop, val] of stylepropertymap) { ...
SubtleCrypto - Web APIs
access to the features of subtlecrypto is obtained through the subtle property of the crypto object you
get from window.crypto.
... even assuming you use the basic cryptographic functions correctly, secure key management and overall security system design are extremely hard to
get right, and are generally the domain of specialist security experts.
...if you provide the same keying material to two separate calls to derivekey(), you will
get two cryptokey objects that have the same underlying value.
Text - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" tar
get="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></...
...a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/text" tar
get="_top"><rect x="436" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">text</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor text() returns a text node with the parameter as its textual content.
Touch.force - Web APIs
in following code snippet, the touchstart event handler iterrates through the tar
gettouches list and logs the force value of each touch point but the code could invoke different processing depending on the value.
... for (var i=0; i < e.tar
gettouches.length; i++) { // add code to "switch" based on the force value.
... console.log("tar
gettouches[" + i + "].force = " + e.tar
gettouches[i].force); } }, false); specifications specification status comment touch events – level 2 draft initial definition.
TrackDefaultList - Web APIs
properties inherits properties from its parent interface, eventtar
get.
... methods inherits properties from its parent interface, eventtar
get.
... trackdefaultlist.trackdefault() this
getter allows the trackdefault objects in the list to be accessed with an array operator (i.e.
URL.searchParams - Web APIs
the searchparams readonly property of the url interface returns a urlsearchparams object allowing access to the
get decoded query arguments contained in the url.
... examples if the url of your page is https://example.com/?name=jonathan%20smith&age=18 you could parse out the name and age parameters using: let params = (new url(document.location)).searchparams; let name = params.
get('name'); // is the string "jonathan smith".
... let age = parseint(params.
get('age')); // is the number 18 specifications specification status comment urlthe definition of 'searchparams' in that specification.
VideoTrack - Web APIs
this id can be used to locate a specific track within a video track list by calling videotracklist.
gettrackbyid().
... usage notes to
get a videotrack for a given media element, use the element's videotracks property, which returns a videotracklist object from which you can
get the individual tracks contained in the media: var el = document.queryselector("video"); var tracks = el.videotracks; you can then access the media's individual tracks using either array syntax or functions such as foreach().
... this first example
gets the first video track on the media: var firsttrack = tracks[0]; the next example scans through all of the media's video tracks, activating the first video track that is in the user's preferred language (taken from a variable userlanguage).
WEBGL_compressed_texture_astc - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... ext.
getsupportedprofiles() returns an array of strings containing the names of the astc profiles supported by the implementation.
...16 43264 ext.compressed_rgba_astc_12x10_khr ext.compressed_srgb8_alpha8_astc_12x10_khr 12x10 1.07 floor((width + 11) / 12) * floor((height + 9) / 10) * 16 35776 ext.compressed_rgba_astc_12x12_khr ext.compressed_srgb8_alpha8_astc_12x12_khr 12x12 0.89 floor((width + 11) / 12) * floor((height + 11) / 12) * 16 29584 examples var ext = gl.
getextension('webgl_compressed_texture_astc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgba_astc_12x12_khr, 512, 512, 0, texturedata); specifications specification status comment webgl_compressed_texture_astcthe definition of 'webgl_compressed_texture_astc' in that specification.
WEBGL_debug_renderer_info - Web APIs
the webglrenderingcontext.
getparameter() method can help you to detect which features are supported and the failifmajorperformancecaveat context attribute lets you control if a context should be returned at all, if the performance would be dramatically slow.
... webgl extensions are available using the webglrenderingcontext.
getextension() method.
... examples with the help of this extension, privileged contexts are able to retrieve debugging information about about the user's graphic driver: var canvas = document.
getelementbyid('canvas'); var gl = canvas.
getcontext('webgl'); var debuginfo = gl.
getextension('webgl_debug_renderer_info'); var vendor = gl.
getparameter(debuginfo.unmasked_vendor_webgl); var renderer = gl.
getparameter(debuginfo.unmasked_renderer_webgl); console.log(vendor); console.log(renderer); specifications specification status comment webgl_debug_renderer_infothe de...
WEBGL_depth_texture - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... incorrectly stated as the tar
get parameter in the specification, see https://www.khronos.org/bugzilla/show_bug.cgi?id=674.
... examples var ext = gl.
getextension('webgl_depth_texture'); gl.teximage2d(gl.texture_2d, 0, gl.depth_component, 512, 512, 0, gl.depth_component, gl.unsigned_short, null); specifications specification status comment webgl_depth_texturethe definition of 'webgl_depth_texture' in that specification.
WEBGL_draw_buffers - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... constants this extension exposes new constants, which can be used in the gl.framebufferrenderbuffer(), gl.framebuffertexture2d(), gl.
getframebufferattachmentparameter() ext.drawbufferswebgl(), and gl.
getparameter() methods.
... examples enabling the extension: var ext = gl.
getextension('webgl_draw_buffers'); binding multiple textures (to a tx[] array) to different framebuffer color attachments: var fb = gl.createframebuffer(); gl.bindframebuffer(gl.framebuffer, fb); gl.framebuffertexture2d(gl.framebuffer, ext.color_attachment0_webgl, gl.texture_2d, tx[0], 0); gl.framebuffertexture2d(gl.framebuffer, ext.color_attachment1_webgl, gl.texture_2d, tx[1], 0); gl.framebuff...
WebGLContextEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/webglcontextevent" tar
get="_top"><rect x="116" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">webglcontextevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits properties from its parent interface, event.
... examples with the help of the webgl_lose_context extension, you can simulate the webglcontextlost and webglcontextrestored events: var canvas = document.
getelementbyid('canvas'); var gl = canvas.
getcontext('webgl'); canvas.addeventlistener('webglcontextlost', function(e) { console.log(e); }, false); gl.
getextension('webgl_lose_context').losecontext(); // webglcontextevent event with type "webglcontextlost" is logged.
WebGLRenderingContext.activeTexture() - Web APIs
gl.activetexture(gl.texture1); the number of texture units is implementation dependent, you can
get this number with the help of the max_combined_texture_image_units constant.
... gl.
getparameter(gl.max_combined_texture_image_units); to
get the active texture, query the active_texture constant.
... gl.activetexture(gl.texture0); gl.
getparameter(gl.active_texture); // returns "33984" (0x84c0, gl.texture0 enum value) specifications specification status comment webgl 1.0the definition of 'activetexture' in that specification.
WebGLRenderingContext.checkFramebufferStatus() - Web APIs
syntax glenum gl.checkframebufferstatus(tar
get); parameters tar
get a glenum specifying the binding point (tar
get).
... when using the ovr_multiview2 extension, the following value can be returned additionally: ext.framebuffer_incomplete_view_tar
gets_ovr: if baseviewindex is not the same for all framebuffer attachment points where the value of framebuffer_attachment_object_type is not none, the framebuffer is considered incomplete.
... examples var canvas = document.
getelementbyid('canvas'); var gl = canvas.
getcontext('webgl'); var framebuffer = gl.createframebuffer(); // ...
WebGLRenderingContext.compressedTexSubImage2D() - Web APIs
syntax // webgl 1: void gl.compressedtexsubimage2d(tar
get, level, xoffset, yoffset, width, height, format, arraybufferview?
... pixels); // additionally available in webgl 2: void gl.compressedtexsubimage2d(tar
get, level, xoffset, yoffset, width, height, format, imagesize, offset); void gl.compressedtexsubimage2d(tar
get, level, xoffset, yoffset, width, height, format, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); parameters tar
get a glenum specifying the binding point (tar
get) of the active compressed texture.
... examples var ext = ( gl.
getextension('webgl_compressed_texture_s3tc') || gl.
getextension('moz_webgl_compressed_texture_s3tc') || gl.
getextension('webkit_webgl_compressed_texture_s3tc') ); gl.compressedtexsubimage2d(gl.texture_2d, 0, 256, 256, 512, 512, ext.compressed_rgba_s3tc_dxt5_ext, texturedata); specifications specification status comment webgl 1.0the definition of 'compressedtexsubimage2...
WebGLShaderPrecisionFormat - Web APIs
the webglshaderprecisionformat interface is part of the webgl api and represents the information returned by calling the webglrenderingcontext.
getshaderprecisionformat() method.
... examples a webglshaderprecisionformat object is returned by the webglrenderingcontext.
getshaderprecisionformat() method.
... var canvas = document.
getelementbyid('canvas'); var gl = canvas.
getcontext('webgl'); gl.
getshaderprecisionformat(gl.vertex_shader, gl.medium_float); // webglshaderprecisionformat { rangemin: 127, rangemax: 127, precision: 23 } specifications specification status comment webgl 1.0the definition of 'webglshaderprecisionformat' in that specification.
Basic scissoring - Web APIs
in other cases, the fragments may be discarded alto
gether (so the pixel value is not updated), or it may interact with the already existing pixel value (such as when doing color blending for non-opaque elements in the scene).
...because only fragments within the specified rectangular area successfully pass the scissor test, only pixels inside that area are updated, and we
get a rectangle on the screen.
... canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.
getcontext("webgl") || canvas.
getcontext("experimental-webgl"); if (!gl) { paragraph.innerhtml = "failed to
get webgl context.
Boilerplate 1 - Web APIs
in following examples, we will use a javascript helper function,
getrenderingcontext(), to initialize the webgl rendering context.
...basically, it
gets the webgl rendering context from the canvas element, initializes the drawing buffer, clears it black, and returns the initialized context.
...]</button> <canvas>your browser does not seem to support html5 canvas.</canvas> css body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } javascript function
getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.
getcontext("webgl") || canvas.
getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to
get webgl context." + "your browser or device may not support w...
Canvas size and WebGL - Web APIs
in the first canvas, we
get the desired result.
...r does not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.
getelementsbytagname("canvas")[0], secondcanvas = document.
getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].foreach(function(canvas) { var gl = canvas.
getcontext("webgl") || canvas.
getcontext("experimental-webgl"); if (!gl) { document.queryselector("p").innerhtml = ...
... "failed to
get webgl context.
Clearing by clicking - Web APIs
if (!gl) { gl = canvas.
getcontext("webgl") || canvas.
getcontext("experimental-webgl"); if (!gl) { alert("failed to
get webgl context.\n" + "your browser or device may not support webgl."); return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); } //
get a random color value using a helper function.
... var color =
getrandomcolor(); // set the clear color to the random color.
... function
getrandomcolor() { return [math.random(), math.random(), math.random()]; } }, false); the source code of this example is also available on github.
Color masking - Web APIs
or : white; margin : auto; padding : 0.6em 1.2em; } #red-toggle { background-color : red; } #green-toggle { background-color : green; } #blue-toggle { background-color : blue; } window.addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false); var canvas = document.queryselector("canvas"); var gl = canvas.
getcontext("webgl") || canvas.
getcontext("experimental-webgl"); if (!gl) { document.queryselector("p").innerhtml = "failed to
get webgl context." + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); var timer = setinterval(drawanimation, 1000); var mask = [true, true, true]; var redto...
... document.queryselector("#red-toggle"), greentoggle = document.queryselector("#green-toggle"), bluetoggle = document.queryselector("#blue-toggle"); redtoggle.addeventlistener("click", setcolormask, false); greentoggle.addeventlistener("click", setcolormask, false); bluetoggle.addeventlistener("click", setcolormask, false); function setcolormask(evt) { var index = evt.tar
get === greentoggle && 1 || evt.tar
get === bluetoggle && 2 || 0; mask[index] = !mask[index]; if (mask[index] === true) evt.tar
get.innerhtml="on"; else evt.tar
get.innerhtml="off"; gl.colormask(mask[0], mask[1], mask[2], true); drawanimation(); }; function drawanimation () { var color =
getrandomcolor(); gl.clearcolor(color[0], color[1], color[2]...
..., 1.0); gl.clear(gl.color_buffer_bit); } function
getrandomcolor() { return [math.random(), math.random(), math.random()]; } }, false); the source code of this example is also available on github.
Detect WebGL - Web APIs
var canvas = document.createelement("canvas"); //
get webglrenderingcontext from canvas element.
... var gl = canvas.
getcontext("webgl") || canvas.
getcontext("experimental-webgl"); // report the result.
...your browser supports webgl."; } else { paragraph.innerhtml = "failed to
get webgl context.
Hello GLSL - Web APIs
0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl =
getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); g...
...l.compileshader(fragmentshader); program = gl.createprogram(); gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.detachshader(program, vertexshader); gl.detachshader(program, fragmentshader); gl.deleteshader(vertexshader); gl.deleteshader(fragmentshader); if (!gl.
getprogramparameter(program, gl.link_status)) { var linkerrlog = gl.
getprograminfolog(program); cleanup(); document.queryselector("p").innerhtml = "shader program did not link successfully.
...); gl.drawarrays(gl.points, 0, 1); cleanup(); } var buffer; function initializeattributes() { gl.enablevertexattribarray(0); buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.vertexattribpointer(0, 1, gl.float, false, 0, 0); } function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function
getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.
getcontext("webgl") || canvas.
getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to
get webgl context." + "your browser or device may not support w...
Scissor animation - Web APIs
var gl, color =
getrandomcolor(), position; function setupanimation (evt) { window.removeeventlistener(evt.type, setupanimation, false); if (!(gl =
getrenderingcontext())) return; gl.enable(gl.scissor_test); gl.clearcolor(color[0], color[1], color[2], 1.0); // unlike the browser window, vertical position in webgl is // measured from bottom to top.
... position = [ math.random()*(gl.drawingbufferwidth - size[0]), gl.drawingbufferheight ]; // random velocity between 1.0 and 7.0 velocity = 1.0 + 6.0*math.random(); color =
getrandomcolor(); gl.clearcolor(color[0], color[1], color[2], 1.0); } } function
getrandomcolor() { return [math.random(), math.random(), math.random()]; } function
getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.
getcontext("webgl") || canvas.
getcontext("experimental-...
...webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to
get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.
Simple color animation - Web APIs
stopanimation({type: "click"}); var gl; function drawanimation () { if (!gl) { var canvas = document.
getelementbyid("canvas-view"); gl = canvas.
getcontext("webgl") ||canvas.
getcontext("experimental-webgl"); if (!gl) { clearinterval(timer); alert("failed to
get webgl context.\n" + "your browser or device may not support webgl."); return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); } //
get a ran...
... var color =
getrandomcolor(); // set the webglrenderingcontext clear color to the // random color.
... function
getrandomcolor() { return [math.random(), math.random(), math.random()]; } }, false); the source code of this example is also available on github.
Textures from code - Web APIs
oord - 1.0; float distance = length(fragmentposition); float distancesqrd = distance * distance; gl_fragcolor = vec4( 0.2/distancesqrd, 0.1/distancesqrd, 0.0, 1.0 ); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl =
getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); g...
...l.compileshader(fragmentshader); program = gl.createprogram(); gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.detachshader(program, vertexshader); gl.detachshader(program, fragmentshader); gl.deleteshader(vertexshader); gl.deleteshader(fragmentshader); if (!gl.
getprogramparameter(program, gl.link_status)) { var linkerrlog = gl.
getprograminfolog(program); cleanup(); document.queryselector("p").innerhtml = "shader program did not link successfully.
...alizeattributes() { gl.enablevertexattribarray(0); buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float32array([0.0, 0.0]), gl.static_draw); gl.vertexattribpointer(0, 2, gl.float, false, 0, 0); } function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function
getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.
getcontext("webgl") || canvas.
getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to
get webgl context." + "your browser or device may not support w...
A simple RTCDataChannel sample - Web APIs
they make it very easy to chain the steps of the connection process to
gether; if you haven't already read up on this functionality of ecmascript 2015, you should read up on them.
... function startup() { connectbutton = document.
getelementbyid('connectbutton'); disconnectbutton = document.
getelementbyid('disconnectbutton'); sendbutton = document.
getelementbyid('sendbutton'); messageinputbox = document.
getelementbyid('message'); receivebox = document.
getelementbyid('receivebox'); // set event listeners for user interface wid
gets connectbutton.addeventlistener('click', connectpeers, false); disconnectbutton.addeventlistener('click', disconnectpeers, false); sendbutton.addeventlistener('click', sendmessage, false); } this is quite straightforward...
...this stuff can be confusing, but you
get used to it).
Using WebRTC data channels - Web APIs
this will automatically trigger the rtcpeerconnection to handle the negotiations for you, causing the remote peer to create a data channel and linking the two to
gether across the network.
...beyond that, things
get more complicated.
...this proposal is still in ietf draft form, but once implemented, it will make it possible to send messages with essentially no size limitations, since the sctp layer will automatically interleave the underlying sub-messages to ensure that every channel's data has the opportunity to
get through.
Web Video Text Tracks Format (WebVTT) - Web APIs
16 00:01:21.058 --> 00:01:23.868 - [ bats screeching ] - they won't
get in your hair.
...region; attribute directionsetting vertical; attribute boolean snaptolines; attribute (double or autokeyword) line; attribute linealignsetting linealign; attribute (double or autokeyword) position; attribute positionalignsetting positionalign; attribute double size; attribute alignsetting align; attribute domstring text; documentfragment
getcueashtml(); }; vtt region interface this is the second interface in webvtt api.
...we can categorize them for better understanding relating to each interface in webvtt: vttcue the methods which are available in this interface are:
getcueashtml to
get the html of that cue.
Geometry and reference spaces in WebXR - Web APIs
once created, an xrreferencespace guarantees a certain level of support for motion and orientation tracking, and provides a mechanism for obtaining an xrviewerpose from which you can
get a matrix which represents the position and facing direction of the space relative to the world space, if the space represents a viewer such as the user's headset, an observer's headset, or a virtual camera.
... the primary reference space types the viewer reference space corresponds to the viewer's position in space; it's used by the xrviewerpose returned by the xrframe method
getviewerpose().
...create an xrrigidtransform object representing the new position and orientation of the player's avatar, then create a new reference space to represent the avatar's point of view at the new position using the xrreferencespace method
getoffsetreferencespace().
Web Animations API - Web APIs
to
get more information on the concepts behind the api and how to use it, read using the web animations api.
... document.
getanimations() returns an array of animation objects currently in effect on elements in the document.
... element.
getanimations() returns an array of animation objects currently affecting an element or which are scheduled to do so in future.
Background audio processing using AudioWorklet - Web APIs
this is done by adding the static
getter parameterdescriptors to your class.
... static
get parameterdescriptors() { return [ { name: "gain", defaultvalue: 0.5, minvalue: 0, maxvalue: 1 }, { name: "frequency", defaultvalue: 440.0; minvalue: 27.5, maxvalue: 4186.009 } ]; } accessing your processor node's parameters is as simple as looking them up in the parameters object passed into your implementation of process().
...to do so, first you need to
get a reference to the parameter by calling the audioworkletnode's parameters property's
get() method: let gainparam = myaudioworkletnode.parameters.
get("gain"); the value returned and stored in gainparam is the audioparam used to store the gain parameter.
Window.crypto - Web APIs
although window.crypto is available on all windows, the returned crypto object only has one usable feature in insecure contexts: the
getrandomvalues() method.
... example this example uses the window.crypto property to access the
getrandomvalues() method.
... javascript genrandomnumbers = function
getrandomnumbers() { var array = new uint32array(10); window.crypto.
getrandomvalues(array); var randtext = document.
getelementbyid("myrandtext"); randtext.innerhtml = "the random numbers are: " for (var i = 0; i < array.length; i++) { randtext.innerhtml += array[i] + " "; } } html <p id="myrandtext">the random numbers are: </p> <button type="button" onclick='genrandomnumbers()'>generate 10 random numbers</button> result specifications specification status comment web cryptography apithe definition of 'window.crypto' in that specification.
Window.speechSynthesis - Web APIs
after defining some necessary variables, we retrieve a list of the voices available using speechsynthesis.
getvoices() and populate a select menu with them so the user can choose what voice they want.
... var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); function populatevoicelist() { voices = synth.
getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); }...
... } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].
getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'speechsynthesis' in that specification.
WritableStream.WritableStream() - Web APIs
the contents of this method are defined by the developer, and should aim to
get access to the underlying sink.
...inside this function it calls the stream's
getwriter() method, which returns an instance of writablestreamdefaultwriter.
... const list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.
getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // call ready agai...
WritableStreamDefaultWriter.WritableStreamDefaultWriter() - Web APIs
note: you generally wouldn't use this constructor manually; instead, you'd use the writablestream.
getwriter() method.
...inside this function it calls the stream's
getwriter() method, which returns an instance of writablestreamdefaultwriter.
... const list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.
getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // call ready agai...
WritableStreamDefaultWriter.write() - Web APIs
exceptions typeerror the tar
get stream is not a writable stream, or it does not have an owner.
...inside this function it calls the stream's
getwriter() method, which returns an instance of writablestreamdefaultwriter.
... const list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.
getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // call ready agai...
WritableStreamDefaultWriter - Web APIs
the writablestreamdefaultwriter interface of the the streams api is the object returned by writablestream.
getwriter() and once created locks the writer to the writablestream ensuring that no other streams can write to the underlying sink.
...inside this function it calls the stream's
getwriter() method, which returns an instance of writablestreamdefaultwriter.
... const list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.
getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); });...
XDomainRequest.open() - Web APIs
opens an xdomainrequest which is configured to use a given method (
get/post) and url.
...(
get or post) url the url to which to send the request.
... example var xdr = new xdomainrequest(); xdr.open("
get", "http://example.com/api/method"); specification not part of any specification.
XMLDocument - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" tar
get="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a><polyline...
... points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmldocument" tar
get="_top"><rect x="386" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="441" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmldocument</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} property also inherits properties from: document xmldocument.async used with xmldocument.load() to indicate an asynchronous request.
XMLHttpRequest.send() - Web APIs
if the request method is
get or head, the body parameter is ignored and the request body is set to null.
... networkerror the resource type to be fetched is a blob, and the method is not
get.
... example:
get var xhr = new xmlhttprequest(); xhr.open('
get', '/server', true); xhr.onload = function () { // request finished.
XRFrame - Web APIs
in addition to providing a reference to the xrsession for which this frame is to be rendered, the
getviewerpose() method is provided to obtain the xrviewerpose describing the viewer's position and orientation in space, and
getpose() can be used to create an xrpose describing the relative position of one xrspace relative to another.
... methods
getpose() returns an xrpose object representing the spatial relationship between the two specified xrspace objects.
...
getviewerpose() returns an xrviewerpose describing the viewer's position and orientation in a given xrreferencespace.
XRInputSourceEventInit.frame - Web APIs
the xrinputsourceeventinit dictionary's property frame specifies an xrframe providing information about the timestamp at which the new input source event took place, as well as access to the xrframe method
getpose() which can be used to map the coordinates of any xrreferencespace to the space in which the event took place.
... syntax xrinputsourceeventinit.frame = xrframe; let xrinputsourceeventinit = { frame: xrframe }; let xrinputsourceevent = new xrinputsourceevent(type, { frame: xrframe }); value an xrframe indicating the time at which the event took place, and providing a
getpose() method which can be used to map reference spaces to the world reference space.
...instead, the xrframe specified by the frame property is simply a method to provide access to the
getpose() method, which you can use to
get the relative positions of the objects in the scene at the time the event occurred.
XRRigidTransform() - Web APIs
the specified orientation
gets normalized if it's not already.
... let animationframerequestid = 0; xrsession.requestreferencespace("local-floor") .then((refspace) => { xrreferencespace = refspace.
getoffsetreferencespace( new xrrigidtransform(viewerposition, viewerorientation)); animationframerequestid = xrsession.requestanimationframe(drawframe); }); after requesting a reference space of type local-floor, the returned promise is eventually resolved, at which time we receive a new reference space object, refspace.
... after creating an xrrigidtransform from the viewer's initial position and orientation, we pass the new transform into
getoffsetreferencespace() to create another reference space, now offset so that its origin is located at the same place in space as the coordinates given by viewerposition, with the orientation also revised in the same fashion.
XRSession.onsqueeze - Web APIs
after checking that the event occurred on the user's dominant hand, the pose's tar
get ray is obtained.
... then we pass the currently held object and the tar
get ray's transform matrix into a function we call dropobjectusingray() to drop the object, using the tar
get ray to determine the surface upon which the object should be placed.
... xrsession.onsqueeze = event => { if (event.inputsource.handedness == user.handedness) { let tar
getraypose = event.frame.
getpose(event.inputsource.tar
getrayspace, myrefspace); if (user.heldobject && tar
getraypose) { dropobjectusingray(user.heldobject, tar
getraypose.transform.matrix): } } }; see the examples in the onsqueezestart and onsqueezeend event handlers for the reset of the event handling related to this approach.
XRSession: squeeze event - Web APIs
the handler fetches the pose representing the tar
get ray for tracked-pointer inputs and sends the pose's transform to a function called myhandlesqueezewithray().
... xrsession.addeventlistener("squeeze", event => { if (event.inputsource.tar
getraymode == "tracked-pointer") { let tar
getraypose = event.frame.
getpose(event.inputsource.tar
getrayspace, myrefspace); if (tar
getraypose) { myhandlesqueezewithray(tar
getraypose.transform); } } }); you can of course also set up a handler for squeeze events by setting the xrsession object's onsqueeze event handler property to a function that handles the event: xrsession.onsqueeze = event => { i...
...f (event.inputsource.tar
getraymode == "tracked-pointer") { let tar
getraypose = event.frame.
getpose(event.inputsource.tar
getrayspace, myrefspace); if (tar
getraypose) { myhandlesqueezewithray(tar
getraypose.transform); } } }; specifications specification status comment webxr device apithe definition of 'squeeze event' in that specification.
XRSystem - Web APIs
the webxr device api interface xrsystem provides methods which let you
get access to an xrsession object representing a webxr session.
... properties while xrsystem directly offers no properties, it does inherit properties from its parent interface, eventtar
get.
... methods in addition to inheriting methods from its parent interface, eventtar
get, the xrsystem interface includes the following methods: issessionsupported() returns a promise which resolves to true if the browser supports the given xrsessionmode.
XRView.transform - Web APIs
the read-only transform property of the xrview interface is an xrrigidtransform object which provides the position and orientation of the viewpoint relative to the xrreferencespace specified when the xrframe.
getviewerpose() method was called to obtain the view object.
...if you instead need the more traditional view matrix, you can
get using view.transform.inverse.matrix; this
gets the underlying matrix of the transform's inverse.
... const modelviewmatrix = mat4.create(); const normalmatrix = mat4.create(); for (let view of pose.views) { let viewport = gllayer.
getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); for (let obj of world.objects) { mat4.multiply(modelviewmatrix, view.transform.inverse.matrix, obj.matrix); mat4.invert(normalmatrix, modelviewmatrix); mat4.transpose(normalmatrix, normalmatrix); obj.render(modelviewmatrix, normalmatrix); } } two matrices are created outside the renderin...
XRWebGLLayer - Web APIs
methods
getviewport() returns a new xrviewport instance representing the position, width, and height to which the webgl context's viewport must be set to contain drawing to the area of the framebuffer designated for the specified view's contents.
... static methods
getnativeframebufferscalefactor() returns the scaling factor that can be used to scale the resolution of the recommended webgl framebuffer resolution to the rendering device's native resolution.
... let pose = xrframe.
getviewerpose(xrreferencespace); if (pose) { let gllayer = xrsession.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebffer); for (let view of pose.views) { let viewport = gllayer.
getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); /* render the view */ } } specifications specification status comment ...
ARIA annotations - Accessibility
r than a simple text string, it might contain multiple bits of semantic information: <div id="detail-id"> <h2>a heading</h2> <p>an extended text description of some kind…</p> <p><time datetime="...">a timestamp</time></p> </div> <div aria-details="detail-id"> <!-- some kind of ui feature that needs an accessible description --> </div> this difference really becomes apparent when you
get to how the content is actually interpreted in the accessibility layer, and read out by screenreaders.
...as an example, let’s say you have a poll/voting ui wid
get that shows numbers of votes, but you want to summarize the purpose of the wid
get in a clear description because the ui does not make it clear: <section aria-description="choose your favourite fruit — the fruit with the highest number of votes will be added to the lunch options next week."> <p>pick your favourite fruit:</p> <form> <ul> <li><label>apple: <input type="radio" name="f...
...ruit" value="apple"></label></li> <li><label>orange: <input type="radio" name="fruit" value="orange"></label></li> <li><label>banana: <input type="radio" name="fruit" value="banana"></label></li> </ul> </form> </section> if the descriptive text does appear in the ui, you can link the description to the wid
get using aria-describedby, like so: <p id="fruit-desc">choose your favourite fruit — the fruit with the highest number of votes will be added to the lunch options next week.</p> <section aria-describedby="fruit-desc"> <form> <ul> <li><label>apple: <input type="radio" name="fruit" value="apple"></label></li> <li><label>orange: <input type="radio" name="fruit" value="orange"></label></li> <li><label>banana: <input type="radio" name="fruit" value=...
ARIA: textbox role - Accessibility
associated aria properties aria-activedescendent attribute taking as it's value the id of is either a descendant of the element with dom focus or is a logical descendant as indicated by the aria-owns attribute, it indicates when that element has focus, when it is part of a composite wid
get such as a combobox.
... focus event handler and aria-activedescendent attribute if you are implementing a composite wid
get, such as a combobox composed of a text box and a listbox, you need to manage the aria-activedescendent attribute using a handler.
... before using this technique, ensure that the browsers you need to tar
get currently support it.
:dir() - CSS: Cascading Style Sheets
syntax the :dir() pseudo-class requires one parameter, representing the text directionality you want to tar
get.
... parameters ltr tar
get left-to-right elements.
... rtl tar
get right-to-left elements.
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
} catch(e) { try { matcheditems = document.queryselectorall(':-moz-any(header, main, footer) p'); } catch(e) { console.log('your browser doesn\'t support :is(), :matches(), or :any()'); } } } } matcheditems.foreach(applyhandler); function applyhandler(elem) { elem.addeventlistener('click', function(e) { alert('this paragraph is inside a ' + e.tar
get.parentnode.nodename); }); } simplifying list selectors the :is() pseudo-class can greatly simplify your css selectors.
...since <section>, <article>, <aside>, and <nav> are commonly nested to
gether, without :is(), styling them to match one another can be tricky.
...s(section, article, aside, nav) h1 { font-size: 25px; } /* level 2 */ :is(section, article, aside, nav) :is(section, article, aside, nav) h1 { font-size: 20px; } /* level 3 */ :is(section, article, aside, nav) :is(section, article, aside, nav) :is(section, article, aside, nav) h1 { font-size: 15px; } avoiding selector list invalidation unlike selector lists, the :is() pseudo-class doesn't
get invalidated when one of the selectors passed to it isn't supported by the browser.
:scope - CSS: Cascading Style Sheets
javascript let paragraph = document.
getelementbyid("para"); let output = document.
getelementbyid("output"); if (paragraph.matches(":scope")) { output.innertext = "yep, the element is its own scope as expected!"; } html <p id="para"> this is a paragraph.
...</p> <p id="output"></p> result direct children a situation where the :scope pseudo-class prove to be useful is when you need to
get direct descendant of an already retrieved element.
... javascript var context = document.
getelementbyid('context'); var selected = context.queryselectorall(':scope > div'); document.
getelementbyid('results').innerhtml = array.prototype.map.call(selected, function (element) { return '#' + element.
getattribute('id'); }).join(', '); html <div id="context"> <div id="element-1"> <div id="element-1.1"></div> <div id="element-1.2"></div> </div> <div id="element-2"> <div id="element-2.1"></div> </div> </div> <p> selected elements ids : <span id="results"></span> </p> result specifications specification status comment selectors level 4the definition of ':scope' in that specification.
Handling content breaks in multicol - CSS: Cascading Style Sheets
the orphans and widows properties take an integer as a value, which represents the number of lines to keep to
gether at the end and start of a fragment, respectively.
...if the block has fewer lines in it than the number that you specify as a value, all lines will be kept to
gether.
... when things don’t work as expected if you have small amounts of content and are trying to control breaks in a number of ways or on several elements, your content needs to break somewhere, so you may not always
get the result you intended.
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
this means you can explicitly declare the align-self property to tar
get a single item.
...i have tar
geted the first item using a first-child selector and set that item to align-self: stretch; another item has been selected using its class of selected and given align-self: center.
... instead we can tar
get item 4 and separate it from the first three items by giving it a margin-left value of auto.
Basic concepts of flexbox - CSS: Cascading Style Sheets
this can be contrasted with the two-dimensional model of css grid layout, which controls columns and rows to
gether.
... properties applied to flex items to have more control over flex items we can tar
get them directly.
...items will either use any size set on the item in the main dimension, or they will
get their size from the content size.
Basic Concepts of grid layout - CSS: Cascading Style Sheets
item placement you can place items into a precise location on the grid using line numbers, names or by tar
geting an area of the grid.
...when placing an item, we tar
get the line – rather than the track.
...n-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } don't for
get that you can use the grid inspector in firefox developer tools to see how the items are positioned against the lines of the grid.
Column layouts - CSS: Cascading Style Sheets
the columns must all be the same size, and you are unable to tar
get an individual column or the content of an individual column.
... you do not need to tar
get individual column boxes for styling.
... a single row of items with equal heights — flexbox flexbox can be used to break content into columns by setting flex-direction to row, however flexbox tar
gets the elements inside the flex container and will place each direct child into a new column.
Pseudo-classes - CSS: Cascading Style Sheets
syntax selector:pseudo-class { property: value; } like regular classes, you can chain to
gether as many pseudo-classes as you want in a selector.
...ext() :hover :indeterminate :in-range :invalid :is() :lang() :last-child :last-of-type :left :link :local-link :not() :nth-child() :nth-col() :nth-last-child() :nth-last-col() :nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :past :placeholder-shown :read-only :read-write :required :right :root :scope :state() :tar
get :tar
get-within :user-invalid :valid :visited :where() specifications specification status comment fullscreen api living standard defined :fullscreen.
... selectors level 3 recommendation defined :tar
get, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty and :not().
break-inside - CSS: Cascading Style Sheets
by default, it is possible for you to
get a break between the image and its caption, which is not what we want.
... to avoid this, we have set break-inside: avoid on the <figure>, which causes them to always stay to
gether.
...quisque commodo e
get nisi sed pretium.
Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
it’s as if you had applied display: block to the span, however we also
get the changed behavior of the children.
...in the example above, you can change display: inline-block to display: inline flow-root in firefox and
get the same result.
...therefore display: block flex will only
get you flex layout in firefox, and will be ignored as invalid in chrome.
mask-size - CSS: Cascading Style Sheets
contain a keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't
get squished).
...scales the image as large as possible and maintains image aspect ratio (image doesn't
get squished).
...ve sample */ margin-bottom: 10px; } html <div id="masked"> </div> <select id="masksize"> <option value="auto">auto</option> <option value="40% 80%">40% 80%</option> <option value="50%" selected>50%</option> <option value="200px 100px">200px 100px</option> <option value="cover">cover</option> <option value="contain">contain</option> </select> javascript var masksize = document.
getelementbyid("masksize"); masksize.addeventlistener("change", function (evt) { document.
getelementbyid("masked").style.masksize = evt.tar
get.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-size' in that specification.
CSS: Cascading Style Sheets
we have put to
gether a course that includes all the essential information you need to work towards your goal.
...
get started tutorials our css learning area features multiple modules that teach css from the ground up — no previous knowledge required.
...and forms of the language specificity, inheritance and the cascade css units and values box model and margin collapse the containing block stacking and block-formatting contexts initial, computed, used, and actual values css shorthand properties css flexible box layout css grid layout media queries animation cookbook the css layout cookbook aims to bring to
gether recipes for common layout patterns, things you might need to implement in your sites.
WAI ARIA Live Regions/API Support - Developer guides
ject_show* (fired on the actual new accessible object) object replaced with different object (this happens especially if an object's interfaces or role changes) children_changed::remove followed immediately by children_change::add event_object_hide followed immediately by event_object_show text removed text_changed::delete ia2_event_text_removed (use iaccessibletext::
get_oldtext to retrieve the offsets and removed text) text inserted text_changed::insert ia2_event_text_inserted (use iaccessibletext::
get_newtext to retrieve the offsets and inserted text) text replaced text_changed::delete followed immediately by text_changed::insert ia2_event_text_removed followed immediately by ia2_event_text_inserted * we do not use msaa's cre...
...retrieving author-supplied aria live region semantics from an event for any mutation event in a page, the author can
get the following object attributes from the event object, if they are defined on some ancestor element (closest ancestor wins): object attribute name possible values default value if not specified meaning aria markup if required container-live "off" | "polite" | "assertive" "off" interruption policy aria-live on ancestor element container-relevant "[additions] [removals] [text]" | "all" "additions text" what types of mutations are possibly rele...
...this means that the at does not need to traverse up the parent chain to
get this information.
Setting up adaptive streaming media sources - Developer guides
note: you will need to be comfortable with make files and installing dependencies to
get this software up and running.
... the stream segmenter — provided by apple for mac platforms — takes a media stream from a local network and splits media into equally sized media files to
gether with an index file.
...apple uses the .m3u8 format (an extension of its .m3u playlist format) for index files — see below for an example: #ext-x-version:3 #extm3u #ext-x-tar
getduration:10 #ext-x-media-sequence:1 # old-style integer duration; avoid for newer clients.
Introduction to Web development - Developer guides
whether you're just
getting started with web development, or are just expanding your horizons into new realms of web awesomeness, the links here should help you
get started.
... html elements reference guide — a comprehensive guide to html elements with details on how browsers support them css
getting started with css — an absolute beginners guide to css covers basic concepts and fundamentals css reference guide — a complete guide to css with details on the level of gecko/firefox support for each.
... javascript beginning
getting started with javascript — what is javascript and how can it help you?
User input and controls - Developer guides
for example if you want to add controls when any key
gets pressed, you need to add an event listener on the window object: window.addeventlistener("keydown", handlekeydown, true); window.addeventlistener("keyup", handlekeyup, true); where handlekeydown and handlekeyup are the functions implementing the controls about the keydown and keyup events.
... if you want to use touch events, you need to add event listeners and specify handler functions, which will be called when the event
gets fired: element.addeventlistener("touchstart", handlestart, false);
element.addeventlistener("touchcancel", handlecancel, false);
element.addeventlistener("touchend", handleend, false);
element.addeventlistener("touchmove", handlemove, false); where element is the dom element you want to register the touch events on.
...bear in mind that many browsers still implement this with a vendor prefix, so you will probably need to fork your code something like this: var elem = document.
getelementbyid("myvideo"); if (elem.requestfullscreen) { elem.requestfullscreen(); } else if (elem.msrequestfullscreen) { elem.msrequestfullscreen(); } else if (elem.mozrequestfullscreen) { elem.mozrequestfullscreen(); } else if (elem.webkitrequestfullscreen) { elem.webkitrequestfullscreen(); } note: to find more out about adding fullscreen functionality your application, read our documenta...
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
calling any of the following on a tainted canvas will result in an error: calling
getimagedata() on the canvas's context calling toblob() on the <canvas> element itself calling todataurl() on the canvas attempting any of these when the canvas is tainted will cause a securityerror to be thrown.
... receiving and saving the image the code that handles the newly-downloaded image is found in the imagereceived() method: function imagereceived() { let canvas = document.createelement("canvas"); let context = canvas.
getcontext("2d"); canvas.width = downloadedimg.width; canvas.height = downloadedimg.height; context.drawimage(downloadedimg, 0, 0); imagebox.appendchild(canvas); try { localstorage.setitem("saved-image-example", canvas.todataurl("image/png")); } catch(err) { console.log("error: " + err); } } imagereceived() is called to handle the "load" event on the htmlimageelement that ...
...it begins by creating a new <canvas> element that we'll use to convert the image into a data url, and by
getting access to the canvas's 2d drawing context (canvasrenderingcontext2d) in the variable context.
<input type="button"> - HTML: Hypertext Markup Language
<input type="button" value="click me"> if you don't specify a value, you
get an empty button: <input type="button"> using buttons <input type="button"> elements have no default behavior (their cousins, <input type="submit"> and <input type="reset"> are used to submit and reset forms, respectively).
...queryselector('input'); const paragraph = document.queryselector('p'); button.addeventlistener('click', updatebutton); function updatebutton() { if (button.value === 'start machine') { button.value = 'stop machine'; paragraph.textcontent = 'the machine has started!'; } else { button.value = 'start machine'; paragraph.textcontent = 'the machine is stopped.'; } } the script
gets a reference to the htmlinputelement object representing the <input> in the dom, saving this refence in the variable button.
... width: 150px; height: 75px; padding: 5px; } input[type="color"], input[type="button"] { width: 90%; margin: 0 auto; display: block; } input[type="range"] { width: 70%; } span { position: relative; bottom: 5px; } var canvas = document.queryselector('.mycanvas'); var width = canvas.width = window.innerwidth; var height = canvas.height = window.innerheight-85; var ctx = canvas.
getcontext('2d'); ctx.fillstyle = 'rgb(0,0,0)'; ctx.fillrect(0,0,width,height); var colorpicker = document.queryselector('input[type="color"]'); var sizepicker = document.queryselector('input[type="range"]'); var output = document.queryselector('.output'); var clearbtn = document.queryselector('input[type="button"]'); // covert degrees to radians function degtorad(degrees) { return degrees * mat...
<input type="month"> - HTML: Hypertext Markup Language
you can also
get and set the date value in javascript using the htmlinputelement.value property, for example: <label for="bday-month">what month were you born in?</label> <input id="bday-month" type="month" name="bday-month" value="2017-06"> var monthcontrol = document.queryselector('input[type="month"]'); monthcontrol.value = '1978-06'; additional attributes in addition to the attributes common to <inp...
...input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the best way to deal with dates in forms in a cross-browser way (until all of the major browsers have supported them for a while) is to
get the user to enter the month and year in separate controls (<select> elements being popular; see below for an implementation), or use javascript libraries such as the jquery date picker plugin.
... if it does, run the code inside the if() {} block if(test.type === 'text') { // hide the native picker and show the fallback nativepicker.style.display = 'none'; fallbackpicker.style.display = 'block'; fallbacklabel.style.display = 'block'; // populate the years dynamically // (the months are always the same, therefore hardcoded) populateyears(); } function populateyears() { //
get the current year as a number var date = new date(); var year = date.
getfullyear(); // make this year, and the 100 years before it available in the year <select> for(var i = 0; i <= 100; i++) { var option = document.createelement('option'); option.textcontent = year-i; yearselect.appendchild(option); } } note: remember that some years have 53 weeks in them (see weeks per y...
<input type="password"> - HTML: Hypertext Markup Language
value a domstring representing a password, or empty events change and input supported common attributes autocomplete, inputmode, maxlength, minlength, pattern, placeholder, readonly, required, and size idl attributes selectionstart, selectionend, selectiondirection, and value methods select(), setran
getext(), and setselectionrange() value the value attribute contains a domstring whose value is the current contents of the text editing control being used to enter the password.
... html <label for="userpassword">password: </label> <input id="userpassword" type="password" size="12"> <button id="selectall">select all</button> javascript document.
getelementbyid("selectall").onclick = function() { document.
getelementbyid("userpassword").select(); } result you can also use selectionstart and selectionend to
get (or set) what range of characters in the control are currently selected, and selectiondirection to know which direction selection occurred in (or will be extended in, depending on your platform; see its documentation for an explana...
... var ssn = document.
getelementbyid("ssn"); var current = document.
getelementbyid("current"); ssn.oninput = function(event) { current.innerhtml = ssn.value; } result specifications specification status comment html living standardthe definition of '<input type="password">' in that specification.
<link>: The External Resource Link element - HTML: Hypertext Markup Language
browsers not supporting css3 media queries won't necessarily recognize the adequate link; do not for
get to set fallback links, the restricted set of media queries defined in html 4.
...for example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might
get a different icon, or an outside link might render with an indication of leaving the current site.
... tar
get defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.
Link types - HTML: Hypertext Markup Language
note that when noopener is used, nonempty tar
get names other than _top, _self, and _parent are all treated like _blank in terms of deciding whether to open a new window/tab.
... <a>, <area>, <form> <link> opener reverts implicit rel="noopener" addition on links with tar
get="_blank" (see related html spec discussion, webkit change, and firefox bug discussion).
... living standard added opener and made noopener the default behavior for tar
get="_blank" links.
If-None-Match - HTTP
for
get and head methods, the server will send back the requested resource, with a 200 status, only if it doesn't have an etag matching the given ones.
... when the condition fails for
get and head methods, then the server must return http status code 304 (not modified).
... there are two common use cases: for
get and head methods, to update a cached entity that has an associated etag.
HEAD - HTTP
the http head method requests the headers that would be returned if the head request's url was instead requested with the http
get method.
...if it has one anyway, that body must be ignored: any entity headers that might describe the erroneous body are instead assumed to describe the response which a similar
get request would have received.
... if the response to a head request shows that a cached url response is now outdated, the cached copy is invalidated even if no
get request was made.
OPTIONS - HTTP
no syntax options /index.html http/1.1 options * http/1.1 examples identifying allowed request methods to find out which request methods a server supports, one can use the curl command-line program to issue an options request: curl -x options https://example.org -i the response then contains an allow header that holds the allowed methods: http/1.1 204 no content allow: options,
get, head, post cache-control: max-age=604800 date: thu, 13 oct 2016 11:45:00 gmt server: eos (lax004/2813) preflighted requests in cors in cors, a preflight request is sent with the options method so that the server can respond if it is acceptable to send the request.
...in this example, the server response says that: access-control-allow-origin the https://foo.example origin is permitted to request the bar.example/resources/post-here/ url via the following: access-control-allow-methods post,
get, and options are permitted methods for the url.
... http/1.1 204 no content date: mon, 01 dec 2008 01:15:39 gmt server: apache/2.0.61 (unix) access-control-allow-origin: https://foo.example access-control-allow-methods: post,
get, options access-control-allow-headers: x-pingother, content-type access-control-max-age: 86400 vary: accept-encoding, origin keep-alive: timeout=2, max=100 connection: keep-alive specifications specification title rfc 7231, section 4.3.7: options hypertext transfer protocol (http/1.1): semantics and content ...
PUT - HTTP
the http put request method creates a new resource or replaces a representation of the tar
get resource with the request payload.
... request has body yes successful response has body no safe no idempotent yes cacheable no allowed in html forms no syntax put /new.html http/1.1 example request put /new.html http/1.1 host: example.com content-type: text/html content-length: 16 <p>new file</p> responses if the tar
get resource does not have a current representation and the put request successfully creates one, then the origin server must inform the user agent by sending a 201 (created) response.
... http/1.1 201 created content-location: /new.html if the tar
get resource does have a current representation and that representation is successfully modified in accordance with the state of the enclosed representation, then the origin server must send either a 200 (ok) or a 204 (no content) response to indicate successful completion of the request.
An overview of HTTP - HTTP
for example:
get / http/1.1 host: developer.mozilla.org accept-language: fr read the response sent by the server, such as: http/1.1 200 ok date: sat, 09 oct 2010 14:28:02 gmt server: apache last-modified: tue, 01 dec 2009 20:18:22 gmt etag: "51142bc1-7449-479b075b2891b" accept-ranges: bytes content-length: 29769 content-type: text/html <!doctype html...
... requests an example http request: requests consists of the following elements: an http method, usually a verb like
get, post or a noun like options or head that defines the operation the client wants to perform.
... typically, a client wants to fetch a resource (using
get) or post the value of an html form (using post), though more operations may be needed in other cases.
A typical HTTP session - HTTP
http://developer.mozilla.org/, and telling the server that the user-agent would prefer the page in french, if possible:
get / http/1.1 host: developer.mozilla.org accept-language: fr observe that final empty line, this separates the data block from the header block.
...the most common requests are
get and post: the
get method requests a data representation of the specified resource.
... requests using
get should only retrieve data.
307 Temporary Redirect - HTTP
in the cases where you want the method used to be changed to
get, use 303 see other instead.
...with 302, some old clients were incorrectly changing the method to
get: the behavior with non-
get methods and 302 is then unpredictable on the web, whereas the behavior with 307 is predictable.
... for
get requests, their behavior is identical.
JavaScript data types and data structures - JavaScript
data property associates a key with a value, and has the following attributes: attributes of a data property attribute type description default value [[value]] any javascript type the value retrieved by a
get access of the property.
... accessor property associates a key with one of two accessor functions (
get and set) to retrieve or store a value, and has the following attributes: attributes of an accessor property attribute type description default value [[
get]] function object or undefined the function is called with an empty argument list and retrieves the property value whenever a
get access to the value is performed.
... see also
get.
Expressions and operators - JavaScript
numbers with more than 32 bits
get their most significant bits discarded.
... string operators in addition to the comparison operators, which can be used on string values, the concatenation operator (+) concatenates two string values to
gether, returning another string that is the union of the two operand strings.
...this expression uses the + operator to add three and four to
gether without assigning the result, seven, to a variable.
Classes - JavaScript
class rectangle { constructor(height, width) { this.height = height; this.width = width; } //
getter
get area() { return this.calcarea(); } // method calcarea() { return this.height * this.width; } } const square = new rectangle(10, 10); console.log(square.area); // 100 static methods the static keyword defines a static method for a class.
...if you want to inherit from a regular object, you can instead use object.setprototypeof(): const animal = { speak() { console.log(`${this.name} makes a noise.`); } }; class dog { constructor(name) { this.name = name; } } // if you do not do this you will
get a typeerror when you invoke speak object.setprototypeof(dog.prototype, animal); let d = new dog('mitzie'); d.speak(); // mitzie makes a noise.
...the symbol.species symbol lets you do this: class myarray extends array { // overwrite species to the parent array constructor static
get [symbol.species]() { return array; } } let a = new myarray(1,2,3); let mapped = a.map(x => x * x); console.log(mapped instanceof myarray); // false console.log(mapped instanceof array); // true super class calls with super the super keyword is used to call corresponding methods of super class.
Deprecated and obsolete features - JavaScript
date methods
getyear and setyear are affected by the year-2000-problem and have been subsumed by
getfullyear and setfullyear.
...
getenumerablepropertykeys (bug 783829, firefox 37)
getownpropertynames (bug 1007334, firefox 33) keys (bug 1007334, firefox 33) escape sequences octal escape sequences (\ followed by one, two, or three octal digits) are deprecated in string and regular expression literals.
... object.
getnotifier() creates an object that allows to synthetically trigger a change.
TypeError: X.prototype.y called on incompatible type - JavaScript
the javascript exception "called on incompatible tar
get (or object)" occurs when a function (on a given object), is called with a this not corresponding to the type expected by the function.
... message typeerror: 'this' is not a set object (edge) typeerror: function.prototype.tostring called on incompatible object (firefox) typeerror: function.prototype.bind called on incompatible tar
get (firefox) typeerror: method set.prototype.add called on incompatible receiver undefined (chrome) typeerror: bind must be called on a function (chrome) error type typeerror what went wrong?
...in this case, the object that stores the function won't be the this tar
get of that function when it is called by the other function.
InternalError: too much recursion - JavaScript
this issue also appears if the same variable is used in the
getter.
...
get name(){ return this.name; // recursive call } to avoid this problem, make sure that the property being assigned to inside the setter function is different from the one that initially triggered the setter.the same goes for the
getter.
... class person{ constructor(){} set name(name){ this._name = name; }
get name(){ return this._name; } } const tony = new person(); tony.name = "tonisha"; console.log(tony); ...
Array.prototype.reduce() - JavaScript
get(o, "length")).
...
get(o, pk).
...e) { return [...accumulator, ...currentvalue.books] }, ['alphabet']) // allbooks = [ // 'alphabet', 'bible', 'harry potter', 'war and peace', // 'romeo and juliet', 'the lord of the rings', // 'the shining' // ] remove duplicate items in an array note: if you are using an environment compatible with set and array.from(), you could use let orderedarray = array.from(new set(myarray)) to
get an array where duplicate items have been removed.
Array.prototype.map() - JavaScript
let lenvalue be the result of calling the
get internal // method of o with the argument "length".
...let kvalue be the result of calling the
get internal // method of o with argument pk.
... let numbers = [1, 4, 9] let doubles = numbers.map(function(num) { return num * 2 }) // doubles is now [2, 8, 18] // numbers is still [1, 4, 9] using map generically this example shows how to use map on a string to
get an array of bytes in the ascii encoding representing the character values: let map = array.prototype.map let a = map.call('hello world', function(x) { return x.charcodeat(0) }) // a now equals [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] using map generically queryselectorall this example shows how to iterate through a collection of objects collected by queryselectorall.
Array - JavaScript
fruits.unshift('strawberry') // add to the front // ["strawberry", "banana"] find the index of an item in the array fruits.push('mango') // ["strawberry", "banana", "mango"] let pos = fruits.indexof('banana') // 1 remove an item by index position let removeditem = fruits.splice(pos, 1) // this is how to remove an item // ["strawberry", "mango"] remove items from an index position let ve
getables = ['cabbage', 'turnip', 'radish', 'carrot'] console.log(ve
getables) // ["cabbage", "turnip", "radish", "carrot"] let pos = 1 let n = 2 let removeditems = ve
getables.splice(pos, n) // this is how to remove items, n defines the number of items to be removed, // starting at the index position specified by pos and progressing toward the end of array.
... console.log(ve
getables) // ["cabbage", "carrot"] (the original array is changed) console.log(removeditems) // ["turnip", "radish"] copy an array let shallowcopy = fruits.slice() // this is how to make a copy // ["strawberry", "mango"] accessing array elements javascript arrays are zero-indexed.
... static properties
get array[@@species] the constructor function is used to create derived objects.
Intl.Collator.prototype.compare() - JavaScript
description the compare
getter function returns a number indicating how string1 and string2 compare to each other according to the sort order of this collator object: a negative value if string1 comes before string2; a positive value if string1 comes after string2; 0 if they are considered equal.
... examples using compare for array sort use the compare
getter function for sorting arrays.
... var a = ['offenbach', 'Österreich', 'odenwald']; var collator = new intl.collator('de-u-co-phonebk'); a.sort(collator.compare); console.log(a.join(', ')); // → "odenwald, Österreich, offenbach" using compare for array search use the compare
getter function for finding matching strings in arrays: var a = ['congrès', 'congres', 'assemblée', 'poisson']; var collator = new intl.collator('fr', { usage: 'search', sensitivity: 'base' }); var s = 'congres'; var matches = a.filter(v => collator.compare(v, s) === 0); console.log(matches.join(', ')); // → "congrès, congres" specifications specification ecmascript internationalization api ...
Intl.DateTimeFormat.prototype.format() - JavaScript
description the format
getter formats a date into a string according to the locale and formatting options of this intl.datetimeformat object.
... examples using format use the format
getter function for formatting a single date, here for serbia: var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; var datetimeformat = new intl.datetimeformat('sr-rs', options); console.log(datetimeformat.format(new date())); // → "недеља, 7.
... април 2013." using format with map use the format
getter function for formatting all dates in an array.
Intl.DateTimeFormat - JavaScript
instance methods intl.datetimeformat.prototype.format()
getter function that formats a date according to the locale and formatting options of this datetimeformat object.
... intl.datetimeformat.prototype.formatran
getoparts() this method receives two dates and returns an array of objects containing the locale-specific tokens representing each part of the formatted date range.
...in order to
get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: var date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // results below use the time zone of america/los_angeles (utc-0800, pacific standard time) // us english uses month-day-year order console.log(new intl.datetimeform...
Math.max() - JavaScript
examples using math.max() math.max(10, 20); // 20 math.max(-10, -20); // -10 math.max(-10, 20); // 20
getting the maximum element of an array array.reduce() can be used to find the maximum element in a numeric array, by comparing each value: var arr = [1,2,3]; var max = arr.reduce(function(a, b) { return math.max(a, b); }); the following function uses function.prototype.apply() to
get the maximum of an array.
...
getmaxofarray([1, 2, 3]) is equivalent to math.max(1, 2, 3), but you can use
getmaxofarray() on programmatically constructed arrays.
... function
getmaxofarray(numarray) { return math.max.apply(null, numarray); } the new spread operator is a shorter way of writing the apply solution to
get the maximum of an array: var arr = [1, 2, 3]; var max = math.max(...arr); however, both spread (...) and apply will either fail or return the wrong result if the array has too many elements, because they try to pass the array elements as function parameters.
Object.prototype.constructor - JavaScript
function parentwithstatic() {} parentwithstatic.startposition = { x: 0, y:0 } // static member property parentwithstatic.
getstartposition = function
getstartposition() { return this.startposition } function child(x, y) { this.position = { x: x, y: y } } child = object.assign(parentwithstatic) child.prototype = object.create(parentwithstatic.prototype) child.prototype.constructor = child child.prototype.
getoffsetbyinitialposition = function
getoffsetbyinitialposition() { let position = this.position ...
... let startposition = this.constructor.
getstartposition() // error undefined is not a function, since the constructor is child return { offsetx: startposition.x - position.x, offsety: startposition.y - position.y } }; for this example we need either to stay parent constructor to continue to work properly or reassign static properties to child's constructor: ...
... let startposition = this.constructor.parentconstructor.
getstartposition() ...
Object.freeze() - JavaScript
accessor properties (
getters and setters) work the same (and still give the illusion that you are changing the value).
...if the value of those properties are objects themselves, those objects are not frozen and may be the tar
get of property addition, removal or value re-assignment operations.
... function deepfreeze(object) { // retrieve the property names defined on object var propnames = object.
getownpropertynames(object); // freeze properties before freezing self for (let name of propnames) { let value = object[name]; if(value && typeof value === "object") { deepfreeze(value); } } return object.freeze(object); } var obj2 = { internal: { a: null } }; deepfreeze(obj2); obj2.internal.a = 'anothervalue'; // fails silently in non-strict mode obj2.interna...
Reflect.defineProperty() - JavaScript
syntax reflect.defineproperty(tar
get, propertykey, attributes) parameters tar
get the tar
get object on which to define the property.
... exceptions a typeerror, if tar
get is not an object.
...] because reflect.defineproperty returns a boolean success status, you can just use an if...else block here: if (reflect.defineproperty(tar
get, property, attributes)) { // success } else { // failure } specifications specification ecmascript (ecma-262)the definition of 'reflect.defineproperty' in that specification.
Reflect.has() - JavaScript
syntax reflect.has(tar
get, propertykey) parameters tar
get the tar
get object in which to look for the property.
... return value a boolean indicating whether or not the tar
get has the property.
... exceptions a typeerror, if tar
get is not an object.
String.prototype.charAt() - JavaScript
x 4 is '" + anystring.charat(4) + "'"); console.log("the character at index 999 is '" + anystring.charat(999) + "'"); these lines display the following: the character at index 0 is 'b' the character at index 0 is 'b' the character at index 1 is 'r' the character at index 2 is 'a' the character at index 3 is 'v' the character at index 4 is 'e' the character at index 999 is ''
getting whole characters the following provides a means of ensuring that going through a string loop always provides a whole character, even if the string contains characters that are not in the basic multi-lingual plane.
... var str = 'a \ud87e\udc04 z'; // we could also use a non-bmp character directly for (var i = 0, chr; i < str.length; i++) { if ((chr =
getwholechar(str, i)) === false) { continue; } // adapt this line at the top of each loop, passing in the whole string and // the current iteration and returning a variable to represent the // individual character console.log(chr); } function
getwholechar(str, i) { var code = str.charcodeat(i); if (number.isnan(code)) { return ''; // position not found } if (code < 0xd800 || code > 0xdfff) { return str.charat(i); } // high surrogate (could change last hex to 0xdb7f to treat high private // surrogates as single characters) if (0xd800 <= code && code <= 0xdbff) { if (str.length <= (i + 1)) { throw 'high sur...
... let str = 'a\ud87e\udc04z' // we could also use a non-bmp character directly for (let i = 0, chr; i < str.length; i++) { [chr, i] =
getwholecharandi(str, i) // adapt this line at the top of each loop, passing in the whole string and // the current iteration and returning an array with the individual character // and 'i' value (only changed if a surrogate pair) console.log(chr) } function
getwholecharandi(str, i) { let code = str.charcodeat(i) if (number.isnan(code)) { return '' // position not found } if ...
String.prototype.padEnd() - JavaScript
syntax str.padend(tar
getlength [, padstring]) parameters tar
getlength the length of the resulting string once the current str has been padded.
...if padstring is too long to stay within tar
getlength, it will be truncated: for left-to-right languages the left-most part and for right-to-left languages the right-most will be applied.
... return value a string of the specified tar
getlength with the padstring applied at the end of the current str.
Symbol - JavaScript
finding symbol properties on objects the method object.
getownpropertysymbols() returns an array of symbols and lets you find symbol properties on a given object.
...otherwise a new symbol
gets created in the global symbol registry with key.
...in addition, object.
getownpropertynames() will not return symbol object properties, however, you can use object.
getownpropertysymbols() to
get these.
TypedArray.prototype.set() - JavaScript
all values from the source array are copied into the tar
get array, unless the length of the source array plus the offset exceeds the length of the tar
get array, in which case an exception is thrown.
... offset optional the offset into the tar
get array at which to begin writing values from the source array.
... if this value is omitted, 0 is assumed (that is, the source array will overwrite values in the tar
get array starting at index 0).
WeakRef.prototype.deref() - JavaScript
the deref method returns the weakref instance's tar
get object, or undefined if the tar
get object has been garbage-collected.
... syntax obj = ref.deref(); return value the tar
get object of the weakref, or undefined if the object has been garbage-collected.
... const tick = () => { //
get the element from the weak reference, if it still exists const element = this.ref.deref(); if (element) { element.textcontent = ++this.count; } else { // the element doesn't exist anymore console.log("the element is gone."); this.stop(); this.ref = null; } }; specifications specification weakrefsthe definition of 'weakref.prototype.deref()' in that specification.
WebAssembly.Global - JavaScript
global.prototype.value the value contained inside the global variable — this can be used to directly set and
get the global's value.
... const output = document.
getelementbyid('output'); function asserteq(msg, got, expected) { output.innerhtml += `testing ${msg}: `; if (got !== expected) output.innerhtml += `fail!<br>got: ${got}<br>expected: ${expected}<br>`; else output.innerhtml += `success!
... got: ${got}<br>`; } asserteq("webassembly.global exists", typeof webassembly.global, "function"); const global = new webassembly.global({value:'i32', mutable:true}, 0); webassembly.instantiatestreaming(fetch('global.wasm'), { js: { global } }) .then(({instance}) => { asserteq("
getting initial value from wasm", instance.exports.
getglobal(), 0); global.value = 42; asserteq("
getting js-updated value from wasm", instance.exports.
getglobal(), 42); instance.exports.incglobal(); asserteq("
getting wasm-updated value from js", global.value, 43); }); note: you can see the example running live on github; see also the source code.
WebAssembly.Table.prototype.set() - JavaScript
we then print out the table length and contents of the two indexes (retrieved via table.prototype.
get()) to show that the length is two, and the indexes currently contain no function references (they currently return null).
... var tbl = new webassembly.table({initial:2, element:"anyfunc"}); console.log(tbl.length); console.log(tbl.
get(0)); console.log(tbl.
get(1)); we then create an import object that contains a reference to the table: var importobj = { js: { tbl:tbl } }; finally, we load and instantiate a wasm module (table2.wasm) using the webassembly.instantiatestreaming(), log the table length, and invoke the two referenced functions that are now stored in the table (the table2.wasm module (see text representation) adds two function references to the table, both of which print out a simple value): webassembly.instantiatestreaming(fetch('table2.wasm'), importobject) .then(function(obj) { console.log(tbl.length); console.log(tbl.
get(0)()); console.log(tbl.
get(1)()); }); note how you've got to ...
...
get(0)() rather than
get(0)) .
Iteration protocols - JavaScript
(this is equivalent to not specifying the done property alto
gether.) has the value true if the iterator has completed its sequence.
...if a non-object value
gets returned (such as false or undefined), a typeerror ("iterator.next() returned a non-object value") will be thrown.
...some examples include: new map([iterable]) new weakmap([iterable]) new set([iterable]) new weakset([iterable]) new map([[1, 'a'], [2, 'b'], [3, 'c']]).
get(2); // "b" let myobj = {}; new weakmap([ [{}, 'a'], [myobj, 'b'], [{}, 'c'] ]).
get(myobj); // "b" new set([1, 2, 3]).has(3); // true new set('123').has('2'); // true new weakset(function* () { yield {} yield myobj yield {} }()).has(myobj); // true see also promise.all(iterable) promise.race(iterable) array.from(iterable) syntaxes expect...
for await...of - JavaScript
async function* streamasynciterable(stream) { const reader = stream.
getreader(); try { while (true) { const { done, value } = await reader.read(); if (done) { return; } yield value; } } finally { reader.releaselock(); } } // fetches data from url and calculates response size using the async generator.
... async function
getresponsesize(url) { const response = await fetch(url); // will hold the size of the response, in bytes.
... responsesize += chunk.length; } console.log(`response size: ${responsesize} bytes`); // expected output: "response size: 1071472" return responsesize; }
getresponsesize('https://jsonplaceholder.typicode.com/photos'); iterating over sync iterables and generators for await...of loop also consumes sync iterables and generators.
Template literals (Template strings) - JavaScript
the expressions in the placeholders and the text between the backticks (` `)
get passed to a function.
...in that case, the tag expression (usually a function)
gets called with the template literal, which you can then manipulate before outputting.
... using normal strings, you would have to use the following syntax in order to
get multi-line strings: console.log('string text line 1\n' + 'string text line 2'); // "string text line 1 // string text line 2" using template literals, you can do the same like this: console.log(`string text line 1 string text line 2`); // "string text line 1 // string text line 2" expression interpolation in order to embed expressions within normal strings, you would use the following syntax: let a = 5; let b = 10; console.log('fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.'); // "fifte...
Animation performance and frame rate - Web Performance
average frame rate here is 46.67fps, well below the tar
get of 60fps.
...with only 16.7ms in our total bud
get, it's not surprising we are missing a consistently high frame rate.
...we're averaging nearly 60fps, and apart from one dip near the start, we're
getting a consistently high frame rate.
Introduction to progressive web apps - Progressive web apps (PWAs)
safe, so the connections between the user, the app, and your server are secured against any third parties trying to
get access to sensitive data.
...the basic ideas behind network independence are to be able to: revisit a site and
get its contents even if no network is available.
...web apps eliminate that confusion and ensure that users
get the best possible experience.
Graphic design for responsive sites - Progressive web apps (PWAs)
textual content is not a problem, as text boxes are innately responsive, but the picture starts to
get ugly when you start including graphics and complex layouts on your pages — especially when those graphics and layouts need to adapt to different displays!
...this really depends on what tar
get devices you have to support, how complex the graphics need to be, and how much interactivity your graphics require.
... coping with different resolutions in this section we'll review different strategies for dealing with
getting images to work across devices with different resolutions.
attributeType - SVG: Scalable Vector Graphics
the attributetype attribute specifies the namespace in which the tar
get attribute and its associated values are defined.
... xml this value specifies that the value of attributename is the name of an xml attribute defined as animatable in the default xml namespace for the tar
get element.
... auto this value specifies that the implementation should match the attributename to an attribute for the tar
get element.
enable-background - SVG: Scalable Vector Graphics
default value accumulate animatable no accumulate if an ancestor container element has a property value of enable-background: new, then all graphics elements within the current container element are rendered both onto the parent container elementʼs background image canvas and onto the tar
get device.
... otherwise, there is no current background image canvas, so graphics elements are only rendered onto the tar
get device.
... it also indicates that a new (i.e., initially transparent black) background image canvas is established and that in effect all children of the current container element shall be rendered into the new background image canvas in addition to being rendered onto the tar
get device.
rendering-intent - SVG: Scalable Vector Graphics
the different options cause different methods to be used for translating colors to the color gamut of the tar
get rendering device.
...it attempts to maintain relative color values among the pixels as they are mapped to the tar
get device gamut.
... sometimes pixel values that were originally within the tar
get device gamut are changed in order to avoid hue shifts and discontinuities and to preserve as much as possible the overall appearance of the scene.
textLength - SVG: Scalable Vector Graphics
it starts by stashing references to the elements it will need to access, using document.
getelementbyid(): const widthslider = document.
getelementbyid("widthslider"); const widthdisplay = document.
getelementbyid("widthdisplay"); const textelement = document.
getelementbyid("hello"); const baselength = math.floor(textelement.textlength.baseval.value); widthslider.value = baselength; widthslider.addeventlistener("input", function(event) { textelement.textlength.baseval.newvaluespecifie...
...note that we have to dive into textlength to
get its baseval property; textlength is stored as an svglength object, so we can't treat it like a plain number.
...try dragging the slider around to
get a feel for what it does.
<feConvolveMatrix> - SVG: Scalable Vector Graphics
the basic convolution formula which is applied to each color value for a given pixel is: colorx,y = ( sum i=0 to [ordery-1] { sum j=0 to [orderx-1] { source x-tar
getx+j, y-tar
gety+i * kernelmatrixorderx-j-1, ordery-i-1 } } ) / divisor + bias * alphax,y where "orderx" and "ordery" represent the x and y values for the ‘order’ attribute, "tar
getx" represents the value of the ‘tar
getx’ attribute, "tar
gety" represents the value of the ‘tar
gety’ attribute, "kernelmatrix" represents the value of the �...
...assuming the simplest case (where the input image's pixel grid aligns perfectly with the kernel's pixel grid) and assuming default values for attributes ‘divisor’, ‘tar
getx’ and ‘tar
gety’, then resulting color value will be: (9* 0 + 8* 20 + 7* 40 + 6*100 + 5*120 + 4*140 + 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1) usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes cla...
...ss style specific attributes in order kernelmatrix divisor bias tar
getx tar
gety edgemode kernelunitlength preservealpha dom interface this element implements the svgfeconvolvematrixelement interface.
Clipping and masking - SVG: Scalable Vector Graphics
for the clipping, every path inside the clippath is inspected and evaluated to
gether with its stroke properties and transformation.
... then every part of the tar
get lying in a transparent area of the resulting clippath's content will not be rendered.
...it is therefore little surprise, that it was decided to take this css property into svg as well, to
gether with visibility and clip as defined by css 2.
Introduction - SVG: Scalable Vector Graphics
the image and its components can also be transformed, composited to
gether, or filtered to change their appearance completely.
...a simple svg document consists of nothing more than the <svg> root element and several basic shapes that build a graphic to
gether.
... in addition there is the <g> element, which is used to group several basic shapes to
gether.
Paths - SVG: Scalable Vector Graphics
several bézier curves can be stringed to
gether to create extended, smooth shapes.
... q x1 y1, x y (or) q dx1 dy1, dx dy <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 80 q 95 10 180 80" stroke="black" fill="transparent"/> </svg> as with the cubic bézier curve, there is a shortcut for stringing to
gether multiple quadratic béziers, called with t.
...to
gether, these four values define the basic structure of the arc.
SVG and CSS - SVG: Scalable Vector Graphics
copy and paste the content from here, making sure that you scroll to
get all of it: <svg width="600px" height="600px" viewbox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>svg demonstration</title> <desc>mozilla css
getting started - svg demonstration</desc> <defs> <radialgradient id="fade" cx="0" cy="0" r="200" gradientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"...
...copy and paste the content from here, making sure that you scroll to
get all of it: /*** svg demonstration ***/ /* page */ svg { background-color: beige; } #heading { font-size: 24px; font-weight: bold; } #caption { font-size: 12px; } /* flower */ #flower:hover { cursor: crosshair; } /* gradient */ #fade-stop-1 { stop-color: blue; } #fade-stop-2 { stop-color: white; } /* petals */ .segment-fill { fill: var(--segment-fill-fill); stroke: var(--...
... <svg width="600px" height="600px" viewbox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg"> <title>svg demonstration</title> <desc>mozilla css
getting started - svg demonstration</desc> <defs> <g id="segment" class="segment"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g id="quadrant"> <use xlink:href="#segment"/> <use xlink:href="#segment" transform="rotate(18)"/> <use xlink:href="#segment" transform="rotate...
SVG fonts - SVG: Scalable Vector Graphics
if you also specify the lang attribute on a glyph, you can further restrict it to certain languages (represented by xml:lang on the tar
get) exclusively.
...the below example instructs user agents to place the "a" and "v" characters closer to
gether the standard distance between characters.
... <hkern u1="a" u2="v" k="20" /> referencing a font when you have put to
gether your font declaration as described above, you can just use a simple font-family attribute to actually apply the font to some svg text: <font> <font-face font-family="super sans" /> <!-- and so on --> </font> <text font-family="super sans">my text uses super sans</text> however, you are free to combine several methods for great freedom of how and where to define the font.
Referer header: privacy and security concerns - Web security
you should use post rather than
get wherever possible, to avoid passing sensitive data to other locations via urls.
...social networking wid
gets embedded in <iframe>) from secure areas of your website, like password reset pages, payment forms, login areas, etc.
...this can for example be set to no-referrer to stop the referer header being sent alto
gether.
Same-origin policy - Web security
(a "tuple" is a set of items that to
gether comprise a whole — a generic form for double/triple/quadruple/quintuple/etc.) the following table gives examples of origin comparisons with the url http://store.company.com/dir/page.html: url outcome reason http://store.company.com/dir2/other.html same origin only the path differs http://store.company.com/dir/inner/another.html same origin only ...
... data: urls
get a new, empty, security context.
...each origin
gets its own separate storage, and javascript in one origin cannot read from or write to the storage belonging to another origin.
Subdomain takeovers - Web security
a subdomain takeover occurs when an attacker gains control over a subdomain of a tar
get domain.
... during provisioning an attacker sets up a virtual host for a subdomain name you bought on the hosting provider, before you
get to do it.
...do all steps as closely to
gether as possible.
Web Components
web components aims to solve such problems — it consists of three main technologies, which can be used to
gether to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions.
... relevant node additions additions to the node interface relevant to shadow dom: the node.
getrootnode() method returns the context object's root, which optionally includes the shadow root if it is available.
... <slot> a placeholder inside a web component that you can fill with your own markup, which lets you create separate dom trees and present them to
gether.
Compiling a New C/C++ Module to WebAssembly - WebAssembly
prerequisites
get the emscripten sdk, using these instructions: https://emscripten.org/docs/
getting_started/downloads.html compiling an example with the environment set up, let's look at how to use it to compile a c example to emscripten.
... creating html and javascript this is the simplest case we'll look at, whereby you
get emscripten to generate everything you need to run your code, as webassembly, in the browser.
... other problems calling a custom function defined in c if you have a function defined in your c code that you want to call as needed from javascript, you can do this using the emscripten ccall() function, and the emscripten_keepalive declaration (which adds your functions to the exported functions list (see why do functions in my c/c++ source code vanish when i compile to javascript, and/or i
get no functions to process?)).
Index - WebAssembly
found 12 pages: # page tags and summary 1 webassembly landing, webassembly, wasm webassembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as c/c++ with a compilation tar
get so that they can run on the web.
... it is also designed to run alongside javascript, allowing both to work to
gether.
... 10 understanding webassembly text format functions, javascript, s-expressions, webassembly, calls, memory, shared address, table, text format, was, wasm this finishes our high-level tour of the major components of the webassembly text format and how they
get reflected in the webassembly js api.
WebAssembly
webassembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as c/c++, c# and rust with a compilation tar
get so that they can run on the web.
... it is also designed to run alongside javascript, allowing both to work to
gether.
... guides webassembly concepts
get started by reading the high-level concepts behind webassembly — what it is, why it is so useful, how it fits into the web platform (and beyond), and how to use it.
2015 MDN Fellowship Program - Archive of obsolete content
specific projects (we encourage you to tar
get one of these in your application): testthewebforward brief project description mozilla participates in an important w3c open testing initiative, testthewebforward.com.
...webgl is
getting some cool new features in 2015 with the standardization efforts around the webgl 2.0 spec being published.
Reddit Example - Archive of obsolete content
to accomplish this the add-on needs to run a content script in the context of the reddit page which intercepts mouse clicks on each title link and fetches the link's tar
get url.
... this is the panel.js content script that intercepts link clicks: $(window).click(function (event) { var t = event.tar
get; // don't intercept the click if it isn't on a link.
Classes and Inheritance - Archive of obsolete content
when a function is used in a constructor call, javascript makes the value of this property the prototype of the newly created object: let shape = shape(2, 3); object.
getprototypeof(shape) == shape.prototype; // => true all instances of a class have the same prototype.
...consequently, overriding a method is as simple as providing a new definition on the prototype of the subclass: circle.prototype.draw = function (ctx) { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, 2 * math.pi, false); ctx.fill(); }; with this definition in place, we
get: let shape = shape(2, 3); shape.draw(); // error: not yet implemented let circle = circle(2, 3, 5); circle.draw(); // typeerror: ctx is not defined which is the behavior we were aiming for.
Modules - Archive of obsolete content
however, the following example shows how it can be used to load scripts from other locations: const { classes: cc interfaces: ci } = components; var instance = cc["@mozilla.org/moz/jssubscript-loader;1"]; var loader = instance.
getservice(ci.mozijssubscriptloader); function loadscript(url) { loader.loadsubscript(url); } when a script is loaded, it is evaluated in the scope of the global object of the script that loaded it.
...the problem with breaking encapsulation like this is that malicious scripts can use it to
get the loading script to execute arbitrary code, by overriding one of the methods on the built-in constructors.
page-worker - Archive of obsolete content
in this example we fetch the first paragraph of a page from wikipedia, then the first paragraph of a different page: var
getfirstparagraph = "var paras = document.
getelementsbytagname('p');" + "console.log(paras[0].textcontent);" + "self.port.emit('loaded');" pageworker = require("sdk/page-worker").page({ contentscript:
getfirstparagraph, contenturl: "http://en.wikipedia.org/wiki/chalk" }); pageworker.port.on("loaded", function() { pageworker.contenturl = "http://...
... unless your content script is extremely simple and consists only of a static string, don't use contentscript: if you do, you may have problems
getting your add-on approved on amo.
content/symbiont - Archive of obsolete content
var { symbiont } = require('sdk/content/content'); var thing = symbiont.resolve({ constructor: '_init' }).compose({ constructor: function thing(options) { // `
getmyframe` returns the host application frame in which // the page is loaded.
... this._frame =
getmyframe(); this._init(options) } }); see the panel module for a real-world example of usage of this module.
core/heritage - Archive of obsolete content
also you can mix inheritance and composition to
gether if necessary: var point = class({ initialize: function initialize(x, y) { this.x = x; this.y = y; }, tostring: function tostring() { return this.x + ':' + this.y; } }) var pixel = class({ extends: point, implements: [ color ], initialize: function initialize(x, y, color) { color.prototype.initialize.call(this, color); point.prototype.initialize.call(this, x,...
...function takes an object and returns a new one in return that inherits from the same object as given one and implements all own properties of given object but as non-enumerable ones: var { obscure } = require('api-utils/heritage'); var object = mix({ a: 1 }, obscure({ b: 2 })); object.
getownpropertynames(foo); // => [ 'a' ] ...
ui/id - Archive of obsolete content
globals functions identify(object) makes and/or
gets a unique id for the input.
... making an id const { identify } = require('sdk/ui/id'); const thingy = class({ initialize: function(details) { let id = identify(this); } });
getting an id const { identify } = require('sdk/ui/id'); const { thingy } = require('./thingy'); let thing = thingy(/* ...
ui/toolbar - Archive of obsolete content
toolbars
get a close button at the right-hand side, and users can show or hide the toolbar using the firefox "view/toolbars" menu, alongside built-in toolbars like the bookmarks toolbar.
... toolbar events toolbars
get attach and detach events when their content is loaded and unloaded, and show and hide events when the uses shows or hides them.
util/object - Archive of obsolete content
= { jetpacks: "are yes", foo: 10 } var b = merge(a, { foo: 5, bar: 6 }, { foo: 50, location: "sf" }); b === a // true b.jetpacks // "are yes" b.foo // 50 b.bar // 6 b.location // "sf" // merge also translates property descriptors var c = { "type": "addon" }; var d = {}; object.defineproperty(d, "name", { value: "jetpacks", configurable: false }); merge(c, d); var props = object.
getownpropertydescriptor(c, "name"); console.log(props.configurable); // true parameters source : object the object that other properties are merged into.
... let { extend } = require("sdk/util/object"); var a = { alpha: "a" }; var b = { beta: "b" }; var g = { gamma: "g", alpha: null }; var x = extend(a, b, g); console.log(a); // { alpha: "a" } console.log(b); // { beta: "b" } console.log(g); // { gamma: "g", alpha: null } console.log(x); // { alpha: null, beta: "b", gamma: "g" } parameters arguments : object n arguments that
get merged into a new object.
Chrome Authority - Archive of obsolete content
likewise, it will prevent modules from
getting chrome authority unless the manifest indicates that they have asked for it.
...if the scanner fails to see a require entry, the manifest will not include that entry, and (once the implementation is complete) the runtime code will
get an exception.
List Open Tabs - Archive of obsolete content
the following add-on adds an action button that logs the urls of open tabs when the user clicks it: require("sdk/ui/button/action").actionbutton({ id: "list-tabs", label: "list tabs", icon: "./icon-16.png", onclick: listtabs }); function listtabs() { var tabs = require("sdk/tabs"); for (let tab of tabs) console.log(tab.url); } note: to
get this working, you will need to save an icon for the button to your add-on's "data" directory as "icon-16.png".
...you'll see output in the command line console that looks something like this: info: http://www.mozilla.org/about/ info: http://www.bbc.co.uk/ you don't
get direct access to any content hosted in the tab.
Modifying Web Pages Based on URL - Archive of obsolete content
$("body").html("<h1>page matches ruleset</h1>"); then download jquery to add-on's data directory, and load the script and jquery to
gether (making sure to load jquery first).
... in the add-on script, you need to listen for the onattach event to
get passed a worker object that contains port.
Open a Web Page - Archive of obsolete content
to open a new web page, you can use the tabs module: var tabs = require("sdk/tabs"); tabs.open("http://www.example.com"); this function is asynchronous, so you don't immediately
get back a tab object which you can examine.
...the callback is assigned to the onready property, and will be passed the tab as an argument: var tabs = require("sdk/tabs"); tabs.open({ url: "http://www.example.com", onready: function onready(tab) { console.log(tab.title); } }); even then, you don't
get direct access to any content hosted in the tab.
Add-on SDK - Archive of obsolete content
tutorials
getting started how to install the sdk and use the jpm tool to develop, test, and package add-ons.
... putting it to
gether walkthrough of the annotator example add-on.
Examples and demos from articles - Archive of obsolete content
[article] image preview before upload [html] the filereader.prototype.readasdataurl() method is useful, for example, to
get a preview of an image before uploading it.
...[article] pure-css lightbox [html] the :tar
get pseudo-class is useful to switch on/off some invisible elements.
HTML in XUL for rich tooltips - Archive of obsolete content
var htmltip = { onload: function() { //at any point you can save an html string to a xul attribute for later injection into the tooltip document.
getelementbyid("htmltip1").setattribute("tooltiphtml", "<font color='red'>red foo</font>") document.
getelementbyid("htmltip2").setattribute("tooltiphtml", "<font color='green'>green foo</font>") }, onmousetooltip: function(event) { //
get the html tooltip string assigned to the element that the mouse is over (which will soon launch the tooltip) var txt = event.tar
get.
getattribute("tooltiphtml");...
... //
get the html div element that is inside the custom xul tooltip var div = document.
getelementbyid("myhtmltipdiv"); //clear the html div element of any prior shown custom html while(div.firstchild) div.removechild(div.firstchild); //safely convert html string to a simple dom object, stripping it of javascript and more complex tags var injecthtml = components.classes["@mozilla.org/feed-unescapehtml;1"] .
getservice(components.interfaces.nsiscriptableunescapehtml) .parsefragment(txt, false, null, div); //attach the dom object to the html div element div.appendchild(injecthtml); } } window.addeventlistener('load', htmltip.onload, false); in the xul overlay, xmlns:html is used to enable html tags to be used inside the xul.
JavaScript Debugger Service - Archive of obsolete content
var jsd = components.classes["@mozilla.org/js/jsd/debugger-service;1"] .
getservice(components.interfaces.jsdidebuggerservice); jsd.on(); // enables the service till firefox 3.6, for 4.x use asyncon if (jsd.ison) jsd.off(); // disables the service hooks jsd operates using the events hook mechanism.
... jsd.errorhook = { onerror: function(message, filename, lineno, colno, flags, errnum, exc) { dump(message + "@" + filename + "@" + lineno + "@" + colno + "@" + errnum + "\n"); // check message type var jsdierrorhook = components.interfaces.jsdierrorhook; var messa
getype; if (flags & jsdierrorhook.report_error) messa
getype = "error"; if (flags & jsdierrorhook.report_warning) messa
getype = "warning"; if (flags & jsdierrorhook.report_exception) messa
getype = "uncaught-exception"; if (flags & jsdierrorhook.report_strict) messa
getype += "-strict"; dump(messa
getype + "\n"); return false; // trigger debughook // return true; if you do n...
LookupNamespaceURI - Archive of obsolete content
// default namespace if (att.value) { return att.value; } return null; // unknown } } } if (node.parentnode && node.parentnode.nodetype !== 9) { // entityreferences may have to be skipped to
get to it return lookupnamespaceurihelper(node.parentnode, prefix); } return null; case 9: // document_node return lookupnamespaceurihelper(node.documentelement, prefix); case 6: // entity_node case 12: // notation_node case 10: // document_type_node case 11: // document_fra...
... return lookupnamespaceurihelper(node.ownerelement, prefix); } return null; // unknown default: // text_node (3), cdata_section_node (4), entity_reference_node (5), // processing_instruction_node (7), comment_node (8) if (node.parentnode) { // entityreferences may have to be skipped to
get to it return lookupnamespaceurihelper(node.parentnode, prefix); } return null; // unknown } }; } }()); ...
LookupPrefix - Archive of obsolete content
e.entity_node case 12: // node.notation_node case 11: // node.document_fragment_node case 10: // node.document_type_node return null; // type is unknown case 2: // node.attribute_node if (node.ownerelement) { return _lookupnamespaceprefix(namespaceuri, node.ownerelement); } return null; default: if (node.parentnode) { // entityreferences may have to be skipped to
get to it return _lookupnamespaceprefix(namespaceuri, node.parentnode); } return null; } } // private function for lookupprefix only function _lookupnamespaceprefix (namespaceuri, originalelement) { var xmlnspattern = /^xmlns:(.*)$/; if (originalelement.namespaceuri && originalelement.namespaceuri === namespaceuri && originalelement.prefix && originalelement.lookupnamespaceuri(origi...
...(localname.indexof(':') !== -1) { // for firefox when in html mode localname = localname.substr(att.name.indexof(':')+1); } if ( xmlnspattern.test(att.name) && att.value === namespaceuri && lookupnamespaceuri(originalelement, localname) === namespaceuri ) { return localname; } } } if (originalelement.parentnode) { // entityreferences may have to be skipped to
get to it return _lookupnamespaceprefix(namespaceuri, originalelement.parentnode); } return null; } ...
Running applications - Archive of obsolete content
see nsilocalfile.launch() for details and make sure that all your tar
get platforms support this method!
... var file = components.classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile); file.initwithpath("c:\\myapp.exe"); file.launch(); references nsiprocess nsilocalfile if you need to launch an executable bundled in your xpi, see code snippets:file i/o#
getting your extension's folder.
Tabbox - Archive of obsolete content
handling onclosetab event assuming the tabbox, tabs, and tabpanels wid
gets with id's the same as their nodename, this function will correctly remove the current tab and tab panel for the onclosetab tabs event: function removetab(){ var tabbox = document.
getelementbyid("tabbox"); var currentindex = tabbox.selectedindex; if(currentindex>=0){ var tabs=document.
getelementbyid("tabs"); var tabpanels=document.
getelementbyid("tabpanels"); tabpanels.removechild(tabpanels.childnodes[currentindex]); tabs.removeitemat(currentindex); /*wo...
...rk around if last tab is removed, wid
get fails to advance to next tab*/ if(-1 == tabbox.selectedindex && tabs.childnodes.length>0){ tabbox.selectedindex=0; } } creating a close tab button to have a tab close button, you must configure the style.
URI parsing - Archive of obsolete content
grabbing the main domain using the effectivetldservice even using the etldservice, you're unable to
get just the base domain sans tld.
...
getservice(components.interfaces.nsieffectivetldservice); var suffix = etldservice.
getpublicsuffix(auri); var basedomain = etldservice.
getbasedomain(auri); // this includes the tld basedomain = basedomain.substr(0, (basedomain.length - suffix.length - 1)); // - 1 to remove the period before the tld ...
Code snippets - Archive of obsolete content
nevertheless, the increasing computational power of modern browsers to
gether with the introduction of typed arrays in ecmascript allow us, in theory, to build full virtual machines in pure ecmascript.
...d to read and write bookmarks javascript debugger service code used to interact with the javascript debugger service svg general general information and utilities svg animation animate svg using javascript and smil svg interacting with script using javascript and dom events to create interactive svg embedding svg in html and xul using svg to enhance html or xul based markup xul wid
gets html in xul for rich tooltips dynamically embed html into a xul element to attain markup in a tooltip label and description special uses and line breaking examples tree setup and manipulation of trees using xul and js scrollbar changing style of scrollbars.
Common Pitfalls - Archive of obsolete content
how to create a uri object in almost all cases, when creating a uri object you want to use the newuri method on the nsiioservice interface, like so: javascript: try { var ioserv = components.classes["@mozilla.org/network/io-service;1"] .
getservice(components.interfaces.nsiioservice); var uriobj = ioserv.newuri(uristring, uricharset, baseuri); } catch (e) { // may want to catch ns_error_malformed_uri for some applications } c++: nsresult rv; nscomptr<nsiioservice> ioserv = do_
getservice("@mozilla.org/network/io-service;1"); ns_ensure_success(rv, rv); nscomptr<nsiuri> uriobj; rv = ioserv->newuri(uristring, uricharset, baseuri,...
...
getter_addrefs(uriobj)); if (ns_failed(rv)) { // may want to handle ns_error_malformed_uri for // some applications return rv; } or, if the code can include nsnetutil.h: nscomptr<nsiuri> uriobj; nsresult rv = ns_newuri(
getter_addrefs(uriobj), uristring, uricharset, baseuri); in all cases the baseuri can be null if the uristring should be treated as an absolute uri and uricharset can be null if there is no clear origin charset for the string (e.g.
Extension Theming Guidelines - Archive of obsolete content
while it may be tempting to use the same stylesheet in multiple places try to avoid this so that themes can correctly tar
get the right windows.
...however these are rarely part of the style of the wid
gets but more about adding custom wid
gets.
Extension Etiquette - Archive of obsolete content
if the user loads a website and they ask for focus, they should
get it.
...however, please make sure the default set of preferences is adequate — don't require people to tweak options in order to
get your extension's core functionality.
Migrating raw components to add-ons - Archive of obsolete content
simple migration if your goal is just to
get your raw component working properly as an extension, you can do this in three steps: create a new add-on using the instructions here.
... as you'll see, add-ons give you much more flexibility than simply loading a component, but in order to
get started, all you'll need is your directory structure and install manifest.
Multiple item extension packaging - Archive of obsolete content
the only required properties are em:id, em:tar
getapplication, and em:type.
... when specifying em:tar
getapplication the minversion specified should be the highest minversion and the maxversion specified should be the lowest maxversion from all of the installable bundles contained by the multiple item package for the em:tar
getapplication.
Offering a context menu for form controls - Archive of obsolete content
window.addeventlistener("load", function() { let settar
getoriginal = nscontextmenu.prototype.settar
get; components.utils.reporterror(settar
getoriginal); nscontextmenu.prototype.settar
get = function(anode, arangeparent, arangeoffset) { settar
getoriginal.apply(this, arguments); if (this.istar
getaformcontrol(anode)) this.shoulddisplay = true; }; }, false); this code, which is run when the window is opened up, works by rep...
...lacing the settar
get() routine for the prototype of nscontextmenu with one that forces the context menu to display if the tar
get of the menu is a form control.
Performance best practices in extensions - Archive of obsolete content
lazily load services the xpcomutils javascript module provides two methods for lazily loading things: definelazy
getter() defines a function on a specified object that acts as a
getter which will be created the first time it's used.
... definelazyservice
getter() defines a function on a specified object which acts as a
getter for a service.
XML data - Archive of obsolete content
copy and paste the content from here, making sure that you scroll to
get all of it: <?xml version="1.0"?> <!-- xml demonstration --> <?xml-stylesheet type="text/css" href="style9.css"?> <!doctype planet> <planet> <ocean> <name>arctic</name> <area>13,000</area> <depth>1,200</depth> </ocean> <ocean> <name>atlantic</name> <area>87,000</area> <depth>3,900</depth> </ocean> <ocean> <name>pacific</name> <area>180,000</area> <depth>4,000</depth> </ocean> <ocean> <name...
...copy and paste the content from here, making sure that you scroll to
get all of it: /*** xml demonstration ***/ planet:before { display: block; width: 8em; font-weight: bold; font-size: 200%; content: "oceans"; margin: -.75em 0px .25em -.25em; padding: .1em .25em; background-color: #cdf; } planet { display: block; margin: 2em 1em; border: 4px solid #cdf; padding: 0px 1em; background-color: white; } ocean { display: block; margin-bottom: 1em; } name { display: block; font-weight: bold; font-size: 150%; } area { display: block; } area:before { conte...
CSS3 - Archive of obsolete content
new pseudo-classes: :tar
get, :enabled and :disabled, :checked, :indeterminate, :root, :nth-child and :nth-last-child, :nth-of-type and :nth-last-of-type, :last-child, :first-of-type and :last-of-type, :only-child and :only-of-type,:empty, and :not.
...to
gether with it, they are the current snapshot of the css specification.
MozAudioAvailable - Archive of obsolete content
general info specification dom l3 interface event bubbles no cancelable no tar
get element default action none.
... properties property type description tar
get read only eventtar
get the event tar
get (the topmost tar
get in the dom tree).
chargingchange - Archive of obsolete content
general info specification battery interface event bubbles no cancelable no tar
get batterymanager default action none properties the event callback doesn't receive any event objects, but properties can be read from the batterymanager object received from the navigator.
getbattery method.
... example navigator.
getbattery().then(function(battery) { console.log("battery charging?
chargingtimechange - Archive of obsolete content
general info specification battery interface event bubbles no cancelable no tar
get batterymanager default action none properties the event callback doesn't receive any event objects, but properties can be read from the batterymanager object received from the navigator.
getbattery method.
... example navigator.
getbattery().then(function(battery) { console.log("battery charging time: " + battery.chargingtime + " seconds"); battery.addeventlistener('chargingtimechange', function() { console.log("battery charging time: " + battery.chargingtime + " seconds"); }); }); related events chargingchange dischargingtimechange levelchange ...
dischargingtimechange - Archive of obsolete content
general info specification battery interface event bubbles no cancelable no tar
get batterymanager default action none properties the event callback doesn't receive any event objects, but properties can be read from the batterymanager object received from the navigator.
getbattery method.
... example navigator.
getbattery().then(function(battery) { console.log("battery discharging time: " + battery.dischargingtime + " seconds"); battery.addeventlistener('dischargingtimechange', function() { console.log("battery discharging time: " + battery.dischargingtime + " seconds"); }); }); related events chargingchange dischargingtimechange levelchange ...
levelchange - Archive of obsolete content
general info specification battery interface event bubbles no cancelable no tar
get batterymanager default action none properties the event callback doesn't receive any event objects, but properties can be read from the batterymanager object received from the navigator.
getbattery method.
... example navigator.
getbattery().then(function(battery) { console.log("battery level: " + battery.level * 100 + " %"); battery.addeventlistener('levelchange', function() { console.log("battery level: " + battery.level * 100 + " %"); }); }); related events chargingchange chargingtimechange dischargingtimechange ...
Install.js - Archive of obsolete content
['classic', 'modern'] extpostinstallmessage: null, // set to null for no post-install message // --- editable items end --- profileinstall: true, silentinstall: false, install: function() { var jarname = this.extshortname + '.jar'; var profiledir = install.
getfolder('profile', 'chrome'); // parse http arguments this.parsearguments(); // check if extension is already installed in profile if (file.exists(install.
getfolder(profiledir, jarname))) { if (!this.silentinstall) { install.alert('updating existing profile install of ' + this.extfullname + ' to version ' + this.extversion + '.'); } this.profileinstall = true; } ...
...irectory (ok) or your browser directory (cancel)?'); } // init install var dispname = this.extfullname + ' ' + this.extversion; var regname = '/' + this.extauthor + '/' + this.extshortname; install.initinstall(dispname, regname, this.extversion); // find directory to install into var installpath; if (this.profileinstall) installpath = profiledir; else installpath = install.
getfolder('chrome'); // add jar file install.addfile(null, 'chrome/' + jarname, installpath, null); // register chrome var jarpath = install.
getfolder(installpath, jarname); var installtype = this.profileinstall ?
Visualizing an audio spectrum - Archive of obsolete content
<!doctype html> <html> <head> <title>javascript spectrum example</title> </head> <body> <audio id="audio-element" src="song.ogg" controls="true" style="width: 512px;"> </audio> <div><canvas id="fft" width="512" height="200"></canvas></div> <script> var canvas = document.
getelementbyid('fft'), ctx = canvas.
getcontext('2d'), channels, rate, framebufferlength, fft; function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; fft = new fft(framebufferlength / channels, rate); } ...
...vas before drawing spectrum ctx.clearrect(0,0, canvas.width, canvas.height); for (var i = 0; i < fft.spectrum.length; i++ ) { // multiply spectrum by a zoom value magnitude = fft.spectrum[i] * 4000; // draw rectangle bars for each frequency bin ctx.fillrect(i * 4, canvas.height, 3, -magnitude); } } var audio = document.
getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); // fft from dsp.js, see below var fft = function(buffersize, samplerate) { this.buffersize = buffersize; this.samplerate = samplerate; this.spectrum = new float32array(buffersize/2...
ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
get the source you need cvs to
get the source code.
... build it it is quite simple to build the control locate the pluginhostctrl directory: open pluginhostctrl.dsp build "win32 debug" or another tar
get open some of the test files under pluginhostctrl\tests in internet explorer to verify the control has built and registered correctly.
Hidden prefs - Archive of obsolete content
address book "
get map" button pref ("mail.addr_book.mapit_url.format" ) the format for this pref is: @a1 == address, part 1 @a2 == address, part 2 @ci == city @st == state @zi == zip code @co == country if the pref is set to "", no "
get map" button will appear in the addressbook card preview pane.
... for example: when that mail
gets sent, approved: test@test.com will be in the message in the headers.
Jetpack Snippets - Archive of obsolete content
ebar jetpack.future.import("slidebar");jetpack.slidebar.append({ html: <html><head></head><body> <p>some slidbar you want to debug</p> <a href="javascript:console.log('hello!')">test</a> <script><![cdata[ //firebug lite bookmarklet code: var firebug=document.createelement('script'); firebug.setattribute('src','http://
getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'); document.body.appendchild(firebug); (function(){if(window.firebug.version){firebug.init();}else{settimeout(arguments.callee);}})();void(firebug); ]]></script> </body></html>, width: 800, //wide enough to use firebug onselect: function(slide) { slide.slide(800, true); }})...
...; calling into a slidebar from the global jetpack scope jetpack.slidebar.append({ onready: function (slide) { // call out to a global function, passing the slidebar object exinitslidebar(slide); }, ...});function exinitslidebar(aslidebar) { // this variable will now be global slider = aslidebar;} // then, accessing the slidebar htmlvar tl = slider.contentdocument.
getelementbyid("thumblist"); // or calling slidebar api methods or accessing propertiesslider.notify(); ...
Mozilla Application Framework - Archive of obsolete content
dom inspector a tool for inspecting and editing the structure and wid
gets of your user interface while your application is running.
... xulmaker a gui builder currently under development that lets you drag-and-drop wid
gets onto a grid to build your user interface.
Mozilla Crypto FAQ - Archive of obsolete content
shortly thereafter the nss developers began work on an open source implementation of the rsa algorithm; that code, to
gether with code previously developed for other cryptographic algorithms, will be included in a new version 3.1 of the nss open source cryptographic and pki library.
...when will mozilla
get full support for ssl and s/mime?
LIR - Archive of obsolete content
integer call subroutine that returns an int 35 callq quad 64 bit call subroutine that returns a quad 36 calld double call subroutine that returns a double branch 37 j void jump always 38 jt void jump if true 39 jf void jump if false 40 jtbl void jump to address in table 41 label void a jump tar
get (no machine code is emitted for this) 42 not in use guards 43 x void exit always 44 xt void exit if true 45 xf void exit if false 46 xtbl void exit via indirect jump 47 xbarrier void a lir_xbarrier cause no code to be generated, but it acts like a never-taken guard in that it inhibits certain optimisations, ...
...w 119 addjovi integer add int and branch on overflow 120 subjovi integer subtract int and branch on overflow 121 muljovi integer multiply int and branch on overflow 122 addjovq quad 64 bit add quad and branch on overflow 123 subjovq quad 64 bit subtract quad and branch on overflow softfloat 124 dlo2i integer softfloat
get the low 32 bits of a double as an int 125 dhi2i integer softfloat
get the high 32 bits of a double as an int 126 ii2d double softfloat join two ints (1st arg is low bits, 2nd is high) 127 hcalli integer lir_hcalli is a hack that's only used on 32-bit platforms that use softfloat.
New Security Model for Web Services - Archive of obsolete content
using a declarations file a more robust solution is to rely on
getting a file named "web-scripts-access.xml" in the root directory of the server that the sandboxed script requests to communicate with.
... delegation with mixed ownership independent owners of subdirectories cannot grant web script access to these subdirectories without
getting the owner of the root directory to post a delegating access file.
Plugin Architecture - Archive of obsolete content
sequence of events in content a content node for a plugin dom element
gets created in bindtotree (usually) or another function, it calls loadobject loadobject either notices directly that it is dealing with a plugin, or it starts a network request and notices this in onstartrequest when it realizes that, it tries to create a frame, if anotify is true and no frame exists yet if a frame exists now, it is asked to instantiate the plugin that was the normal case.
...me hasnewframe is called, the frame isn't fully set up yet) in layout note: some of this should move to content an instance owner is created the window passed to the plugin is adjusted (the npwindow, http://devedge-temp.mozilla.org/libr...nt.html#999221) the plugin host is asked to instantiate the plugin this will call back to the instance owner / the object frame in order to create a wid
get to draw to (if the plugin is not windowless) nsplugininstanceowner::setwindow setwindow is called on the plugin ...
Hacking wiki - Archive of obsolete content
for anonymous access use: svn co http://svn.mozilla.org/projects/deve...lla.org/trunk/ to see the skins properly, you'll need to also check out <tt>mozilla-org/css</tt> to
get the css files needed: export cvsroot=:pserver:anonymous@cvs-mirror.mozilla.org:/www cvs login cvs co mozilla-org/css (when prompted to enter a password, type <tt>anonymous</tt>) setting up copy the contents of the <tt>trunk</tt> folder and the <tt>css</tt> folder (note: the folder itself) into the <tt>www</tt> directory on your server.
...the <tt>css</tt> folder contains files that are supposed to be in the <tt>/css</tt> directory of the site.) to
get a working install, you need to configure mediawiki.
PyDOM - Archive of obsolete content
for example, let's say you have xul similar to pyxultest: top-level script code says something like: button = document.
getelementbyid("some-button") button.foo = 0 and the button itself might look like: <button id="some-button" label="click here" onclick="event.tar
get.foo += 1; print 'foo is now', event.tar
get.foo"/> note that (a) we have stuck an arbitrary attribute on a dom element and (b) in all cases (e.g., event handler and top-level script), the dom node needs to be explicitly specified - the globals...
...the event handler could also have used
getelementbyid - the point is that both the event handler and top-level script share the same namespace.
Safely loading URIs - Archive of obsolete content
if a web page
gets access to a window with such expanded privileges, it may be able to abuse it to gain access to those privileges itself.
... if you're doing anything else (passing a uri string to some other api like window.open or <img src="">, passing a uri object to an api that loads uri objects, etc.) use whichever method best fits the data you can
get your hands on.
SpiderMonkey coding conventions - Archive of obsolete content
most static function names have unprefixed, mixed-case names:
getchar.
... linkage dll entry points have their return type expanded within a js_public_api() macro call, to
get the right windows secret type qualifiers in the right places for all build variants.
File object - Archive of obsolete content
getting started in order to use the file object from your javascript programs, you must enable it by setting the make variable js_has_file_object during the compilation of your spidermonkey engine.
... file.list()
get a list of files, potentially matching a regular expression filter, from the file.
Static Analysis for Windows Code under Linux - Archive of obsolete content
dehydra requires patching gcc such that it can load plugins as shared libraries: # prepare a directory mkdir $home/dehydra cd $home/dehydra #obtain gcc 4.3 sources w
get ftp://mirrors.kernel.org/gnu/gcc/gcc...-4.3.0.tar.bz2 tar jxvf gcc-4.3.0.tar.bz2 #
get the patches which enable plugins cd gcc-4.3.0/ # create an hg repository.
...you can obtain mozilla 2 code by: hg clone http://hg.mozilla.org/mozilla-central/ and compose a .mozconfig file for cross-compiling mozilla with static analysis hooked: #specify the cross compile cross_compile=1 ac_add_options --enable-application=browser ac_add_options --host=i686-linux ac_add_options --tar
get=i686-mingw32 ac_add_options --enable-default-toolkit=cairo-windows mk_add_options moz_objdir=@topsrcdir@/../mozilla-mingw # mozilla trunk uses many vista only features on windows, so we should disable some components to make it buildable with mingw32.
Table Layout Strategy - Archive of obsolete content
pan #define min_pro 8 // desired width due to proportional <col>s or cols attribute #define final 9 // width after the table has been balanced, considering all of the others the priority of allocations for columns is as follows: max(min_con, min_adj) max (pct, pct_adj) fix fix_adj max(des_con, des_adj), but use min_pro if present for a fixed width table, the column may
get more space if the sum of the col allocations is insufficient column width info columns
get their width information from style info <col width="200px"> and from the cells that belong into this column.
..."><col> <tbody> <tr><td>foo</td><td>bar</td></tr> </tbody> </table> this shrink wrapping width has usually the suffix 0proportional effective columns <tbody></tbody>foobarbazzap <table width="200px" border> <tbody> <tr><td>foo</td><td colspan="2" width="120px">bar</td></tr> <tr><td>baz</td><td>zap</td></tr> </tbody> </table> the colspan here is bogus, so the third column should not
get any width.
Abc Assembler Tests - Archive of obsolete content
* * ***** end license block ***** */ function main() {
getlocal0 pushscope findproperty start pushstring "instructions that start with the letter l" callpropvoid start 1 newfunction .function_id(runtest)
getlocal0 call 0 findproperty end callpropvoid end 0 returnvoid } function runtest() { // test null <= null == true findproperty compare_stricteq pushstring "null lessequals null" // testname pusht...
... lessequals // actual callpropvoid compare_stricteq 3 // use .try / .catch to catch typeerror // convert_o null .try { pushnull convert_o pop findproperty fail pushstring "convert_o null" pushstring "exception should have been thrown: typeerror: error #1009: cannot access a property or method of a null object reference."
getlocal1 callpropvoid fail 3 jump finished_convert_o_null } .catch {
getlocal0 pushscope setlocal2 // save typeerror findproperty compare_typeerror pushstring "convert_o null" // test name pushstring "typeerror: error #1009" // expected
getlocal2 // actual callpropvoid compare_typeerror 3 } finished_...
Treehydra Manual - Archive of obsolete content
to
get cfgs, you must instruct treehydra to call process_tree after cfg construction.
...thus, it is not currently possible to
get both gimple asts and cfgs in the same run of treehydra.
Tuning Pageload - Archive of obsolete content
if the parser
gets a large chunk of data, it will try to parse it all, building the corresponding content model.
...the decision is based on whether there were any user events on the relevant wid
get in the last content.switch.threshold microseconds.
URIs and URLs - Archive of obsolete content
nssimpleuri contains setters and
getters for the uri and the components of an uri: scheme and path (non-scheme).
...to
gether these segments form the url spec with the following syntax: scheme://username:password@host:port/directory/filebasename.fileextension;param?query#ref for performance reasons the complete spec is stored in escaped form in the nsstandardurl object with pointers (position and length) to each basic segment and for the more global segments like path and prehost for example.
Video presentations - Archive of obsolete content
the mozilla community (part 1, part 2) this presentation talks about the mozilla community and how you can
get involved smoothly.
...learn how to properly file a good bug report, how the bug reports are handled, and how to submit and
get reviews for patches.
Mozilla Web Developer Community - Archive of obsolete content
get news from developer.mozilla.org and connect with developers involved in cross-browser, standards-based web development.
... mozilla.dev.tech.dom html - mozilla.dev.tech.html plugins - mozilla.dev.tech.plugins xml - mozilla.dev.tech.xml documentation - see mdc:community more at http://www.mozilla.org/community/dev...er-forums.html mozillazine forums mozilla news and development help mozilla (testing and development) mozdev.org mozillazine planet mozilla spread firefox standards communities
get involved in grass-roots web standards evangelism efforts through these groups: the web standards project, a grassroots coalition fighting for standards maccaws, making a commercial case for web standards a list apart, for people who make websites mozilla technology evangelism,
get involved with mozilla evangelism you may also find helpful information on the w3c mailing lists newsletter ther...
Writing textual data - Archive of obsolete content
here's an example: // first,
get and initialize the converter var converter = components.classes["@mozilla.org/intl/scriptableunicodeconverter"] .createinstance(components.interfaces.nsiscriptableunicodeconverter); converter.charset = /* the character encoding you want, using utf-8 for this example */ "utf-8"; now you can convert and write to the stream: // this code assumes that os is your nsioutput...
... nsiscriptableunicodeconverter has a simple method to do that: // first,
get and initialize the converter var converter = components.classes["@mozilla.org/intl/scriptableunicodeconverter"] .createinstance(components.interfaces.nsiscriptableunicodeconverter); converter.charset = /* the charset you want to use.
Event Handlers - Archive of obsolete content
the other possible values are tar
get, which means the handler will only fire if event.originaltar
get is the same as the tar
get to which the handler is attached, and capturing, which indicates the handler should fire during the capturing phase of event flow.
...since xbl handlers usually constitute the default actions for a wid
get, this allows authors in the bound document to write events that potentially suppress the default actions taken by the xbl handlers.
XBL - Archive of obsolete content
most xul wid
gets are at least partially implemented using xbl.
... you can build your own reusable wid
gets from existing xul, html, svg, and other primitives using xbl.
XML in Mozilla - Archive of obsolete content
lastly, there is a pref you might want to try (especially useful with fixptr) that will select the link tar
get when you traverse it.
...we'd really like to
get tests that can be run automatically (this would require knowledge of web development; document.load() and/or xml extras might be needed), but probably most of the bugs we
get have just been found by normal people trying to do something that works in some other browser and does not work in mozilla.
Windows stub installer - Archive of obsolete content
the windows stub installer project resides at: <http://lxr.mozilla.org/seamonkey/sou...windows/setup/> how do we
get setup to debug the windows stub installer?
... if you need to use vc++ to debug the installer: under project | settings | debug set "executable for debug session" to be the path to mozilla/dist/win32_d.obj/install/setup.exe set "working directory" to be the path to mozilla/dist/wind32_d.obj/install press f10 to step into the code how we
get setup to debug the xpinstall engine from the windows stub installer?
exists - Archive of obsolete content
method of file object syntax boolean exists( filespecobject tar
get ) parameters the exists method has the following parameters: tar
get a filespecobject representing the file or directory being tested for existence.
...example f =
getfolder( "program", "sample.txt" ); if ( file.exists(f) ) // do something with the file ...
move - Archive of obsolete content
dest a filespecobject representing the tar
get directory.
... example source =
getfolder("program", "file.txt"); dest =
getfolder("chrome"); err = file.move(source, dest); ...
windowsRegisterServer - Archive of obsolete content
method of file object syntax int windowsregisterserver( object localdirspec ) parameters the windowsregisterserver method has the following parameters: localdirspec a filespecobject representing a directory obtained by
getcomponentfolder or
getfolder.
... example filecdtool =
getfolder("file:///", faod + "cdtool.dll"); err = file.windowsregisterserver(filecdtool); ...
WinProfile Object - Archive of obsolete content
instead, you construct an instance of this object by calling the
getwinprofile method of the install object.
... the two methods of the winprofile object,
getstring and writestring, allow you to read and write the data in the key/value pairs of a windows .ini file.
browser.type - Archive of obsolete content
subdocuments of chrome documents are of chrome type, unless the container element (one of iframe, browser or editor) has one of the special type attribute values (the common ones are content, content-tar
getable and content-primary) indicating that the subdocument is of content type.
... content-tar
getable one browser among many for content.
id - Archive of obsolete content
you can use this as a parameter to
getelementbyid() and other dom functions and to reference the element in style sheets.
... example <button id="foo" label="click me" oncommand="dosomething()"/> <script> function dosomething(){ var mybutton = document.
getelementbyid('foo'); mybutton.setattribute('label','the button was pressed'); } </script> a more abstract version of the above would be a <button id="foo" label="click me" oncommand="setwid
getlabel(this, 'i was pressed')"/> <script> function setwid
getlabel(idname, newcaption){ document.
getelementbyid( idname.id ).setattribute('label',newcaption) } </script> not specifying the id attribute for a window or a prefwindow fills the console with the following warning message: warning: empty string passed to
getelementbyid() see also name ...
label - Archive of obsolete content
see also treeitem.label, <label> element examples in javascript <label value="whaw" id="the-big-label" command="the-big-button"/> <button id="the-big-button" label="click me" oncommand="alert(document.
getelementbyid('the-big-label').value)"/> <label id="mylabel" value="my label"/> <button label="click me" oncommand="document.
getelementbyid('mylabel').setattribute('value','value changed');" /> <checkbox label="my checkbox" id="mycheckbox"/> <button label="another click" oncommand="document.
getelementbyid('mycheckbox').setattribute('label','still not checked');"/> <button label="show label of ch...
...eckbox" oncommand="alert( document.
getelementbyid('mycheckbox').
getattribute('label') )"/> ...
close - Archive of obsolete content
general info specification xul interface event bubbles no cancelable no tar
get window default action the window is closed.
... properties property type description tar
get read only eventtar
get the event tar
get (the topmost tar
get in the dom tree).
commandupdate - Archive of obsolete content
general info specification xul interface event bubbles no cancelable no tar
get element default action none.
... properties property type description tar
get read only eventtar
get the event tar
get (the topmost tar
get in the dom tree).
insertItemAt - Archive of obsolete content
note: you cannot insert an item to an index that does not exist, eg: trying to insert an item at the end with element.
getrowcount() + 1 example <!-- this example inserts at the selected item or appends, then selects the newly created item --> <script language="javascript"> function insertitemtolist(){ var mylistbox = document.
getelementbyid('mylistbox'); // create a date to
get some labels and values var somedate = new date(); if(mylistbox.selectedindex == -1){ // no item was selected in list so append to the en...
...d mylistbox.appenditem( somedate.tolocaletimestring(), somedate.
gettime() ); var newindex = mylistbox.
getrowcount() -1 }else{ // item was selected so insert at the selected item var newindex = mylistbox.selectedindex; mylistbox.insertitemat(newindex, somedate.tolocaletimestring(), somedate.
gettime()); } // select the newly created item mylistbox.selectedindex = newindex; } </script> <button label="insert item at selected" oncommand="insertitemtolist()"/> <listbox id="mylistbox"> <listitem label="foo"/> </listbox> see also appenditem() removeitemat() ...
OpenClose - Archive of obsolete content
here is a complete example which uses a button to open a menu: <button label="open menu" oncommand="document.
getelementbyid('editmenu').open = true;"/> <menu id="editmenu" label="edit"> <menupopup> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </menu> this technique may be used for both menupopups that use the menu tag, the button tag and the toolbarbutton tag.
...here is an example mouse click event listener: function mouseclicked(event) { var panel = document.
getelementbyid("some-panel"); panel.openpopup(null, "", event.clientx, event.clienty, false, false); } the openpopupatscreen method a second method, openpopupatscreen, may be used to open up a popup and place it at a specific screen coordinate.
Panels - Archive of obsolete content
for instance, using the search panel example above, we could add a button which closes the panel when pressed: <script> function dosearch() { document.
getelementbyid("search-panel").hidepopup(); } </script> <toolbarbutton label="search" type="panel"> <panel id="search-panel" position="after_start"> <textbox id="search"/> <button label="search" oncommand="dosearch();"/> </panel> </toolbarbutton> in this example, the dosearch() function is called when the "search" button is pressed.
...for instance, to have the textbox initially focused in the example above: <panel id="search-panel" onpopupshown="document.
getelementbyid('search').focus()"> to disable the adjusting of focus when a panel is opened, set the noautofocus attribute to true: <panel noautofocus="true"> this will cause the focus to remain on the element within the main window that has focus when the panel is opened.
disabled - Archive of obsolete content
« xul reference disabled type: boolean
gets and sets the value of the disabled attribute.
... <!-- checkbox enables/disables the button --> <checkbox label="enable button" oncommand="document.
getelementbyid('buttremove').disabled = !
Introduction - Archive of obsolete content
if not, nothing
gets generated again.
...you can
get this composite datasource in a script by using an element's 'database' property if you want to add or remove datasources from it.
Multiple Queries - Archive of obsolete content
this may be used to combine the results from several queries to
gether, or may be used to generate different types of results when recursive iterations.
...when used to
gether in this example, the results are combined and only three results are shown.
Multiple Rules - Archive of obsolete content
for instance, if the first rule matched all folders, then the remaining rules can assume that any results that
get past the first rule are not folders.
...when used to
gether in this example, the results are combined and only three results are shown.
RDF Modifications - Archive of obsolete content
there are four such functions: 'assert', to add a new triple (or arrow) to the rdf graph, 'unassert' to remove a triple, 'change' to adjust the tar
get of a triple, and 'move' to adjust the source of a 'triple'.
...for instance, an assert call looks like the following: var source = rdf.
getresource("http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg"); var predicate = rdf.
getresource("http://purl.org/dc/elements/1.1/description"); var tar
get = rdf.
getliteral("one of the thirty or so egyptian obelisks"); datasource.assert(source, predicate, tar
get, true); the assert call adds a new triple to the rdf datasource.
Simple Query Syntax - Archive of obsolete content
you can
get other predicates in the same way, just by using the predicate uri and prefixing it with 'rdf:'.
... function applyfilter(country) { var rule = document.
getelementbyid("filterrule"); if (country){ rule.setattributens("http://www.xulplanet.com/rdf/", "country", country); } else { rule.removeattributens("http://www.xulplanet.com/rdf/", "country"); } document.
getelementbyid("photoslist").builder.rebuild(); } this version of the applyfilter function only needs to set or remove the attribute on the rule as necessary.
Sorting Results - Archive of obsolete content
changing the sort to change the sorting for a template's generated contents, you can either change the sort related attributes and rebuild the template, or you can call the sort method of the sort service: var listbox = document.
getelementbyid("alistbox"); var sortservice = components.classes["@mozilla.org/xul/xul-sort-service;1"].
...
getservice(components.interfaces.nsixulsortservice); sortservice.sort(listbox, "?gender", "descending"); this code will sort a listbox by title in a descending order.
Static Content - Archive of obsolete content
<menulist datasources="template-guide-photos4.rdf" ref="http://www.daml.org/2001/09/countries/country-ont#country" oncommand="applyfilter(event.tar
get.value);"> <menupopup> <menuitem label="all"/> </menupopup> <template> <query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" object="?start"/> <triple subject="?country" predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> ...
... <radiogroup datasources="template-guide-photos4.rdf" ref="http://www.daml.org/2001/09/countries/country-ont#country" onselect="applyfilter(event.tar
get.value);"> <radio label="all" selected="true"/> <template> <query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" object="?start"/> <triple subject="?country" predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> </query> <ac...
Template Logging - Archive of obsolete content
however, calling
getelementbyid using this id will retrieve the generated content for that result if you want to further study the content that was generated.
...you may also
get an error if you manipulate or analyze the template while the datasource is loading.
XML Assignments - Archive of obsolete content
in this case, we use an expression that returns the nodes as in earlier examples, and use some additional syntax of the query to
get the length of the names.
...this element allows the use of additional xpath expressions to
get more data from the xml data.
Things I've tried to do with XUL - Archive of obsolete content
var available_width = document.
getelementbyid("invisible_element").clientwidth; ...
... xbl in listboxes using xbl bindings in listboxes is not easy because there is a big bug there: if you create from js an element you want to bind, and if it is hidden when the listbox is first rendered, the listbox does not create a frame for it, and the xbl doesn't
get attached...
Toolbar customization events - Archive of obsolete content
in all cases, the event.tar
get is the toolbox being customized.
...window.addeventlistener("beforecustomization", customizestart, false); window.addeventlistener("aftercustomization", customizeend, false); window.addeventlistener("customizationchange", customizechange, false); function customizestart(e) { let thetoolbox = e.tar
get; /* now we know the user has started customizing */ } function customizeend(e) { let thetoolbox = e.tar
get; /* the user has finished customizing */ } function customizechange(e) { let thetoolbox = e.tar
get; /* the user has made a change to the toolbox */ } ...
Advanced Rules - Archive of obsolete content
we can then
get related resources to the root resource by using the 'list' variable.
...when it
gets to the triple, it will look for an assertion in the rdf datasource for a city's weather prediction.
Introduction - Archive of obsolete content
this is done using a feature of xul called an overlay, which allows the ui provided from one source, in this case, the firefox browser, to be merged to
gether with the ui from the extension.
...due to various changes in xul syntax over time, you will want to
get the latest version for the examples to work properly.
Keyboard Shortcuts - Archive of obsolete content
in the example below, the file menu can be selected by pressing alt + f to
gether (or some other key combination for a specific platform).
...if no element is focused, the key event will instead be tar
geted at the xul document itself.
RDF Datasources - Archive of obsolete content
you can also use the value nc:historybydate to
get the history sorted into days.
...the end effect is that we
get a popup menu containing all the mammals which have a specimen that is not 0.
Trees and Templates - Archive of obsolete content
if you do use a content builder instead, note that the content won't generally
get built until it is needed.
... with hierarchical trees, the children don't
get generated until the parent nodes have been opened by the user.
XBL Inheritance - Archive of obsolete content
inheritance sometimes you may want to create an xbl wid
get that is similar to an existing one.
...(you can also use the value addrbook to look up addresses in the address book.) firefox uses a different autocomplete mechanism than the mozilla suite, see xul:textbox (firefox autocomplete) in the next section, we'll see an example xbl-defined wid
get.
Using spell checking in XUL - Archive of obsolete content
ferent versions of firefox have different contract ids var spellclass = "@mozilla.org/spellchecker/myspell;1"; if ("@mozilla.org/spellchecker/hunspell;1" in components.classes) spellclass = "@mozilla.org/spellchecker/hunspell;1"; if ("@mozilla.org/spellchecker/engine;1" in components.classes) spellclass = "@mozilla.org/spellchecker/engine;1"; gspellcheckengine = components.classes[spellclass].
getservice(components.interfaces.mozispellcheckingengine); gspellcheckengine.dictionary = 'en-us'; if (gspellcheckengine.check("kat")) { // it's spelled correctly } else { // it's spelled incorrectly but check if the user has added "kat" as a correct word..
... var mpersonaldictionary = components.classes["@mozilla.org/spellchecker/personaldictionary;1"] .
getservice(components.interfaces.mozipersonaldictionary); if (mpersonaldictionary.check("kat", gspellcheckengine.dictionary)) { // it's spelled correctly accourdly to user personal dictionary } else { // it's spelled incorrectly } }
getting a list of suggestions to
get a list of suggestions for a misspelled word, you call the suggest() method, specifying the word and an object to be filled with an array of possible suggestions.
Accessibility/XUL Accessibility Reference - Archive of obsolete content
caption see groupbox checkbox <checkbox label='<!--label text-->' /> colorpicker <colorpicker type="button" palettename="standard" /> colorpicker appears to read color values out if the colorpicker can
get focus in the first place.
...ldren> <treeitem> <treerow> <treecell label="<!--aramis-->" /> </treerow> </treeitem> <treeitem> <treerow> <treecell label="<!--fergus-->" /> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </tree> there is no keyboard access to the column picker (the wid
get visually to the right of the column headers) or the column headers themselves (for sorting by column).
deck - Archive of obsolete content
attributes selectedindex properties selectedindex, selectedpanel examples <deck selectedindex="2"> <description value="this is the first page"/> <button label="this is the second page"/> <box> <description value="this is the third page"/> <button label="this is also the third page"/> </box> </deck> attributes selectedindex type: integer
gets and sets the index of the currently selected panel.
...rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
dialogheader - Archive of obsolete content
attributes crop, description, title examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <dialogheader title="my dialog" description="example dialog"/> <!-- other wid
gets --> </dialog> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute.
...rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
groupbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] the groupbox is used to group related elements to
gether.
...rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
image - Archive of obsolete content
src type: url
gets and sets the value of the src attribute.
...rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
listcell - Archive of obsolete content
properties disabled type: boolean
gets and sets the value of the disabled attribute.
...rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
listhead - Archive of obsolete content
disabled type: boolean
gets and sets the value of the disabled attribute.
...rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
menubar - Archive of obsolete content
statusbar type: id of statusbar element
gets and sets the value of the statusbar attribute.
...rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
menupopup - Archive of obsolete content
position type: string
gets and sets the value of the position attribute.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(),...
preferences - Archive of obsolete content
inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
...supported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related preferences system documentation: introduction:
getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes ...
script - Archive of obsolete content
if you omit this attribute, the default (and older) javascript version is used (like you
get when including a javascript file from web content without specifying a version number).
...rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
tabpanels - Archive of obsolete content
attributes selectedindex properties selectedindex, selectedpanel examples (example needed) attributes selectedindex type: integer
gets and sets the index of the currently selected panel.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
toolbaritem - Archive of obsolete content
it is also used to group buttons to
gether so they can be added and removed all at once like firefox's unified-back-forward-button.
...rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
treecell - Archive of obsolete content
for those elements, setattribute("value", myvalue) and
getattribute("value") do not access or affect the contents displayed to the user.
...rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
treecol - Archive of obsolete content
if tar
geting firefox for mac os x, be sure to use these styles but include your own checkbox image.
...rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
Application Update - Archive of obsolete content
getting started you will need the following utility scripts from http://lxr.mozilla.org/mozilla/sourc...ate-packaging/ (or local source of xulrunner) common.sh make_full_update.sh you will need mar / mar.exe to build a complete update patch.
...use what you need, %product%,%version%,%build_id%,%channel% for example pref("app.update.url", "https://yourserver.net/update/3/%product%/%version%/%build_id%/%build_tar
get%/%locale%/%channel%/%os_version%/%distribution%/%distribution_version%/update.xml"); // url user can browse to manually if for some reason all update installation // attempts fail.
Opening a Link in the Default Browser - Archive of obsolete content
this can be done using the nsiexternalprotocolservice interface: // first construct an nsiuri object using the ioservice var ioservice = components.classes["@mozilla.org/network/io-service;1"] .
getservice(components.interfaces.nsiioservice); var uritoopen = ioservice.newuri("http://www.example.com/", null, null); var extps = components.classes["@mozilla.org/uriloader/external-protocol-service;1"] .
getservice(components.interfaces.nsiexternalprotocolservice); // now, open it!
...this is how you do it: var extps = components.classes["@mozilla.org/uriloader/external-protocol-service;1"] .
getservice(components.interfaces.nsiexternalprotocolservice); if (extps.externalprotocolhandlerexists("http")) { // handler for http:// urls exists } link within an iframe to enable a link inside an html document that is the "src" of an iframe to be opened in the default browser, setting the preference: pref("network.protocol-handler.expose-all", false); seems to work.
Using SOAP in XULRunner 1.9 - Archive of obsolete content
ns + '#' + method; soapclient.sendrequest(req, callback); diff between jqsoapclient.js and sasoapclient.js 42c42 < var jsout = $.xmltojson(xdata.responsexml); --- > var jsout = xmlobjectifier.xmltojson(xdata.responsexml); 46,60c46,62 < $.ajax({ < type: "post", < url: soapclient.proxy, < datatype: "xml", < processdata: false, < data: content, < complete:
getresponse, < contenttype: soapclient.contenttype + "; charset=\"" + soapclient.charset + "\"", < beforesend: function(req) { < req.setrequestheader("method", "post"); < req.setrequestheader("content-length", soapclient.contentlength); < req.setrequestheader("soapserver", soapclient.soapserver); < req.setrequestheader("soapaction", soapreq.action); < } < }...
...); --- > var xhr = new xmlhttprequest(); > xhr.mozbackgroundrequest = true; > xhr.open('post', soapclient.proxy, true); > xhr.onreadystatechange = function() { > if (4 != xhr.readystate) { return; } >
getresponse(xhr); > }; > var headers = { > 'method': 'post', > 'content-type': soapclient.contenttype + '; charset="' + > soapclient.charset + '"', > 'content-length': soapclient.contentlength, > 'soapserver': soapclient.soapserver, > 'soapaction': soapreq.action > }; > for (var h in headers) { xhr.setrequestheader(h, headers[h]); } > xhr.send(content); ...
calICalendarView - Archive of obsolete content
id showdate(in calidatetime adate); void setdaterange(in calidatetime astartdate, in calidatetime aenddate); readonly attribute calidatetime startdate; readonly attribute calidatetime enddate; readonly attribute boolean supportsdisjointdates; readonly attribute boolean hasdisjointdates; void setdatelist(in unsigned long acount, [array,size_is(acount)] in calidatetime adates); void
getdatelist(out unsigned long acount, [array,size_is(acount),retval] out calidatetime adates); attribute caliitembase selecteditem; attribute calidatetime selectedday; attributes displaycalendar the displaycalendar is an implementation of the calicalendar interface.
...
getdatelist void
getdatelist(out unsigned long acount, [array,size_is(acount),retval] out calidatetime adates); this function returns a list of all dates currently being shown in the view.
mozilla.dev.platform FAQ - Archive of obsolete content
a: have the browser.chromeurl preference - this should be a xul document containing a <browser type="content-primary"> element in which the popup window's content should
get loaded.
... visual studio express 2005 q: when i try to run xulrunner-stub.exe i
get the error "this application failed to start because msvcr80.dll was not found." a: see bug 350616 ...
reftest opportunities files - Archive of obsolete content
if you can look at the html in one of these pages, and can see a way to
get the same visual ouptut, then that is an obvious reftest opportunity.
...htmlparser/tests/html/usascii.html parser/htmlparser/tests/html/title01.html parser/htmlparser/tests/html/title.html parser/htmlparser/tests/html/tiny.html parser/htmlparser/tests/html/thead001.html parser/htmlparser/tests/html/text003.html parser/htmlparser/tests/html/text002.html parser/htmlparser/tests/html/text001.html parser/htmlparser/tests/html/tbody001.html parser/htmlparser/tests/html/tar
get01.html parser/htmlparser/tests/html/tag008.html parser/htmlparser/tests/html/tag007.html parser/htmlparser/tests/html/tag006.html parser/htmlparser/tests/html/tag005.html parser/htmlparser/tests/html/tag004.html parser/htmlparser/tests/html/tag003.html parser/htmlparser/tests/html/tag002.html parser/htmlparser/tests/html/tag001.html parser/htmlparser/tests/html/tableall.html parser/htmlparser/tes...
xbDesignMode.js - Archive of obsolete content
* * contributor(s): doron rosenberg <doron@netscape.com> (original author) * * * * ***** end license block ***** */ /* xbdesignmode a javascript wrapper for browsers that support designmode */ function xbdesignmode(aiframe){ this.meditordocument = null; this.miframeelement = null; // argument is a string, therefore an id if ( (typeof(aiframe) == "string") && (document.
getelementbyid(aiframe).tagname.tolowercase()=="iframe") ){ this.miframeelement = document.
getelementbyid(aiframe); } else if( (typeof(aiframe)=="object") && (aiframe.tagname.tolowercase() == "iframe") ){ this.miframeelement = aiframe; } else { throw "argument isn't an id of an iframe or an iframe reference"; } if (this.miframeelement.contentdocument){ // gecko this.medit...
...ordocument = this.miframeelement.contentdocument; this.meditordocument.designmode = "on"; } else { // ie this.meditordocument = this.miframeelement.contentwindow.document; this.meditordocument.designmode = "on"; // ie needs to re
get the document element after designmode was set this.meditordocument = this.miframeelement.contentwindow.document; } } xbdesignmode.prototype.execcommand = function (acommandname, aparam){ if (this.meditordocument) this.meditordocument.execcommand(acommandname, false, aparam); else throw "no meditordocument found"; } xbdesignmode.prototype.setcsscreation = function (ausecss){ if (this.meditordocument) this.meditordocument.execcommand("usecss", false, ausecss); else throw "no meditordocument found"; } ...
2006-10-06 - Archive of obsolete content
discussion highlights: ziga sancin suggests writing an introductory article for potential developers containing basic project information (history, list of main developers, project goals, roadmap and available communication channels, etc), tools needed to start developing and building tb, documentation on source structure as well as links to help one
get started on the project.
... cédric corazza recommends that the proposed documention should be made available on the l10n cvs once it reaches a decent stage so that localizers can
get a head-start on the localization before the final version is made available.
2006-10-20 - Archive of obsolete content
christopher finke is asking the community members for tutorials or any tips on how to
get started.
...paul reed restates his overall goal that are "
getting us to not rely on hardware that you have to have in a certain position for it to boot" to use standard known configuration for every nightly build that is produced.
2006-10-27 - Archive of obsolete content
october 27: alex responded to peter weilbacher posting stating that he is going to look for a solaris newsgroup because he is not sure how to check if the library is installed or where to
get the packages.
... on the same day paul reed replied to cédric's posting by stating that they would like to close the directory before major releases but that unfortunately it wasn't that easy to do because the files must be readable, so mirrors can
get the bits to serve them on the release day.
2006-10-20 - Archive of obsolete content
discussions sparky and comet going away on friday preed wants to
get rid of sparky and comet (both older desktop class linux boxes).
... decommissioning sparky on friday preed wants to
get rid of sparky (a linux build box) and wants to know if there are reasons wy not to do it.
2006-12-01 - Archive of obsolete content
jay patael calls for help
getting the next update ff 1.5.x and 2.x.
... he requests blocker bug owners
get their patches in asap and since check approval will be granted daily that they be ready to check their patches in as soon as they are approved.
2006-11-10 - Archive of obsolete content
(was: extended validation certificates) a continuation of last week's discussion on extended validation certificates, the there post was
getting unruly at 147 replies.
... good ideas a splinter off of the extended validation certificates discussion going over whether or not fraudulent websites may
get these certificates and if so how to prevent this from happening.
NPN_SetValue - Archive of obsolete content
normally, when the browser navigates away from the page containing the plugin, all plugin instances
get an npp_destroy call, and if there are no more instances of the plugin active, the plugin calls its np_shutdown method and the plugin dll
gets unloaded from memory.
...} so the proper way to call this function from a plug-in would be: bool bwindowed = false; npn_setvalue(npp, nppvpluginwindowbool, ( void *)bwindowed); see also npp_new, npn_
getvalue, npp_setvalue, npp_
getvalue ...
NPP_NewStream - Archive of obsolete content
a plug-in can also request a stream with the function npn_
geturl.
... see also npn_newstream, npp_streamasfile, npp_write, npp_writeready, npp_destroystream, npn_requestread, npstream, npn_
geturl ...
NPStream - Archive of obsolete content
notifydata used only for streams generated in response to a npn_
geturlnotify or npn_posturlnotify request.
... for these streams, notifydata is set to the value of the notifydata parameter to npn_
geturlnotify or npn_posturlnotify.
Syndicating content with RSS - Archive of obsolete content
the icon looks like the following: you can
get more icons like this from feed icons.
...here's a simple example of it being done: accept: application/rss+xml, text/html with real production software, though, it would look more like this: accept: application/rss+xml, application/xhtml+xml, text/html here's a more complete example:
get / http/1.1 host: example.com accept: application/rss+xml, application/xhtml+xml, text/html when an http server (or server-side script)
gets this, it should redirect the http client to the feed.
Atomic RSS - Archive of obsolete content
"
getting started" box, if there is no "
getting started" article yet written, should be populated with another feature article or tutorial, should one exist.
... otherwise, just comment it out
getting started a guided tutorial that will help you
get started with atomic rss.
Content - Archive of obsolete content
"
getting started" box, if there is no "
getting started" article yet written, should be populated with another feature article or tutorial, should one exist.
... otherwise, just comment it out
getting started a guided tutorial that will help you
get started with the rss content module.
title - Archive of obsolete content
ww.advogato.org/article/</link> <description>recent advogato articles</description> <language>en-us</language> <image> <link>http://www.advogato.org/</link> <title>advogato</title> <url>http://www.advogato.org/image/tinyadvogato.png</url> </image> <item> <title>why can i not
get any tang?!</title> <link>http://www.advogato.org/article/10101.html</link> <description>seriously.
... why can't i
get any tang?</description> </item> </channel> </rss> attributes none sub-elements none parent elements the table below shows a list of rss elements that this element can be a child of.
Introduction to SSL - Archive of obsolete content
if the client doesn't
get to step 5 for any reason, the server identified by the certificate cannot be authenticated, and the user will be warned of the problem and informed that an encrypted and authenticated connection cannot be established.
...if the server doesn't
get to step 6 for any reason, the user identified by the certificate cannot be authenticated, and the user is not allowed to access any server resources that require authentication.
NSPR Release Engineering Guide - Archive of obsolete content
feature complete update ...pr/include/prinit.h with release numbers build all tar
gets, debug and optimized on all platforms using local directories run the test suite on all tar
gets verify release numbers show up in binaries resolve testing anomalies tag the tree with nsprpub_release_x_y_z_beta beta release checkout a whole new tree using the tag from above build all tar
gets, debug and optimized on all platforms using the command: gmake release mdist=<dir>/mdist build_number=vx.y.z [build_opt=1 | use_debug_rtl=1] copy the bits from mdist to /share/builds/components/nspr20/.vx.y.z 1 run ...
...explode.pl run the test suite on all tar
gets, using binaries & headers from shipped bits resolve testing anomalies tag the tree with nsprpub_release_x_y[_z] release candidate checkout a whole new tree using tag (including fixes) tag the treey with nsprpub_release_x_y_z build all tar
gets, debug and optimized on all platforms using the command: gmake release mdist=<dir>/mdist build_number=vx.y.z [build_opt=1 | use_debug_rtl=1] copy the bits from mdist to /share/builds/components/nspr20/.vx.y.z in /share/builds/components/nspr20/ run the following scripts: explode.pl rename.sh symlink.sh rtm bits rename the .vx.y.z directory to vx.y.z (remove the hidden directory 'dot').
TCP/IP Security - Archive of obsolete content
tcp/ip communications are composed of four layers that work to
gether.
... an internet-based connection is typically composed of several physical links chained to
gether; protecting such a connection with data link layer controls would require deploying a separate control to each link, which is not feasible.
Tamarin Tracing Build Documentation - Archive of obsolete content
ts automated in buildbot windows mobile (pocket pc 5.0) armv4t supported, acceptance and performance tests automated in buildbot raw image (no os) armv5 supported, acceptance and performance tests not done linux (nokia n810) armv5 supported, acceptance and performance tests not done current build status the current tamarin tracing build status can be found at tamarin tracing build status
getting the tamarin source the tamarin tracing source resides in mercurial at tamarin tracing.
... $ make cppflags=-davmplus_verbose windows mobile to build for arm: $ python ../configure.py --tar
get=arm-windows --enable-shell; make to build for thumb: $ python ../configure.py --tar
get=thumb-windows --enable-shell; make platform-specific builds project files for specific platforms/ides (microsoft visual studio, xcode, etc) are included in the source tree under tamarin-tracing/platform, but are not formally supported.
install.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "install.rdf": <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>{themes_uuid}</em:id> <em:version>themes_version</em:version> <!-- tar
get application this extension can install into, with minimum and maximum supported versions.
... --> <em:tar
getapplication> <description> <!-- firefox's uuid --> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>min_ff_version</em:minversion> <em:maxversion>max_ff_version</em:maxversion> </description> </em:tar
getapplication> <!-- front end metadata --> <!-- my_theme --> <em:name>my_theme</em:name> <em:description>my_theme</em:description> <em:creator>your_name</em:creator> <em:contributor>contributors_names</em:contributor> <em:homepageurl>themes_homepage</em:homepageurl> <em:updateurl> url_of_update_location </em:updateurl> <em:abouturl> url_of_about_page </em:abouturl> <!-- front end integration hooks (used by theme manager)--> <em:internalname>my_theme</em:internalname> </description> </rdf> ...
Theme changes in Firefox 2 - Archive of obsolete content
tondown="true"] #history-button:active #home-button:active #mail-button #mail-button:active #mail-button[disabled="true"] #mail-button[open="true"] #new-tab-button:active #new-tab-button[checked="true"] #new-window-button:active #new-window-button[checked="true"] #paste-button:active #print-button:active #reload-button:active #stop-button:active .messagebutton .messageimage .messa
getext browsermessage toolbar[iconsize="small"] #bookmarks-button:active toolbar[iconsize="small"] #copy-button:active toolbar[iconsize="small"] #cut-button:active toolbar[iconsize="small"] #downloads-button:active toolbar[iconsize="small"] #history-button:active toolbar[iconsize="small"] #home-button:active toolbar[iconsize="small"] #mail-button toolbar[iconsize="small"] #mail-button:active...
...you should define the following styles: .messagebutton .messageclosebutton .messageimage .messa
getext .notification-inner notification notification[type="info"] notification[type="warning"] notification[type="critical"] scrollbox.css the following new styles have been added to this file for firefox 2 themes: .autorepeatbutton-down[disabled="true"] .autorepeatbutton-down[orient="horizontal"] .autorepeatbutton-down[orient="horizontal"][disabled="true"] .autorepeatbutton-up[disabled...
::-ms-track - Archive of obsolete content
it is possible to use the ::-ms-ticks-after, ::-ms-ticks-before, and ::-ms-track pseudo-elements to
gether.
...to remove tick marks alto
gether, set the color property to transparent.
Error.stackTraceLimit - Archive of obsolete content
the error.stacktracelimit property
gets or sets the stack trace limit, which is equivalent to the number of error frames to display.
... example the following example shows how to set and then
get the stack trace limit.
Archived JavaScript Reference - Archive of obsolete content
oft extensions to the otherwise standard javascript apis.new in javascriptthis chapter contains information about javascript's version history and implementation status for mozilla/spidermonkey-based javascript applications, such as firefox.number.tointeger()the number.tointeger() method used to evaluate the passed value and convert it to an integer, but its implementation has been removed.object.
getnotifier()the object.
getnotifer() method was used to create an object that allows to synthetically trigger a change, but has been deprecated and removed in browsers.object.observe()the object.observe() method was used for asynchronously observing the changes to an object.
...you can use the more general proxy object instead.reflect.enumerate()the static reflect.enumerate() method used to return an iterator with the enumerable own and inherited properties of the tar
get object, but has been removed in ecmascript 2016 and is deprecated in browsers.string.prototype.quote()the non-standard quote() method returns a copy of the string, replacing various special characters in the string with their escape sequences and wrapping the result in double-quotes (").
RFE to the Custom Controls Interfaces - Archive of obsolete content
you can refer to custom controls page to
get familiar with custom controls mechanism.
... in short, we have the following interfaces: nsixformsaccessors - serves to
get/set the value of the instance data node that the xforms element is bound to as well as
getting the various states of that node nsixformsdelegate - used to obtain the nsixformsaccessors interface nsixformsuiwid
get - used by the xforms processor to update the value/state of an xforms element when its bound node's value/state is changed our current mechanism that allows authors to build custom controls assumes that the controls will be bound to instance nodes of simple content type.
XForms Range Element - Archive of obsolete content
representations the xforms range element is represented by a slider wid
get (xhtml only).
... characteristics analogous wid
get is <xul:scale/>, which is available in fx 3.0 only if the incremental attribute has the value true, the value of the bound node will be updated upon each movement of the slider's thumb.
XForms Repeat Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of wid
get(s) to use to represent this control.
...here comes the output: <br/> <xf:output ref="@id"><xf:label>output: </xf:label></xf:output> <div xf:repeat-nodeset="nest"><xf:output ref="."><xf:label>nested output: </xf:label></xf:output></div> </div> repeat in anonymous content (usage in xbl) you can use repeat elements inside anonymous content to create powerful new wid
gets.
XForms Upload Element - Archive of obsolete content
representations the xforms upload element is represented by visually combining three wid
gets: a text field that shows the uri of the selected file, a button to open the file picker dialog which allows the user to select a file, and a button to clear the text field and the reference to the file from the bound node (xhtml only).
... characteristics analogous wid
get is <xhtml:input type="file"/> ...
Displaying a graphic with audio samples - Archive of obsolete content
e html> <html> <head> <title>javascript spectrum example</title> </head> <body> <audio id="audio-element" src="revolve.ogg" controls="true" style="width: 512px;"> </audio> <div><canvas id="fft" width="512" height="200"></canvas></div> <img id="mozlogo" style="display:none" src="mozilla2.png"></img> <script> var canvas = document.
getelementbyid('fft'), ctx = canvas.
getcontext('2d'), channels, rate, framebufferlength, fft; function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; fft = new fft(framebufferlength / channels, rate); ...
...tx.fillrect (0,0, canvas.width, canvas.height); ctx.fillstyle = "rgb(255,255,255)"; for (var i = 0; i < signal.length; i++ ) { // multiply spectrum by a zoom value magnitude = signal[i] * 1000; // draw rectangle bars for each frequency bin ctx.fillrect(i * 4, canvas.height, 3, -magnitude); } ctx.drawimage(document.
getelementbyid('mozlogo'),0,0, canvas.width, canvas.height); } var audio = document.
getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> ...
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
a common variant is to use a bare class and hover pseudo-class to
gether, like this: .nav:hover {color: red;} in situations where the only instances of the class value nav are applied to hyperlinks, this will work fine.
...for example: <a name="pa
getop"> <h2>my page</h2> without a </a>, this name will effectively enclose the rest of the document.
Using the DOM File API in chrome code - Extensions
in fact, you
get one bonus feature: you can create file objects specifying the path of the file on the user's computer.
...you can do so like this: var dsfile = components.classes["@mozilla.org/file/directory_service;1"] .
getservice(components.interfaces.nsiproperties) .
get("profd", components.interfaces.nsifile); dsfile.append("myfilename.txt"); var file = file.createfromnsifile(dsfile); this uses the directory service to locate the profile directory (with the location key "profd", see below for more details), then appends the name of the file we want to work with by calling nsifile.append().
Explaining basic 3D theory - Game development
this article explains all of the basic theory that's useful to know when you are
getting started working with 3d.
...if we connect the geometry with the material we will
get a mesh.
Async scripts for asm.js - Game development
putting async into action
getting async compilation is easy: when writing your javascript, just use the async attribute like so: <script async src="file.js"></script> or, to do the same thing via script: var script = document.createelement('script'); script.src = "file.js"; document.body.appendchild(script); (scripts created from script default to async.) the default html shell emscripten generates produces the latter.
... two common situations in which a script is *not* async (as defined by the html spec) are: <script async>code</script> and var script = document.createelement('script'); script.innerhtml = "code"; document.body.appendchild(script); both are counted as 'inline' scripts and
get compiled and then run immediately.
Crisp pixel art look with image-rendering - Game development
the concept retro pixel art aesthetics are
getting popular, especially in indie games or game jam entries.
... here's some html to create a simple canvas: <canvas id="game" width="128" height="128"></canvas> css to size the canvas and render a crisp image: canvas { width: 512px; height: 512px; image-rendering: -moz-crisp-edges; image-rendering: -webkit-crisp-edges; image-rendering: pixelated; image-rendering: crisp-edges; } and some javascript to set up the canvas and load the image: //
get canvas context var ctx = document.
getelementbyid('game').
getcontext('2d'); // load image var image = new image(); image.onload = function () { // draw the image into the canvas ctx.drawimage(image, 0, 0); } image.src = 'https://udn.realityripple.com/samples/11/a2954fe197.png'; this code used to
gether produces the following result: note: you can check out the original code on github (...
Efficient animation for web games - Game development
requestanimationframe causes the browser to redraw and call your function before that frame
gets to the screen.
...animator.js is a fire-and-for
get style animation library, designed to be used with games, or other situations where you need many, synchronised, custom animations.
Paddle and keyboard controls - Game development
from that you can
get useful information: the key holds the information about the key that was pressed.
...next we'll
get into the code to use all of the things we just set up and to move the paddle on the screen.
Player paddle and controls - Game development
we have the ball moving and bouncing off the walls, but it quickly
gets boring — there's no interactivity!
... game.load.image('ball', 'img/ball.png'); game.load.image('paddle', 'img/paddle.png'); } adding the paddle graphic just so we don't for
get, at this point you should grab the paddle graphic from github, and save it in your /img folder.
Visual typescript game engine - Game development
main dependency file // symbolic for now const plarformergameinfo = { name: "crypto-runner", title: "play platformer crypto runner!", }; // symbolic for now const gameslist: any[] = [ plarformergameinfo, ]; const master = new ioc(gameslist); const appicon: appicon = new appicon(master.
get.browser); master.singlton(platformer, master.
get.starter); console.log("platformer: ", master.
get.platformer); master.
get.platformer.attachappevents(); project structure builds/ is autogenerated.
...├── style/ | | ├── styles.css | ├── libs/ | | ├── class/ | | | ├── networking/ | | | | ├── rtc-multi-connection/ | | | | | ├── filebufferreader.js | | | | | ├── rtcmulticonnection2.js | | | | | ├── rtcmulticonnection3.js | | | | | ├── linkify.js | | | | | ├──
gethtmlmediaelement.js | | | | | ├── socket.io.js | | | | ├── broadcaster-media.ts | | | | ├── broadcaster.ts | | | | ├── connector.ts | | | | ├── network.ts | | | ├── visual-methods/ | | | | ├── sprite-animation.ts | | | | ├── text.ts | | | | ├── texture.ts | | | ├─...
Gecko FAQ - Gecko Redirect 1
you are encouraged to join this team by
getting involved.
... gecko includes the following components: document parser (handles html and xml) layout engine with content model style system (handles css, etc.) javascript runtime (spidermonkey) image library networking library (necko) platform-specific graphics rendering and wid
get sets for win32, x, and mac user preferences library mozilla plug-in api (npapi) to support the navigator plug-in interface open java interface (oji), with sun java 1.2 jvm rdf back end font library security library (nss) original document information author(s): angus other contributors: ekrock, vidur, hidday, drunclear copyright information: portions of this content are © 1998–20...
Breadcrumb - MDN Web Docs Glossary: Definitions of Web-related terms
a breadcrumb, or breadcrumb trail, is a navigational aid that is typically placed between a site's header and the main content, displaying either a hierarchy of the current page in relation to the the site's structure, from top level to current page, or a list of the links the user followed to
get to the current page, in the order visited.
...they can also help a user
get back to where they were before and can reduce the number of clicks needed to
get to a higher-level page.
I18N - MDN Web Docs Glossary: Definitions of Web-related terms
i18n (from "internationalization", a 20-letter word) is the best practice that enables products or services to be readily adapted to any tar
get culture.
... internationalization is the design and development of a product, application or document content that enables easy localization for tar
get audiences that vary in culture, region, or language.
IDL - MDN Web Docs Glossary: Definitions of Web-related terms
the content attribute is the attribute as you set it from the content (the html code) and you can set it or
get it via element.setattribute() or element.
getattribute().
...the idl attribute is always going to use (but might transform) the underlying content attribute to return a value when you
get it and is going to save something in the content attribute when you set it.
ITU - MDN Web Docs Glossary: Definitions of Web-related terms
from defining rules for ensuring transmissions
get to where they need to go to and creating the "sos" alert signal used in morse code, the itu has long played a key role in how we use technology to exchange information and ideas.
...for example, the itu and the moving picture experts group (mpeg) worked to
gether to develop and publish, as well as to maintain, the various mpeg specifications, such as mpeg-2 (itu h.262), avc (itu h.264), and hevc (itu h.265).
Network throttling - MDN Web Docs Glossary: Definitions of Web-related terms
in web performance, network throttling, or network condition emulation, it is used to emulate low bandwidth conditions experienced by likely a large segment of a site's tar
get user base.
...the network speeds of a mobile user accessing that web application, possibly while traveling or in a remote area with poor data plan covereage, will likely be very slow, if they are able to
get online at all.
Symbol - MDN Web Docs Glossary: Definitions of Web-related terms
let sym = symbol("sym") alert(sym.tostring()) // symbol(sym), now it works or you can use the symbol.description property to
get its description: let _sym = symbol("sym"); alert(_sym.description); // sym well-known symbols the symbol class has constants for so-called well-known symbols.
...l value from the registry, and symbol.keyfor(symbolvalue) returns a token string from the registry; each is the other's inverse, so the following is true: symbol.keyfor(symbol.for("tokenstring")) === "tokenstring" // true learn more general knowledge symbol (programming) on wikipedia javascript data types and data structures symbols in ecmascript 6 symbol in the mdn js reference object.
getownpropertysymbols() ...
Synthetic monitoring - MDN Web Docs Glossary: Definitions of Web-related terms
examples of popular synthetic monitoring tools include webpa
getest and lighthouse.
... unlike rum, synthetic monitoring provides a narrow view of performance that doesn't account for user differences, making it useful in
getting basic data about an application's performance and spot-checking performance in development environments.
How to Report a Hung Firefox
if you suspect a hang (as opposed to slow performance), wait one minute on an idle system before
getting the stack trace.
...
getservice(ci.nsiwindowmediator); let win = wm.
getmostrecentwindow("navigator:browser"); let browser = win.gbrowser.selectedbrowser; if (browser.isremotebrowser) { browser.messagemanager.loadframescript('data:,let appinfo = components.classes["@mozilla.org/xre/app-info;1"];if (appinfo && appinfo.
getservice(components.interfaces.nsixulruntime).processtype != components.interfaces.nsixulruntime.proce...
IPDL Best Practices
reference counting protocol actors is tricky here is the easiest way to
get it right the first time (lessons learned from the http channel and geolocation protocols): allocpprotocol calls addref deallocpprotocol calls release this ensures that the actor will not disappear from under ipdl, and that you won't
get bizarre crashes at other times if ipdl deletes the protocol tree.
... it makes sense to fold construction and the first message to
gether, as well as the penultimate and deletion messages, so that the final protocol looks like this: async protocol pasyncquerier { child: pasyncquery(nsstring query); } async protocol pasyncquery { parent: __delete__(nsstring result); } ...
PBackground
this protocol is called pcompositor, and allows us to bypass the main thread of the parent process, which trims the latency of texture uploads since they will not
get bogged down if that thread is busy.
...this has lead to a rather awkward pattern seen in some parts of the gecko codebase, looking something like this (try searching for geckoprocesstype_default in dxr): if (xre_
getprocesstype() == geckoprocesstype_default) { dothething(arguments); } else { mipdlprotocol->senddothething(arguments); } this can
get unwieldy very quickly, so a better solution was needed.
DownloadSummary
a reference to a downloadsummary object can be obtained using the downloads.
getsummary() function.
... note: this method is already called internally by the downloads.
getsummary() function.
Services.jsm
the services.jsm javascript code module offers a wide assortment of lazy
getters that simplify the process of obtaining references to commonly used services.
...for example, to obtain a reference to the preferences service: var prefsservice = services.prefs; provided service
getters service accessor service interface service name androidbridge nsiandroidbridge 1 appinfo nsixulappinfo nsixulruntime application information service appshell nsiappshellservice application shell service blocklist nsiblocklistservice blocklist service cache nsicacheservice cache service cac...
SourceMap.jsm
get a reference to the module: let sourcemap = {}; components.utils.import('resource:///modules/devtools/sourcemap.jsm', sourcemap); sourcemapconsumer a sourcemapconsumer instance represents a parsed source map which we can query for information about the original file positions by giving it a file position in the generated source.
...walks over the tree and concatenates all the various snippets to
gether to one string.
Using JavaScript code modules
egistering an alias in the chrome manifest using a line like this: resource aliasname uri/to/files/ for example, if the xpi for your foo extension includes a top-level modules/directory containing the bar.js module (that is, the modules/directory is a sibling to chrome.manifest and install.rdf), you could create an alias to that directory via the instruction: resource foo modules/ (don't for
get the trailing slash!) you could then import the module into your javascript code via the statement: components.utils.import("resource://foo/bar.js"); programmatically adding aliases custom aliases to paths that can be represented as an nsilocalfile can be programmatically added as well.
... for example: // import services.jsm unless in a scope where it's already been imported components.utils.import("resource://gre/modules/services.jsm"); var resprot = services.io.
getprotocolhandler("resource") .queryinterface(components.interfaces.nsiresprotocolhandler); var aliasfile = components.classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile); aliasfile.initwithpath("/some/absolute/path"); var aliasuri = services.io.newfileuri(aliasfile); resprot.setsubstitution("myalias", aliasuri); // assuming the code modules are in the alias folder itself notes custom modules and xpcom components note that prior to gecko 2.0 javascript xpcom components are loaded before chrome registration.
JavaScript code modules
pluralform.jsm supplies an easy way to
get the correct plural forms for the current locale, as well as ways to localize to a specific plural rule.
... services.jsm provides
getters for conveniently obtaining access to commonly-used services.
Mozilla Content Localized in Your Language
the content here should be what you and your localization team have decided, to
gether, to follow when localizing mozilla products and web sites.
...does it vary by product and tar
get audience?
Localizing extension metadata on addons.mozilla.org
getting translation help you are kindly advised not to use any automatic online translation, which can bring unpleasant low-quality output to users.
... amazon mechanical turk this is not free, but for a very modest amount of money you can
get your amo page quickly translated by native speakers.
Patching a Localization
get the source first, you need to
get the source for the localization in question using its two or three character iso language code.
...now let's
get a little more detailed.
Initial setup
after you have some experience with hg, you may want to
get commit access.
... w
get w
get is a command-line utility that allows you to retrieve files using internet protocols.
Uplifting a localization from Central to Aurora
localizers who are working on l10n-central are responsible for
getting their work onto the aurora repository.
...in the workrepo directory, do #verify that we didn't for
get changesets hg inc ../l10n-central/ab-cd comparing with ../l10n-central/ab-cd searching for changes no changes found hg inc -r default ../releases/l10n/mozilla-aurora/ab-cd comparing with ../releases/l10n/mozilla-aurora/ab-cd searching for changes no changes found # push to central hg push ../l10n-central/ab-cd # push to aurora hg push ../releases/l10n/mozilla-aurora/ab-cd ...
Creating localizable web content
if the screenshot shows the application that the website directly relates to (firefox on mozilla.com/firefox, personas on
getpersonas.com), try to use screenshots from the localized version.
... if however the screenshot shows a third-party application or website, it's acceptable to use the english version if it's not available in the tar
get language.
Fonts for Mozilla 2.0's MathML engine
on most linux distributions and similar open source platforms, you can install math fonts (stix, asana or mathjax fonts) from your package manager or
get them from this zip archive.
...mathml font selection with css you can
get these fonts from the mathml-fonts add-on ; the xpi is just a zip archive that you can fetch and extract for example with the following command: w
get https://addons.mozilla.org/firefox/downloads/latest/367848/addon-367848-latest.xpi -o mathml-fonts.zip; \ unzip mathml-fonts.zip -d mathml-fonts then copy the mathml-fonts/resource/ directory somewhere on your web site and ensure that the woff files ...
MathML Torture Test
th { font-family: stix two math; } .texgyrebonum math { font-family: tex gyre bonum math; } .texgyrepagella math { font-family: tex gyre pagella math; } .texgyreschola math { font-family: tex gyre schola math; } .texgyretermes math { font-family: tex gyre termes math; } .xits math { font-family: xits math; } javascript content function updatemathfont() { var mathfont = document.
getelementbyid("mathfont").value; if (mathfont == "default") { document.body.removeattribute("class"); } else { document.body.setattribute("class", mathfont); } } function load() { document.
getelementbyid("mathfont").
...to
get the best rendering, be sure to have appropriate mathematical fonts installed on your system and to use a browser with opentype math support such as gecko 31.0 (firefox 31.0 / thunderbird 31.0 / seamonkey 2.28) or higher.
MathML Demo: <mspace> - space
f="javascript:downdepth();" title="decrease depth">-</a> <math display="block"> <mstyle displaystyle="true"> <msqrt> <mrow> <mn>3</mn> <mspace style="background-color: yellow" id="thespace" height="0.1ex" depth="0.1ex" width="0.1em" /> <mi>x</mi> </mrow> </msqrt> </mstyle> </math> </p> javascript content var height=0; var width=0; var depth=0; function upheight() { height++; document.
getelementbyid("thespace").setattribute("height",height+".1ex"); } function downheight() { height--; document.
getelementbyid("thespace").setattribute("height",height+".1ex"); } function upwidth() { width++; document.
getelementbyid("thespace").setattribute("width",width+".1em"); } function downwidth() { width--; document.
getelementbyid("thespace").setattribute("width",width+".1em"); } func...
...tion updepth() { depth++; document.
getelementbyid("thespace").setattribute("depth",depth+".1ex"); } function downdepth() { depth--; document.
getelementbyid("thespace").setattribute("depth",depth+".1ex"); } ...
Mozilla Development Tools
if you are doing active development, checking out source code from one of these is preferable to downloading an archived snapshot, as you
get up-to-the-minute changes.
... bonsai bonsai is tree control (
get it?).
Activity Monitor, Battery Status Menu and top
if a laptop is closed for several hours and then reopened, those hours are not included in the calculation.) battery status menu when you click on the battery icon in the os x menu bar you
get a drop-down menu that includes a list of “apps using significant energy”.
... top -stats pid,command,cpu,idlew,power -o power -d note: -a and -e can be used instead of -d to
get different counting modes.
Refcount tracing and balancing
this results in slower code, but at least you
get some data about where the leaks might be occurring from.
...for example, env xpcom_mem_log_classes=nsdocshell xpcom_mem_log_objects=2 xpcom_mem_refcnt_log=./refcounts.log ./mach run will log stack traces to refcounts.log for the 2nd nsdocshell object that
gets allocated, and nothing else.
about:memory
you can also use the "load and diff..." button to
get the difference between two memory report files.
...if it
gets higher, it indicates that additional memory reporters should be added.
powermetrics
it is most useful for
getting cpu, gpu and wakeup measurements in a precise and easily scriptable fashion (unlike activity monitor and top) especially in combination with rapl via the mach power command.
...change this number to
get shorter or longer samples.
turbostat
invocation turbostat must be invoked as the super-user: sudo turbostat if you
get an error saying "turbostat: no /dev/cpu/0/msr", you need to run the following command: sudo modprobe msr the output is as follows: core cpu avg_mhz %busy bzy_mhz tsc_mhz smi cpu%c1 cpu%c3 cpu%c6 cpu%c7 coretmp pkgtmp pkg%pc2 pkg%pc3 pkg%pc6 pkg%pc7 pkgwatt corwatt gfxwatt - - 799 21.63 3694 3398 0 12.02 3.16 1.71 61.48 49 49...
... if you run with the -s option you
get a smaller range of measurements that fit on a single line, like the following: avg_mhz %busy bzy_mhz tsc_mhz smi cpu%c1 cpu%c3 cpu%c6 cpu%c7 coretmp pkgtmp pkg%pc2 pkg%pc3 pkg%pc6 pkg%pc7 pkgwatt corwatt gfxwatt 3614 97.83 3694 3399 0 2.17 0.00 0.00 0.00 77 77 0.00 0.00 0.00 0.00 67.50 57.77 0.46 ...
Performance
the "leaks" tool is not recommended for use with spidermonkey or firefox, because it
gets confused by tagged pointers and thinks objects have leaked when they have not (see bug 390944).
... intel power gad
get (windows, mac, linux) intel power gad
get provides real-time graphs for package and processor rapl estimates.
browser.dom.window.dump.file
type:string default value:none exists by default: no application support: gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) status: active; last updated 2012-03-18 introduction: pushed to nightly on 2009-04-24 bugs: bug 489938 values the value holds the file system path for the file in which the content of the window.dump() calls
get written, e.g.
... the line breaks have to be in the argument of the dump function, else successive dump calls will
get logged into the same line.
Preference reference
if set to true, the data is stored as content preference.browser.pa
gethumbnails.capturing_disabledthe preference browser.pa
gethumbnails.capturing_disabled controls whether the application creates screenshots of visited pages which will be shown if the web page is shown in the grid of the "new tab page" (about:newtab) which offers the most often visited pages for fast navigation.browser.search.context.loadinbackgroundbrowser.search.context.loadinbackground controls w...
...domain name including the top level domain is highlighted in the address bar by coloring it black and the other parts grey.browser.urlbar.trimurlsthe preference browser.urlbar.trimurls controls whether the protocol http and the trailing slash behind domain name (if the open page is exactly the domain name) are hidden.dom.event.clipboardevents.enableddom.event.clipboardevents.enabled lets websites
get notifications if the user copies, pastes, or cuts something from a web page, and it lets them know which part of the page had been selected.
Patches and pushes
zilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> ***this tag is optional***<url type="application/x-suggestions+json" method="
get" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchterms}" />*** <url type="text/html" method="
get" template="http://search.yahoo.com/search"> <param name="p" value="{searchterms}"/> <param name="ei" value="utf-8"/> <mozparam name="fr" condition="pref" pref="yahoo-fr" /> </url> <searchform>http://search.yahoo.com/</searchform> </searchplugin> create xml ...
...it can be considered a bit complicated at first, but after you do it the first time, it
gets easier and easier after that :-) ...
Emscripten
to
get started with emscripten, go to the official emscripten wiki.
...read more about emscripten and try some demos, then
get started with using it.
Anonymous Shared Memory
started by server via pr_createprocess() fm = pr_
getinheritedfilemap( shmname ); addr = pr_memmap(fm); ...
...pr_memunmap(addr); pr_closefilemap(fm); anonymous shared memory functions pr_openanonfilemap pr_processattrsetinheritablefilemap pr_
getinheritedfilemap pr_exportfilemapasstring pr_importfilemapfromstring ...
Interval Timing
conceptually, they are based on free-running counters that increment at a fixed rate without possibility of outside influence (as might be observed if one was using a time-of-day clock that
gets reset due to some administrative action).
... printervaltime interval functions interval timing functions are divided into three groups:
getting the current interval and ticks per second converting standard clock units to platform-dependent intervals converting platform-dependent intervals to standard clock units
getting the current interval and ticks per second pr_intervalnow pr_tickspersecond converting standard clock units to platform-dependent intervals pr_secondstointerval pr_millisecondstointerval pr_microsecondst...
NSS_3.11.10_release_notes.html
go to the subdirectory for your platform, dbg (debug) or opt (optimized), to
get the tar.gz or zip file.
... the tar.gz or zip file expands to an nss-3.11.10 directory containing three subdirectories: include - nss header files lib - nss shared libraries bin - nss tools and test programs you also need to download the nspr 4.7.1 binary distributions to
get the nspr 4.7.1 header files and shared libraries, which nss 3.11.10 requires.
NSS 3.14.2 release notes
the documentation is in the docbook format and can be rendered as html and unix-style manual pages using an optional build tar
get.
... bugs fixed in nss 3.14.2 https://bugzilla.mozilla.org/buglist.cgi?list_id=5502456;resolution=fixed;classification=components;query_format=advanced;tar
get_milestone=3.14.2;product=nss compatibility nss 3.14.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.15.5 release notes
added a new macro cert_list_tail, defined in certt.h, for
getting the tail of a certcertlist.
... bugs fixed in nss 3.15.5 a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&tar
get_milestone=3.15.5&product=nss compatibility nss 3.15.5 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.16.3 release notes
new functions in cert.h cert_
getgeneralnametypefromstring - an utlity function to lookup a value of type certgeneralnametype given a human readable string.
...c) tanusitvanykiado sha1 fingerprint: e3:92:51:2f:0a:cf:f5:05:df:f6:de:06:7f:75:37:e1:65:ea:57:4b turned off websites and code signing trust bits (1024-bit root) bugs fixed in nss 3.16.3 this bugzilla query returns all the bugs fixed in nss 3.16.3: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.16.3 ...
NSS 3.16 release notes
(this requires nspr 4.10.4.) to build for the linux x32 tar
get, set the environment variable use_x32=1 when building nss.
... bugs fixed in nss 3.16 this bugzilla query returns all the bugs fixed in nss 3.16: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.16 ...
NSS 3.18 release notes
sec_
getcrltimes - extract the validity times from a crl.
... cn = cfca ev root sha1 fingerprint: e2:b8:29:4b:55:84:ab:6b:58:c2:90:46:6c:ac:3f:b8:39:8f:84:83 the version number of the updated root ca list has been set to 2.3 bugs fixed in nss 3.18 this bugzilla query returns all the bugs fixed in nss 3.18: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.18 compatibility nss 3.18 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.19.1 release notes
this affects the key strength values that are reported by ssl_
getchannelinfo.
... the minimum modulus size for rsa keys is now 512 bits the minimum modulus size for dsa keys is now 1023 bits the minimum modulus size for diffie-hellman keys is now 1023 bits bugs fixed in nss 3.19.1 this bugzilla query returns all the bugs fixed in nss 3.19.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.19.1 acknowledgements the nss development team would like to thank matthew green and karthikeyan bhargavan for responsibly disclosing the issue in bug 1138554.
NSS 3.22 release notes
in ssl.h ssl_peersignedcerttimestamps -
get signed_certificate_timestamp tls extension data ssl_setsignedcerttimestamps - set signed_certificate_timestamp tls extension data new types in secoidt.h the following are added to secoidtag: sec_oid_aes_128_gcm sec_oid_aes_192_gcm sec_oid_aes_256_gcm sec_oid_idea_cbc sec_oid_rc2_40_cbc sec_oid_des_40_cbc sec_oid_rc4_40 sec_oid_rc4_5...
... bugs fixed in nss 3.22 this bugzilla query returns all the bugs fixed in nss 3.22: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.22 compatibility nss 3.22 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.25 release notes
new functions in nssckfw.h nssckfwslot_
getslotid nssckfwsession_
getfwslot nssckfwinstance_destroysessionhandle nssckfwinstance_findsessionhandle notable changes in nss 3.25 an ssl socket can no longer be configured to allow both tls 1.3 and ssl v3.
...:9e:a8:ba:f2 cn = opentrust root ca g3 sha-256 fingerprint: b7:c3:62:31:70:6e:81:07:8c:36:7c:b8:96:19:8f:1e:32:08:dd:92:69:49:dd:8f:57:09:a4:10:f7:5b:62:92 bugs fixed in nss 3.25 this bugzilla query returns all the bugs fixed in nss 3.25: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.25 compatibility nss 3.25 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.33 release notes
in ssl.h ssl_
getexperimentalapi - access experimental apis in libssl.
... bugs fixed in nss 3.33 this bugzilla query returns all the bugs fixed in nss 3.33: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.33 compatibility nss 3.33 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.37 release notes
with nss 3.37, this alternative implementation for linux has been enhanced to use the glibc function
getentropy(), instead of reading from /dev/urandom directly, if the build and runtime linux platform supports it.
...ust elektronik sertifika hizmet sağlayıcısı h5 sha-256 fingerprint: 49:35:1b:90:34:44:c1:85:cc:dc:5c:69:3d:24:d8:55:5c:b2:08:d6:a8:14:13:07:69:9f:4a:f0:63:19:9d:78 bugs fixed in nss 3.37 this bugzilla query returns all the bugs fixed in nss 3.37: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.37 compatibility nss 3.37 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.39 release notes
new functions in cert.h cert_
getcertkeytype - query the key type associated with the given certificate.
...367cb896198f1e3208dd926949dd8f5709a410f75b6292 bugs fixed in nss 3.39 bug 1483128 - nss responded to an sslv2-compatible clienthello with a serverhello that had an all-zero random (cve-2018-12384) this bugzilla query returns all the bugs fixed in nss 3.39: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.39 compatibility nss 3.39 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.45 release notes
only relevant for clients that might have copied the unit test code verbatim bug 1550022 - ensure nssutil3
gets built on android bug 1528174 - chacha20poly1305 should no longer modify output length on failure bug 1549382 - don't leak in pkcs#11 modules if c_
getslotinfo() returns error bug 1551041 - fix builds using gcc < 4.3 on big-endian architectures bug 1554659 - add versioning to openbsd builds to fix link time errors using nss bug 1553443 - send session ticket only after handshake is marked...
...obal for anti-replay of tls 1.3 early data bug 1561510 - fix a bug where removing -arch xxx args from cc didn't work bug 1561523 - add a string for the new-ish error ssl_error_missing_post_handshake_auth_extension this bugzilla query returns all the bugs fixed in nss 3.45: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.45 compatibility nss 3.45 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.48 release notes
bugs fixed in nss 3.48 bug 1600775 - require nspr 4.24 for nss 3.48 bug 1593401 - fix race condition in self-encrypt functions bug 1599545 - fix assertion and add test for early key update bug 1597799 - fix a crash in nssckfwobject_
getattributesize bug 1591178 - add entrust root certification authority - g4 certificate to nss bug 1590001 - prevent negotiation of versions lower than 1.3 after helloretryrequest bug 1596450 - added a simplified and unified mac implementation for hmac and cmac behind pkcs#11 bug 1522203 - remove an old pentium pro performance workaround bug 1592557 - fix prng known-answer-test scripts bug 158...
...9141 - add more cbc padding tests that missed nss 3.47 bug 1590339 - fix a memory leak in btoa.c bug 1589810 - fix uninitialized variable warnings from certdata.perl bug 1573118 - enable tls 1.3 by default in nss this bugzilla query returns all the bugs fixed in nss 3.48: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.48 compatibility nss 3.48 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.51 release notes
bug 1611209 - correct swapped pkcs11 values of ckm_aes_cmac and ckm_aes_cmac_general bug 1612259 - complete integration of wycheproof ecdh test cases bug 1614183 - check if ppc __has_include(<sys/auxv.h>) bug 1614786 - fix a compilation error for ‘
getfipsenv’ "defined but not used" bug 1615208 - send dtls version numbers in dtls 1.3 supported_versions extension to avoid an incompatibility.
...signed long' in security/nss/lib/freebl/ecl/ecp_25519.c:88 bug 1609751 - add test for mp_int clamping bug 1582169 - don't attempt to read the fips_enabled flag on the machine unless nss was built with fips enabled bug 1431940 - fix a null pointer dereference in blake2b_update bug 1617387 - fix compiler warning in secsign.c bug 1618400 - fix a openbsd/arm64 compilation error: unused variable '
getauxval' bug 1610687 - fix a crash on unaligned cmaccontext.aes.keyschedule when using aes-ni intrinsics this bugzilla query returns all the bugs fixed in nss 3.51: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.51 compatibility nss 3.51 shared libraries are backward compatible with all older nss 3.x ...
NSS 3.53 release notes
bug 1561331 - additional modular inverse test bug 1629553 - rework and cleanup gmake builds bug 1438431 - remove mkdepend and "depend" make tar
get bug 290526 - support parallel building of nss when using the makefiles bug 1636206 - hacl* update after changes in libintvector.h bug 1636058 - fix building nss on debian s390x, mips64el, and riscv64 bug 1622033 - add option to build without seed this bugzilla query returns all the bugs fixed in nss 3.53: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&q...
...uery_format=advanced&product=nss&tar
get_milestone=3.53 compatibility nss 3.53 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.55 release notes
bug 1651520 - fix slotlock race in nsc_
gettokeninfo.
... this bugzilla query returns all the bugs fixed in nss 3.55: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.55 compatibility nss 3.55 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.56 release notes
bug 1653975 - fix 3.53 regression by setting "all" as the default makefile tar
get.
... this bugzilla query returns all the bugs fixed in nss 3.56: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&tar
get_milestone=3.56 compatibility nss 3.56 shared libraries are backward compatible with all older nss 3.x shared libraries.
FC_InitToken
(user certs are the certificates that have their associated private keys in the key database.) a user must be able to call fc_inittoken() without logging into the token (to assume the nss user role) because either the user's password hasn't been set yet or the user for
gets the password and needs to blow away the password-encrypted private key database and start over.
... application usage fc_inittoken() is used to reset the password for the key database when the user for
gets the password.
FC_SetOperationState
description fc_setoperationstate restores the cryptographic operations state of a session from an array of bytes obtained with fc_
getoperationstate.
... return value examples see also fc_
getoperationstate, nsc_setoperationstate ...
NSS Key Functions
seckey_
getdefaultkeydb seckey_destroyprivatekey seckey_
getdefaultkeydb returns a handle to the default key database opened by nss_init.
... syntax include <key.h> include <keyt.h> seckeykeydbhandle *seckey_
getdefaultkeydb(void); returns the function returns a handle of type seckeykeydbhandle.
NSS cryptographic module
the standard pkcs #11 function c_
getfunctionlist or the equivalent nsc_
getfunctionlist function returns pointers to the functions that implement the default mode of operation.
... to enable the fips mode of operation, use the function fc_
getfunctionlist instead to
get pointers to the functions that implement the fips mode of operation.
NSS tools : modutil
the jar file uses the nss pkcs #11 jar format to identify all the files to be installed, the module's name, the mechanism flags, and the cipher flags, as well as any files to be installed on the tar
get machine, including the pkcs #11 module library file and other files such as documentation.
... to simply
get a list of modules in the database, use the -list command.
gtstd.html
upgraded documentation may be found in the current nss reference
getting started with ssl chapter 2
getting started with ssl this chapter describes how to set up your environment, including certificate and key databases.
...in addition, you must use the following compiler flags: solaris flags: -c -o -kpic -dsvr4 -dsysv -d__svr4 -d__svr4__ -dsolaris -d_reentrant -dsolaris2_5 -d_svid_
gettod -dxp_unix -udebug -dndebug windows nt flags: -c -o2 -md -w3 -nologo -d_x86_ -gt -dwinnt -dxp_pc -udebug -u_debug -dndebug -dwin32 -d_windows ...
sslkey.html
seckey_
getdefaultkeydb seckey_destroyprivatekey seckey_
getdefaultkeydb returns a handle to the default key database opened by nss_init.
... syntax #include <key.h> #include <keyt.h> seckeykeydbhandle *seckey_
getdefaultkeydb(void); returns the function returns a handle of type seckeykeydbhandle.
TLS Cipher Suite Discovery
this function is declared in "ssl.h" as follows: ssl_import secstatus ssl_
getciphersuiteinfo( pruint16 ciphersuite, sslciphersuiteinfo *info, pruintn len); the application provides the cipher suite number for which it wants information, the address of a block of memory allocated to receive that information, and the size in bytes of that block of memory.
... ssl_
getciphersuiteinfo fills that caller-supplied memory with information from the sslciphersuiteinfo structure for that cipher suite.
NSS tools : modutil
the jar file uses the nss pkcs #11 jar format to identify all the files to be installed, the module's name, the mechanism flags, and the cipher flags, as well as any files to be installed on the tar
get machine, including the pkcs #11 module library file and other files such as documentation.
... to simply
get a list of modules in the database, use the -list command.
NSS tools : pk12util
return codes o 0 - no error o 1 - user cancelled o 2 - usage error o 6 - nls init error o 8 - certificate db open error o 9 - key db open error o 10 - file initialization error o 11 - unicode conversion error o 12 - temporary file creation error o 13 - pkcs11
get slot error o 14 - pkcs12 decoder start error o 15 - error read from import file o 16 - pkcs12 decode error o 17 - pkcs12 decoder verify error o 18 - pkcs12 decoder validate bags error o 19 - pkcs12 decoder import bags error o 20 - key db conversion version 3 to version 2 error o 21 - cert db conversion version 7 to version 5 error o 22 - cert ...
...and key dbs patch error o 23 -
get default cert db error o 24 - find cert by nickname error o 25 - create export context error o 26 - pkcs12 add password itegrity error o 27 - cert and key safes creation error o 28 - pkcs12 add cert and key error o 29 - pkcs12 encode error examples importing keys and certificates the most basic usage of pk12util for importing a certificate or key is the pkcs#12 input file (-i) and some way to specify the security database being accessed (either -d for a directory or -h for a token).
Multithreading in Necko
for example, the http protocol handler has code that runs on the socket transport thread to kick off pending requests well before the main thread would
get around to doing so.
...the default implementation does not spawn a worker thread, and instead simply calls pr_
getipnodebyname (essentially equivalent to
gethostbyname).
Rhino scopes and contexts
note that currently in order to use java classes (liveconnect) from a sealed shared scope you need to pre-load a number of objects needed for liveconnect into the scope before it
gets sealed.
...string loadme = "regexp;
getclass; java; packages; javaadapter;"; cx.evaluatestring(sealedsharedscope , loadme, "lazyload", 0, null); sealedsharedscope .sealobject(); dynamic scopes there's one problem with the setup outlined above.
JS_updateMallocCounter
maxmallocbytes is initialized with maxbytes parameter of js_newruntime, and could be configured later by calling js_
getgcparameter with jsgc_max_malloc_bytes.
... see also mxr id search for js_updatemalloccounter changeset 88cfae411a2a js_newruntime js_
getgcparameter bug 517665 ...
SpiderMonkey 31
get it here mozilla-esr31 you will find it in "firefox extended support release 31" package on hg release platform support spidermonkey 31 is supported on all the platforms where firefox 31 runs.
...ced by js::toint64) js_valuetouint64 (replaced by js::touint64) js_valuetoecmauint32 (replaced by js::touint32) js_valuetoecmaint32 (replaced by js::toint32) js_valuetoint32 (can be replaced with js::toint32, which has a different behavior!) js_valuetouint16 (replaced by js::touint16) js_valuetostring (replaced by js::tostring) js_definepropertywithtinyid js_defineucpropertywithtinyid js_
getobjectid api changes spidermonkey must now be initialized before it can be used.
Using RAII classes in Mozilla
ensuring raii classes are not used as temporaries a common mistake when using raii classes is to accidentally for
get to name object, which causes its scope to be different from what is intended.
...ct_notifier_init; nscontentutils::addscriptblocker(cx); } or, if it is the only parameter: nsautoscriptblocker::nsautoscriptblocker(moz_guard_object_notifier_only_param_in_impl) { moz_guard_object_notifier_init; nscontentutils::addscriptblocker(); } finally, if an raii class that uses these macros has derived classes, the derived classes must also use some of the macros in order to
get the benefit of the assertions.
Handling Mozilla Security Bugs
in particular, we understand and acknowledge the concerns of those who believe that all information about security vulnerabilities should be publicly disclosed as soon as it is known, so that users may take immediate steps to protect themselves and so that problems can
get the maximum amount of developer attention and be fixed as soon as possible.
... please try to be understanding and accommodating if a mozilla distributor has a legitimate need to keep a bug in the security-sensitive category for some reasonable additional time period, e.g., to
get a new release distributed to users.
AT APIs Support
wid
gets such as menus, tab panels, tree views and dialogs are provided via an xml language called xul (extensible user-interface language).
...developing a xul window is not that different from developing a web page, but the elements available to add wid
gets are more powerful and designed to be similar to desktop wid
gets.
XUL Accessibility
<label value="it's label for control" control="control" /> <hbox role="grouping" id="control" />
get tooltiptext attribute if the element is anonymous child of the element that is the direct child of toolbaritem element or the element is direct child of toolbaritem element then title attribute of toolbaritem element is used (currently it's used in firefox ui only) if the element has aria role and the role allows to aggregate name from subtree of element then generate name from subtree of the ele...
... <description value="it's label for control" control="control" /> <hbox role="grouping" id="control" />
get tooltiptext attribute value if the aria role is used and it allows to have accessible value then aria-valuetext or aria-valuenow are used if the element is xlink then value is generated from link location actions if the element is xlink then jump action is exposed if the element has registered click event handler then click action is exposed xul elements notification used to display an infor...
History Service Design
places core history service (nsinavhistoryservice.idl) is the core of places, every other places service depends on it to correctly work, so it
gets always initialized at application startup.
...temporary storage is used to avoid too frequent writes to the disk, since those are most likely to cause fsyncs (to ensure data integrity) on the tar
get filesystem.
The Publicity Stream API
this stream can be pulled down by
getpublicitystream() and helps determine the results for
getuserrecommendedapps().
...
getpublicitystream( onsuccess: <function>, { [ onerror: <function> ], [ for_apps: <list> ], [ since: <date> ], [ before: <date> ], [ count: <int> ]): provides a means for a web store to receive a list of the current user's socially relevant app activity by being called from an origin which hosts a web store.
Bundling multiple binary components
this means using something like loadlibrary /
getprocaddress / freelibrary on windows.
...the costs
get higher if you have many methods that need to be loaded.
Avoiding leaks in JavaScript XPCOM components
if the programmer for
gets to return the memory to the heap, it leaks.
...consider the example of bug 170022 (which also demonstrates a leak via a global variable, fixed later in bug 231266): const observer = { observe: function(subject, topic, data) { if (topic != "open-new-tab-request" || subject != window) return; delayedopentab(data); } }; const service = components.classes["@mozilla.org/observer-service;1"] .
getservice(components.interfaces.nsiobserverservice); service.addobserver(observer, "open-new-tab-request", false); in this example, there is a similar cycle between observe and service.
Creating XPCOM components
for the registration process the registration methods creating an instance of your component weblock1.cpp using xpcom utilities to make things easier xpcom macros generic xpcom module macros common implementation macros declaration macros weblock2.cpp string classes in xpcom using strings nsembedstring and nsembedcstring smart pointers starting weblock
getting called at startup registering for notifications
getting access to the category manager providing access to weblock creating the weblock programming interface defining the weblock interface in xpidl the xpidl syntax scriptable interfaces subclassing nsisupports the web locking interface implementing weblock declaration macros representing return values in xpc...
...om xpidl code generation
getting the weblock service from a client implementing the iweblock interface the directory service modifying paths with nsifile manipulating files with nsifile using nsilocalfile for reading data processing the white list data iweblock method by method lock and unlock addsite removesite setsites
getnext
getsites hasmoreelements finishing the component using frozen interfaces copying interfaces into your build environment implementing the nsicontentpolicy interface receiving notifications implementing the nsicontentpolicy uniform resource locators checking the white list creating nsiuri objects building the weblock ui user interface package list client code overview xul the xul document...
XPCOM guide
mozilla::services namespacethe services c++ namespace offers an easy and efficient alternative for obtaining a service as compared to the indirect xpcom approach:
getservice(), call
getservice(), etc methods are expensive and should be avoided when possible.receiving startup notificationssometimes it's necessary for xpcom components to receive notifications as to the progress of the application's startup process, so they can start new services at appropriate times, for example.xpcom array guidemozilla has many array classes because each array is optimized for a...
...this guide describes the available arrays as well as the enumerator classes that can be used to
get to them.
Components.utils.createObjectIn
options an object containing a single option defineas, which determines the name of the object in the tar
get compartment.
... to create an object with a specified name, use defineas: var foo = components.utils.createobjectin(mywindow, {defineas: "foo"}); now the tar
get compartment's window has a new global object named foo.
Components.utils.importGlobalProperties
example components.utils.import("resource://gre/modules/devtools/console.jsm"); components.utils.importglobalproperties(["atob", "btoa"]); var encoded = btoa("hello"); console.log(encoded); // "sgvsbg8=" console.log(atob(encoded)); // "hello" alternative methods if importglobalproperties does not support the tar
geted firefox version, here are some alternative methods to import these objects.
...knowing that, we can just
get a valid blob by importing a known module that has the objects, such as services.jsm const {blob, file, services} = cu.import("resource://gre/modules/services.jsm", {}); reference: stackoverflow :: use blob on firefox add-on hiddendomwindow the hidden domwindow has all of these objects automatically imported.
Components object
utils.
getglobalforobject returns the global object with which a given object is associated (through its prototype chain at birth, for example).
... utils.
getweakreference
gets a weak reference for the object passed in.
Using components
commonly, we start our scripts like so: var cc = components.classes; var ci = components.interfaces; if we want to
get a hold of a component, we then do something like: var rc = cc["@mozilla.org/registry;1"]; var rs = rc.
getservice(ci.nsiregistry); see also: xpcshell -- how to
get a command line interface to javascript more info as was already stated, it is common to start addon scripts like: var cc = components.classes; var ci = components.interfaces; there is also another way to start, which is exactly equivalent to the above.
... classesbyid=[object nsxpccomponents_classesbyid] stack=js frame :: scratchpad/4 :: cdump :: line 8 manager=[xpconnect wrapped nsicomponentmanager] id=[object nsxpccomponents_id] exception=[object nsxpccomponents_exception] reporterror=function reporterror() { [native code] } cancreatewrapper=function cancreatewrapper() { [native code] } cancallmethod=function cancallmethod() { [native code] } can
getproperty=function can
getproperty() { [native code] } cansetproperty=function cansetproperty() { [native code] } ...
Monitoring HTTP activity
this is very simple, requiring you to implement a single method, nsihttpactivityobserver.observeactivity(), which
gets called each time an action of interest takes place on the http channel.
...this is done using the nsihttpactivitydistributor.addobserver() method in nsihttpactivitydistributor: var activitydistributor = components.classes["@mozilla.org/network/http-activity-distributor;1"] .
getservice(components.interfaces.nsihttpactivitydistributor); activitydistributor.addobserver(httpobserver); observable activities there are two classes of observable activities: those that occur at the socket level and those that occur at the http transaction level.
NS_Alloc
it is equivalent to calling alloc on the nsimemory instance returned from ns_
getmemorymanager.
...see also ns_free, nsimemory, ns_
getmemorymanager ...
NS_Free
it is equivalent to calling free on the nsimemory instance returned from ns_
getmemorymanager.
... see also ns_alloc, nsimemory, ns_
getmemorymanager ...
NS_Realloc
it is equivalent to calling realloc on the nsimemory instance returned from ns_
getmemorymanager.
... see also nsimemory, ns_
getmemorymanager ...
Core XPCOM functions
xpcom provides a number of global functions which are used to initialize and shut down the xpcom library, as well as to allocate memory,
get access to services, and to instantiate interfaces.
... ns_allocinfallibly allocates a block of memory using the xpcom memory manager.ns_freefrees a block of memory using the xpcom memory manager.ns_
getcomponentmanagerthe ns_
getcomponentmanager function returns a reference to the xpcom component manager.ns_
getcomponentregistrarthe ns_
getcomponentregistrar function returns a reference to the xpcom component registrar.ns_
getmemorymanagerthe ns_
getmemorymanager function returns a reference to the xpcom memory manager.ns_
getservicemanagerthe ns_
getservicemanager function returns a reference to the xpcom service manager.ns_initxpcom2the ns_initxpcom2 function initiates use of xpcom in the calling process.ns_initxpcom3the ns_initxpcom3 function initiates use of xpcom in the calling process with support for statically defined xpcom modules.
NS_OVERRIDE
example class a has a method
getfoo() which is overridden by class b: class a { virtual nsresult
getfoo(nsifoo** aresult); }; class b : public a { ns_override virtual nsresult
getfoo(nsifoo** aresult); }; later, the signature of a::
getfoo() is changed to remove the output parameter: class a { - virtual nsresult
getfoo(nsifoo** aresult); + virtual already_addrefed<nsifoo>
getfoo(); }; b::
getfoo() no longer overrides a::
getfoo() as was originally...
...a compiler with static-checking enabled will issue the following error: test.cpp:8: error: ns_override function b::
getfoo(nsifoo**) does not override a base class method with the same name and signature.
EndReading
the ns_cstring
getdata function can be used to determine if a nsacstring instance has null-terminated storage.
... see also beginreading, ns_cstring
getdata, nsacstring ...
nsACString
see, for example, ns_cstring
getdata.
... see also nsacstring::length() ns_cstring
getdata nsembedcstring ...
EndReading
the ns_cstring
getdata function can be used to determine if a nsastring instance has null-terminated storage.
... see also beginreading, ns_cstring
getdata, nsastring ...
nsAString
see, for example, ns_string
getdata.
... see also nsastring::length, endreading, ns_string
getdata, nsembedstring ...
nsMemory
these routines allow easy access to xpcom's global nsimemory implementation without having to go through the service manager to
get it.
...
getglobalmemoryservice the
getglobalmemoryservice function returns a reference to xpcom's global nsimemory object.
jsdIStackFrame
opt_* values above, or'd to
gether.
...setting or
getting this attribute on any other context will throw a ns_error_no_interface exception.
mozIAsyncHistory
1.0 66 introduced gecko 24.0 inherits from: nsisupports last changed in gecko 24.0 (firefox 24.0 / thunderbird 24.0 / seamonkey 2.21) implemented by: @mozilla.org/browser/history;1 as a service: var asynchistory = components.classes["@mozilla.org/browser/history;1"] .
getservice(components.interfaces.moziasynchistory); method overview void
getplacesinfo(in jsval aplaceidentifiers, in mozivisitinfocallback acallback); void isurivisited(in nsiuri auri, in mozivisitedstatuscallback acallback); void updateplaces(in moziplaceinfo, [optional] in mozivisitinfocallback acallback); methods
getplacesinfo() starts an asynchronous request t...
...void
getplacesinfo( in jsval aplaceidentifiers, in mozivisitinfocallback acallback ); parameters aplaceidentifiers the uri for which to determine the visited status.
mozIRegistry
which explains how this information came to be associated with the notion of a "registry." someday (i hope) this page will be properly titled so that everybody knows it is the place to come to in order to find out how they are supposed to link to
gether the various xpcom components that to
gether form the mozilla browser.
...worst case, clients would obtain the moziregistry singleton via some other means (i.e., a "ns
getregistry" function).
mozIStorageResultSet
last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports method overview mozistoragerow
getnextrow(); methods
getnextrow() returns the next row from the result set.
... mozistoragerow
getnextrow(); parameters none.
nsIAccessibleTreeCache
last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports method overview nsiaccessible
getcachedtreeitemaccessible(in long arow, in nsitreecolumn acolumn); void invalidatecache(in long arow, in long acount); void treeviewchanged(); void treeviewinvalidated(in long astartrow, in long aendrow, in long astartcol, in long aendcol); methods
getcachedtreeitemaccessible() returns the tree item from the cache for the cell in the specified row and column; the nsiaccessible is create...
...nsiaccessible
getcachedtreeitemaccessible( in long arow, in nsitreecolumn acolumn ); parameters arow the row index.
nsICacheService
ring createtemporaryclientid(in nscachestoragepolicy storagepolicy); obsolete since gecko 1.9.2 void evictentries(in nscachestoragepolicy storagepolicy); void init(); obsolete since gecko 1.8 void shutdown(); obsolete since gecko 1.8 void visitentries(in nsicachevisitor visitor); attributes attribute type description cacheiotar
get nsieventtar
get the event tar
get for cache i/o operation notifications.
...the offline cache lets clients accumulate entries in a temporary client and merge them in as a group using nsiofflinecachesession.mer
getemporaryclient().
nsIChromeRegistry
chrome/public/nsichromeregistry.idlscriptable provides access to the chrome registry; you can use this to
get information about chrome documents that have been registered.
... inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) implemented by: @mozilla.org/chrome/chrome-registry;1 as a service: var chromeregistry = components.classes["@mozilla.org/chrome/chrome-registry;1"] .
getservice(components.interfaces.nsichromeregistry); method overview void canonify(in nsiuri achromeurl); obsolete since gecko 1.8 void checkfornewchrome(); nsiuri convertchromeurl(in nsiuri achromeurl); boolean wrappersenabled(in nsiuri auri); violates the xpcom interface guidelines constants constant value description none 0 partial 1 full 2 methods canonify() obsolete since gecko 1.8 (fir...
nsIClipboardDragDropHooks
wid
get/public/nsiclipboarddragdrophooks.idlscriptable interfaces for overriding the built-in drag, drop, copy, and paste implementations in the content area and editors.
...session the drag session from which client can
get the flavors present or the actual data.
nsICommandController
to create an instance, use: var commandcontroller = components.classes["@mozilla.org/embedcomp/base-command-controller;1"] .createinstance(components.interfaces.nsicommandcontroller); method overview void docommandwithparams(in string command, in nsicommandparams acommandparams); void
getcommandstatewithparams( in string command, in nsicommandparams acommandparams); methods docommandwithparams() executes the specified command with a set of parameters contained in an nsicommandparams object.
...
getcommandstatewithparams() void
getcommandstatewithparams( in string command, in nsicommandparams acommandparams ); parameters command the command whose state is to be determined.
nsICookieConsent
last changed in gecko 1.9 (firefox 3) inherits from: nsisupports method overview void
getconsent(); methods
getconsent() gives a decision on what should be done with a cookie, based on a site's p3p policy and the user's preferences.
... nscookiestatus
getconsent( in nsiuri uri, in nsihttpchannel httpchannel, in boolean isforeign, out nscookiepolicy policy ); parameters uri the uri to find the policy for.
nsICookieStorage
last changed in gecko 1.7 inherits from: nsisupports method overview void
getcookie(in string acookieurl, in voidptr acookiebuffer, in pruint32ref acookiesize); void setcookie(in string acookieurl, in constvoidptr acookiebuffer, in unsigned long acookiesize); methods
getcookie() retrieves a cookie from the browser's persistent cookie store.
... void
getcookie( in string acookieurl, in voidptr acookiebuffer, in pruint32ref acookiesize ); parameters acookieurl url string to look up cookie with..
nsIDOMMozTouchEvent
in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtar
get relatedtar
getarg, in unsigned long streamidarg); attributes attribute type description streamid unsigned long a unique identifier for each finger, so that each finger's movement can be tracked separately.
...void initsimplegestureevent( in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtar
get relatedtar
getarg, in unsigned long streamidarg ); parameters streamidarg the value to assign to the streamid attribute; this uniquely identifies the finger generating the touch events.
nsIDOMSimpleGestureEvent
method overview void initsimplegestureevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtar
get relatedtar
getarg, in unsigned long directionarg, in double deltaarg); attributes attribute type description delta double the delta value indicating how far the gesture moved.
...void initsimplegestureevent( in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtar
get relatedtar
getarg, in unsigned long directionarg, in double deltaarg ); parameters typearg canbubblearg cancelablearg viewarg detailarg screenxarg screenyarg clientxarg clientyarg ctrlkeyarg altkeyarg shiftkeyarg metakeyarg buttonarg relatedtar
getarg directionarg the value to assign to the direction attribute.
nsIDOMXULSelectControlElement
inherits from: nsidomxulcontrolelement last changed in gecko 1.9 (firefox 3) method overview nsidomxulselectcontrolitemelement appenditem(in domstring label, in domstring value); long
getindexofitem(in nsidomxulselectcontrolitemelement item); nsidomxulselectcontrolitemelement
getitematindex(in long index); nsidomxulselectcontrolitemelement insertitemat(in long index, in domstring label, in domstring value); nsidomxulselectcontrolitemelement removeitemat(in long index); attributes attribute type description itemcount unsigned long read only.
... selectedindex long selecteditem nsidomxulselectcontrolitemelement value domstring methods appenditem() nsidomxulselectcontrolitemelement appenditem( in domstring label, in domstring value ); parameters label value return value
getindexofitem() long
getindexofitem( in nsidomxulselectcontrolitemelement item ); parameters item return value
getitematindex() nsidomxulselectcontrolitemelement
getitematindex( in long index ); parameters index return value insertitemat() nsidomxulselectcontrolitemelement insertitemat( in long index, in domstring label, in domstring value ); parameters index label value return value removeitemat() nsidomxulselectcontrolitemelement removeitemat( in long index ); parameters index return value ...
nsIDirectoryServiceProvider2
inherits from: nsidirectoryserviceprovider last changed in gecko 0.9.6 method overview nsisimpleenumerator
getfiles(in string prop); methods
getfiles() the directory service calls this when it
gets a request for a prop and the requested type is nsisimpleenumerator.
... nsisimpleenumerator
getfiles( in string prop ); parameters prop the symbolic name of the file list.
nsIDynamicContainer
this is not guaranteed to
get called.
... in particular, if the query just goes away, you will not
get this call.
nsIEditorMailSupport
inherits from: nsisupports last changed in gecko 1.7 method overview nsisupportsarray
getembeddedobjects(); nsidomnode insertascitedquotation(in astring aquotedtext, in astring acitation, in boolean ainserthtml); nsidomnode insertasquotation(in astring aquotedtext); void inserttextwithquotations(in domstring astringtoinsert); void pasteascitedquotation(in astring acitation, in long aselectiontype); void pasteasquotation(in long aselectiontype); void rewrap(in boolean arespectnewlines); void stripcites(); methods
getembeddedobjects()
get a list of img and object tags in the current document.
... nsisupportsarray
getembeddedobjects(); parameters none.
nsIExternalHelperAppService
to access this service, use: var externalhelperappservice = components.classes["@mozilla.org/uriloader/external-helper-app-service;1"] .
getservice(components.interfaces.nsiexternalhelperappservice); method overview boolean applydecodingforextension(in autf8string aextension, in acstring aencodingtype); nsistreamlistener docontent(in acstring amimecontenttype, in nsirequest arequest, in nsiinterfacerequestor awindowcontext, in boolean aforcesave); methods applydecodingforextension() determines whether or not d...
... awindowcontext use nsiservicemanager.
getinterface() to retrieve properties like the dom window or parent window; the service might need this in order to bring up dialogs.
nsIExternalURLHandlerService
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsihandlerinfo
geturlhandlerinfofromos(in nsiuri aurl, out boolean afound); methods
geturlhandlerinfofromos() given a url, looks up the handler info from the operating system.
...nsihandlerinfo
geturlhandlerinfofromos( in nsiuri aurl, out boolean afound ); parameters aurl the url we are looking for.
nsIFileURL
inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) attributes attribute type description file nsifile
get/set nsifile corresponding to this url.
... the
getter returns a reference to an immutable object.
nsIFileView
opriate id is passed, nsifileview relies on the treecols section --> <treecol id="filenamecolumn" label="name" flex="1" primary="true"/> <treecol id="lastmodifiedcolumn" label="date" flex="1"/> <treecol id="size" label="size" flex="1"/> </treecols> <treechildren/> </tree> <script> var dir="/home/"; //the directory to be opened var ftree = document.
getelementbyid("ftree"); //the xul tree element var lfile = components.classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile); lfile.initwithpath(dir); // open the directory var fview = components.classes["@mozilla.org/filepicker/fileview;1"] .createinstance(components.interfaces.nsifileview); //create an instance of the component tview = ...
...fview.queryinterface(components.interfaces.nsitreeview); //
get the nsitreeview interface fview.setdirectory(lfile.queryinterface(components.interfaces.nsifile)); //set the directory fview.setfilter("*"); //add an appropriate file filter fview.sort(fview.sortname, false); //set the sort type ftree.view = tview; //set the view on the tree object </script> </window> ...
nsIIDNService
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) implemented by: @mozilla.org/network/idn-service;1 as a service: var idnservice = components.classes["@mozilla.org/network/idn-service;1"] .
getservice(components.interfaces.nsiidnservice); method overview autf8string convertacetoutf8(in acstring input); autf8string converttodisplayidn(in autf8string input, out boolean isascii); acstring convertutf8toace(in autf8string input); boolean isace(in acstring input); autf8string normalize(in autf8string input); methods convertacetoutf8() converts an ace (ascii compatible encoding...
...the resulting string is useful for display purposes, and ensures that the encoding is consistent with nsiuri.
gethost().
nsIINIParserFactory
example obtaining a parser object to obtain a parser for an ini file, you can use code that looks like this: to
get an nsiiniparser instance for an ini file, you may use the following code: // create an nsilocalfile var cl = "@mozilla.org/file/local;1"; var interf = components.interfaces.nsilocalfile; var file = components.classes[cl].createinstance(interf); // init the file with the path to your ini file var path = "c:\\temp\\example.ini"; file.initwithpath(path); // create the nsiiniparserfactory var cl = ...
..."@mozilla.org/xpcom/ini-parser-factory;1"; var interf = components.interfaces.nsiiniparserfactory; var inifact = components.manager.
getclassobjectbycontractid(cl,interf); //
get the iniparser for the ini file var iniparser = inifact.createiniparser(file); see also nsiiniparser nsilocalfile ...
nsIINIParserWriter
to create an nsiiniparserwriter object, you use the nsiiniparserfactory interface to create a parser, then nsisupports.queryinterface() that to
get an nsiiniparserwriter, like this: let writer = components.classes["@mozilla.org/xpcom/ini-processor-factory;1"].
... .
getservice(components.interfaces.nsiiniparserfactory) .createiniparser(somelocalfile) .queryinterface(components.interfaces.nsiiniparserwriter); here, somelocalfile is an nsifile based object, such as an nsilocalfile.
nsIJSID
method overview boolean equals(in nsijsid other); const nsid*
getid(); violates the xpcom interface guidelines void initialize(in string idstring); string tostring(); attributes attribute type description id nsidptr read only.
... violates the xpcom interface guidelines
getid() const nsid*
getid(); parameters none.
nsILocale
inherits from: nsisupports last changed in gecko 1.0 method overview astring
getcategory(in astring category); methods
getcategory() retrieves a string with the current locale name.
... astring
getcategory( in astring category ); parameters category a string representing the category to retrieve the locale for.
nsIMemory
ns_
getmemorymanager returns the global nsimemory instance.
... see also ns_
getmemorymanager nsiobserverservice.notifyobservers() nsiobserver nsiobserverservice ...
nsIMemoryMultiReporter
xpcom/base/nsimemoryreporter.idlscriptable reports multiple memory measurements using a callback function that
gets called once for each measurement.
... closure an object containing any additional data your callback might need; this
gets passed to the callback.
nsIMessageBroadcaster
methods void broadcastasyncmessage([optional] in astring messagename, [optional] in jsval obj, [optional] in jsval objects); nsimessagelistenermanager
getchildat(in unsigned long aindex); broadcastasyncmessage() like sendasyncmessage(), but also broadcasts this message to all "child" message managers of this message manager.
...
getchildat() return a single subordinate message manager.
nsIMessageListener
the received message is an object with the following properties: tar
get the tar
get of the message.
...when the listener is called, 'this' value is the tar
get of the message.
nsIMessageWakeupService
to indicate a wakeup request in a manifest file, add a line that looks something like this: category wakeup-request nscomponent @mozilla.org/myservice;1,nsimyinterface,
getservice,mymessage1,mymessage2[,..] the category entry value consists of a comma separate string that contains: the contract id for your component (e.g.
... the method to call to instantiate the component (either "
getservice" or "createinstance").
nsIMimeHeaders
as a service: var mimeheaders = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.nsimimeheaders); method overview string extractheader([const] in string headername, in boolean
getallofthem); void initialize([const] in string allheaders, in long allheaderssize); attributes attribute type description allheaders string read only.
... methods extractheader() string extractheader( [const] in string headername, in boolean
getallofthem ); parameters headername missing description
getallofthem missing description return value missing description exceptions thrown missing exception missing description initialize() void initialize( [const] in string allheaders, in long allheaderssize ); parameters allheaders insert the complete message content allheaderssize length of the passed in content exceptions thrown missing exception missing description remarks see also ...
Building an Account Manager Extension
devmoaccountmanagerextension.prototype.contractid = "@mozilla.org/accountmanager/extension;1?name=example@mozilla.org"; // add the component to the mailnews-accountmanager-extensions category devmoaccountmanagerextension.prototype._xpcom_categories: [{ category: "mailnews-accountmanager-extensions" }], // create entry point for the module if (xpcomutils.generatens
getfactory) var ns
getfactory = xpcomutils.generatens
getfactory([devmoaccountmanagerextension]); else var ns
getmodule = xpcomutils.generatens
getmodule([devmoaccountmanagerextension]); step3: create the new panel as next step we create the xul and the property file for your new panel.
... function onpreinit(account, accountvalues) { } function oninit(pageid, serverid) { } function onaccepteditor() { } function onsave() { } function updatepage() {} step5: putting it all to
gether // todo build an demo extension for this tutorial...
nsIMsgFilterList
bute boolean nsimsgfilterlist::shoulddownloadallheaders filtercount readonly attribute unsigned long nsimsgfilterlist::filtercount loggingenabled attribute boolean nsimsgfilterlist::loggingenabled defaultfile attribute nsilocalfile nsimsgfilterlist::defaultfile logstream attribute nsioutputstream nsimsgfilterlist::logstream logurl readonly attribute acstring nsimsgfilterlist::logurl methods
getfilterat() nsimsgfilter nsimsgfilterlist::
getfilterat (in unsigned long filterindex )
getfilternamed() nsimsgfilter nsimsgfilterlist::
getfilternamed (in astring filtername) setfilterat() nsimsgfilter nsimsgfilterlist::setfilterat ( in unsigned long filterindex, in nsimsgfilter filter ) removefilter() void nsimsgfilterlist::removefilter (in nsimsgfilter filter) rem...
...) writestrattr() void nsimsgfilterlist::writestrattr ( in nsmsgfilterfileattribvalue attrib, in string value, in nsioutputstream stream ) writewstrattr() void nsimsgfilterlist::writewstrattr ( in nsmsgfilterfileattribvalue attrib, in string value, in nsioutputstream stream ) matchorchangefiltertar
get() boolean nsimsgfilterlist::matchorchangefiltertar
get ( in acstring olduri, in acstring newuri, in boolean caseinsensitive ) clearlog() void nsimsgfilterlist::clearlog () ensurelogfile() void nsimsgfilterlist::ensurelogfile () flushlogifnecessary () void nsimsgfilterlist::flushlogifnecessary () const const nsmsgfilterfileattribvalue nsimsgfilterlist...
nsIMsgHeaderParser
return value the first name found in the list exceptions thrown missing exception missing description makefulladdress() given an e-mail address and a person's name, concatenates them to
gether into a single string, doing all the necessary quoting.
... exceptions thrown missing exception missing description native code only!makefulladdressstring given an e-mail address and a person's name, cons them to
gether into a single string, doing all the necessary quoting (const char* version).
nsINavHistoryResultTreeViewer
if you use this object and attach it to a result without attaching it to a tree, then for
get about it, it will leak.
...this prevents you from seeing multiple entries for things when you have selected to
get visits.
nsINavHistoryResultViewObserver
orientation whether the drag tar
get is before, after, or on the indicated row.
... orientation drop_before, drop_on, or drop_after, indicating whether the drop destination is before, on, or after the tar
get row.
nsIObserver
}, register: function() { var observerservice = components.classes["@mozilla.org/observer-service;1"] .
getservice(components.interfaces.nsiobserverservice); observerservice.addobserver(this, "mytopicid", false); }, unregister: function() { var observerservice = components.classes["@mozilla.org/observer-service;1"] .
getservice(components.interfaces.nsiobserverservice); observerservice.removeobserver(this, "mytopicid"); } } instantiation - this should be f...
... observer.unregister(); "
get everything" - note that "*" is an acceptable value (be careful with this, because it observes many events, and can degrade performance).
nsIObserverService
implemented by @mozilla.org/observer-service;1 as a service: var observerservice = components.classes["@mozilla.org/observer-service;1"] .
getservice(components.interfaces.nsiobserverservice); method overview void addobserver( in nsiobserver anobserver, in string atopic, in boolean ownsweak); nsisimpleenumerator enumerateobservers( in string atopic ); void notifyobservers( in nsisupports asubject, in string atopic, in wstring somedata ); void removeobserver( in nsiobserver anobserver, in string ato...
... components.classes["@mozilla.org/observer-service;1"] .
getservice(components.interfaces.nsiobserverservice) .notifyobservers(null, "mytopicid", "someadditionalinformationpassedas'data'parameter"); see also nsobserverservice observer notifications provides an overview of observers and a list of built-in notifications fired by mozilla.
nsIPrefBranch2
asubject.
get*pref(adata) will
get the new value of the modified preference.
...these cycles generally occur because an object both registers itself as an observer (causing the branch to hold a reference to the observer) and holds a reference to the branch object for the purpose of
getting/setting preference values.
nsIPrivateBrowsingService
similarly, plug-ins can detect whether or not private browsing mode is in effect by using the npn_
getvalue() function to check the current value of the npnvprivatemodebool variable.
...to
get access to the service from javascript, use: var pbs = components.classes["@mozilla.org/privatebrowsing;1"] .
getservice(components.interfaces.nsiprivatebrowsingservice); c++ callers should use the contract id @mozilla.org/privatebrowsing-wrapper;1 instead.
nsIProperty
inherits from: nsisupports last changed in gecko 1.7 attributes attribute type description name astring
get the name of the property.
... value nsivariant
get the value of the property.
nsIScriptError
function mylogtoconsole(amessage, asourcename, asourceline, alinenumber, acolumnnumber, aflags, acategory) { var consoleservice = components.classes["@mozilla.org/consoleservice;1"] .
getservice(components.interfaces.nsiconsoleservice); var scripterror = components.classes["@mozilla.org/scripterror;1"] .createinstance(components.interfaces.nsiscripterror); scripterror.init(amessage, asourcename, asourceline, alinenumber, acolumnnumber, aflags, acategory); consoleservice.logmessage(scripterror); } categories there are a lot o...
...this is an attempt to group them to
gether for reference.
nsISelectionImageService
inherits from: nsisupports last changed in gecko 1.7 method overview void
getimage(in short selectionvalue, out imgicontainer container); void reset(); methods
getimage() retrieve the image for alpha blending.
... void
getimage( in short selectionvalue, out imgicontainer container ); parameters selectionvalue container reset() the current image is marked as invalid.
nsISmsRequestManager
["@mozilla.org/sms/smsrequestmanager;1"] .createinstance(components.interfaces.nsismsrequestmanager); method overview long addrequest(in nsidommozsmsrequest arequest); long createrequest(in nsidommozsmsmanager amanager, out nsidommozsmsrequest arequest); void notifycreatemessagelist(in long arequestid, in long alistid, in nsidommozsmsmessage amessage); void notify
getsmsfailed(in long arequestid, in long aerror); void notifygotnextmessage(in long arequestid, in nsidommozsmsmessage amessage); void notifygotsms(in long arequestid, in nsidommozsmsmessage amessage); void notifymarkedmessageread(in long arequestid, in bool aread); void notifymarkmessagereadfailed(in long arequestid, in long aerror); void notifynomessageinlist(in long arequestid); void n...
... notify
getsmsfailed() void notify
getsmsfailed( in long arequestid, in long aerror ); parameters arequestid a number representing the id of the request.
nsISmsService
instance, use: var smsservice = components.classes["@mozilla.org/sms/smsservice;1"] .createinstance(components.interfaces.nsismsservice); method overview [implicit_jscontext] nsidommozsmsmessage createsmsmessage(in long id, in domstring delivery, in domstring sender, in domstring receiver, in domstring body, in jsval timestamp, in bool read ); unsigned short
getnumberofmessagesfortext(in domstring text); boolean hassupport(); void send(in domstring number, in domstring message, in long requestid, [optional] in unsigned long long processid); methods createsmsmessage() [implicit_jscontext] nsidommozsmsmessage createsmsmessage( in long id, in domstring delivery, in domstring sender, in domstring receiver, in domstring bo...
... return value a smsmessage
getnumberofmessagesfortext() unsigned short
getnumberofmessagesfortext( in domstring text ); parameters text a domstring text to check.
nsISocketProviderService
66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 1.7 method overview nsisocketprovider
getsocketprovider(in string sockettype); methods
getsocketprovider() given a string representing a socket type, this method returns an nsisocketprovider representing that socket type.
... nsisocketprovider
getsocketprovider( in string sockettype ); parameters sockettype the socket type for which to
get a socket provider.
nsISupportsArray
long aindex); violates the xpcom interface guidelines boolean enumeratebackwards(in nsisupportsarrayenumfunc afunc, in voidptr adata); violates the xpcom interface guidelines boolean enumerateforwards(in nsisupportsarrayenumfunc afunc, in voidptr adata); violates the xpcom interface guidelines boolean equals([const] in nsisupportsarray other); violates the xpcom interface guidelines long
getindexof(in nsisupports apossibleelement); long
getindexofstartingat(in nsisupports apossibleelement, in unsigned long astartindex); long
getlastindexof(in nsisupports apossibleelement); long indexof([const] in nsisupports apossibleelement); violates the xpcom interface guidelines long indexofstartingat([const] in nsisupports apossibleelement, in unsigned long astartindex); violates the xpc...
...sarrayenumfunc afunc, in voidptr adata ); parameters afunc adata return value enumerateforwards() [notxpcom, noscript] boolean enumerateforwards( in nsisupportsarrayenumfunc afunc, in voidptr adata ); parameters afunc adata return value violates the xpcom interface guidelines equals() boolean equals( [const] in nsisupportsarray other ); parameters other return value
getindexof() long
getindexof( in nsisupports apossibleelement ); parameters apossibleelement return value
getindexofstartingat() long
getindexofstartingat( in nsisupports apossibleelement, in unsigned long astartindex ); parameters apossibleelement astartindex return value
getlastindexof() long
getlastindexof( in nsisupports apossibleelement ); parameters apossibleelement retur...
Using nsCOMPtr
after you've been using nscomptrs for a while, and you reach unfamiliar territory, or run into compiler errors; you may want to return to this document to
get help from the reference manual or the faq.
... contents status, recent changes, and plans recent changes to nscomptr
getting started guide introduction using nscomptr summary reference manual the basics initialization and assignment using an nscomptr<t> as a t* efficiency and correctness compiler annoyances frequently asked questions buildtime errors runtime errors how do i...
Autoconfiguration in Thunderbird
in many cases, people should be able to download and install thunderbird, enter their real name, email address and password in the account setup wizard and have a fully functioning mail client and
get and send their mail as securely as possible.
... mechanisms thunderbird
gets the server settings via different means, each of which is intended for different cases: ispdb the ispdb is a central database, currently hosted by the thunderbird project, but free to use for any client.
DB Views (message lists)
properties these nsmsgdbview methods set properties, nsitreeview.
getrowproperties (implementation) nsitreeview.
getcellpropreties (implementation) theming the theme uses these properties to style the thread pane.
... text nsitreeview.
getcelltext (implementation) tells the nsitreeview what text to display for a particular row and text column.
Events
compose-send-message a message
gets sent compose-window-close a compose window
gets closed compose-window-init a compose window has been opened compose-window-reopen a cached compose window has been reopened.
... ondisplayingfolder a folder
gets displayed onfolderloading a folder is being loaded onleavingfolder a folder is being unloaded, includes deletion onloadingfolder a folder is being loaded onmakeactive a folderdisplaywid
get becomes active onmessagecountschanged the counts of the messages changed onmessagesloaded the messages in the fol...
Filelink Providers
a provider implementation can choose what information it
gets from the user from the setup dialog by pointing the settingsurl attribute of their nsimsgcloudfileprovider implementation to a chrome url for an xhtml page that contains a form with the extra information.
... for example, the hightail implementation provides the following function: function extraargs() { var usernamevalue = document.
getelementbyid("username").value; return { "username": {type: "char", value: usernamevalue}, }; } in this example, the username value is read from the input, and then the specially-crafted object is returned.
Mailnews and Mail code review requirements
getting early ui-reviews this reduces the chance that work is rejected due to needing further user experience changes, and hence is aimed at saving time for the developer and reviewers.
... (i have done some mozmill orange fixing where the try server would not duplicate the orange failures of the trunk and so in order to
get the enhanced logging, the changes need to go into the trunk.) the patch is authored by the module owner/a peer for the affected test.
Thunderbird Binaries
these builds are made to
get feedback from testers and extension developers.
... warning: whilst developers try to ensure that nightly builds are stable, it is possible that errors can
get into nightly builds that can destroy your data or harm it.
Finding the code for a feature
oops, i guess i need to
get the submenu instead.
... repeating this process, i see that the submenu items all call a function togglemessa
getagmenu.
Access StringBundle from Overlay
the most efficient way to append these strings is by attaching them to an existing stringbundleset as such: <stringbundleset id="stringbundleset"> <stringbundle src="chrome://your_extension/locale/overlay.properties" id="your-extension-strings" /> </stringbundleset> now that your stringbundle is attached you can access it from javascript as follows: var str = document.
getelementbyid("your-extension-strings"); //
get the stringbundle object itself str.
getstring("propertyname"); //
get a string (and do something with it) alternative way let stringbundleservice = cc["@mozilla.org/intl/stringbundle;1"].
getservice(ci.nsistringbundleservice); let bundle = stringbundleservice.createbundle("chrome://your_extension/locale/overlay.properti...
...es"); let str = bundle.
getstringfromname("propertyname"); see nsistringbundleservice ...
Filter Incoming Mail
by example, to modify the mail subject : var newmaillistener = { msgadded: function(amsghdr) { if( !amsghdr.isread ) { // here we are, a new mail has popped // let
get a javascript string object from the subject property // querying mime conversion interface var mimeconvert = components.classes["@mozilla.org/messenger/mimeconverter;1"] .
getservice(components.interfaces.nsimimeconverter); var subject = mimeconvert.decodemimeheader(amsghdr.subject, null, false, true); // here with have a string to modify with javascript.
... subject = subject.tolocalelowercase(); // then we rebuild a subject objet by rencoding the string // and assign it to the message headers and we're done amsghdr.subject = mimeconvert.encodemimepartiistr_utf8(subject, false, "utf-8", 0, 72); } } }; function init() { var notificationservice = components.classes["@mozilla.org/messenger/msgnotificationservice;1"] .
getservice(components.interfaces.nsimsgfoldernotificationservice); notificationservice.addlistener(newmaillistener, notificationservice.msgadded); } addeventlistener("load", init, true); have a look to nsimsgdbhdr to
get the full list of properties to be modified.
Styling the Folder Pane
hasunreadmessages-true afolder.
getnumunread(false) > 0 indicates that the folder (but not subfolders) has unread messages.
... newmessages-true afolder.hasnewmessages subfoldershaveunreadmessages-true afolder.
getnumunread(true) > afolder.
getnumunread(false) indicates whether or not subfolders have unread messages.
Tips and Tricks from the newsgroups
extensions load an extension in its own tab run shell scripts from an extension (for example, to create a symlink)
get extension metadata call java from thunderbird extensions (also an example here, written for firefox but compatible with thunderbird 3.x) define a custom protocol handler to call an external program save attachment and send it repeat image display using css sprites messages use reminderfox to open a message in the default thunderbird message window (when messageu...
...ri, folderuri and gdbview are unknown) determine whether a message has been flagged as junk imap:
getting message key of copied message by nsimsgcopyservice::copyfilemessage access the plain text content of the email body
get information about attachment without selecting message repeat image display using css sprites scan for new messages at startup and manually scan a folder initiated by user force listeners to run consecutively to prevent pop messages from
getting garbled during message retrieval ...
Using the Multiple Accounts API
an account is merely a container to bind incoming servers and identities to
gether.
... relevant api calls: nsimsgaccount nsimsgaccountmanager.createaccount() nsimsgaccount nsimsgaccountmanager.
getaccount(in string key) nsimsgincomingserver nsimsgaccountmanager.createincomingserver(in string type) nsimsgincomingserver nsimsgaccountmanager.
getincomingserver(in string key) smtp servers smtp servers are kept separately from all the other account management stuff.
Memory Management
what won't keep objects alive it's important to note that
getting direct access to the contents of a cdata object using address(), addressofelement(), or contents, will result in a cdata object that does not hold its referent alive.
... be sure to hold an explicit reference so that the referent object doesn't
get into garbage collection, before you're done using it.
3D view - Firefox Developer Tools
pan up/down ↑ / ↓ mouse up/down reset zoom level 0 resets the zoom level to the default focus on selected node f makes sure the currently selected node is visible reset view r resets zoom, rotation, and panning to the default hide current node x makes the currently selected node invisible; this can be helpful if you need to
get at a node that's obscured use cases for the 3d view there are a variety of ways the 3d view is useful: if you have broken html causing layout problems, looking at the 3d view can help find where you've gone wrong.
... you can
get a look at how your page is structured to see if there may be ways to optimize your layout.
DOM Inspector - Firefox Developer Tools
documentation introduction to dom inspector a guided tutorial that will help you
get started with dom inspector.
...
getting dom inspector firefox & thunderbird you may download and install the dom inspector from the amo web site.
Browser Toolbox - Firefox Developer Tools
alto
gether you will have access to the following developer tools: debugger (note: if you want to debug a specific add-on that is restartless or sdk-based then try the add-on debugger.) console style editor performance network monitor page inspector accessibility inspector you can debug chrome: and about: pages using the normal debugger, just as if they were ordinary content pages.
... tar
geting a document in the normal toolbox, there's a button in the toolbar enabling you to tar
get specific iframes in the document.
Set a breakpoint - Firefox Developer Tools
if the breakpoint is an unconditional breakpoint, you'll
get an option add condition, which allows you to turn it into a conditional breakpoint.
... if the breakpoint is a conditional breakpoint, you'll
get an option edit condition, which allows you to change the previously set condition.
UI Tour - Firefox Developer Tools
if you're stopped at a breakpoint, the entire line
gets a green overlay.
...they will be evaluated when code execution is paused: variable tooltip hover on a variable show a tooltip with its value inside: call stack when the debugger's paused, you'll see a call stack: each level of the call stack
gets a line, with the name of the function and the filename and line number.
Deprecated tools - Firefox Developer Tools
although these panels have been removed, you still have access to the old code, and there are alternative webextensions that you can try to
get similar functionality.
... when we deprecate a panel, we begin by
getting feedback from the community to determine the impact of removing that panel.
DOM allocation example - Firefox Developer Tools
it just contains a script that creates a large number of dom nodes: var toolbarbuttoncount = 20; var toolbarcount = 200; function
getrandomint(min, max) { return math.floor(math.random() * (max - min + 1)) + min; } function createtoolbarbutton() { var toolbarbutton = document.createelement("span"); toolbarbutton.classlist.add("toolbarbutton"); // stop spidermonkey from sharing instances toolbarbutton[
getrandomint(0,5000)] = "foo"; return toolbarbutton; } function createtoolbar() { var toolbar = document.createelement("div"); // stop spidermonkey from sharing in...
...stances toolbar[
getrandomint(0,5000)] = "foo"; for (var i = 0; i < toolbarbuttoncount; i++) { var toolbarbutton = createtoolbarbutton(); toolbar.appendchild(toolbarbutton); } return toolbar; } function createtoolbars() { var container = document.
getelementbyid("container"); for (var i = 0; i < toolbarcount; i++) { var toolbar = createtoolbar(); container.appendchild(toolbar); } } createtoolbars(); a simple pseudocode representation of how this code operates looks like this: createtoolbars() -> createtoolbar() // called 200 times, creates 1 div element each time -> createtoolbarbutton() // called 20 times per toolbar, creates 1 span element each time in total, then, it creates 200 htmldivelement objects, and 4000 htmlspanelement objects.
Tree map view - Firefox Developer Tools
the tree map view provides a visual representation of the snapshot, that helps you quickly
get an idea of which objects are using the most memory.
...this means you can quickly
get an idea of roughly what sorts of things allocated by your site are using the most memory.
Performance Analysis - Firefox Developer Tools
(alternatively, if you have only just opened the network monitor, so it's not yet populated with the list of requests, you'll
get a stopwatch icon in the main window.) the network monitor then loads the site twice: once with an empty browser cache, and once with a primed browser cache.
... to
get back to the network monitor's list of network requests click the "back" button on the left.
Network request details - Firefox Developer Tools
params tab this tab displays the
get parameters and post data of a request: response tab the complete content of the response.
... security tab if the site is being served over https, you
get an extra tab labeled "security".
Network request list - Firefox Developer Tools
you can combine different filters to
gether by separating them with a space.
... copy as curl the command may include the following options: -x [method] if the method is not
get or post --data for url encoded request parameters --data-binary for multipart request parameters --http/version if the http version is not 1.1 -i if the method is head -h one for each request header.
CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
this header is a flex container: each navbar link is a flex item: the nav element within the header is both a flex item and a flex container which holds the navigation links: in the css pane in the css pane's rules view, any instance of a display: flex declaration
gets a small flexbox icon next to the word flex.
...the above and below screenshots should give you further hints on how to
get to this.
Page Inspector - Firefox Developer Tools
you can examine pages loaded in the local copy of firefox or in a remote tar
get such as firefox for android.
... see remote debugging to learn how to connect the developer tools to a remote tar
get.
Frame rate - Firefox Developer Tools
a frame rate of 60fps is the tar
get for smooth performance, giving you a time bud
get of 16.7ms for all the updates needed in response to some event.
... a frame rate of 60fps is reckoned to be the tar
get for smooth performance, giving you a time bud
get of 16.7ms for all the updates that need to be made synchronously in response to some event.
Performance - Firefox Developer Tools
you
get four sub-tools to examine aspects of the profile in more detail: the waterfall shows the different operations the browser was performing, such as executing layout, javascript, repaints, and garbage collection the call tree shows the javascript functions in which the browser spent most of its time the flame chart shows the javascript call stack over the course of the recording the allocations view shows the heap a...
...
getting started ui tour to find your way around the performance tool, here's a quick tour of the ui.
Settings - Firefox Developer Tools
available toolbox buttons this group of checkboxes determines which tools
get an icon in the toolbox's toolbar.
... as of firefox 62, if the option to "select an iframe as the currently tar
geted document" is checked, the icon will appear in the toolbar while the settings tab is displayed, even if the current page doesn't include any iframes.
Toolbox - Firefox Developer Tools
the array may include the following tools: web console javascript debugger page inspector style editor profiler network monitor note that not all the hosted tools are always listed here: only the tools actually available in this context are shown (for example, not all tools support remote debugging yet, so if the debugging tar
get is not the firefox instance that launched the window, not all the hosted tools will be shown).
...by default this array includes: toggle split console responsive design mode select a frame as the currently tar
geted document (this is only included by default from firefox 41 onwards).
Console messages - Firefox Developer Tools
uri the tar
get uri.
...for example, code like this will cause an immediate, synchronous, reflow, when it calls window.
getcomputedstyle(thing).height: var thing = document.
getelementbyid("the-thing"); thing.style.display = "inline-block"; var thingheight = window.
getcomputedstyle(thing).height; because of this, it's a good idea to avoid interleaving write and read calls to an element's styles when manipulating the dom, because every time you read back a style that has been invalidated by a previous write call, you ...
Rich output - Firefox Developer Tools
the output will look something like this: console.log(todolist) array(4) [ {…}, {…}, {…}, {…} ] debugger eval code:1:9 undefined if you expand objects, such as arrays, you
get slightly different content.
... for example, by expanding the array in the above list, i
get the following: console.log(todolist) (4) […] 0: object { status: "done", description: "morning pages", datecreated: 1552404478137 } 1: object { status: "in progress", description: "refactor styles", datecreated: 1552404493169 } 2: object { status: "to do", description: "create feedback form", datecreated: 1552404512630 } 3: object { status: "to do", description: "normalize table", datecreated: 1552404533790 } length: 4 <prototype>: array [] debugger eval code:1:9 undefined highlighting and inspecting dom nodes if you hover the mouse over any dom element in the console output, it's highlighted on the page: in the screenshot above you'll also see a blue "tar
get" icon next to the node in the console outpu...
about:debugging - Firefox Developer Tools
the about:debugging page provides a single place from which you can attach the firefox developer tools to a number of debugging tar
gets.
... at the moment it supports three main sorts of tar
gets: restartless add-ons, tabs, and workers.
AbortSignal - Web APIs
properties the abortsignal interface also inherits properties from its parent interface, eventtar
get.
... methods the abortsignal interface inherits methods from its parent interface, eventtar
get.
AnalyserNode.fftSize - Web APIs
the fftsize property of the analysernode interface is an unsigned long value and represents the window size in samples that is used when performing a fast fourier transform (fft) to
get frequency domain data.
... analyser.fftsize = 2048; var bufferlength = analyser.frequencybincount ; var dataarray = new uint8array(bufferlength); analyser.
getbytetimedomaindata(dataarray); // draw an oscilloscope of the current audio source function draw() { drawvisual = requestanimationframe(draw); analyser.
getbytetimedomaindata(dataarray); canvasctx.fillstyle = 'rgb(200, 200, 200)'; canvasctx.fillrect(0, 0, width, height); canvasctx.linewidth = 2; canvasctx.strokestyle = 'rgb(0, 0, 0)'; canvasctx.begin...
AnalyserNode.frequencyBinCount - Web APIs
syntax var arraylength = analysernode.frequencybincount; value an unsigned integer, equal to the number of values that analysernode.
getbytefrequencydata() and analysernode.
getfloatfrequencydata() copy into the provided typedarray.
... analyser.fftsize = 256; var bufferlength = analyser.frequencybincount; console.log(bufferlength); var dataarray = new uint8array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { drawvisual = requestanimationframe(draw); analyser.
getbytefrequencydata(dataarray); canvasctx.fillstyle = 'rgb(0, 0, 0)'; canvasctx.fillrect(0, 0, width, height); var barwidth = (width / bufferlength) * 2.5 - 1; var barheight; var x = 0; for(var i = 0; i < bufferlength; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',50,50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight/2);...
AnalyserNode.smoothingTimeConstant - Web APIs
if 0 is set, there is no averaging done, whereas a value of 1 means "overlap the previous and current buffer quite a lot while computing the value", which essentially smoothes the changes across analysernode.
getfloatfrequencydata/analysernode.
getbytefrequencydata calls.
... analyser.fftsize = 256; var bufferlength = analyser.frequencybincount; console.log(bufferlength); var dataarray = new uint8array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { drawvisual = requestanimationframe(draw); analyser.
getbytefrequencydata(dataarray); canvasctx.fillstyle = 'rgb(0, 0, 0)'; canvasctx.fillrect(0, 0, width, height); var barwidth = (width / bufferlength) * 2.5; var barheight; var x = 0; for(var i = 0; i < bufferlength; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',50,50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight/2); ...
Animation.play() - Web APIs
return value undefined example in the growing/shrinking alice game example, clicking or tapping the cake causes alice's growing animation (alicechange) to play forward, causing her to
get bigger, as well as triggering the cake's animation.
... two animation.play()s, one eventlistener: // the cake has its own animation: var nommingcake = document.
getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // pause the cake's animation so it doesn't play immediately.
Animation.playState - Web APIs
example in the growing/shrinking alice game example, players can
get an ending with alice crying into a pool of tears.
...so they must be paused as soon as they are animated like so: // setting up the tear animations tears.foreach(function(el) { el.animate( tearsfalling, { delay:
getrandommsrange(-1000, 1000), // randomized for each tear duration:
getrandommsrange(2000, 6000), // randomized for each tear iterations: infinity, easing: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)' }); el.pause(); }); // play the tears falling when the ending needs to be shown.
AnimationEffect - Web APIs
methods animationeffect.
gettiming() returns the effecttiming object associated with the animation containing all the animation's timing values.
... animationeffect.
getcomputedtiming() returns the calculated timing properties for this animationeffect.
AnimationEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/animationevent" tar
get="_top"><rect x="116" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">animationevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor animationevent() creates an animationevent event with the given parameters.
AudioBuffer - Web APIs
methods audiobuffer.
getchanneldata() returns a float32array containing the pcm data associated with the channel, defined by the channel parameter (with 0 representing the first channel).
...nd stereo buffer at the sample rate of the audiocontext var myarraybuffer = audioctx.createbuffer(2, audioctx.samplerate * 3, audioctx.samplerate); // fill the buffer with white noise; // just random values between -1.0 and 1.0 for (var channel = 0; channel < myarraybuffer.numberofchannels; channel++) { // this gives us the actual array that contains the data var nowbuffering = myarraybuffer.
getchanneldata(channel); for (var i = 0; i < myarraybuffer.length; i++) { // math.random() is in [0; 1.0] // audio needs to be in [-1.0; 1.0] nowbuffering[i] = math.random() * 2 - 1; } } //
get an audiobuffersourcenode.
AudioBufferSourceNode.loop - Web APIs
you can run the full example live (or view the source.) function
getdata() { source = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('
get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.playbackrate.value = pla...
...ybackcontrol.value; source.connect(audioctx.destination); source.loop = true; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // wire up buttons to stop and play audio, and range slider control play.onclick = function() {
getdata(); source.start(0); play.setattribute('disabled', 'disabled'); playbackcontrol.removeattribute('disabled'); } specification specification status comment web audio apithe definition of 'loop' in that specification.
AudioBufferSourceNode.loopEnd - Web APIs
syntax audiobuffersourcenode.loopend = endoffsetinseconds; var endoffsetinseconds = audiobuffersourcenode.loopend; value a floating-point number indicating the offset, in seconds, into the audio buffer at which each loop will loop return to the beginning of the loop (that is, the current play time
gets reset to audiobuffersourcenode.loopstart).
... function
getdata() { source = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('
get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; songlength = buffer.duration; source.buffer = mybuffer; ...
AudioBufferSourceNode.playbackRate - Web APIs
<input class="playback-rate-control" type="range" min="0.25" max="3" step="0.05" value="1"> <span class="playback-rate-value">1.0</span> function
getdata() { source = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('
get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.playbackrate.value = pla...
...ybackcontrol.value; source.connect(audioctx.destination); source.loop = true; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // wire up buttons to stop and play audio, and range slider control play.onclick = function() {
getdata(); source.start(0); play.setattribute('disabled', 'disabled'); playbackcontrol.removeattribute('disabled'); } stop.onclick = function() { source.stop(0); play.removeattribute('disabled'); playbackcontrol.setattribute('disabled', 'disabled'); } playbackcontrol.oninput = function() { source.playbackrate.value = playbackcontrol.value; playbackvalue.innerhtml = playbackcontrol.value; } specification specification status comment web audio apithe definition of ...
AudioContext.createMediaStreamDestination() - Web APIs
this stream can be used in a similar way as a mediastream obtained via navigator.
getusermedia — it can, for example, be sent to a remote peer using the rtcpeerconnection addstream() method.
...; var clicked = false; var chunks = []; var ac = new audiocontext(); var osc = ac.createoscillator(); var dest = ac.createmediastreamdestination(); var mediarecorder = new mediarecorder(dest.stream); osc.connect(dest); b.addeventlistener("click", function(e) { if (!clicked) { mediarecorder.start(); osc.start(0); e.tar
get.innerhtml = "stop recording"; clicked = true; } else { mediarecorder.stop(); osc.stop(0); e.tar
get.disabled = true; } }); mediarecorder.ondataavailable = function(evt) { // push each chunk (blobs) in an array chunks.push(evt.data); }; mediarecorder.onstop = function(evt) { // make blob out of ...
AudioParam.setValueAtTime() - Web APIs
ain, one second from now (audioctx.currenttime + 1.) // create audio context var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var tar
getattimeplus = document.queryselector('.set-tar
get-at-time-plus'); var tar
getattimeminus = document.queryselector('.set-tar
get-at-time-minus'); // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node and set it's gain value to 0.5 var gainnode = audioctx.creategain(); gainnode.gain.value = 0.5; var ...
...currgain = gainnode.gain.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination source.connect(gainnode); gainnode.connect(audioctx.destination); // set buttons to do something onclick tar
getattimeplus.onclick = function() { currgain += 0.25; gainnode.gain.setvalueattime(currgain, audioctx.currenttime + 1); } tar
getattimeminus.onclick = function() { currgain -= 0.25; gainnode.gain.setvalueattime(currgain, audioctx.currenttime + 1); } specifications specification status comment web audio apithe definition of 'setvalueattime' in that specification.
AudioParam - Web APIs
audioparam.settar
getattime() schedules the start of a change to the value of the audioparam.
... the change starts at the time specified in starttime and exponentially moves towards the value given by the tar
get parameter.
AudioTrack.id - Web APIs
this id can be used with the audiotracklist.
gettrackbyid() method to locate a specific track within the media associated with a media element.
... syntax var trackid = audiotrack.id; value a domstring which identifies the track, suitable for use when calling
gettrackbyid() on an audiotracklist such as the one specified by a media element's audiotracks property.
AudioWorkletProcessor() - Web APIs
example in this example we pass custom options to the audioworkletnode constructor and observe how a structured clone of them
gets passed to our audioworkletprocessor constructor.
...we don't pass numberofinputs and see how it
gets its default value.
AudioWorkletProcessor.process - Web APIs
for each custom audioparam defined using the parameterdescriptors
getter, the key in the object is a name of that audioparam, and the value is a float32array.
...parameters['customgain'][i] : parameters['customgain'][0]) } }) // as this is a source node which generates its own output, // we return true so it won't accidentally
get garbage-collected // if we don't have any references to it in the main thread return true } // define the customgain parameter used in process method static
get parameterdescriptors () { return [{ name: 'customgain', defaultvalue: 1, minvalue: 0, maxvalue: 1, automationrate: 'a-rate' }] } } specifications specification status ...
AuthenticatorAssertionResponse.signature - Web APIs
note: an authenticatorassertionresponse instance is available on publickeycredential.response after calling navigator.credentials.
get().
... examples var options = { challenge: new uint8array(26), // will be another value, provided by the relying party server timeout: 60000 }; navigator.credentials.
get({ publickey: options }) .then(function (assertionpkcred) { var signature = assertionpkcred.response.signature; // send response and client extensions to the server so that it can // go on with the authentication }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing p...
AuthenticatorAssertionResponse.userHandle - Web APIs
note: an authenticatorassertionresponse instance is available on publickeycredential.response after calling navigator.credentials.
get().
...username, e-mail, phone number, etc.) examples var options = { challenge: new uint8array(26), // will be another value, provided by the relying party server timeout: 60000 }; navigator.credentials.
get({ publickey: options }) .then(function (assertionpkcred) { var userhandle = assertionpkcred.response.userhandle; // send response and client extensions to the server so that it can // go on with the authentication }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing...
AuthenticatorAssertionResponse - Web APIs
the authenticatorassertionresponse interface of the web authentication api is returned by credentialscontainer.
get() when a publickeycredential is passed, and provides proof to a service that it has a key pair and that the authentication request is valid and approved.
... examples var options = { challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.
get({ "publickey": options }) .then(function (credentialinfoassertion) { var assertionresponse = credentialinfoassertion.response; // do something specific with the response // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status com...
AuthenticatorResponse - Web APIs
authenticatorassertionresponse authenticatorattestationresponse properties authenticatorresponse.clientdatajson a json string in an arraybuffer, representing the client data that was passed to credentialscontainer.create() or credentialscontainer.
get().
... examples
getting an authenticatorassertionresponse var options = { challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.
get({ "publickey": options }) .then(function (credentialinfoassertion) { var assertionresponse = credentialinfoassertion.response; // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); });
getting an authenticatorattestationresponse var publickey = { challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", ...
Battery Status API - Web APIs
the battery status api extends window.navigator with a navigator.
getbattery() method returning a battery promise, which is resolved in a batterymanager object providing also some new events you can handle to monitor the battery status.
... navigator.
getbattery().then(function(battery) { function updateallbatteryinfo(){ updatechargeinfo(); updatelevelinfo(); updatecharginginfo(); updatedischarginginfo(); } updateallbatteryinfo(); battery.addeventlistener('chargingchange', function(){ updatechargeinfo(); }); function updatechargeinfo(){ console.log("battery charging?
BeforeInstallPromptEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/beforeinstallpromptevent" tar
get="_top"><rect x="116" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">beforeinstallpromptevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor beforeinstallpromptevent() creates a new beforeinstallpromptevent.
BeforeUnloadEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/beforeunloadevent" tar
get="_top"><rect x="116" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">beforeunloadevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} bubbles no cancelable yes tar
get objects defaultview interface event examples window.addeventlistener("beforeunload", function( event ) { event.returnvalue = "\o/"; }); // is equivalent to window.addeventlistener("beforeunload", function( event ) { event.preventdefault(); }); webkit-derived browsers don't follow the sp...
CSSCounterStyleRule - Web APIs
face inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssrule" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssrule</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4d...
...de4"/><a xlink:href="/docs/web/api/csscounterstylerule" tar
get="_top"><rect x="116" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">csscounterstylerule</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent cssrule.
CSSImageValue - Web APIs
examples we create an element <button>magic wand</button> we add some css, including a background image requesting a binary file: button { display: inline-block; min-height: 100px; min-width: 100px; background: no-repeat 5% center url(https://mdn.mozillademos.org/files/16793/magicwand.png) aqua; } we
get the element's style map.
... we then
get() the background-image from the stylemap and stringify it: //
get the element const button = document.queryselector( 'button' ); // retrieve all computed styles with computedstylemap() const allcomputedstyles = button.computedstylemap(); // return the cssimagevalue example console.log( allcomputedstyles.
get('background-image') ); console.log( allcomputedstyles.
get('background-image').tostring() ); specifications specification status comment css typed om level 1the definition of 'cssimagevalue' in that specification.
CSSValueList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssvalue" tar
get="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/cssvaluelist" tar
get="_top"><rect x="121" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvaluelist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, cssvalue.
Managing screen orientation - Web APIs
the second way is the javascript screen orientation api that can be used to
get the current orientation of the screen itself and eventually lock it.
...cras commodo quam non tortor consectetur e
get rutrum dolor ultricies.
Cache.delete() - Web APIs
ignoremethod: a boolean that, when set to true, prevents matching operations from validating the request http method (normally only
get and head are allowed.) it defaults to false.
... in other words, if the url matches you will
get a match regardless of whether the response object has a vary header.
Cache.keys() - Web APIs
ignoremethod: a boolean that, when set to true, prevents matching operations from validating the request http method (normally only
get and head are allowed.) it defaults to false.
... in other words, if the url matches you will
get a match regardless of whether the response object has a vary header.
CacheStorage.match() - Web APIs
ignoremethod: a boolean that, when set to true, prevents matching operations from validating the request http method (normally only
get and head are allowed.) it defaults to false.
...in other words, if the url matches you will
get a match regardless of whether the response object has a vary header or not.
CanvasRenderingContext2D.addHitRegion() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); canvas.addeventlistener('mousemove', function(event) { if(event.region) { alert('ouch, my eye :('); } }); ctx.beginpath(); ctx.arc(100, 100, 75, 0, 2 * math.pi); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi); ctx.arc(130, 80, 10, 0, 2 * math.pi); ctx.fill(); ctx.addhitregion({id: ...
...ode" style="height:250px"> ctx.beginpath(); ctx.arc(100, 100, 75, 0, 2 * math.pi, false); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi, false); ctx.arc(130, 80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregion({id: "eyes"}); // mouth ctx.beginpath(); ctx.arc(100, 110, 50, 0, math.pi, false); ctx.stroke();</textarea> var canvas = document.
getelementbyid("canvas"); var ctx = canvas.
getcontext("2d"); var textarea = document.
getelementbyid("code"); var reset = document.
getelementbyid("reset"); var edit = document.
getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; d...
CanvasRenderingContext2D.arc() - Web APIs
const canvas = document.queryselector('canvas'); const ctx = canvas.
getcontext('2d'); ctx.beginpath(); ctx.arc(100, 75, 50, 0, 2 * math.pi); ctx.stroke(); result different shapes demonstrated this example draws various shapes to show what is possible with arc().
... html <canvas width="150" height="200"></canvas> javascript const canvas = document.queryselector('canvas'); const ctx = canvas.
getcontext('2d'); // draw shapes for (let i = 0; i <= 3; i++) { for (let j = 0; j <= 2; j++) { ctx.beginpath(); let x = 25 + j * 50; // x coordinate let y = 25 + i * 50; // y coordinate let radius = 20; // arc radius let startangle = 0; // starting point on circle let endangle = math.pi + (math.pi * j) / 2; // end point on circle let anticlockwise = i % 2 == 1; // draw anticlockwise ctx.arc(x, y, radius, startangle, endangle, anticlockwise); if (i > 1) { ctx.fill(); } else ...
CanvasRenderingContext2D.bezierCurveTo() - Web APIs
html <canvas id="canvas"></canvas> javascript // define canvas and context const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // define the points as {x, y} let start = { x: 50, y: 20 }; let cp1 = { x: 230, y: 30 }; let cp2 = { x: 150, y: 80 }; let end = { x: 250, y: 100 }; // cubic bézier curve ctx.beginpath(); ctx.moveto(start.x, start.y); ctx.beziercurveto(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y); ctx.stroke(); // start and end points c...
... const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.beginpath(); ctx.moveto(30, 30); ctx.beziercurveto(120,160, 180,10, 220,140); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.beziercurveto' in that specification.
CanvasRenderingContext2D.clearRect() - Web APIs
const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.clearrect(0, 0, canvas.width, canvas.height); erasing part of a canvas this example draws a blue triangle on top of a yellowish background.
... const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // draw yellow background ctx.beginpath(); ctx.fillstyle = '#ff6'; ctx.fillrect(0, 0, canvas.width, canvas.height); // draw blue triangle ctx.beginpath(); ctx.fillstyle = 'blue'; ctx.moveto(20, 20); ctx.lineto(180, 20); ctx.lineto(130, 130); ctx.closepath(); ctx.fill(); // clear part of the canvas ctx.clearrect(10, 10, 120, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingc...
CanvasRenderingContext2D.createImageData() - Web APIs
const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); const imagedata = ctx.createimagedata(100, 50); console.log(imagedata); // imagedata { width: 100, height: 50, data: uint8clampedarray[20000] } filling a blank imagedata object this example creates and fills a new imagedata object with purple pixels.
... const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); const imagedata = ctx.createimagedata(100, 100); // iterate through every pixel for (let i = 0; i < imagedata.data.length; i += 4) { // modify pixel data imagedata.data[i + 0] = 190; // r value imagedata.data[i + 1] = 0; // g value imagedata.data[i + 2] = 210; // b value imagedata.data[i + 3] = 255; // a value } // draw image data to the canvas ctx.putimagedata(imagedata, 20, 20); result more examples for more examples using createimagedata()...
CanvasRenderingContext2D.createPattern() - Web APIs
the original image looks like this: html <canvas id="canvas" width="300" height="300"></canvas> javascript var canvas = document.
getelementbyid('canvas'); var ctx = canvas.
getcontext('2d'); var img = new image(); img.src = 'https://udn.realityripple.com/samples/04/aaeaf9aac4.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 300, 300); }; creating a pattern from a canvas in this example we create a pattern from the contents of an offscreen can...
... javascript // create a pattern, offscreen const patterncanvas = document.createelement('canvas'); const patterncontext = patterncanvas.
getcontext('2d'); // give the pattern a width and height of 50 patterncanvas.width = 50; patterncanvas.height = 50; // give the pattern a background color and draw an arc patterncontext.fillstyle = '#fec'; patterncontext.fillrect(0, 0, patterncanvas.width, patterncanvas.height); patterncontext.arc(0, 0, 50, 0, .5 * math.pi); patterncontext.stroke(); // create our primary canvas and fill it with the pattern const canvas = document.createelement('canvas'); const ctx = canvas.
getcontext('2d'); const pattern = ctx.createpattern(patterncanvas, 'repeat'); ctx.f...
CanvasRenderingContext2D.drawImage() - Web APIs
const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); const image = document.
getelementbyid('source'); image.addeventlistener('load', e => { ctx.drawimage(image, 33, 71, 104, 124, 21, 20, 87, 104); }); result understanding source element size the drawimage() method uses the source element's intrinsic size in css pixels when drawing.
... html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); const image = new image(60, 45); // using optional size for image image.onload = drawimageactualsize; // draw when image has loaded // load an image of intrinsic size 300x227 in css pixels image.src = 'https://udn.realityripple.com/samples/db/f374e9c6fc.jpg'; function drawimageactualsize() { // use the intrinsic size of image in css ...
CanvasRenderingContext2D.ellipse() - Web APIs
html <canvas id="canvas" width="200" height="200"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // draw the ellipse ctx.beginpath(); ctx.ellipse(100, 100, 50, 75, math.pi / 4, 0, 2 * math.pi); ctx.stroke(); // draw the ellipse's line of reflection ctx.beginpath(); ctx.setlinedash([5, 5]); ctx.moveto(0, 200); ctx.lineto(200, 0); ctx.stroke(); result various elliptical arcs this example creates three elliptical paths with vary...
... html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.fillstyle = 'red'; ctx.beginpath(); ctx.ellipse(60, 75, 50, 30, math.pi * .25, 0, math.pi * 1.5); ctx.fill(); ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.ellipse(150, 75, 50, 30, math.pi * .25, 0, math.pi); ctx.fill(); ctx.fillstyle = 'green'; ctx.beginpath(); ctx.ellipse(240, 75, 50, 30, math.pi * .25, 0, math.pi, true); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.ellipse' in that specification.
CanvasRenderingContext2D.fill() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.rect(10, 10, 150, 100); ctx.fill(); result specifying a path and a fillrule this example saves some intersecting lines to a path2d object.
... html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // create path let region = new path2d(); region.moveto(30, 90); region.lineto(110, 20); region.lineto(240, 130); region.lineto(60, 130); region.lineto(190, 20); region.lineto(270, 90); region.closepath(); // fill path ctx.fillstyle = 'green'; ctx.fill(region, 'evenodd'); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.fill' in that specification.
CanvasRenderingContext2D.fillRect() - Web APIs
const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(20, 10, 150, 100); result filling the whole canvas this code snippet fills the entire canvas with a rectangle.
... const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.fillrect(0, 0, canvas.width, canvas.height); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.fillrect' in that specification.
CanvasRenderingContext2D.fillStyle - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); result creating multiple fill colors using loops in this example, we use two for loops to draw a grid of rectangles, each having a different fill color.
... <canvas id="canvas" width="150" height="150"></canvas> const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.fillstyle = `rgb( ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)}, 0)`; ctx.fillrect(j * 25, i * 25, 25, 25); } } the result looks like this: screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontex...
CanvasRenderingContext2D.fillText() - Web APIs
const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.font = '50px serif'; ctx.filltext('hello world', 50, 90); this code obtains a reference to the <canvas>, then
gets a reference to its 2d graphics context.
... html <canvas id="canvas" width="400" height="150"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.font = '50px serif'; ctx.filltext('hello world', 50, 90, 140); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filltext' in that specification.
CanvasRenderingContext2D.filter - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.filter = 'blur(4px)'; ctx.font = '48px serif'; ctx.filltext('hello world', 50, 100); result applying multiple filters you can combine as many filters as you like.
... html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); const image = document.
getelementbyid('source'); image.addeventlistener('load', e => { ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)'; ctx.drawimage(image, 10, 10, 180, 120); }); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filter' in that specification.
CanvasRenderingContext2D.globalAlpha - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.globalalpha = 0.5; ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); ctx.fillstyle = 'red'; ctx.fillrect(50, 50, 100, 100); result overlaying transparent shapes this example illustrates the effect of overlaying multiple transparent shapes on top of each other.
... <canvas id="canvas" width="150" height="150"></canvas> const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // draw background ctx.fillstyle = '#fd0'; ctx.fillrect(0, 0, 75, 75); ctx.fillstyle = '#6c0'; ctx.fillrect(75, 0, 75, 75); ctx.fillstyle = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw transparent circles for (...
CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
on
getting the imagesmoothingenabled property, the last value it was set to is returned.
... html <canvas id="canvas" width="460" height="210"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.font = '16px sans-serif'; ctx.textalign = 'center'; const img = new image(); img.src = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png'; img.onload = function() { const w = img.width, h = img.height; ctx.filltext('source', w * .5, 20); ctx.drawimage(img, 0, 24, w, h); ctx.filltext('smoothing =...
CanvasRenderingContext2D.isPointInPath() - Web APIs
html <canvas id="canvas"></canvas> <p>in path: <code id="result">false</code></p> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); const result = document.
getelementbyid('result'); ctx.rect(10, 10, 100, 100); ctx.fill(); result.innertext = ctx.ispointinpath(30, 70); result checking a point in the specified path whenever you move the mouse, this example checks whether the cursor is in a circular path2d path.
... html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // create circle const circle = new path2d(); circle.arc(150, 75, 50, 0, 2 * math.pi); ctx.fillstyle = 'red'; ctx.fill(circle); // listen for mouse moves canvas.addeventlistener('mousemove', function(event) { // check whether point is inside circle if (ctx.ispointinpath(circle, event.offsetx, event.offsety)) { ctx.fillstyle = 'green'; } else { ctx.fillstyle = 'red'; } // draw circle ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(circle); }); result specifications specification status comment html living standardthe definition of 'canv...
CanvasRenderingContext2D.isPointInStroke() - Web APIs
html <canvas id="canvas"></canvas> <p>in stroke: <code id="result">false</code></p> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); const result = document.
getelementbyid('result'); ctx.rect(10, 10, 100, 100); ctx.stroke(); result.innertext = ctx.ispointinstroke(50, 10); result checking a point in the specified path whenever you move the mouse, this example checks whether the cursor is in the stroke of an elliptical path2d path.
... html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // create ellipse const ellipse = new path2d(); ellipse.ellipse(150, 75, 40, 60, math.pi * .25, 0, 2 * math.pi); ctx.linewidth = 25; ctx.strokestyle = 'red'; ctx.fill(ellipse); ctx.stroke(ellipse); // listen for mouse moves canvas.addeventlistener('mousemove', function(event) { // check whether point is inside ellipse's stroke if (ctx.ispointinstroke(ellipse, event.offsetx, event.offsety)) { ctx.strokestyle = 'green'; } else { ctx.strokestyle = 'red'; } // draw ellipse ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(ellipse); ctx.stroke(ellipse); }); ...
CanvasRenderingContext2D.lineCap - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 20); ctx.linewidth = 15; ctx.linecap = 'round'; ctx.lineto(100, 100); ctx.stroke(); result comparison of line caps in this example three lines are drawn, each with a different value for the linecap property.
... <canvas id="canvas" width="150" height="150"></canvas> const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); const linecap = ['butt', 'round', 'square']; // draw guides ctx.strokestyle = '#09f'; ctx.beginpath(); ctx.moveto(10, 10); ctx.lineto(140, 10); ctx.moveto(10, 140); ctx.lineto(140, 140); ctx.stroke(); // draw lines ctx.strokestyle = 'black'; for (let i = 0; i < linecap.length; i++) { ctx.linewidth = 15; ctx.linecap = linecap[i]; c...
CanvasRenderingContext2D.lineDashOffset - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.setlinedash([4, 16]); // dashed line with no offset ctx.beginpath(); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); // dashed line with offset of 4 ctx.beginpath(); ctx.strokestyle = 'red'; ctx.linedashoffset = 4; ctx.moveto(0, 100); ctx.lineto(300, 100); ctx.stroke(); result the line with a dash offset is drawn in red.
... html <canvas id="canvas"></canvas> const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); let offset = 0; function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.setlinedash([4, 2]); ctx.linedashoffset = -offset; ctx.strokerect(10, 10, 100, 100); } function march() { offset++; if (offset > 16) { offset = 0; } draw(); settimeout(march, 20); } march(); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d...
CanvasRenderingContext2D.lineJoin - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.linewidth = 20; ctx.linejoin = 'round'; ctx.beginpath(); ctx.moveto(20, 20); ctx.lineto(190, 100); ctx.lineto(280, 20); ctx.lineto(280, 150); ctx.stroke(); result comparison of line joins the example below draws three different paths, demonstrating each of the three linejoin options.
... <canvas id="canvas" width="150" height="150"></canvas> var ctx = document.
getelementbyid('canvas').
getcontext('2d'); var linejoin = ['round', 'bevel', 'miter']; ctx.linewidth = 10; for (let i = 0; i < linejoin.length; i++) { ctx.linejoin = linejoin[i]; ctx.beginpath(); ctx.moveto(-5, 5 + i * 40); ctx.lineto(35, 45 + i * 40); ctx.lineto(75, 5 + i * 40); ctx.lineto(115, 45 + i * 40); ctx.lineto(155, 5 + i * 40); ctx.stroke(); } screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.linejoin' in that specification.
CanvasRenderingContext2D.quadraticCurveTo() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // quadratic bézier curve ctx.beginpath(); ctx.moveto(50, 20); ctx.quadraticcurveto(230, 30, 50, 100); ctx.stroke(); // start and end points ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.arc(50, 20, 5, 0, 2 * math.pi); // start point ctx.arc(50, 100, 5, 0, 2 * math.pi); // end point ctx.fill(); // control point ctx.fillstyle = 'red'...
... const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 110); ctx.quadraticcurveto(230, 150, 250, 20); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.quadraticcurveto' in that specification.
CanvasRenderingContext2D.resetTransform() - Web APIs
const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // draw a rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillrect(60, 0, 100, 30); // reset transformation matrix to the identity matrix ctx.resettransform(); result continuing with a regular matrix whenever you're done drawing transformed shapes, you should call resettransform() before rendering anything else.
... html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // skewed rectangles ctx.transform(1, 0, 1.7, 1, 0, 0); ctx.fillstyle = 'gray'; ctx.fillrect(40, 40, 50, 20); ctx.fillrect(40, 90, 50, 20); // non-skewed rectangles ctx.resettransform(); ctx.fillstyle = 'red'; ctx.fillrect(40, 40, 50, 20); ctx.fillrect(40, 90, 50, 20); result the skewed rectangles are gray, and the non-skewed rectangles are red.
CanvasRenderingContext2D.rotate() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // point of transform origin ctx.arc(0, 0, 5, 0, 2 * math.pi); ctx.fillstyle = 'blue'; ctx.fill(); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(100, 0, 80, 20); // rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillstyle = 'red'; ctx.fillrect(100, 0, 80, 20); // reset transformation matrix to the identity matri...
... const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(80, 60, 140, 30); // matrix transformation ctx.translate(150, 75); ctx.rotate(math.pi / 2); ctx.translate(-150, -75); // rotated rectangle ctx.fillstyle = 'red'; ctx.fillrect(80, 60, 140, 30); result the non-rotated rectangle is gray, and the rotated rectangle is red.
CanvasRenderingContext2D.save() - Web APIs
the drawing state the drawing state that
gets saved onto a stack consists of: the current transformation matrix.
... html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // save the default state ctx.save(); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); // restore the default state ctx.restore(); ctx.fillrect(150, 40, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.save' in that speci...
CanvasRenderingContext2D.scale() - Web APIs
const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // scaled rectangle ctx.scale(9, 3); ctx.fillstyle = 'red'; ctx.fillrect(10, 10, 8, 20); // reset current transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); // non-scaled rectangle ctx.fillstyle = 'gray'; ctx.fillrect(10, 10, 8, 20); result the scaled rectangle is red, and the non-scaled rectangle is gr...
... html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.scale(-1, 1); ctx.font = '48px serif'; ctx.filltext('hello world!', -280, 90); ctx.settransform(1, 0, 0, 1, 0, 0); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.scale' in that specification.
CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.beginpath(); ctx.fillrect(10, 10, 30, 30); ctx.scrollpathintoview(); edit the code below to see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"> <input id="button" type="range" min="1" max="12"> </canvas> <div class="playable-buttons"> <input id="edit" ...
...type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginpath(); ctx.rect(10, 10, 30, 30); ctx.scrollpathintoview();</textarea> var canvas = document.
getelementbyid("canvas"); var ctx = canvas.
getcontext("2d"); var textarea = document.
getelementbyid("code"); var reset = document.
getelementbyid("reset"); var edit = document.
getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load",...
CanvasRenderingContext2D.shadowColor - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsetx = 10; ctx.shadowoffsety = 10; // filled rectangle ctx.fillrect(20, 20, 100, 100); // stroked rectangle ctx.linewidth = 6; ctx.strokerect(170, 20, 100, 100); result shadows on translucent shapes a shadow's opacity is affected by the transparency level of its parent object (even ...
... const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // shadow ctx.shadowcolor = 'rgba(255, 0, 0, .8)'; ctx.shadowblur = 8; ctx.shadowoffsetx = 30; ctx.shadowoffsety = 20; // filled rectangle ctx.fillstyle = 'rgba(0, 255, 0, .2)'; ctx.fillrect(10, 10, 150, 100); // stroked rectangle ctx.linewidth = 10; ctx.strokestyle = 'rgba(0, 0, 255, .6)'; ctx.strokerect(10, 10, 150, 100); result specifications specification status comment html living stand...
CanvasRenderingContext2D.strokeRect() - Web APIs
const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.strokestyle = 'green'; ctx.strokerect(20, 10, 160, 100); result applying various context settings this example draws a rectangle with a drop shadow and thick, beveled outlines.
... html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.shadowcolor = '#d53'; ctx.shadowblur = 20; ctx.linejoin = 'bevel'; ctx.linewidth = 15; ctx.strokestyle = '#38f'; ctx.strokerect(30, 30, 160, 90); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.strokerect' in that specification.
CanvasRenderingContext2D.strokeStyle - Web APIs
html <canvas id="canvas"></canvas> javascript var canvas = document.
getelementbyid('canvas'); var ctx = canvas.
getcontext('2d'); ctx.strokestyle = 'blue'; ctx.strokerect(10, 10, 100, 100); result creating multiple stroke colors using loops in this example, we use two for loops and the arc() method to draw a grid of circles, each having a different stroke color.
...(the red channel has a fixed value.) <canvas id="canvas" width="150" height="150"></canvas> var ctx = document.
getelementbyid('canvas').
getcontext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.strokestyle = `rgb( 0, ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)})`; ctx.beginpath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, math.pi * 2, true); ctx.stroke(); } } the result looks like this: screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.strokestyle' in that...
CanvasRenderingContext2D.strokeText() - Web APIs
const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.font = '50px serif'; ctx.stroketext('hello world', 50, 90); this code obtains a reference to the <canvas>, then
gets a reference to its 2d graphics context.
... html <canvas id="canvas" width="400" height="150"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.font = '50px serif'; ctx.stroketext('hello world', 50, 90, 140); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.stroketext' in that specification.
CanvasRenderingContext2D.textAlign - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); canvas.width = 350; const ctx = canvas.
getcontext('2d'); const x = canvas.width / 2; ctx.beginpath(); ctx.moveto(x, 0); ctx.lineto(x, canvas.height); ctx.stroke(); ctx.font = '30px serif'; ctx.textalign = 'left'; ctx.filltext('left-aligned', x, 40); ctx.textalign = 'center'; ctx.filltext('center-aligned', x, 85); ctx.textalign = 'right'; ctx.filltext('right-aligned', x,...
... html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.font = '30px serif'; ctx.direction = 'ltr'; ctx.textalign = 'start'; ctx.filltext('start-aligned', 0, 50); ctx.textalign = 'end'; ctx.filltext('end-aligned', canvas.width, 120); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.textalign' in that specification.
A basic ray-caster - Web APIs
i know i could have started with a simpler example, but i'm sure the canvas tutorial will
get to that, and i wanted to see if i could do this.
... also, it leaves a lot to be desired in terms of trying to be any sort of game engine—there are no wall textures, no sprites, no doors, not even any teleporters to
get to another level.
Compositing and clipping - Web APIs
everything that falls outside of this path won't
get drawn on the canvas.
... function draw() { var ctx = document.
getelementbyid('canvas').
getcontext('2d'); ctx.fillrect(0, 0, 150, 150); ctx.translate(75, 75); // create a circular clipping path ctx.beginpath(); ctx.arc(0, 0, 60, 0, math.pi * 2, true); ctx.clip(); // draw background var lingrad = ctx.createlineargradient(0, -75, 0, 75); lingrad.addcolorstop(0, '#232256'); lingrad.addcolorstop(1, '#143778'); ctx.fillstyle = lingrad; ctx.
CaretPosition - Web APIs
you can
get a caretposition using the document.caretpositionfrompoint method.
... methods caretposition.
getclientrect specification specification status comment css object model (cssom) view modulethe definition of 'caretposition' in that specification.
Using channel messaging - Web APIs
simple examples to
get your started, we have published a couple of demos on github.
... var input = document.
getelementbyid('message-input'); var output = document.
getelementbyid('message-output'); var button = document.queryselector('button'); var iframe = document.queryselector('iframe'); var channel = new messagechannel(); var port1 = channel.port1; // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for button clicks button.addeventlistener('click...
CharacterData - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" tar
get="_top"><rect x="266" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text...
Client.postMessage() - Web APIs
if (!event.clientid) return; //
get the client.
... const client = await clients.
get(event.clientid); // exit early if we don't
get the client.
ClipboardItem.types - Web APIs
then checking the types property for available types before utilizing the clipboarditem.
gettype() method to return the blob object.
... async function
getclipboardcontents() { try { const clipboarditems = await navigator.clipboard.read(); for (const clipboarditem of clipboarditems) { for (const type of clipboarditem.types) { const blob = await clipboarditem.
gettype(type); // we can now use blob here } } } catch (err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eventsthe definition of 'clipboarditem' in that specification.
CompositionEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/uievent" tar
get="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/compositionevent" tar
get="_top"><rect x="231" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">compositionevent</text></a><...
console.log() - Web APIs
the string representations of each of these objects are appended to
gether in the order listed and output.
... please be warned that if you log objects in the latest versions of chrome and firefox what you
get logged on the console is a reference to the object, which is not necessarily the 'value' of the object at the moment in time you call console.log(), but it is the value of the object at the moment you open the console.
console - Web APIs
there are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations
get concatenated into one string, then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of objects to replace them.
...to stop the timer, and to
get the elapsed time in milliseconds, just call the console.timeend() method, again passing the timer's name as the parameter.
Crypto - Web APIs
crypto.
getrandomvalues() fills the passed typedarray with cryptographically sound random values.
...in addition, the crypto method
getrandomvalues() is available on insecure contexts, but the subtle property is not.
CustomElementRegistry.define() - Web APIs
note: you'll often
get notsupportederrors thrown that seem like define() is failing, but instead it is likely a problem with element.attachshadow().
...reate spans var wrapper = document.createelement('span'); wrapper.setattribute('class','wrapper'); var icon = document.createelement('span'); icon.setattribute('class','icon'); icon.setattribute('tabindex', 0); var info = document.createelement('span'); info.setattribute('class','info'); // take attribute content and put it inside the info span var text = this.
getattribute('text'); info.textcontent = text; // insert icon var imgurl; if(this.hasattribute('img')) { imgurl = this.
getattribute('img'); } else { imgurl = 'img/default.png'; } var img = document.createelement('img'); img.src = imgurl; icon.appendchild(img); // create some css to apply to the shadow dom var style = document.createelement('st...
CustomElementRegistry - Web APIs
to
get an instance of it, use the window.customelements property.
... customelementregistry.
get() returns the constuctor for the named custom element, or undefined if the custom element is not defined.
DOMHighResTimeStamp - Web APIs
reduced time precision to offer protection against timing attacks and fingerprinting, the precision of time stamps might
get rounded depending on browser settings.
... usage notes you can
get the current timestamp value—the time that has elapsed since the context was created—by calling the performance method now().
DOMImplementation - Web APIs
living standard removed the
getfeature() method.
... obsolete added the
getfeature() method (never implemented by any user agent).
DOMPoint - Web APIs
in the following snippet, the pose of the xr device (such as a vr headset or phone with ar capabilities) can be retrieved by calling using xrframe.
getviewerpose() during an xrsession animation frame, then accessing the resulting xrpose's transform property, which contains two dompointreadonly attributes: position as a vector and orientation as a quaternion.
... function onxrframe(time, xrframe) { let viewerpose = xrframe.
getviewerpose(xrreferencespace); if (viewerpose) { let position = viewerpose.transform.position; let orientation = viewerpose.transform.orientation; console.log('xr viewer position: {x: ' + roundtotwo(position.x) + ', y: ' + roundtotwo(position.y) + ', z: ' + roundtotwo(position.z)); console.log('xr viewer orientation: {x: ' + roundtotwo(orientation.x) + ', y: ' + roundtotwo(orientation.y) + ', z: ' + roundtotwo(orientation.z) + ', w: ' + roundtotwo(orientation.w)); } } specifications specification status comment ...
DOMQuad - Web APIs
returning domquads lets
getboxquads() return accurate information even when arbitrary 2d or 3d transforms are present.
... domquad.
getbounds() returns a domrect object with the coordinates and dimensions of the domquad object.
DOMRect - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/domrectreadonly" tar
get="_top"><rect x="1" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">domrectreadonly</text></a><polyline points="151,25 161,20 161,30 151,25" stroke="#d4dde4" fill="none"/><line x1="161" y1="25" x2="191" y2="25" ...
...stroke="#d4dde4"/><a xlink:href="/docs/web/api/domrect" tar
get="_top"><rect x="191" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="228.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">domrect</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor domrect() creates a new domrect object.
DOMUserData - Web APIs
it is returned or used as an argument by node.setuserdata(), node.
getuserdata(), used as the third argument to handle() on userdatahandler, and is used or returned by various domconfiguration methods.
... note that although it can be an object, in mozilla, it may be returned as a string or other type, if it was set as such a type (e.g., node.setuserdata() and node.
getuserdata()).
DataTransfer.mozItemCount - Web APIs
this can be used, for example, to
get the number of files being dragged.
... function drop_handler(event) { var files = []; var dt = event.datatransfer; for (var i = 0; i < dt.mozitemcount; i++) files.push(dt.moz
getdataat("application/x-moz-file", i)); } specifications this property is not defined in any web standard.
DataTransferItem.kind - Web APIs
function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the tar
get node data[i].
getasstring(function (s){ ev.tar
get.appendchild(document.
getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("...
... drop: html"); } else if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) { // drag data item is an image file var f = data[i].
getasfile(); console.log("...
DataTransferItem.type - Web APIs
function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the tar
get node data[i].
getasstring(function (s){ ev.tar
get.appendchild(document.
getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("...
...drop: uri"); } else if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) { // drag data item is an image file var f = data[i].
getasfile(); console.log("...
Document.createCDATASection() - Web APIs
example var docu = new domparser().parsefromstring('<xml></xml>', 'application/xml') var cdata = docu.createcdatasection('some <cdata> data & then some'); docu.
getelementsbytagname('xml')[0].appendchild(cdata); alert(new xmlserializer().serializetostring(docu)); // displays: <xml><![cdata[some <cdata> data & then some]]></xml> notes this will only work with xml, not html documents (as html documents do not support cdata sections); attempting it on an html document will throw not_supported_err.
... will throw a ns_error_dom_invalid_character_err exception if one tries to submit the closing cdata sequence ("]]>") as part of the data, so unescaped user-provided data cannot be safely used without with this method
getting this exception (createtextnode() can often be used in its place).
Document.createEvent() - Web APIs
the returned object should be first initialized and can then be passed to eventtar
get.dispatchevent.
...elem.addeventlistener('build', function (e) { // e.tar
get matches elem }, false); // tar
get can be any element or other eventtar
get.
Document.createTouchList() - Web APIs
in following code snippet, some touch objects are created for the tar
get element and those touch points are then used to create some touchlist objects.
... var tar
get = document.
getelementbyid("tar
get"); // create some touch points var touch1 = document.createtouch(window, tar
get, 1, 15, 20, 35, 40); var touch2 = document.createtouch(window, tar
get, 2, 25, 30, 45, 50); // create an empty touchlist objects var list0 = document.createtouchlist(); // create a touchlist with only one touch object var list1 = document.createtouchlist(touch1); // create a list with two touch objects var list2 = document.createtouchlist(touch1, touch2); specifications specification status comment touch eventsthe definition of 'document.createtouchlist()' in that specification.
Document.domain - Web APIs
the domain property of the document interface
gets/sets the domain portion of the origin of the current document, as used by the same origin policy.
...curityerror an attempt has been made to set domain under one of the following conditions: the document is inside a sandboxed <iframe> the document has no browsing context the document's effective domain is null the given value is not equal to the document's effective domain (or it is not a registerable domain suffix of it) the document-domain feature-policy is enabled examples
getting the domain for the uri http://developer.mozilla.org/docs/web, this example sets currentdomain to the string "developer.mozilla.org".
Document: dragover event - Web APIs
the dragover event is fired when an element or text selection is being dragged over a valid drop tar
get (every few hundred milliseconds).
... the event is fired on the drop tar
get(s).
Document.forms - Web APIs
examples
getting form information <!doctype html> <html lang="en"> <head> <title>document.forms example</title> </head> <body> <form id="robby"> <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" /> </form> <form id="dave"> <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" /> </form> <form id="paul"> <input type="button" onclick="alert(do...
...cument.forms[2].id);" value="paul's form" /> </form> </body> </html>
getting an element from within a form var selectform = document.forms[index]; var selectformelement = document.forms[index].elements[index]; named form access <!doctype html> <html lang="en"> <head> <title>document.forms example</title> </head> <body> <form name="login"> <input name="email" type="email"> <input name="password" type="password"> <button type="submit">log in</button> </form> <script> var loginform = document.forms.login; // or document.forms['login'] loginform.elements.email.placeholder = 'test@example.com'; loginform.elements.password.placeholder = 'password'; </script> </body> </html> specifications specification status comment html living standardthe def...
Document: keyup event - Web APIs
to ignore all keyup events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtar
get.addeventlistener("keyup", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples this example logs the keyboardevent.code value whenever you release a key.
...by clicking in it), then try pressing some keys.</p> <p id="log"></p> const log = document.
getelementbyid('log'); document.addeventlistener('keyup', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeyup equivalent document.onkeyup = logkey; specifications specification status ui events working draft ...
Document.onafterscriptexecute - Web APIs
the event's tar
get attribute is set to the <script> element that just finished executing.
... example function finished(e) { logmessage(`finished script with id: ${e.tar
get.id}`); } document.addeventlistener('afterscriptexecute', finished, true); view live example specification html5 ...
Document.onbeforescriptexecute - Web APIs
the event's tar
get attribute is set to the script element that is about to be executed.
... example function starting(e) { logmessage("starting script with id: " + e.tar
get.id); } document.addeventlistener("beforescriptexecute", starting, true); view live examples specification html5 ...
Document.vlinkColor - Web APIs
the document.vlinkcolor property
gets/sets the color of links that the user has visited in the document.
... the recommended alternative is to
get/set the color of the css :visited pseudo-class on html <a> elements (e.g., a:visited {color:red;}).
Document.write() - Web APIs
for example: <script> document.write("<h1>main title</h1>") </script> note: document.write() and document.writeln do not work in xhtml documents (you'll
get an "operation is not supported" [ns_error_dom_not_supported_err] error in the error console).
... note: using document.write() in deferred or asynchronous scripts will be ignored and you'll
get a message like "a call to document.write() from an asynchronously-loaded external script was ignored" in the error console.
DocumentOrShadowRoot.pointerLockElement - Web APIs
the pointerlockelement property of the document and shadowroot interfaces provides the element set as the tar
get for mouse events while the pointer is locked.
... it is null if lock is pending, pointer is unlocked, or the tar
get is in another document.
DocumentType - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" tar
get="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documenttype" tar
get="_top"><rect x="266" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">documenttype</text><...
Example - Web APIs
<html> <head> <title>my document</title> <script type="text/javascript"> function change() { // document.
getelementsbytagname("h1") returns a nodelist of the h1 // elements in the document, and the first is number 0: var header = document.
getelementsbytagname("h1").item(0); // the firstchild of the header is a text node: header.firstchild.data = "a dynamic document"; // now the header is "a dynamic document".
... var para = document.
getelementsbytagname("p").item(0); para.firstchild.data = "this is the first paragraph."; // create a new text node for the second paragraph var newtext = document.createtextnode("this is the second paragraph."); // create a new element to be the second paragraph var newelement = document.createelement("p"); // put the text in the paragraph newelement.appendchild(newtext); // and put the paragraph on the end of the document by appending it to // the body (which is the parent of para) para.parentnode.appendchild(newelement); } </script> </head> <body> <input type="button" value="change this document." onclick="change()"> <h1>header</h1> <p>paragraph</p> </body> </head> ...
Using the W3C DOM Level 1 Core - Web APIs
the following script would do the job: html content <body> <input type="button" value="change this document." onclick="change()"> <h2>header</h2> <p>paragraph</p> </body> javascript content function change() { // document.
getelementsbytagname("h2") returns a nodelist of the <h2> // elements in the document, and the first is number 0: var header = document.
getelementsbytagname("h2").item(0); // the firstchild of the header is a text node: header.firstchild.data = "a dynamic document"; // now the header is "a dynamic document".
... var para = document.
getelementsbytagname("p").item(0); para.firstchild.data = "this is the first paragraph."; // create a new text node for the second paragraph var newtext = document.createtextnode("this is the second paragraph."); // create a new element to be the second paragraph var newelement = document.createelement("p"); // put the text in the paragraph newelement.appendchild(newtext); // and put the paragraph on the end of the document by appending it to // the body (which is the parent of para) para.parentnode.appendchild(newelement); } you can see this script as a complete example.
DynamicsCompressorNode - Web APIs
the dynamicscompressornode interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed to
gether at once.
...urrenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.
getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.innerhtml = 'add compression'; sou...
EXT_blend_minmax - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... examples var ext = gl.
getextension('ext_blend_minmax'); gl.blendequation(ext.min_ext); gl.blendequation(ext.max_ext); gl.blendequationseparate(ext.min_ext, ext.max_ext); specifications specification status comment ext_blend_minmaxthe definition of 'ext_blend_minmax' in that specification.
EXT_color_buffer_float - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... var ext = gl.
getextension('ext_color_buffer_float'); gl.renderbufferstorage(gl.renderbuffer, gl.rgba16f, 256, 256); specifications specification status comment ext_color_buffer_floatthe definition of 'ext_color_buffer_float' in that specification.
EXT_color_buffer_half_float - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... examples var ext = gl.
getextension('ext_color_buffer_half_float'); gl.renderbufferstorage(gl.renderbuffer, ext.rbga16f_ext, 256, 256); specifications specification status comment ext_color_buffer_half_floatthe definition of 'ext_color_buffer_half_float' in that specification.
EXT_disjoint_timer_query.beginQueryEXT() - Web APIs
syntax void ext.beginqueryext(tar
get, query); parameters tar
get a glenum specifying the tar
get of the time query.
... examples var ext = gl.
getextension('ext_disjoint_timer_query'); var query = ext.createqueryext(); ext.beginqueryext(ext.time_elapsed_ext, query); // ...
EXT_disjoint_timer_query.endQueryEXT() - Web APIs
syntax void ext.endqueryext(tar
get); parameters tar
get a glenum specifying the tar
get of the time query.
... examples var ext = gl.
getextension('ext_disjoint_timer_query'); var query = ext.createqueryext(); ext.beginqueryext(ext.time_elapsed_ext, query); // ...
EXT_float_blend - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... examples const gl = canvas.
getcontext('webgl2'); // enable necessary extensions gl.
getextension('ext_color_buffer_float'); gl.
getextension('ext_float_blend'); const tex = gl.createtexture(); gl.bindtexture(gl.texture_2d, tex); // use floating point format gl.teximage2d(gl.texture_2d, 0, gl.rgba32f, 1, 1, 0, gl.rgba, gl.float, null); const fb = gl.createframebuffer(); gl.bindframebuffer(gl.framebuffer, fb); gl.framebufferte...
EXT_frag_depth - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... examples enable the extension: gl.
getextension('ext_frag_depth'); now the output variable gl_fragdepthext is available to set a depth value of a fragment from within the fragment shader: <script type="x-shader/x-fragment"> void main() { gl_fragcolor = vec4(1.0, 0.0, 1.0, 1.0); gl_fragdepthext = 0.5; } </script> specifications specification status comment ext_frag_depththe definition of 'ext_frag_depth' in that specification.
EXT_shader_texture_lod - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... texturecubelodext(samplercube sampler, vec3 coord, float lod) vec4 texture2dgradext(sampler2d sampler, vec2 p, vec2 dpdx, vec2 dpdy) vec4 texture2dprojgradext(sampler2d sampler, vec3 p, vec2 dpdx, vec2 dpdy) vec4 texture2dprojgradext(sampler2d sampler, vec4 p, vec2 dpdx, vec2 dpdy) vec4 texturecubegradext(samplercube sampler, vec3 p, vec3 dpdx, vec3 dpdy) examples enabling the extensions: gl.
getextension('ext_shader_texture_lod'); shader code that avoids artifacts when wrapping texture coordinates: <script type="x-shader/x-fragment"> #extension gl_ext_shader_texture_lod : enable #extension gl_oes_standard_derivatives : enable uniform sampler2d mytexture; varying vec2 texcoord; void main(){ gl_fragcolor = texture2dgradext(mytexture, mod(texcoord, vec2(0.1, 0.5)), ...
EXT_texture_compression_bptc - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... examples var ext = gl.
getextension('ext_texture_compression_bptc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgba_bptc_unorm_ext, 128, 128, 0, texturedata); specifications specification status ext_texture_compression_bptc community approved ...
EXT_texture_compression_rgtc - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... examples var ext = gl.
getextension('ext_texture_compression_rgtc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_red_rgtc1_ext, 128, 128, 0, texturedata); specifications specification status ext_texture_compression_rgtc community approved ...
EffectTiming.fill - Web APIs
the value of fill corresponds directly to fill in effecttiming objects returned by
gettiming() in animationeffect and keyframeeffect.
... document.
getelementbyid("animatebutton").addeventlistener("click", event => { document.
getelementbyid("box").animate( boxrotationkeyframes, boxrotationtiming ); }, false); the rest of the code is pretty simple: it adds an event listener to the "animate" button so that when it's clicked by the user, the box is animated by calling element.animate() on it, providing the boxrotationkeyframes and boxr...
Element: MozMousePixelScroll event - Web APIs
bubbles yes cancelable yes interface mousescrollevent
getting the distance scrolled the event's detail property indicates the scroll distance in terms of lines, with negative values indicating the scrolling movement is either toward the bottom or toward the right, and positive values indicating scrolling to the top or left.
... if the platform's native mouse wheel events indicate the scroll distance in terms of lines or pages, the value of detail is computed using that value and the line height or page width/height of the nearest ancestor scrollable element that contains the tar
get element.
Element.animate() - Web APIs
you can
get a list of the animations that affect an element by calling element.
getanimations().
... document.
getelementbyid("tunnel").animate([ // keyframes { transform: 'translatey(0px)' }, { transform: 'translatey(-300px)' } ], { // timing options duration: 1000, iterations: infinity }); implicit to/from keyframes in newer browser versions, you are able to set a beginning or end state for an animation only (i.e.
Element.attributes - Web APIs
syntax var attr = element.attributes; example basic examples //
get the first <p> element in the document var para = document.
getelementsbytagname("p")[0]; var atts = para.attributes; enumerating elements attributes numerical indexing is useful for going through all of an element's attributes.
... <!doctype html> <html> <head> <title>attributes example</title> <script type="text/javascript"> function listattributes() { var paragraph = document.
getelementbyid("paragraph"); var result = document.
getelementbyid("result"); // first, let's verify that the paragraph has some attributes if (paragraph.hasattributes()) { var attrs = paragraph.attributes; var output = ""; for(var i = attrs.length - 1; i >= 0; i--) { output += attrs[i].name + "->" + attrs[i].value; } result.value = output; } else { result.value = "no attributes to show"; } } </script> </hea...
Element: blur event - Web APIs
nt event handler property onblur sync / async sync composed yes examples simple example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const password = document.queryselector('input[type="password"]'); password.addeventlistener('focus', (event) => { event.tar
get.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.tar
get.style.background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the focusout event, or by setting the usecapture parameter of addeventlistener() to true.
... html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.
getelementbyid('form'); form.addeventlistener('focus', (event) => { event.tar
get.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.tar
get.style.background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed.
Element.clientTop - Web APIs
this is because the offsettop indicates the location of the top of the border (not the margin) while the client area starts immediately below the border, (client area includes padding.) therefore, the clienttop value will always equal the integer portion of the .
getcomputedstyle() value for "border-top-width".
...if you need a fractional value, use element.
getboundingclientrect().
Element.closest() - Web APIs
syntax var closestelement = tar
getelement.closest(selectors); parameters selectors is a domstring containing a selector list.
... example html <article> <div id="div-01">here is div-01 <div id="div-02">here is div-02 <div id="div-03">here is div-03</div> </div> </div> </article> javascript var el = document.
getelementbyid('div-03'); var r1 = el.closest("#div-02"); // returns the element with the id=div-02 var r2 = el.closest("div div"); // returns the closest ancestor which is a div in div, here it is the div-03 itself var r3 = el.closest("article > div"); // returns the closest ancestor which is a div and has a parent article, here it is the div-01 var r4 = el.closest(":not(div)"); // returns the c...
Element: contextmenu event - Web APIs
any right-click event that is not disabled (by calling the event's preventdefault() method) will result in a contextmenu event being fired at the tar
geted element.
... html <p id="nocontextmenu">the context menu has been disabled on this paragraph.</p> <p>but it has not been disabled on this one.</p> javascript nocontext = document.
getelementbyid('nocontextmenu'); nocontext.addeventlistener('contextmenu', e => { e.preventdefault(); }); result specifications specification status comment html living standardthe definition of 'contextmenu' in that specification.
Element: focus event - Web APIs
t event handler property onfocus sync / async sync composed yes examples simple example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const password = document.queryselector('input[type="password"]'); password.addeventlistener('focus', (event) => { event.tar
get.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.tar
get.style.background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the focusin event, or by setting the usecapture parameter of addeventlistener() to true.
... html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.
getelementbyid('form'); form.addeventlistener('focus', (event) => { event.tar
get.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.tar
get.style.background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed.
Element.hasAttribute() - Web APIs
example var foo = document.
getelementbyid("foo"); if (foo.hasattribute("bar")) { // do something } polyfill ;(function(prototype) { prototype.hasattribute = prototype.hasattribute || function(name) { return !!(this.attributes[name] && this.attributes[name].specified); } })(element.prototype); notes dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for ...
...dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens
getattribute (dom 1)
getattributens
getattributenode
getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status comment domthe definition of 'element.hasattribute()' in that specification.
Element.hasAttributeNS() - Web APIs
example // check that the attribute exists before you set a value var d = document.
getelementbyid("div1"); if (d.hasattributens( "http://www.mozilla.org/ns/specialspace/", "special-align")) { d.setattribute("align", "center"); } notes dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aw...
...are methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens
getattribute (dom 1)
getattributens
getattributenode
getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status comment domthe definition of 'document.hasattributens' in that specification.
Element.id - Web APIs
the id is often used with
getelementbyid() to retrieve a particular element.
... syntax var idstr = element.id; //
get the id element.id = idstr; // set the id idstr is the identifier of the element.
Element: keydown event - Web APIs
to ignore all keydown events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtar
get.addeventlistener("keydown", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keydown example this example logs the keyboardevent.code value whenever you press down a key inside the <input> element.
... <input placeholder="click here, then press down a key." size="40"> <p id="log"></p> const input = document.queryselector('input'); const log = document.
getelementbyid('log'); input.addeventlistener('keydown', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeydown equivalent input.onkeydown = logkey; specifications specification status ui events working draft ...
Element: keyup event - Web APIs
to ignore all keyup events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtar
get.addeventlistener("keyup", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keyup example this example logs the keyboardevent.code value whenever you release a key inside the <input> element.
... <input placeholder="click here, then press and release a key." size="40"> <p id="log"></p> const input = document.queryselector('input'); const log = document.
getelementbyid('log'); input.addeventlistener('keyup', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeyup equivalent input.onkeyup = logkey; specifications specification status ui events working draft ...
Element: mouseenter event - Web APIs
html <div id='mousetar
get'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </div> css styling the div to make it more visible.
... #mousetar
get { box-sizing: border-box; width:15rem; border:1px solid #333; } javascript var entereventcount = 0; var leaveeventcount = 0; const mousetar
get = document.
getelementbyid('mousetar
get'); const unorderedlist = document.
getelementbyid('unorderedlist'); mousetar
get.addeventlistener('mouseenter', e => { mousetar
get.style.border = '5px dotted orange'; entereventcount++; addlistitem('this is mouseenter event ' + entereventcount + '.'); }); mousetar
get.addeventlistener('mouseleave', e => { mousetar
get.style.border = '1px solid #333'; leaveeventcount++; addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); function addlistitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create ...
Element: mouseleave event - Web APIs
html <div id='mousetar
get'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </div> css styling the <div> to make it more visible.
... #mousetar
get { box-sizing: border-box; width:15rem; border:1px solid #333; } javascript var entereventcount = 0; var leaveeventcount = 0; const mousetar
get = document.
getelementbyid('mousetar
get'); const unorderedlist = document.
getelementbyid('unorderedlist'); mousetar
get.addeventlistener('mouseenter', e => { mousetar
get.style.border = '5px dotted orange'; entereventcount++; addlistitem('this is mouseenter event ' + entereventcount + '.'); }); mousetar
get.addeventlistener('mouseleave', e => { mousetar
get.style.border = '1px solid #333'; leaveeventcount++; addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); function addlistitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create ...
Element: mouseover event - Web APIs
html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test = document.
getelementbyid("test"); // this handler will be executed only once when the cursor // moves over the unordered list test.addeventlistener("mouseenter", function( event ) { // highlight the mouseenter tar
get event.tar
get.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.tar
get.style.color = ""; }, 500); }, false); // this handler will be exec...
...uted every time the cursor // is moved over a different list item test.addeventlistener("mouseover", function( event ) { // highlight the mouseover tar
get event.tar
get.style.color = "orange"; // reset the color after a short delay settimeout(function() { event.tar
get.style.color = ""; }, 500); }, false); result specifications specification status ui eventsthe definition of 'mouseover' in that specification.
Element: overflow event - Web APIs
les <div id="wrapper"> <div id="child"></div> </div> <br/> <label><input type="checkbox" id="toggle" checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.
getelementbyid("wrapper"), child = document.
getelementbyid("child"), toggle = document.
getelementbyid("toggle"); wrapper.addeventlistener("overflow", function( event ) { console.log( event ); }, false); wrapper.addeventlistener("underflow", function( event ) { console.log( event ); }, false); toggle.addeventlistener("change", function( event ) { if ( event.t...
...ar
get.checked ) { child.style.width = "40px"; child.style.height = "40px"; } else { child.style.width = "10px"; child.style.height = "10px"; } }, false); </script> specifications not part of any specification.
Element.releasePointerCapture() - Web APIs
syntax tar
getelement.releasepointercapture(pointerid); parameters pointerid the pointerid of a pointerevent object.
... align-items: center; justify-content: center; background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `translate(${e.clientx - 70}px)`; } const slider = document.
getelementbyid('slider'); slider.onpointerdown = beginsliding; slider.onpointerup = stopsliding; result specifications specification status comment pointer events – level 2the definition of 'releasepointercapture' in that specification.
Element.removeAttributeNS() - Web APIs
example // given: // <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace" // special:specialalign="utterleft" width="200px" /> d = document.
getelementbyid("div1"); d.removeattributens("http://www.mozilla.org/ns/specialspace", "specialalign"); // now: <div id="div1" width="200px" /> notes dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dea...
...ling with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens
getattribute (dom 1)
getattributens
getattributenode
getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status comment domthe definition of 'element: removeattributens' in that specification.
Element.removeAttributeNode() - Web APIs
example // given: <div id="top" align="center" /> var d = document.
getelementbyid("top"); var d_align = d.
getattributenode("align"); d.removeattributenode(d_align); // align is now removed: <div id="top" /> notes if the removed attribute has a default value, it is immediately replaced.
... dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens
getattribute (dom 1)
getattributens
getattributenode
getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status comment domthe definition of 'element: removeattributenode' in that specification.
Element.scrollTop - Web APIs
the element.scrolltop property
gets or sets the number of pixels that an element's content is scrolled vertically.
... syntax //
get the number of pixels scrolled.
Element.scrollWidth - Web APIs
if you need a fractional value, use element.
getboundingclientrect().
... margin-bottom: 2em; } </style> </head> <body> <div id="adiv"> foobar-foobar-foobar-foobar </div> <button id="abutton"> check for overflow </button> <div id="anotherdiv"> foobar-foobar-foobar-foobar </div> <button id="anotherbutton"> check for overflow </button> </body> <script> var buttonone = document.
getelementbyid('abutton'), buttontwo = document.
getelementbyid('anotherbutton'), divone = document.
getelementbyid('adiv'), divtwo = document.
getelementbyid('anotherdiv'); //check to determine if an overflow is happening function isoverflowing(element) { return (element.scrollwidth > element.offsetwidth); } function alertoverflow(element) { if (isoverflowi...
Element.setAttributeNS() - Web APIs
example let d = document.
getelementbyid('d1'); d.setattributens('http://www.mozilla.org/ns/specialspace', 'spec:align', 'center'); notes dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom...
... used) setattribute (dom 1) setattributens setattributenode setattributenodens
getattribute (dom 1)
getattributens
getattributenode
getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - setattributens is the only method for namespaced attributes which expects the fully qualified name, i.e.
Element.setAttributeNode() - Web APIs
html <div id="one" align="left">one</div> <div id="two">two</div> javascript let d1 = document.
getelementbyid('one'); let d2 = document.
getelementbyid('two'); let a = d1.
getattributenode('align'); d2.setattributenode(a.clonenode(true)); // returns: 'left' alert(d2.attributes[1].value); notes if the attribute named already exists on the element, that attribute is replaced with the new one and the replaced one is returned.
... dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens
getattribute (dom 1)
getattributens
getattributenode
getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status comment domthe definition of 'setattributenode()' in that specification.
Element.setAttributeNodeNS() - Web APIs
example // <div id="one" xmlns:myns="http://www.mozilla.org/ns/specialspace" // myns:special-align="utterleft">one</div> // <div id="two">two</div> var myns = "http://www.mozilla.org/ns/specialspace"; var d1 = document.
getelementbyid("one"); var d2 = document.
getelementbyid("two"); var a = d1.
getattributenodens(myns, "special-align"); d2.setattributenodens(a.clonenode(true)); alert(d2.attributes[1].value) // returns: `utterleft' notes if the specified attribute already exists on the element, then that attribute is replaced with the new one and the replaced one is returned.
... dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens
getattribute (dom 1)
getattributens
getattributenode
getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status comment domthe definition of 'document.setattributenodens' in that specification.
Element.shadowRoot - Web APIs
connectedcallback() { console.log('custom square element added to page.'); updatestyle(this); } attributechangedcallback(name, oldvalue, newvalue) { console.log('custom square element attributes changed.'); updatestyle(this); } in the updatestyle() function itself, we
get a reference to the shadow dom using element.shadowroot.
...re we use standard dom traversal techniques to find the <style> element inside the shadow dom and then update the css found inside it: function updatestyle(elem) { const shadow = elem.shadowroot; const childnodes = array.from(shadow.childnodes); childnodes.foreach(childnode => { if (childnode.nodename === 'style') { childnode.textcontent = ` div { width: ${elem.
getattribute('l')}px; height: ${elem.
getattribute('l')}px; background-color: ${elem.
getattribute('c')}; } `; } }); } specifications specification status comment domthe definition of 'shadowroot' in that specification.
Element: underflow event - Web APIs
les <div id="wrapper"> <div id="child"></div> </div> <br/> <label><input type="checkbox" id="toggle" checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.
getelementbyid("wrapper"), child = document.
getelementbyid("child"), toggle = document.
getelementbyid("toggle"); wrapper.addeventlistener("overflow", function( event ) { console.log( event ); }, false); wrapper.addeventlistener("underflow", function( event ) { console.log( event ); }, false); toggle.addeventlistener("change", function( event ) { if ( event.t...
...ar
get.checked ) { child.style.width = "40px"; child.style.height = "40px"; } else { child.style.width = "10px"; child.style.height = "10px"; } }, false); </script> specifications not part of any specification.
Element: wheel event - Web APIs
therefore, do not rely on the wheel event's delta* properties to
get the scrolling direction.
... instead, detect value changes of scrollleft and scrolltop of the tar
get in the scroll event.
ElementCSSInlineStyle - Web APIs
propertiesstylethe style property is used to
get as well as set the inline style of an element.
... when
getting, it returns a cssstyledeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline style attribute.methodsthis interface has no methods.
ErrorEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/errorevent" tar
get="_top"><rect x="116" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">errorevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from its parent event.
Event.composed - Web APIs
however, capturing only composed events are also handled at host as if they were in at_tar
get phase.
... the first definition looks like this, for example: customelements.define('open-shadow', class extends htmlelement { constructor() { super(); let pelem = document.createelement('p'); pelem.textcontent = this.
getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="i have a closed shadow root"></closed-shadow> then include a click event listener on the <html> element: document.queryselector('html').addeventlist...
Event.composedPath() - Web APIs
return value an array of eventtar
get objects representing the objects on which an event listener will be invoked.
... the first definition looks like this, for example: customelements.define('open-shadow', class extends htmlelement { constructor() { super(); let pelem = document.createelement('p'); pelem.textcontent = this.
getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="i have a closed shadow root"></closed-shadow> then include a click event listener on the <html> element: document.queryselector('html').addeventlist...
Event.defaultPrevented - Web APIs
note: you should use this instead of the non-standard, deprecated
getpreventdefault() method (see bug 691151).
... html <p><a id="link1" href="#link1">visit link 1</a></p> <p><a id="link2" href="#link2">try to visit link 2</a> (you can't)</p> <p id="log"></p> javascript function stoplink(event) { event.preventdefault(); } function logclick(event) { const log = document.
getelementbyid('log'); if (event.tar
get.tagname === 'a') { if (event.defaultprevented) { log.innertext = 'sorry, but you cannot visit this link!\n' + log.innertext; } else { log.innertext = 'visiting link...\n' + log.innertext; } } } const a = document.
getelementbyid('link2'); a.addeventlistener('click', stoplink); document.addeventlistener('click', logclick); resul...
Event.initEvent() - Web APIs
this method must be called to set the event before it is dispatched, using eventtar
get.dispatchevent().
...elem.addeventlistener('click', function (e) { // e.tar
get matches elem }, false); elem.dispatchevent(event); specifications specification status comment domthe definition of 'event.initevent()' in that specification.
Event.srcElement - Web APIs
initially implemented in internet explorer, event.srcelement is a now-standard alias (defined in the dom standard but flagged as "historical") for the event.tar
get property.
...use event.tar
get instead.
Event.timeStamp - Web APIs
example html <p> focus this iframe and press any key to
get the current timestamp for the keypress event.
... </p> <p>timestamp: <span id="time">-</span></p> javascript function
gettime(event) { var time = document.
getelementbyid("time"); time.firstchild.nodevalue = event.timestamp; } document.body.addeventlistener("keypress",
gettime); result reduced time precision to offer protection against timing attacks and fingerprinting, the precision of event.timestamp might
get rounded depending on browser settings.
Event.type - Web APIs
html <p>press any key or click the mouse to
get the event type.</p> <p id="log"></p> javascript function
geteventtype(event) { const log = document.
getelementbyid('log'); log.innertext = event.type + '\n' + log.innertext; } // keyboard events document.addeventlistener('keydown',
geteventtype, false); // first document.addeventlistener('keypress',
geteventtype, false); // second document.addeventlistener('keyup',
geteventtype, false); ...
... // third // mouse events document.addeventlistener('mousedown',
geteventtype, false); // first document.addeventlistener('mouseup',
geteventtype, false); // second document.addeventlistener('click',
geteventtype, false); // third result specifications specification status comment domthe definition of 'event.type' in that specification.
EventListener - Web APIs
the eventlistener interface represents an object that can handle an event dispatched by an eventtar
get object.
... example html <button id="btn">click here!</button> javascript const buttonelement = document.
getelementbyid('btn'); // add a handler for the 'click' event by providing a callback function.
EventSource - Web APIs
properties this interface also inherits properties from its parent, eventtar
get.
... methods this interface also inherits methods from its parent, eventtar
get.
ExtendableEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/extendableevent" tar
get="_top"><rect x="116" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface is only available when the global scope is a serviceworkerglobalscope.
FileList - Web APIs
for example, if the html includes the following file input: <input id="fileitem" type="file"> the following line of code fetches the first file in the node's file list as a file object: var file = document.
getelementbyid('fileitem').files[0]; method overview file item(index); properties attribute type description length integer a read-only value indicating the number of files in the list.
... example this example iterates over all the files selected by the user using an input element: // fileinput is an html input element: <input type="file" id="myfileinput" multiple> var fileinput = document.
getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; var file; // loop through files for (var i = 0; i < files.length; i++) { //
get item file = files.item(i); //or file = files[i]; alert(file.name); } here is a complete example.
FileReader - Web APIs
file objects may be obtained from a filelist object returned as a result of a user selecting files using the <input> element, from a drag and drop operation's datatransfer object, or from the moz
getasfile() api on an htmlcanvaselement.
... as filereader inherits from eventtar
get, all those events can also be listened for by using the addeventlistener method.
FileSystemEntry.fullPath - Web APIs
example this example shows a function which is called with a file system; it then
gets a filesystemfileentry for a file named data.json and returns its full path.
... function gotfilesystem(fs) { let path = ""; fs.root.
getfile("data.json", { create: true, exclusive: true }, function(entry) { path = fullpath; }, handleerror(error)); return path; } obviously, this is somewhat contrived, since we know that the file's full path is "/data.json", having just looked it up ourselves, but the concept holds up for scenarios in which you don't know it.
FileSystemFileEntry - Web APIs
function oninitfs(fs) { fs.root.
getfile('log.txt', {create: true}, function(fileentry) { // create a filewriter object for our filesystemfileentry (log.txt).
... var bb = new blobbuilder(); bb.append('meow'); filewriter.write(bb.
getblob('text/plain')); }, errorhandler); }, errorhandler); } window.requestfilesystem(window.temporary, 1024*1024, oninitfs, errorhandler); specifications specification status comment file and directory entries apithe definition of 'filesystemfileentry' in that specification.
File and Directory Entries API - Web APIs
getting access to a file system there are two ways to
get access to file systems defined in the current specification draft: when handling a drop event for drag and drop, you can call datatransferitem.webkit
getasentry() to
get the filesystementry for a dropped item.
...if htmlinputelement.webkitdirectory is true, the <input> element is instead a directory picker, and you
get filesystemdirectoryentry objects for each selected directory.
Using FormData Objects - Web APIs
this allows a formdata object to be quickly obtained in response to a formdata event firing, rather than needing to put it to
gether yourself.
... formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); //
get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr let request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); note: the formdata event and formdataevent object are available in chrome from version 77 (and other equivalent chromiums), and firefox 7...
FormDataEntryValue - Web APIs
this type is returned by the formdata.
get() and formdata.
getall() methods.
... the formdata.
get() method returns a single value while formdata.
getall() returns an array of formdataentryvalues.
FormDataEvent - Web APIs
this allows a formdata object to be quickly obtained in response to a formdata event firing, rather than needing to put it to
gether yourself when you wish to submit form data via a method like xmlhttprequest (see using formdata objects).
... const formelem = document.queryselector('form'); // submit handler formelem.addeventlistener('submit', (e) => { // on form submission, prevent default e.preventdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); //
get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); specifications specification status comment html living standardthe definition of 'formdataevent' in that specifi...
Frame Timing API - Web APIs
a frame rate of 60 fps (frames per second) for a 60 hz refresh rate is a common tar
get for a good responsive user experience.
... accessing frame data when a frame observer is invoked, frame performance entries can be retrieved by calling performanceobserverentrylist.
getentriesbytype() with an argument of "frame".
Gamepad.buttons - Web APIs
syntax readonly attribute gamepadbutton[] buttons; example the following code is taken from my gamepad api button demo (you can view the demo live, and find the source code on github.) note the code fork — in chrome navigator.
getgamepads needs a webkit prefix and the button values are stores as an array of double values, whereas in firefox navigator.
getgamepads doesn't need a prefix, and the button values are stored as an array of gamepadbutton objects; it is the gamepadbutton.value or gamepadbutton.pressed properties of these we need to access, depending on what type of buttons they are.
... function gameloop() { if(navigator.webkit
getgamepads) { var gp = navigator.webkit
getgamepads()[0]; if(gp.buttons[0] == 1) { b--; } else if(gp.buttons[1] == 1) { a++; } else if(gp.buttons[2] == 1) { b++; } else if(gp.buttons[3] == 1) { a--; } } else { var gp = navigator.
getgamepads()[0]; if(gp.buttons[0].value > 0 || gp.buttons[0].pressed == true) { b--; } else if(gp.buttons[1].value > 0 || gp.buttons[1].pressed == true) { a++; } else if(gp.buttons[2].value > 0 || gp.buttons[2].pressed == true) { b++; } else if(gp.buttons[3].value > 0 || gp.buttons[3].pressed == true) { a--; } } ball.style.left = a*2 + "px"; ball.style.top = b*2 + "px";...
GamepadButton - Web APIs
example the following code is taken from my gamepad api button demo (you can view the demo live, and find the source code on github.) note the code fork — in chrome navigator.
getgamepads needs a webkit prefix and the button values are stored as an array of double values, whereas in firefox navigator.
getgamepads doesn't need a prefix, and the button values are stored as an array of gamepadbutton objects; it is the gamepadbutton.value or gamepadbutton.pressed properties of these we need to access, depending on what type of buttons they are.
... function gameloop() { if(navigator.webkit
getgamepads) { var gp = navigator.webkit
getgamepads()[0]; if(gp.buttons[0] == 1) { b--; } else if(gp.buttons[1] == 1) { a++; } else if(gp.buttons[2] == 1) { b++; } else if(gp.buttons[3] == 1) { a--; } } else { var gp = navigator.
getgamepads()[0]; if(gp.buttons[0].value > 0 || gp.buttons[0].pressed == true) { b--; } else if(gp.buttons[1].value > 0 || gp.buttons[1].pressed == true) { a++; } else if(gp.buttons[2].value > 0 || gp.buttons[2].pressed == true) { b++; } else if(gp.buttons[3].value > 0 || gp.buttons[3].pressed == true) { a--; } } ball.style.left = a*2 + "px"; ball.style.top = b*2 + "px";...
GlobalEventHandlers.onauxclick - Web APIs
syntax tar
get.onauxclick = functionref; value functionref is a function name or a function expression.
...you may prefer to use the eventtar
get.addeventlistener() method instead, since it's more flexible.
GlobalEventHandlers.oncancel - Web APIs
syntax tar
get.oncancel = functionref; value functionref is a function name or a function expression.
...you may prefer to use the eventtar
get.addeventlistener() method instead, since it's more flexible.
GlobalEventHandlers.onchange - Web APIs
syntax tar
get.onchange = functionref; functionref is a function name or a function expression.
... html <input type="text" placeholder="type something here, then click outside of the field." size="50"> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.
getelementbyid('log'); input.onchange = handlechange; function handlechange(e) { log.textcontent = `the field's value is ${e.tar
get.value.length} character(s) long.`; } result specification specification status comment html living standardthe definition of 'onchange' in that specification.
GlobalEventHandlers.onclose - Web APIs
syntax tar
get.onclose = functionref; value functionref is a function name or a function expression.
...you may prefer to use the eventtar
get.addeventlistener() method instead, since it's more flexible.
GlobalEventHandlers.oncontextmenu - Web APIs
syntax tar
get.oncontextmenu = functionref; value functionref is a function name or a function expression.
...you may prefer to use the eventtar
get.addeventlistener() method instead, since it's more flexible.
GlobalEventHandlers.onformdata - Web APIs
syntax tar
get.onformdata = functionref; value functionref is a function name or a function expression.
...eference to form const formelem = document.queryselector('form'); // submit handler formelem.addeventlistener('submit', (e) => { // on form submission, prevent default e.preventdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.onformdata = (e) => { console.log('formdata fired'); //
get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }; specifications specification status comment html living standardthe definition of 'onformdata' in that specificati...
GlobalEventHandlers.ongotpointercapture - Web APIs
syntax tar
get.ongotpointercapture = functionref; value functionref is a function name or a function expression.
... example function overhandler(event) { // determine the tar
get event's gotpointercapture handler let gotcapturehandler = event.tar
get.ongotpointercapture; } function init() { let el = document.
getelementbyid('tar
get'); el.ongotpointercapture = overhandler; } specifications specification status comment pointer events – level 2the definition of 'ongotpointercapture' in that specification.
GlobalEventHandlers.oninput - Web APIs
syntax tar
get.oninput = functionref; value functionref is a function name or a function expression.
... html <input type="text" placeholder="type something here to see its length." size="50"> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.
getelementbyid('log'); input.oninput = handleinput; function handleinput(e) { log.textcontent = `the field's value is ${e.tar
get.value.length} character(s) long.`; } result specifications specification status comment html living standardthe definition of 'oninput' in that specification.
GlobalEventHandlers.oninvalid - Web APIs
syntax tar
get.oninvalid = functionref; var functionref = tar
get.oninvalid; value functionref is a function name or a function expression.
...thanks!</p> javascript const form = document.
getelementbyid('form'); const error = document.
getelementbyid('error'); const city = document.
getelementbyid('city'); const thanks = document.
getelementbyid('thanks'); city.oninvalid = invalid; form.onsubmit = submit; function invalid(event) { error.removeattribute('hidden'); } function submit(event) { form.setattribute('hidden', ''); thanks.removeattribute('hidden'); // for this example,...
GlobalEventHandlers.onkeydown - Web APIs
syntax tar
get.onkeydown = functionref; value functionref is a function name or a function expression.
... html <input> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.
getelementbyid('log'); input.onkeydown = logkey; function logkey(e) { log.textcontent += ` ${e.code}`; } result specifications specification status comment html living standardthe definition of 'onkeydown' in that specification.
GlobalEventHandlers.onkeyup - Web APIs
syntax tar
get.onkeyup = functionref; value functionref is a function name or a function expression.
... html <input> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.
getelementbyid('log'); input.onkeyup = logkey; function logkey(e) { log.textcontent += ` ${e.code}`; } result specifications specification status comment html living standardthe definition of 'onkeyup' in that specification.
GlobalEventHandlers.onload - Web APIs
syntax tar
get.onload = functionref; value functionref is the handler function to be called when the window’s load event fires.
... there are also dom events like domcontentloaded and domframecontentloaded (which can be handled using eventtar
get.addeventlistener()) which are fired after the dom for the page has been constructed, but do not wait for other resources to finish loading.
GlobalEventHandlers.onlostpointercapture - Web APIs
syntax tar
get.onlostpointercapture = functionref; value functionref is a function name or a function expression.
... example function overhandler(event) { // determine the tar
get event's lostpointercapture handler let lostcapturehandler = event.tar
get.onlostpointercapture; } function init() { let el = document.
getelementbyid('tar
get'); el.onlostpointercapture = overhandler; } specifications specification status comment pointer events – level 2the definition of 'onlostpointercapture' in that specification.
GlobalEventHandlers.onmousemove - Web APIs
syntax tar
get.onmousemove = functionref; value functionref is a function name or a function expression.
...x; } javascript const tooltip = new (function() { const node = document.createelement('div'); node.classname = 'tooltip'; node.setattribute('hidden', ''); document.body.appendchild(node); this.follow = function(event) { node.style.left = event.clientx + 20 + 'px'; node.style.top = event.clienty + 10 + 'px'; }; this.show = function(event) { node.textcontent = event.tar
get.dataset.tooltip; node.removeattribute('hidden'); }; this.hide = function() { node.setattribute('hidden', ''); }; })(); const links = document.queryselectorall('a'); links.foreach(link => { link.onmouseover = tooltip.show; link.onmousemove = tooltip.follow; link.onmouseout = tooltip.hide; }); result draggable elements we also have an example available showing the use of...
GlobalEventHandlers.onreset - Web APIs
syntax tar
get.onreset = functionref; value functionref is a function name or a function expression.
...time stamp: ${event.timestamp}`; } const form = document.
getelementbyid('form'); const log = document.
getelementbyid('log'); form.onreset = logreset; result specification specification status comment html living standardthe definition of 'onreset' in that specification.
GlobalEventHandlers.onselect - Web APIs
syntax tar
get.onselect = functionref; value functionref is a function name or a function expression.
... html <textarea>try selecting some text in this element.</textarea> <p id="log"></p> javascript function logselection(event) { const log = document.
getelementbyid('log'); const selection = event.tar
get.value.substring(event.tar
get.selectionstart, event.tar
get.selectionend); log.textcontent = `you selected: ${selection}`; } const textarea = document.queryselector('textarea'); textarea.onselect = logselection; result specification specification status comment html living standardthe definition of 'onselect' in that specification.
GlobalEventHandlers.onsubmit - Web APIs
syntax tar
get.onsubmit = functionref; value functionref is a function name or a function expression.
...thanks!</p> javascript const form = document.
getelementbyid('form'); const error = document.
getelementbyid('error'); const city = document.
getelementbyid('city'); const thanks = document.
getelementbyid('thanks'); city.oninvalid = invalid; form.onsubmit = submit; function invalid(event) { error.removeattribute('hidden'); } function submit(event) { form.setattribute('hidden', ''); thanks.removeattribute('hidden'); // for this example,...
GlobalEventHandlers.ontouchcancel - Web APIs
<html> <script> function canceltouch(ev) { // process the event } function init() { let el = document.
getelementbyid('tar
get1'); el.ontouchcancel = canceltouch; } </script> <body onload="init();"> <div id="tar
get1"> touch me ...
... </div> <div id="tar
get2" ontouchcancel="canceltouch(event)"> touch me ...
GlobalEventHandlers.ontouchmove - Web APIs
<html> <head> <script> function movetouch(ev) { // process the event } function init() { var el=document.
getelementbyid("tar
get1"); el.ontouchmove = movetouch; } </script> </head> <body onload="init();"> <div id="tar
get1"> touch me ...
... </div> <div id="tar
get2" ontouchmove="movetouch(event)"> touch me ...
GlobalEventHandlers.ontouchstart - Web APIs
<html> <script> function starttouch(ev) { // process the event } function init() { let el = document.
getelementbyid('tar
get1'); el.ontouchstart = starttouch; } </script> <body onload="init();"> <div id="tar
get1"> touch me ...
... </div> <div id="tar
get2" ontouchstart="starttouch(event)"> touch me ...
GlobalEventHandlers.ontransitioncancel - Web APIs
the transition is cancelled when: the value of the transition-property property that applies to the tar
get is changed the display property is set to "none".
... syntax var transitioncancelhandler = tar
get.ontransitioncancel; tar
get.ontransitioncancel = function value a function to be called when a transitioncancel event occurs indicating that a css transition has been cancelled on the tar
get, where the tar
get object is an html element (htmlelement), document (document), or window (window).
HTMLCanvasElement.mozFetchAsStream() - Web APIs
also uses netutil.jsm var canvas = document.
getelementbyid('canvas'); var d = canvas.width; ctx = canvas.
getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closepath(); ctx.fillstyle = 'yellow'; ctx.fill(); var netutilcallback = function() { return function(result) { if (!components.issuccesscode(result)) { alert('failed to create icon'); } else { alert('succ...
...esfully made'); } }; } var mfascallback = function(iconname) { return function(instream) { var file = fileutils.
getfile('desk', [iconname + '.ico']); var outstream = fileutils.openfileoutputstream(file); cu.import('resource://gre/modules/netutil.jsm'); netutil.asynccopy(instream, outstream, netutilcallback()); } } canvas.mozfetchasstream(mfascallback('myicon'), 'image/vnd.microsoft.icon'); specifications not part of any specification.
HTMLDialogElement.returnValue - Web APIs
the returnvalue property of the htmldialogelement interface
gets or sets the return value for the <dialog>, usually to indicate which button the user pressed to close it.
...<option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select> </label></p> <menu> <button>cancel</button> <button>confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.
getelementbyid('updatedetails'); var dialog = document.
getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if (dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } function handleuserinput(returnvalue) { if (returnvalue === 'cancel' || returnvalu...
HTMLDialogElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmldialogelement" tar
get="_top"><rect x="1" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="86" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldialogelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its...
...option>red panda</option> <option>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">cancel</button> <button type="submit">confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.
getelementbyid('updatedetails'); var cancelbutton = document.
getelementbyid('cancel'); var dialog = document.
getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal ...
HTMLElement: beforeinput event - Web APIs
in the case of contenteditable and designmode, the event tar
get is the editing host.
... html <input placeholder="enter some text" name="name"/> <p id="values"></p> javascript const input = document.queryselector('input'); const log = document.
getelementbyid('values'); input.addeventlistener('beforeinput', updatevalue); function updatevalue(e) { log.textcontent = e.tar
get.value; } result specifications specification status ui eventsthe definition of 'beforeinput event' in that specification.
HTMLElement: change event - Web APIs
> </label> <div class="result"></div> body { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; } javascript const selectelement = document.queryselector('.ice-cream'); selectelement.addeventlistener('change', (event) => { const result = document.queryselector('.result'); result.textcontent = `you like ${event.tar
get.value}`; }); result text input element for some elements, including <input type="text">, the change event doesn't fire until the control loses focus.
... html <input placeholder="enter some text" name="name"/> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.
getelementbyid('log'); input.addeventlistener('change', updatevalue); function updatevalue(e) { log.textcontent = e.tar
get.value; } result specifications specification status html living standardthe definition of 'change' in that specification.
HTMLElement.dir - Web APIs
the htmlelement.dir property
gets or sets the text writing directionality of the content of the current element.
... example var parg = document.
getelementbyid("para1"); parg.dir = "rtl"; // change the text direction on a paragraph identified as "para1" specifications specification status comment html living standardthe definition of 'dir' in that specification.
HTMLElement.hidden - Web APIs
javascript document.
getelementbyid("okbutton") .addeventlistener("click", function() { document.
getelementbyid("welcome").hidden = true; document.
getelementbyid("awesome").hidden = false; }, false); this code sets up a handler for the welcome panel's "ok" button that hides the welcome panel and makes the follow-up panel—with the curious name "awesome"—visible in its place.
...now
get out there and do awesome things awesomely to make the world more awesome!</p> </div> css the content is styled using the css below.
HTMLElement.innerText - Web APIs
as a
getter, it approximates the text the user would
get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.
...e; }</style> <span id=text>take a look at<br>how this text<br>is interpreted below.</span> <span style="display:none">hidden text</span> </p> <h3>result of textcontent:</h3> <textarea id="textcontentoutput" rows="6" cols="30" readonly>...</textarea> <h3>result of innertext:</h3> <textarea id="innertextoutput" rows="6" cols="30" readonly>...</textarea> javascript const source = document.
getelementbyid("source"); const textcontentoutput = document.
getelementbyid("textcontentoutput"); const innertextoutput = document.
getelementbyid("innertextoutput"); textcontentoutput.value = source.textcontent; innertextoutput.value = source.innertext; result specification specification status comment html living standardthe definition of 'innertext' in that specifi...
HTMLElement: input event - Web APIs
in the case of contenteditable and designmode, the event tar
get is the editing host.
... html <input placeholder="enter some text" name="name"/> <p id="values"></p> javascript const input = document.queryselector('input'); const log = document.
getelementbyid('values'); input.addeventlistener('input', updatevalue); function updatevalue(e) { log.textcontent = e.tar
get.value; } result specifications specification status html living standardthe definition of 'input event' in that specification.
HTMLElement.lang - Web APIs
the htmlelement.lang property
gets or sets the base language of an element's attribute values and text content.
... syntax var languageused = elementnodereference.lang; //
get the value of lang elementnodereference.lang = newlanguage; // set new value for lang languageused is a string variable that
gets the language in which the text of the current element is written.
HTMLElement.oncopy - Web APIs
syntax tar
get.oncopy = functionref; value functionref is a function name or a function expression.
... html <h3>play with this text area:</h3> <textarea id="editor" rows="3">try copying and pasting text into this field!</textarea> <h3>log:</h3> <p id="log"></p> javascript const log = document.
getelementbyid('log'); function logcopy(event) { log.innertext = 'copy blocked!\n' + log.innertext; event.preventdefault(); } function logpaste(event) { log.innertext = 'paste blocked!\n' + log.innertext; event.preventdefault(); } const editor = document.
getelementbyid('editor'); editor.oncopy = logcopy; editor.onpaste = logpaste; result specification whatwg standard ...
HTMLElement.oncut - Web APIs
syntax tar
get.oncut = functionref; value functionref is a function name or a function expression.
... html <h3>play with this text area:</h3> <textarea id="editor" rows="3">try copying and cutting the text in this field!</textarea> <h3>log:</h3> <p id="log"></p> javascript function logcopy(event) { log.innertext = 'copied!\n' + log.innertext; } function preventcut(event) { event.preventdefault(); log.innertext = 'cut blocked!\n' + log.innertext; } const editor = document.
getelementbyid('editor'); const log = document.
getelementbyid('log'); editor.oncopy = logcopy; editor.oncut = preventcut; result specification whatwg standard ...
HTMLFormControlsCollection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlcollection" tar
get="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,25 151,20 151,30 141,25" stroke="#d4dde4" fill="none"/><line x1="151" y1="25" x2="181" y2="25" s...
...troke="#d4dde4"/><a xlink:href="/docs/web/api/htmlformcontrolscollection" tar
get="_top"><rect x="181" y="1" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlformcontrolscollection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of its parent, htmlcollection.
HTMLFormElement.length - Web APIs
the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to
get at the elements most important when processing forms.
... example if (document.
getelementbyid('form1').length > 1) { // more than one form control here } specifications specification status comment html living standardthe definition of 'htmlformelement: length' in that specification.
HTMLFormElement.method - Web APIs
unless explicitly specified, the default method is '
get'.
... syntax var string = form.method; form.method = string; example document.forms['myform'].method = 'post'; const formelement = document.createelement("form"); // create a form document.body.appendchild(formelement); console.log(formelement.method); // '
get' specifications specification status comment html living standardthe definition of 'htmlformelement: method' in that specification.
HTMLFormElement: reset event - Web APIs
bubbles yes (although specified as a simple event that doesn't bubble) cancelable yes interface event event handler property globaleventhandlers.onreset examples this example uses eventtar
get.addeventlistener() to listen for form resets, and logs the current event.timestamp whenever that occurs.
...time stamp: ${event.timestamp}`; } const form = document.
getelementbyid('form'); const log = document.
getelementbyid('log'); form.addeventlistener('reset', logreset); result specifications specification status comment html living standardthe definition of 'reset' in that specification.
HTMLFormElement: submit event - Web APIs
examples this example uses eventtar
get.addeventlistener() to listen for form submit, and logs the current event.timestamp whenever that occurs, then prevents the default action of submitting the form.
...time stamp: ${event.timestamp}`; event.preventdefault(); } const form = document.
getelementbyid('form'); const log = document.
getelementbyid('log'); form.addeventlistener('submit', logsubmit); result specifications specification status comment html living standardthe definition of 'submit' in that specification.
HTMLImageElement.loading - Web APIs
example the addima
getolist() function shown below adds a photo thumbnail to a list of items, using lazy-loading to avoid loading the image from the network until it's actually needed.
... function addima
getolist(url) { const list = document.queryselector("div.photo-list"); let newitem = document.createelement("div"); newitem.classname = "photo-item"; let newimg = document.createelement("img"); newimg.loading = "lazy"; newimg.width = 320; newimg.height = 240; newimg.src = url; newitem.appendchild(newimg); list.appendchild(newitem); } specifications specification status comment html living standardthe definition of 'htmlimageelement.loading' in that specification.
HTMLMediaElement.audioTracks - Web APIs
the list of tracks can be accessed using array notation, or using the object's
gettrackbyid() method.
... var video = document.
getelementbyid("video"); for (var i = 0; i < video.audiotracks.length; i += 1) { video.audiotracks[i].enabled = false; } specifications specification status comment html living standardthe definition of 'htmlmediaelement.audiotracks' in that specification.
HTMLMediaElement.srcObject - Web APIs
const mediastream = await navigator.mediadevices.
getusermedia({video: true}); const video = document.createelement('video'); video.srcobject = mediastream; in this example, a new mediasource is assigned to a newly-created <video> element.
... const mediastream = await navigator.mediadevices.
getusermedia({video: true}); const video = document.createelement('video'); if ('srcobject' in video) { video.srcobject = mediastream; } else { // avoid using this in new browsers, as it is going away.
HTMLMediaElement.textTracks - Web APIs
the list of tracks can be accessed using array notation, or using the object's
gettrackbyid() method.
... methods
gettrackbyid() the
gettrackbyid(id) method returns the first texttrack in the texttracklist object that matches the id, or null if there is no match.
HTMLOptionsCollection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlcollection" tar
get="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,25 151,20 151,30 141,25" stroke="#d4dde4" fill="none"/><line x1="151" y1="25" x2="181" y2="25" s...
...troke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptionscollection" tar
get="_top"><rect x="181" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="286" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloptionscollection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties name type description length unsigned long as optionally allowed by the spec, this property isn't read-only.
HTMLElement.focus() - Web APIs
examples focus on a text field javascript focusmethod = function
getfocus() { document.
getelementbyid("mytextfield").focus(); } html <input type="text" id="mytextfield" value="text field."> <p></p> <button type="button" onclick="focusmethod()">click me to focus on the text field!</button> result focus on a button javascript focusmethod = function
getfocus() { document.
getelementbyid("mybutton").focus(); } html <button type="butt...
...on" id="mybutton">click me!</button> <p></p> <button type="button" onclick="focusmethod()">click me to focus on the button!</button> result focus with focusoption javascript focusscrollmethod = function
getfocus() { document.
getelementbyid("mybutton").focus({preventscroll:false}); } focusnoscrollmethod = function
getfocuswithoutscrolling() { document.
getelementbyid("mybutton").focus({preventscroll:true}); } html <button type="button" onclick="focusscrollmethod()">click me to focus on the button!</button> <button type="button" onclick="focusnoscrollmethod()">click me to focus on the button without scrolling!</button> <div id="container" style="height: 1000px; width: 1000px;"> <button type="button" id="mybutton" style="margin-top: 500px;">click me!</button> ...
HTMLSelectElement.add() - Web APIs
append to an existing collection var sel = document.
getelementbyid("existinglist"); var opt = document.createelement("option"); opt.value = "3"; opt.text = "option: value 3"; sel.add(opt, null); /* takes the existing following select object: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> and changes it to: <select id="existinglist"> <option value="1...
... inserting to an existing collection var sel = document.
getelementbyid("existinglist"); var opt = document.createelement("option"); opt.value = "3"; opt.text = "option: value 3"; sel.add(opt, sel.options[1]); /* takes the existing following select object: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> and changes it to: <select id="existinglist"> <option value="1">option: value 1</option> <option value="3">option: value 3</option> <option value="2">option: val...
HTMLSelectElement.form - Web APIs
syntax edit aform = aselectelement.form.selectname; example html <form action="http://www.google.com/search" method="
get"> <label>google: <input type="search" name="q"></label> <input type="submit" value="search..."> </form> javascript a property available on all form elements, "type" returns the type of the calling form element.
...the below code gives all select elements in a particular form a css class of "selectclass": <script type="text/javascript"> var form_element = document.
getelementbyid('subscribe_form'); var vist = form_element.style; if (vist.display=='' || vist.display=='none') { vist.display = 'block'; } else { vist.display = 'none'; } </script> specifications specification status comment html living standardthe definition of 'form' in that specification.
HTMLTableElement.insertRow() - Web APIs
to insert the row into a specific <tbody>: let specific_tbody = document.
getelementbyid(tbody_id); let row = specific_tbody.insertrow(index) note: insertrow() inserts the row directly into the table.
... html <table id="my-table"> <tr><td>row 1</td></tr> <tr><td>row 2</td></tr> <tr><td>row 3</td></tr> </table> javascript function addrow(tableid) { //
get a reference to the table let tableref = document.
getelementbyid(tableid); // insert a row at the end of the table let newrow = tableref.insertrow(-1); // insert a cell in the row at index 0 let newcell = newrow.insertcell(0); // append a text node to the cell let newtext = document.createtextnode('new bottom row'); newcell.appendchild(newtext); } // call addrow() with the tabl...
HTMLVideoElement.msHorizontalMirror - Web APIs
mshorizontalmirror is a read/write property which
gets or sets whether a video element is flipped horizontally in the display.
... example var myvideo = document.
getelementbyid("videotag1"); myvideo.mshorizontalmirror = true; myvideo.play(); example #2: var flip = document.queryselector('#flip'); flip.addeventlistener('click', function() { video.mshorizontalmirror = true; }); see also htmlvideoelement microsoft api extensions ...
HashChangeEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/hashchangeevent" tar
get="_top"><rect x="116" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">hashchangeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits the properties of its parent, event.
Headers() - Web APIs
example creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could add a header to this using headers.append: myheaders.append('content-type', 'image/jpeg'); myheaders.
get('content-type'); // returns 'image/jpeg' or you can add the headers you want as the headers object is created.
...some headers by passing the constructor an init object as an argument: var httpheaders = { 'content-type' : 'image/jpeg', 'accept-charset' : 'utf-8', 'x-my-custom-header' : 'zeke are cool' }; var myheaders = new headers(httpheaders); you can now create another headers object, passing it the first headers object as its init object: var secondheadersobj = new headers(myheaders); secondheadersobj.
get('content-type'); // would return 'image/jpeg' — it inherits it from the first headers object specifications specification status comment fetchthe definition of 'headers()' in that specification.
Headers.append() - Web APIs
example creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could add a header to this using append(): myheaders.append('content-type', 'image/jpeg'); myheaders.
get('content-type'); // returns 'image/jpeg' if the specified header already exists, append() will change its value to the specified value.
... if the specified header already exists and accepts multiple values, append() will append the new value to the end of the value set: myheaders.append('accept-encoding', 'deflate'); myheaders.append('accept-encoding', 'gzip'); myheaders.
get('accept-encoding'); // returns 'deflate, gzip' to overwrite the old value with a new one, use headers.set.
IDBCursor.update() - Web APIs
in such a situation, you would have to delete the record alto
gether and then add a new one using idbobjectstore.add.
...for a complete working example, see our idbcursor example (view example live.) function updateresult() { list.innerhtml = ''; const transaction = db.transaction(['rushalbumlist'], 'readwrite'); const objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { const cursor = event.tar
get.result; if (cursor) { if (cursor.value.albumtitle === 'a farewell to kings') { const updatedata = cursor.value; updatedata.year = 2050; const request = cursor.update(updatedata); request.onsuccess = function() { console.log('a better album year?'); }; }; const listitem = document.createelement('li'); listitem.innerhtm...
IDBCursor - Web APIs
you always
get the same idbcursor object representing a given cursor.
...for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; } specifications specification status comment indexed database api 2.0the definition of '...
IDBDatabase: abort event - Web APIs
// open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.tar
get.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore...
... read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.tar
get.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore...
IDBDatabase: close event - Web APIs
bubbles no cancelable no interface event event handler property onerror examples this example opens a database and listens for the close event: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.tar
get.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore...
... dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.addeventlistener('close', () => { console.log('database connection closed'); }); }; the same example, using the onclose property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.tar
get.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore...
IDBDatabase: error event - Web APIs
event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.tar
get.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore...
...ansaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.tar
get.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore...
IDBIndex.count() - Web APIs
example in the following example we open a transaction and an object store, then
get the index lname from a simple contacts database.
... tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var countrequest = myindex.count(); countrequest.onsuccess = function() { console.log(countrequest.result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.compan...
IDBIndex.isAutoLocale - Web APIs
example in the following example we open a transaction and an object store, then
get the index lname from a simple contacts database.
... function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.isautolocale); myindex.opencursor().onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.compan...
IDBIndex.keyPath - Web APIs
example in the following example we open a transaction and an object store, then
get the index lname from a simple contacts database.
...r idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.keypath); myindex.opencursor().onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.compan...
IDBIndex.locale - Web APIs
example in the following example we open a transaction and an object store, then
get the index lname from a simple contacts database.
... function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.locale); myindex.opencursor().onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.compan...
IDBIndex.multiEntry - Web APIs
example in the following example we open a transaction and an object store, then
get the index lname from a simple contacts database.
...dbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.multientry); myindex.opencursor().onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.compan...
IDBIndex.name - Web APIs
example in the following example we open a transaction and an object store, then
get the index lname from a simple contacts database.
... function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.name); myindex.opencursor().onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.compan...
IDBIndex.objectStore - Web APIs
example in the following example we open a transaction and an object store, then
get the index lname from a simple contacts database.
...bindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.objectstore); myindex.opencursor().onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.compan...
IDBIndex.openCursor() - Web APIs
example in the following example we open a transaction and an object store, then
get the index lname from a simple contacts database.
...complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.compan...
IDBIndex.openKeyCursor() - Web APIs
example in the following example we open a transaction and an object store, then
get the index lname from a simple contacts database.
... function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.openkeycursor().onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.key + '</td>' + '<td>' + cursor.primarykey + '</td>'; tableentry.appendchild(tablerow); cursor.continue(); } else { console.log('all last names displayed.'); } }; }; specification specification status ...
IDBIndex.unique - Web APIs
example in the following example we open a transaction and an object store, then
get the index lname from a simple contacts database.
...ur idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.unique); myindex.opencursor().onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.compan...
IDBObjectStore.index() - Web APIs
example in the following example we open a transaction and an object store, then
get the index lname from a simple contacts database.
... complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.compan...
IDBObjectStore.put() - Web APIs
example the following example requests a given record title; when that request is successful the onsuccess function
gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then puts the updated record back into the object store in another request with put().
... for a full working example, see our to-do notifications app (view example live.) const title = "walk dog"; // open up a transaction as usual const objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); //
get the to-do list object that has this title as it's title const objectstoretitlerequest = objectstore.
get(title); objectstoretitlerequest.onsuccess = () => { // grab the data object returned as the result const data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item back into the database const updatetitlerequest = objectstore.put(data); // log the transaction that originated this request console.log("the transaction that originated thi...
IDBOpenDBRequest: blocked event - Web APIs
bubbles no cancelable no interface idbversionchangeevent event handler property onblocked examples using addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.tar
get.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); ...
...gher revision version const req2 = indexeddb.open('todolist', 5); // in this case the onblocked handler will be executed req2.addeventlistener('blocked', () => { console.log('request was blocked'); }); }; using the onblocked property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.tar
get.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); ...
IDBOpenDBRequest: upgradeneeded event - Web APIs
// open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.addeventlistener('upgradeneeded', event => { const db = event.tar
get.result; console.log(`upgrading to version ${db.version}`); // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createin...
... // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.tar
get.result; console.log(`upgrading to version ${db.version}`); // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex(...
IDBRequest: error event - Web APIs
er property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.addeventlistener('upgradeneeded', event => { const db = event.tar
get.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); ...
...jectstorerequest = objectstore.add(newitem); objectstorerequest.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); }); the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.tar
get.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); ...
IDBRequest.onerror - Web APIs
}; example the following example requests a given record title, onsuccess
gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then puts the updated record back into the object store.
...for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); //
get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.
get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item back // into the database var updatetitlerequest = objectstore.put(data); ...
IDBRequest.onsuccess - Web APIs
}; example the following example requests a given record title, onsuccess
gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then puts the updated record back into the object store.
... for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); //
get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.
get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item back // into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // function again to update the display u...
IDBRequest.readyState - Web APIs
example the following example requests a given record title, onsuccess
gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then puts the updated record back into the object store in another request.
...for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); //
get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.
get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item // back into the database var updatetitlerequest = objectstore.put(data); // log the source of this reques...
IDBRequest.result - Web APIs
syntax var myresult = request.result; value any example the following example requests a given record title, onsuccess
gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then puts the updated record back into the object store.
... for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); //
get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.
get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item // back into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // function again to update the display u...
IDBRequest.source - Web APIs
example the following example requests a given record title, onsuccess
gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then puts the updated record back into the object store in another request.
...for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); //
get the to-do list object that has this title as its title var objectstoretitlerequest = objectstore.
get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item // back into the database var updatetitlerequest = objectstore.put(data); // log the source of this request c...
IDBRequest: success event - Web APIs
bubbles no cancelable no interface event event handler property onsuccess examples this example tries to open a database and listens for the success event using addeventlistener(): // open the database const openrequest = window.indexeddb.open('todolist', 4); openrequest.onupgradeneeded = (event) => { const db = event.tar
get.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); ...
...ue: false }); objectstore.createindex('year', 'year', { unique: false }); }; openrequest.addeventlistener('success', (event) => { console.log('database opened successfully!'); }); the same example, but using the onsuccess event handler property: // open the database const openrequest = window.indexeddb.open('todolist', 4); openrequest.onupgradeneeded = (event) => { const db = event.tar
get.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); ...
IDBRequest.transaction - Web APIs
example the following example requests a given record title, onsuccess
gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then puts the updated record back into the object store in another request.
...for a full working example, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); //
get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.
get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item back // into the database var updatetitlerequest = objectstore.put(data...
IDBTransaction: abort event - Web APIs
// open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.tar
get.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); ...
...a listener for `abort` transaction.addeventlistener('abort', () => { console.log('transaction was aborted'); }); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.tar
get.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); ...
IDBTransaction: complete event - Web APIs
bubbles no cancelable no interface event event handler property oncomplete examples using addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.tar
get.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectst...
...t objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2019 }; const objectstorerequest = objectstore.add(newitem); }; using the oncomplete property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.tar
get.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); ...
IDBTransaction: error event - Web APIs
event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.tar
get.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore...
...st'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.tar
get.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore...
ImageCapture() constructor - Web APIs
example the following example shows how to use a call to mediadevices.
getusermedia() to retrieve the mediastreamtrack needed by the imagecapture() constructor.
... navigator.mediadevices.
getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream const track = mediastream.
getvideotracks()[0]; imagecapture = new imagecapture(track); }) .catch(error => console.log(error)); specifications specification status comment mediastream image capturethe definition of 'imagecapture' in that specification.
ImageData.data - Web APIs
syntax imagedata.data examples
getting an imagedata object's pixel data this example creates an imagedata object that is 100 pixels wide and 100 pixels tall, making 10,000 pixels in all.
... const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); const imagedata = ctx.createimagedata(100, 100); // iterate through every pixel for (let i = 0; i < imagedata.data.length; i += 4) { // percentage in the x direction, times 255 let x = (i % 400) / 400 * 255; // percentage in the y direction, times 255 let y = math.ceil(i / 400) / 100 * 255; // modify pixel data imagedata.dat...
IndexedDB API - Web APIs
interfaces to
get access to a database, call open() on the indexeddb attribute of a window object.
...it's the only way to
get a transaction on the database.
InputEvent.dataTransfer - Web APIs
examples in the following simple example we've set up an event listener on the input event so that when any content is pasted into the contenteditable <p> element, its html source is retrieved via the inputevent.datatransfer.
getdata() method and reported in the paragraph below the input.
...!</span></p> <p>boring normal text ;-(</p> <hr> <p contenteditable="true">go on, try pasting some content into this editable paragraph and see what happens!</p> <p class="result"></p> var editable = document.queryselector('p[contenteditable]'); var result = document.queryselector('.result') var datatransferobj; editable.addeventlistener('input', (e) => { result.textcontent = e.datatransfer.
getdata('text/html'); }); specifications specification status comment input events level 2the definition of 'datatransfer' in that specification.
InstallEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/extendableevent" tar
get="_top"><rect x="116" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,25 276,20 276,30 266,25" stroke="#d4dde4" fill="none"/><line x1="276" y1="25" x2="306" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/installevent" tar
get="_top"><rect x="306" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="366" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">installevent</tex...
IntersectionObserver.takeRecords() - Web APIs
the intersectionobserver method takerecords() returns an array of intersectionobserverentry objects, one for each tar
geted element which has experienced an intersection change since the last time the intersections were checked, either explicitly through a call to this method or implicitly by an automatic call to the observer's callback.
... return value an array of intersectionobserverentry objects, one for each tar
get element whose intersection with the root has changed since the last time the intersections were checked.
LocalMediaStream - Web APIs
the localmediastream interface was part of the media capture and streams api, representing a stream of data being generated locally (such as by
getusermedia().
... however,
getusermedia() now returns a mediastream instead, and this interface has been removed from the specification.
MSCandidateWindowShow - Web APIs
you can obtain the positioning information using the
getcandidatewindowclientrect method, and adjust your layout as needed to avoid any occlusions with the ime candidate window.
... example in ie11, developers can detect the opening of the ime candidate window by listening to mscandidatewindowshow event, then call
getcandidatewindowclientrect() function to find out where the candidate window is and position the suggestion ui away from it: var context = document.
getelementbyid("mysearchbox").ms
getinputcontext(); context.addeventlistener("mscandidatewindowshow", candidatewindowshowhandler); function candidatewindowshowhandler(e) { var imerect = context.
getcandidatewindowclientrect(); var suggestionrect = document.
getelementbyid("mysuggestionlist").
getboundingclientrect(); // check if the two rects intersect, and position them a...
MediaKeySession.onkeystatuseschange - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" tar
get="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax mediakeysession.onkeystatuseschange = function(keystatuschange) { ...
MediaKeySession.onmessage - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" tar
get="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax mediakeysession.onmessage = function(mediakeymessageevent) { ...
MediaQueryList.addListener() - Web APIs
this is basically an alias for eventtar
get.addeventlistener(), for backwards compatibility purposes.
... older browsers should use addlistener instead of addeventlistener since mediaquerylist only inherits from eventtar
get in newer browsers.
MediaQueryList - Web APIs
properties the mediaquerylist interface inherits properties from its parent interface, eventtar
get.
... methods the mediaquerylist interface inherits methods from its parent interface, eventtar
get.
MediaRecorder() - Web APIs
this source media can come from a stream created using navigator.mediadevices.
getusermedia() or from an <audio>, <video> or <canvas> element.
...if (navigator.mediadevices.
getusermedia) { var constraints = { audio: true, video: true }; var chunks = []; var onsuccess = function(stream) { var options = { audiobitspersecond : 128000, videobitspersecond : 2500000, mimetype : 'video/mp4' } var mediarecorder = new mediarecorder(stream,options); m = mediarecorder; ...
MediaRecorder - Web APIs
example if (navigator.mediadevices) { console.log('
getusermedia supported.'); var constraints = { audio: true }; var chunks = []; navigator.mediadevices.
getusermedia(constraints) .then(function(stream) { var mediarecorder = new mediarecorder(stream); visualize(stream); record.onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); console.log("recorder started"); record.style.ba...
...l); clipcontainer.appendchild(deletebutton); soundclips.appendchild(clipcontainer); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); chunks = []; var audiourl = url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); deletebutton.onclick = function(e) { evttgt = e.tar
get; evttgt.parentnode.parentnode.removechild(evttgt.parentnode); } } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } }) .catch(function(err) { console.log('the following error occurred: ' + err); }) } this code sample is inspired by the web dictaphone demo.
MediaSettingsRange - Web APIs
example the following example, extracted from chrome's image capture / photo resolution sample, uses the results from
getphotocapabilities().imagewidth to modify the size of an input range.
... const input = document.queryselector('input[type="range"]'); var imagecapture; navigator.mediadevices.
getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.
getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.
getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.track.
getsettings(); input.min = photocapabilities.imagewidth.min; input.max = photocapabilities.imagewidth.max; input.step = photocapabilities.imagewidth.step; return imagecapture.
getphotosettings(); }) .then(photosettings => { input.value = photosettings.imagewidth; }) .catch(error => console.log('argh!', error.name || error)); specifications specificatio...
active - Web APIs
example in this example, a new stream whose source is the user's local camera and microphone is requested using
getusermedia().
... var promise = navigator.mediadevices.
getusermedia({ audio: true, video: true }); promise.then(function(stream) { var startbtn = document.queryselector('#startbtn'); startbtn.disabled = stream.active; };) specifications specification status comment media capture and streamsthe definition of 'active' in that specification.
MediaStreamAudioDestinationNode - Web APIs
the mediastreamaudiodestinationnode interface represents an audio destination consisting of a webrtc mediastream with a single audiomediastreamtrack, which can be used in a similar way to a mediastream obtained from navigator.
getusermedia.
...you can use this property to
get a stream out of the audio graph and feed it into another construct, such as a media recorder.
MediaStreamAudioSourceNode() - Web APIs
examples this example uses
getusermedia() to obtain access to the user's camera, then creates a new mediastreamaudiosourcenode from its mediastream.
... // define variables var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); //
getusermedia block - grab stream // put it into a mediastreamaudiosourcenode if (navigator.mediadevices.
getusermedia) { navigator.mediadevices.
getusermedia ( // constraints: audio and video for this app { audio: true, video: false }).then(function(stream) { var options = { mediastream : stream } var source = new mediastreamaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('new
getusermedia not supported on your browser!'); } specifications specification ...
MediaStreamTrack: mute event - Web APIs
musictrack.addeventlistener("mute", event => { document.
getelementbyid("timeline-wid
get").style.backgroundcolor = "#aaa"; }, false); musictrack.addeventlistener("unmute", event => { document.
getelementbyid("timeline-wid
get").style.backgroundcolor = "#fff"; }, false); with these event handlers in place, when the track musictrack enters its muted state, the element with the id timeline-wid
get gets its background color changed to #aaa.
...the following example shows this: musictrack.onmute = event => { document.
getelementbyid("timeline-wid
get").style.backgroundcolor = "#aaa"; } musictrack.mute = event = > { document.
getelementbyid("timeline-wid
get").style.backgroundcolor = "#fff"; } specifications specification status comment media capture and streamsthe definition of 'mute' in that specification.
MediaStreamTrack.stop() - Web APIs
function stopstreamedvideo(videoelem) { const stream = videoelem.srcobject; const tracks = stream.
gettracks(); tracks.foreach(function(track) { track.stop(); }); videoelem.srcobject = null; } this works by obtaining the video element's stream from its srcobject property.
... then the stream's track list is obtained by calling its
gettracks() method.
MediaStreamTrack: unmute event - Web APIs
musictrack.addeventlistener("mute", event => { document.
getelementbyid("timeline-wid
get").style.backgroundcolor = "#aaa"; }, false); musictrack.addeventlistener("unmute", event => { document.
getelementbyid("timeline-wid
get").style.backgroundcolor = "#fff"; }, false); with these event handlers in place, when the track musictrack enters its muted state, the element with the id timeline-wid
get gets its background color changed to #aaa.
...the following example shows this: musictrack.onmute = event => { document.
getelementbyid("timeline-wid
get").style.backgroundcolor = "#aaa"; } musictrack.mute = event = > { document.
getelementbyid("timeline-wid
get").style.backgroundcolor = "#fff"; } specifications specification status comment media capture and streamsthe definition of 'unmute' in that specification.
MediaStreamTrackAudioSourceNode() - Web APIs
example this example uses
getusermedia() to obtain access to the user's camera, then creates a new mediastreamaudiosourcenode from the first audio track provided by the device.
... let audioctx = new (window.audiocontext || window.webkitaudiocontext)(); if (navigator.mediadevices.
getusermedia) { navigator.mediadevices.
getusermedia ( { audio: true, video: false }).then(function(stream) { let options = { mediastreamtrack: stream.
getaudiotracks()[0]; } let source = new mediastreamtrackaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('new
getusermedia not supported on your browser!'); } specifications specification status comment web audio apithe definition of 'mediastreamtrackaudiosourcenode()' in that specification.
MediaStreamTrackAudioSourceOptions.mediaStreamTrack - Web APIs
example this example uses
getusermedia() to obtain access to the user's camera, then creates a new mediastreamaudiosourcenode from the first audio track provided by the device.
... let audioctx = new (window.audiocontext || window.webkitaudiocontext)(); if (navigator.mediadevices.
getusermedia) { navigator.mediadevices.
getusermedia ( { audio: true, video: false }).then(function(stream) { let options = { mediastreamtrack: stream.
getaudiotracks()[0]; } let source = new mediastreamtrackaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('new
getusermedia not supported on your browser!'); } specifications specification status comment web audio apithe definition of 'mediastreamtrackaudiosourceoptions.mediastream' in that specification.
MediaStreamTrackEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/mediastreamtrackevent" tar
get="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediastreamtrackevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the events based on this interface are addtrack and removetrack properties also inherits properties from its parent interface, event.
MediaTrackConstraints - Web APIs
a constraints dictionary is passed into applyconstraints() to allow a script to establish a set of exact (required) values or ranges and/or preferred values or ranges of values for the track, and the most recently-requested set of custom constraints can be retrieved by calling
getconstraints().
... properties of shared screen tracks these constraints apply to mediatrackconstraints objects specified as part of the displaymediastreamconstraints object's video property when using
getdisplaymedia() to obtain a stream for screen sharing.
MediaTrackSettings.aspectRatio - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.aspectratio property you provided when calling either
getusermedia() or mediastreamtrack.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.aspectratio as returned by a call to mediadevices.
getsupportedconstraints().
MediaTrackSettings.autoGainControl - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.autogaincontrol property you provided when calling either
getusermedia() or mediastreamtrack.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.autogaincontrol as returned by a call to mediadevices.
getsupportedconstraints().
MediaTrackSettings.channelCount - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.channelcount property you provided when calling either
getusermedia() or mediastreamtrack.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.channelcount as returned by a call to mediadevices.
getsupportedconstraints().
MediaTrackSettings.echoCancellation - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.echocancellation property you provided when calling either
getusermedia() or mediastreamtrack.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.echocancellation as returned by a call to mediadevices.
getsupportedconstraints().
MediaTrackSettings.facingMode - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.facingmode property you provided when calling either
getusermedia() or mediastreamtrack.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.facingmode as returned by a call to mediadevices.
getsupportedconstraints().
MediaTrackSettings.frameRate - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.framerate property you provided when calling either
getusermedia() or mediastreamtrack.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.framerate as returned by a call to mediadevices.
getsupportedconstraints().
MediaTrackSettings.height - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.height property you provided when calling either
getusermedia() or mediastreamtrack.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.height as returned by a call to mediadevices.
getsupportedconstraints().
MediaTrackSettings.latency - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.latency property you provided when calling either
getusermedia() or mediastreamtrack.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.latency as returned by a call to mediadevices.
getsupportedconstraints().
MediaTrackSettings.noiseSuppression - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.noisesuppression property you provided when calling either
getusermedia() or mediastreamtrack.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.noisesuppression as returned by a call to mediadevices.
getsupportedconstraints().
MediaTrackSettings.sampleRate - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.samplerate property you provided when calling either
getusermedia() or mediastreamtrack.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.samplerate as returned by a call to mediadevices.
getsupportedconstraints().
MediaTrackSettings.sampleSize - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.samplesize property you provided when calling either
getusermedia() or mediastreamtrack.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.samplesize as returned by a call to mediadevices.
getsupportedconstraints().
MediaTrackSettings.volume - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.volume property you provided when calling either
getusermedia() or mediastreamtrack.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.volume as returned by a call to mediadevices.
getsupportedconstraints().
MediaTrackSettings.width - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.width property you provided when calling either
getusermedia() or mediastreamtrack.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.width as returned by a call to mediadevices.
getsupportedconstraints().
MediaTrackSupportedConstraints.frameRate - Web APIs
the mediatracksupportedconstraints dictionary's framerate property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.
getsupportedconstraints() if and only if the user agent supports the framerate constraint.
... javascript let result = document.
getelementbyid("result"); if (navigator.mediadevices.
getsupportedconstraints().framerate) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } html <div id="result"> </div> css #result { font: 14px "arial", sans-serif; } result the output, showing if your browser supports the framerate constraint, is: while this example is trivial, you can repla...
MediaTrackSupportedConstraints - Web APIs
an object conforming to mediatracksupportedconstraints is returned by mediadevices.
getsupportedconstraints().
...instead, the specified constraints will be applied, with any unrecognized constraints stripped from the request.that can lead to confusing and hard to debug errors, so be sure to use
getsupportedconstraints() to retrieve this information before attempting to establish constraints if you need to know the difference between silently ignoring a constraint and a constraint being accepted.
Media Source API - Web APIs
returned by the htmlvideoelement.
getvideoplaybackquality() method.
... htmlvideoelement.
getvideoplaybackquality() returns a videoplaybackquality object for the currently played video.
MerchantValidationEvent.complete() - Web APIs
example in this example, we see the client-side code needed to support merchant validation for a payment request called payrequest: payrequest.onmerchantvalidation = event => { const validationdatapromise =
getvalidationdata(event.validationurl); event.complete(validationdatapromise); } function
getvalidationdata(url) { /* ...retrieve the validation data from the url...
...the event handler calls a function,
getvalidationdata(), which retrieves the data from the validation url, then passes that data (or a promise to deliver the data) into complete().
MessagePort.start() - Web APIs
this method is only needed when using eventtar
get.addeventlistener; it is implied when using messagechannel.onmessage.
... example in the following code block, you can see a handlemessage handler function, run when a message is sent back to this document using onmessage: channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } another option would be to do this using eventtar
get.addeventlistener, however, when this method is used, you need to explicitly call start() to begin the flow of messages to this document: channel.port1.addeventlistener('message', handlemessage, false); function handlemessage(e) { para.innerhtml = e.data; textinput.value = ''; } channel.port1.start(); specifications specification status comment html living standardt...
Metadata.modificationTime - Web APIs
example this example tries to
get a particular working file at tmp/workfile.json.
... workingdirectory.
getfile("tmp/workfile.json", { create: true }, function(fileentry) { fileentry.
getmetadata(function(metadata) { if ((new date().
getfullyear() - metadata.modificationtime.
getfullyear()) >= 5) { fileentry.remove(function() { workingdirectory.
getfile("tmp/workfile.json", { create: true }, function(newentry) { fileentry = newentry; }); }); } }); }, handleerror); this api has no official w3c or whatwg specification.
MutationObserver - Web APIs
// select the node that will be observed for mutations const tar
getnode = document.
getelementbyid('some-id'); // options for the observer (which mutations to observe) const config = { attributes: true, childlist: true, subtree: true }; // callback function to execute when mutations are observed const callback = function(mutationslist, observer) { // use traditional 'for loops' for ie 11 for(let mutation of mutationslist) { if (mutation.type === ...
...'childlist') { console.log('a child node has been added or removed.'); } else if (mutation.type === 'attributes') { console.log('the ' + mutation.attributename + ' attribute was modified.'); } } }; // create an observer instance linked to the callback function const observer = new mutationobserver(callback); // start observing the tar
get node for configured mutations observer.observe(tar
getnode, config); // later, you can stop observing observer.disconnect(); specifications specification status comment domthe definition of 'mutationobserver' in that specification.
MutationObserverInit.attributeFilter - Web APIs
function callback(mutationlist) { mutationlist.foreach(function(mutation) { switch(mutation.type) { case "attributes": switch(mutation.attributename) { case "status": userstatuschanged(mutation.tar
get.username, mutation.tar
get.status); break; case "username": usernamechanged(mutation.oldvalue, mutation.tar
get.username); break; } break; } }); } var userlistelement = document.queryselector("#userlist"); var observer = new mutationobserver(callback); observer.observe(userlistelement, { attributefilter: [ "status", "username" ...
... note the use of mutationrecord.oldvalue to
get the previous value of the "username" property so we have that information when doing lookups in our local array of users.
MutationObserverInit.attributeOldValue - Web APIs
function callback(mutationlist) { mutationlist.foreach(function(mutation) { switch(mutation.type) { case "attributes": notifyuser("attribute name " + mutation.attributename + " changed to " + mutation.tar
get[mutation.attributename] + " (was " + mutation.oldvalue + ")"); break; } }); } var tar
getnode = document.queryselector("#tar
get"); var observer = new mutationobserver(callback); observer.observe(tar
getnode, { attributes: true, attributeoldvalue: true }); the callback() function—which will be passed into the observe() method when starting the observer, looks at ea...
...for any items representing an attribute change (which can be detected by the value of mutationrecord.type being "attributes"), a function called notifyuser() is used to tell the user the name of the attribute that changed as well as the attribute's new value (mutation.tar
get[mutation.attributename]) and its old value (mutation.oldvalue).
MutationObserverInit.characterDataOldValue - Web APIs
by default, only changes to the text of the node specified as the tar
get parameter when you called observe() are monitored.
... to watch for changes to the text contents of all descendants of tar
get, set the subtree option to true.
MutationObserverInit.childList - Web APIs
if subtree is false, only the node indicated by the observer's tar
get node is monitored for changes.
... setting subtree to true causes addition or removal of nodes anywhere within the subtree rooted at tar
get to be reported.
NameList - Web APIs
namelist.
getname() returns a domstring.
... namelist.
getnamespaceuri() returns a domstring.
NavigationPreloadManager - Web APIs
navigationpreloadmanager.
getstate() returns a promise that resolves to an object with properties indicating whether preload is enabled and the contents of the service-worker-navigation-preload.
... samsung internet android full support 8.0
getstate experimentalchrome full support 62edge full support 18firefox no support nonotes no support nonotes notes implementation tracked in bug 1290958ie ?
Using Navigation Timing - Web APIs
for example, to measure the perceived loading time for a page: window.addeventlistener("load", function() { let now = new date().
gettime(); let loadingtime = now - performance.timing.navigationstart; document.queryselector(".output").innertext = loadingtime + " ms"; }, false); this code, executed when the load event occurs, subtracts from the current time the time at which the navigation whose timing was recorded began (performance.timing.navigationstart), and outputs that information to the screen by inserting ...
...the new code looks like this: window.addeventlistener("load", function() { let now = new date().
gettime(); let loadingtime = now - performance.timing.navigationstart; output = "load time: " + loadingtime + " ms<br/>"; output += "navigation type: "; switch(performance.navigation.type) { case performancenavigation.type_navigate: output += "navigation"; break; case performancenavigation.type_reload: output += "reload"; break; case performancenavi...
Navigation Timing API - Web APIs
calculate request response time you can calculate the time elapsed between the beginning of a request and the completion of
getting the response using code like this: const connecttime = perfdata.responseend - perfdata.requeststart; here, the time at which the request was initiated (requeststart).
... calculate page render time as another example of an interesting piece of data you can obtain using the navigation timing api that you can't otherwise easily
get, you can
get the amount of time it took to render the page: const rendertime = perfdata.domcomplete - perfdata.domloading; this is obtained by starting with the time at which loading of the dom and its dependencies is complete (domcomplete) and subtracting from it the time at which parsing of the dom began (domloading).
Navigator.battery - Web APIs
this interface was introduced in early drafts of the battery status api and but has been replaced with promise-based navigator.
getbattery().
... the battery property has been removed in favor of the standard navigator.
getbattery() method, which returns a battery promise.
NetworkInformation - Web APIs
properties this interface also inherits properties of its parent, eventtar
get.
... methods this interface also inherits methods of its parent, eventtar
get.
Node.firstChild - Web APIs
<p id="para-01"> <span>first span</span> </p> <script> var p01 = document.
getelementbyid('para-01'); console.log(p01.firstchild.nodename); </script> in the above, the console will show '#text' because a text node is inserted to maintain the whitespace between the end of the opening <p> and <span> tags.
... <p id="para-01"><span>first span</span></p> <script> var p01 = document.
getelementbyid('para-01'); console.log(p01.firstchild.nodename); </script> now the console will show 'span'.
Node.isSupported() - Web APIs
example <div id="doc"> </div> <script> //
get an element and check to see if its supports the dom2 html module.
... var main = document.
getelementbyid('doc'); var output = main.issupported('html', '2.0'); </script> specifications specification status comment document object model (dom) level 3 core specificationthe definition of 'node.issupported()' in that specification.
Node.nextSibling - Web APIs
therefore a node obtained, for example, using node.firstchild or node.previoussibling may refer to a whitespace text node rather than the actual element the author intended to
get.
... example <div id="div-1">here is div-1</div> <div id="div-2">here is div-2</div> <script> var el = document.
getelementbyid('div-1').nextsibling, i = 1; console.group('siblings of div-1:'); while (el) { console.log(i, '.
Node.previousSibling - Web APIs
syntax previousnode = node.previoussibling; example <img id="b0"> <img id="b1"> <img id="b2"> console.log(document.
getelementbyid("b1").previoussibling); // <img id="b0"> console.log(document.
getelementbyid("b2").previoussibling.id); // "b1" notes gecko-based browsers insert text nodes into a document to represent whitespace in the source markup.
... therefore a node obtained, for example, using node.firstchild or node.previoussibling may refer to a whitespace text node rather than the actual element the author intended to
get.
Node.removeChild() - Web APIs
examples simple examples given this html: <div id="top"> <div id="nested"></div> </div> to remove a specified element when knowing its parent node: let d = document.
getelementbyid("top"); let d_nested = document.
getelementbyid("nested"); let throwawaynode = d.removechild(d_nested); to remove a specified element without having to specify its parent node: let node = document.
getelementbyid("nested"); if (node.parentnode) { node.parentnode.removechild(node); } to remove all children from an element: let element = document.
getelementbyid("top"); while (eleme...
...nt.firstchild) { element.removechild(element.firstchild); } causing a typeerror <!--sample html code--> <div id="top"> </div> <script type="text/javascript"> let top = document.
getelementbyid("top"); let nested = document.
getelementbyid("nested"); // throws uncaught typeerror let garbage = top.removechild(nested); </script> causing a notfounderror <!--sample html code--> <div id="top"> <div id="nested"></div> </div> <script type="text/javascript"> let top = document.
getelementbyid("top"); let nested = document.
getelementbyid("nested"); // this first call correctly removes the node let garbage = top.removechild(nested); // throws uncaught notfounderror garbage = top.removechild(nested); </script> specifications specification status comment ...
Node.rootNode - Web APIs
important: for compatibility reasons, this property has been replaced by the node.
getrootnode() method.
...therefore a node obtained, for example, using node.firstchild or node.previoussibling may refer to a whitespace text node rather than the actual element the author intended to
get.
Node.setUserData() - Web APIs
the node.
getuserdata and node.setuserdata methods are no longer available from web content.
... example var d = document.implementation.createdocument('', 'test', null); d.documentelement.setuserdata('key', 15, {handle:function (o, k, d, s, ds) {console.log(o+'::'+k+'::'+d+'::'+s+'::'+ds)}}); // 2::key::15::[object element]::[object element] console.log(d.documentelement.
getuserdata('key')); // 15 var e = document.importnode(d.documentelement, true); // causes handler to be called console.log(e.
getuserdata('key')); // null since user data is not copied specifications specification status comment document object model (dom) level 3 core specificationthe definition of 'node.setuserdata()' in that specification.
OES_element_index_uint - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... examples var ext = gl.
getextension('oes_element_index_uint'); gl.drawelements(gl.points, 8, gl.unsigned_int, 0); specifications specification status comment oes_element_index_uintthe definition of 'oes_element_index_uint' in that specification.
OES_texture_float - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... examples var ext = gl.
getextension('oes_texture_float'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, gl.float, image); specifications specification status comment oes_texture_floatthe definition of 'oes_texture_float' in that specification.
OES_texture_float_linear - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... examples gl.
getextension('oes_texture_float'); gl.
getextension('oes_texture_float_linear'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.texparameterf(gl.texture_2d, gl.texture_mag_filter, gl.linear); gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, gl.float, image); specifications specification status comment oes_texture_float_linearthe definition of...
OES_texture_half_float - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... examples var ext = gl.
getextension('oes_texture_half_float'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, ext.half_float_oes, image); specifications specification status comment oes_texture_half_floatthe definition of 'oes_texture_half_float' in that specification.
OES_texture_half_float_linear - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... examples var halffloat = gl.
getextension('oes_texture_half_float'); gl.
getextension('oes_texture_half_float_linear'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.texparameterf(gl.texture_2d, gl.texture_mag_filter, gl.linear); gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, halffloat.half_float_oes, image); specifications specification status comment oes_texture_hal...
OVR_multiview2.framebufferTextureMultiviewOVR() - Web APIs
syntax void ext.framebuffertexturemultiviewovr(tar
get, attachment, texture, level, baseviewindex, numviews); parameters tar
get a glenum specifying the binding point (tar
get).
... exceptions a gl.invalid_enum error is thrown if tar
get is not gl.framebuffer.
OfflineAudioContext.startRendering() - Web APIs
a working example, see our offline-audio-context-promise github repo (see the source code too.) // define online and offline audio context var audioctx = new audiocontext(); var offlinectx = new offlineaudiocontext(2,44100*40,44100); source = offlinectx.createbuffersource(); // use xhr to load an audio track, and // decodeaudiodata to decode it and offlineaudiocontext to render it function
getdata() { request = new xmlhttprequest(); request.open('
get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.connect(offlinectx.destination); source.start(); //source.lo...
... song.buffer = renderedbuffer; song.connect(audioctx.destination); play.onclick = function() { song.start(); } }).catch(function(err) { console.log('rendering failed: ' + err); // note: the promise should reject when startrendering is called a second time on an offlineaudiocontext }); }); } request.send(); } // run
getdata to start the process off
getdata(); specifications specification status comment web audio apithe definition of 'startrendering()' in that specification.
OffscreenCanvas() - Web APIs
we then initialize a webgl context on it using the
getcontext() method.
... let offscreen = new offscreencanvas(256, 256); let gl = offscreen.
getcontext('webgl'); specifications specification status comment html living standardthe definition of 'offscreencanvas()' in that specification.
ParentNode.childElementCount - Web APIs
example var foo = document.
getelementbyid('foo'); if (foo.childelementcount > 0) { // do something } polyfill for ie8 & ie9 & safari this property is completely unsupported prior to ie9.
... ;(function(constructor) { if (constructor && constructor.prototype && constructor.prototype.childelementcount == null) { object.defineproperty(constructor.prototype, 'childelementcount', {
get: function() { var i = 0, count = 0, node, nodes = this.childnodes; while (node = nodes[i++]) { if (node.nodetype === 1) count++; } return count; } }); } })(window.node || window.element); specification specification status comment domthe definition of 'parentnode.childelementcount' in that specification.
ParentNode.children - Web APIs
example const foo = document.
getelementbyid('foo'); for (let i = 0; i < foo.children.length; i++) { console.log(foo.children[i].tagname); } polyfill // overwrites native 'children' prototype.
...;(function(constructor) { if (constructor && constructor.prototype && constructor.prototype.children == null) { object.defineproperty(constructor.prototype, 'children', {
get: function() { let i = 0, node, nodes = this.childnodes, children = []; while (node = nodes[i++]) { if (node.nodetype === 1) { children.push(node); } } return children; } }); } })(window.node || window.element); specification specification status comment domthe definition of 'parentnode.children' in that specification.
ParentNode.firstElementChild - Web APIs
syntax var element = node.firstelementchild; example <ul id="foo"> <li>first (1)</li> <li>second (2)</li> <li>third (3)</li> </ul> <script> var foo = document.
getelementbyid('foo'); // yields: first (1) console.log(foo.firstelementchild.textcontent); </script> polyfill for ie8, ie9 and safari // overwrites native 'firstelementchild' prototype.
...;(function(constructor) { if (constructor && constructor.prototype && constructor.prototype.firstelementchild == null) { object.defineproperty(constructor.prototype, 'firstelementchild', {
get: function() { var node, nodes = this.childnodes, i = 0; while (node = nodes[i++]) { if (node.nodetype === 1) { return node; } } return null; } }); } })(window.node || window.element); specification specification status comment domthe definition of 'parentnode.firstelementchild' in that specification.
ParentNode.lastElementChild - Web APIs
syntax const element = node.lastelementchild example <ul id="foo"> <li>first (1)</li> <li>second (2)</li> <li>third (3)</li> </ul> <script> const foo = document.
getelementbyid('foo'); console.log(foo.lastelementchild.textcontent); // logs: third (3) </script> polyfill the code below adds support of lastelementchild() to document and documentfragment in internet explorer and safari.
...;(function(constructor) { if(constructor && constructor.prototype && constructor.prototype.lastelementchild == null) { object.defineproperty(constructor.prototype, 'lastelementchild', {
get: function() { var node, nodes = this.childnodes, i = nodes.length - 1; while(node = nodes[i--]) { if(node.nodetype === 1) { return node; } } return null; } }); } })(window.node || window.element); specification specification status comment domthe definition of 'parentnode.lastelementchild' in that specification.
ParentNode.replaceChildren() - Web APIs
to do this, we give each of the buttons a click event handler, which collects to
gether the selected options you want to transfer in one constant, and the existing options in the list you are transferring to in another constant.
... const noselect = document.
getelementbyid('no'); const yesselect = document.
getelementbyid('yes'); const nobtn = document.
getelementbyid('to-no'); const yesbtn = document.
getelementbyid('to-yes'); yesbtn.addeventlistener('click', () => { const selectedtransferoptions = document.queryselectorall('#no option:checked'); const existingyesoptions = document.queryselectorall('#yes option'); yesselect.replacechildren(...selectedtransferoptions, ...existingyesoptions); }); nobtn.addeventlistener('click', () => { const selectedtransferoptions = document.queryselectorall('#yes option:checked'); const existingnooptions = document.querysele...
Path2D() - Web APIs
<canvas id="canvas"></canvas> const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); let path1 = new path2d(); path1.rect(10, 10, 100,100); let path2 = new path2d(path1); path2.moveto(220, 60); path2.arc(170, 60, 50, 0, 2 * math.pi); ctx.stroke(path2); using svg paths this example creates a path2d path using svg path data.
... <canvas id="canvas"></canvas> const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); let p = new path2d('m10 10 h 80 v 80 h -80 z'); ctx.fill(p); specification specification status comment html living standardthe definition of 'path2d()' in that specification.
PaymentRequest: merchantvalidation event - Web APIs
request.addeventlistener("merchantvalidation", event => { event.complete(async () => { const merchantserverurl = window.location.origin + '/validate?url=' + encodeuricomponent(event.validationurl); //
get validation data, and complete validation; return await fetch(merchantserverurl).then(response => response.text()); }, false); }; const response = await request.show(); how merchant server handles the validation depends on the server implementation and payment method documentation.
... you can also use the onmerchantvalidation event handler property to set up the handler for this event: request.onmerchantvalidation = event => { event.complete(async () => { const merchantserverurl = window.location.origin + '/validate?url=' + encodeuricomponent(event.validationurl); //
get validation data, and complete validation; return await fetch(merchantserverurl).then(response => response.text()); }); }; const response = await request.show(); for more information, see merchant validation in payment processing concepts.
PaymentResponse.onpayerdetailchange - Web APIs
const options = { requestshipping: true, requestpayeremail: true, requestpayername: true, requestpayerphone: true, }; const request = new paymentrequest(methods, details, options); const response = request.show(); //
get the data from the response let { payername: oldpayername, payeremail: oldpayeremail, payerphone: oldpayerphone, } = response; // set up a handler for payerdetailchange events, to // request corrections as needed.
...tovalidate.push(validatephone(payerphone)); oldpayerphone = payerphone; } // as each validation promise resolves, add the results of the // validation to the errors list const errors = await promise.all(promisestovalidate).then(results => results.reduce((errors, result), object.assign(errors, result)) ); // if we found any errors, wait for them to be corrected if (object.
getownpropertynames(errors).length) { await response.retry(errors); } else { // we have a good payment; send the data to the server await fetch("/pay-for-things/", { method: "post", body: response.json() }); response.complete("success"); } }; await response.retry({ payer: { email: "invalid domain.", phone: "invalid number.", }, }); specifications specifica...
PaymentResponse: payerdetailchange event - Web APIs
const options = { requestshipping: true, requestpayeremail: true, requestpayername: true, requestpayerphone: true, }; const request = new paymentrequest(methods, details, options); const response = request.show(); //
get the data from the response let { payername: oldpayername, payeremail: oldpayeremail, payerphone: oldpayerphone, } = response; // set up a handler for payerdetailchange events, to // request corrections as needed.
...tovalidate.push(validatephone(payerphone)); oldpayerphone = payerphone; } // as each validation promise resolves, add the results of the // validation to the errors list const errors = await promise.all(promisestovalidate).then(results => results.reduce((errors, result), object.assign(errors, result)) ); // if we found any errors, wait for them to be corrected if (object.
getownpropertynames(errors).length) { await response.retry(errors); } else { // we have a good payment; send the data to the server await fetch("/pay-for-things/", { method: "post", body: response.json() }); response.complete("success"); } }; await response.retry({ payer: { email: "invalid domain.", phone: "invalid number.", }, }); addeventlistener equivalent you c...
performance.measure() - Web APIs
the measure can be retrieved by one of the performance interfaces: (
getentries(),
getentriesbyname() or
getentriesbytype()).
... console.log(performance.
getentriesbytype("measure")); // finally, clean up the entries.
PerformanceFrameTiming - Web APIs
a frame rate of 60fps (frames per second) for a 60hz refresh rate is the tar
get for a good responsive user experience.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceframetiming" tar
get="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceframetiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no ...
PerformanceLongTaskTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" tar
get="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25"...
... stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancelongtasktiming" tar
get="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancelongtasktiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties performancelongtasktiming.attribution read only returns a sequence of taskattributiontiming instances.
PerformanceMark - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" tar
get="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25"...
... stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemark" tar
get="_top"><rect x="201" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancemark</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constraining the properties as follows: performanceentry.entrytype returns "mark".
PerformanceMeasure - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" tar
get="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25"...
... stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemeasure" tar
get="_top"><rect x="201" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="291" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancemeasure</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constrainting the properties as follows: performanceentry.entrytype returns "measure".
PerformanceNavigationTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" tar
get="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25"...
... stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancenavigationtiming" tar
get="_top"><rect x="201" y="1" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancenavigationtiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface extends the following performanceentry properties for navigation performance entry types by qualifying and constraining them as follows: performanceentry.entrytype read only returns "navigation".
PerformanceResourceTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" tar
get="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25"...
... stroke="#d4dde4"/><a xlink:href="/docs/web/api/performanceresourcetiming" tar
get="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceresourcetiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this feature is available in web workers.
PositionOptions - Web APIs
the positionoptions dictionary describes an object containing option properties to pass as a parameter of geolocation.
getcurrentposition() and geolocation.watchposition().
...the default value is infinity, meaning that
getcurrentposition() won't return until the position is available.
PromiseRejectionEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/promiserejectionevent" tar
get="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">promiserejectionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor promiserejectionevent() creates a promiserejectionevent event, given the type of event (unhandledrejection or rejectionhandled) and other details.
PublicKeyCredentialCreationOptions.extensions - Web APIs
note: an analogous option exists for the fetching operation (navigators.credentials.
get()), see publickeycredentialrequestoptions.extensions.
... { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // mybuffer will contain the result of any of the processing of the extensions var mybuffer = newcredentialinfo.
getclientextensionresults(); // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'extensions' in t...
PublicKeyCredentialRequestOptions - Web APIs
the publickeycredentialrequestoptions dictionary of the web authentication api holds the options passed to navigator.credentials.
get() in order to fetch a given publickeycredential.
..."public-key", id: new uint8array(26) // actually provided by the server }, { transports: "internal", type: "public-key", id: new uint8array(26) // actually provided by the server } ], extensions: { uvm: true, // rp wants to know how the user was verified loc: false, txauthsimple: "could you please verify yourself?" } }; navigator.credentials.
get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'pu...
PushManager - Web APIs
methods pushmanager.
getsubscription() retrieves an existing push subscription.
...replaced by pushmanager.
getsubscription().
PushSubscription - Web APIs
methods pushsubscription.
getkey() returns an arraybuffer which contains the client's public key, which can then be sent to a server and used in encrypting push message data.
... example navigator.serviceworker.ready.then(function(reg) { reg.pushmanager.
getsubscription().then(function(subscription) { subscription.unsubscribe().then(function(successful) { // you've successfully unsubscribed }).catch(function(e) { // unsubscription failed }) }) }); specifications specification status comment push apithe definition of 'pushsubscription' in that specification.
RTCConfiguration - Web APIs
it may be passed into the constructor when instantiating a connection, or used with the rtcpeerconnection.
getconfiguration() and rtcpeerconnection.setconfiguration() methods, which allow inspecting and changing the configuration while a connection is established.
... peeridentity optional a domstring which specifies the tar
get peer identity for the rtcpeerconnection.
RTCDTMFSender - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtar
get" tar
get="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar
get</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcdtmfsender" tar
get="_top"><rect x="151" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcdtmfsender</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties rtcdtmfsender.tonebuffer read only a domstring which contains the list of dtmf tones currently in the queue to be transmitted (tones which have already been played are no longer included in the string).
RTCIceCandidate.component - Web APIs
if a candidate represents both rtp and rtcp multiplexed to
gether, it is reported as an rtp candidate.
... syntax var component = rtcicecandidate.component; value a domstring which is "rtp" for rtp (or rtp and rtcp multiplexed to
gether) candidates or "rtcp" for rtcp candidates.
RTCIceCandidatePairStats.selected - Web APIs
example the function shown in this example identifies the currently-selected candidate pair from a statistics report by first iterating over each report, looking for a transport report; when one is found, that transport's selectedcandidatepairid is used to
get the rtcicecandidatepair describing the connection.
... function
getcurrentcandidatepair(statsresults) { statsresults.foreach(report => { if (report.type === "transport") { currentpair = statsresults.
get(report.selectedcandidatepairid); } }); if (!currentpair) { statsresults.foreach(report => { if (report.type === "candidate-pair" && report.selected) { currentpair = report; } }); } return currentpair; } specifications not part of any specification.
RTCIceCandidatePairStats - Web APIs
usage notes the currently-active ice candidate pair—if any—can be obtained by calling the rtcicetransport method
getselectedcandidatepair(), which returns an rtcicecandidatepair object, or null if there isn't a pair selected.
... any candidate pair that isn't the active pair of candidates for a transport
gets deleted if the rtcicetransport performs an ice restart, at which point the state of the ice transport returns to new and negotiation starts once again.
RTCIceCandidateStats.networkType - Web APIs
this may be because the browser isn't able to determine the network type for some reason or it may be intentionally
getting obscured for security reasons, such as to avoid device fingerprinting.
... window.setinterval(function() { mypeerconnection.
getstats(null).then(stats => { let statsoutput = ""; stats.foreach(report => { if ((stats.type === "local-candidate" || stats.type === "remote.candidate") && stats.networktype === "cellular") { statsoutput += `<h2>report: ${report.type}</h3>\n<strong>id:</strong> ${report.id}<br>\n` + `<strong>timestamp:</strong> ${report.timestamp}<br>\n`; // no...
RTCIceTransport: gatheringstatechange event - Web APIs
here, the addeventlistener() method is called to add a listener for gatheringstatechange events: pc.
getsenders().foreach(sender => { sender.transport.icetransport.addeventlistener("gatheringstatechange", ev => { let transport = ev.tar
get; if (transport.gatheringstate === "complete") { /* this transport has finished gathering candidates, but others may still be working on it */ } }, false); likewise, you can use the ongatheringstatechange event handler property: pc.
getsenders()...
....foreach(sender => { sender.transport.icetransport.ongatheringstatechange = ev => { let transport = ev.tar
get; if (transport.gatheringstate === "complete") { /* this transport has finished gathering candidates, but others may still be working on it */ } }; }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'gatheringstatechange' in that specification.
RTCIceTransport.onselectedcandidatepairchange - Web APIs
the event handler can determine the current state by calling the transport's
getselectedcandidatepair() method, which returns a rtcicecandidatepair whose rtcicecandidatepair.local and rtcicecandidatepair.global properties specify rtcicecandidate objects describing the local and remote candidates that are currently being used.
... var icetransport = pc.
getsenders()[0].transport.icetransport; var localproto = document.
getelementbyid("local-protocol"); var remoteproto = document.
getelementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = function(event) { var pair = icetransport.
getselectedcandidatepair(); localprotocol.innertext = pair.local.protocol.touppercase(); remoteprotocol.innertext = pair.remote.protocol.touppercase(); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicetransport.onselectedcandidatepai...
RTCPeerConnection.addStream() - Web APIs
navigator.mediadevices.
getusermedia({video:true, audio:true}, function(stream) { var pc = new rtcpeerconnection(); pc.addstream(stream); }); migrating to addtrack() compatibility allowing, you should update your code to instead use the addtrack() method: navigator.
getusermedia({video:true, audio:true}, function(stream) { var pc = new rtcpeerconnection(); stream.
gettracks().foreach(function(track) { pc.addtra...
...ion said stream was added to: stream.addtrack(track); if (pc.addtrack) { pc.addtrack(track, stream); } else { // if you have code listening for negotiationneeded events: settimeout(() => pc.dispatchevent(new event('negotiationneeded'))); } // remove a track from a stream and the peer connection said stream was added to: stream.removetrack(track); if (pc.removetrack) { pc.removetrack(pc.
getsenders().find(sender => sender.track == track)); } else { // if you have code listening for negotiationneeded events: settimeout(() => pc.dispatchevent(new event('negotiationneeded'))); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.addstream()' in that specification.
RTCPeerConnection.removeStream() - Web APIs
because this method has been deprecated, you should instead use removetrack() if your tar
get browser versions have implemented it.
... example var pc, videostream; navigator.
getusermedia({video: true}, function(stream) { pc = new rtcpeerconnection(); videostream = stream; pc.addstream(stream); } document.
getelementbyid("closebutton").addeventlistener("click", function(event) { pc.removestream(videostream); pc.close(); }, false); ...
RTCPeerConnection.removeTrack() - Web APIs
the rtcpeerconnection.removetrack() method tells the local end of the connection to stop sending media from the specified track, without actually removing the corresponding rtcrtpsender from the list of senders as reported by rtcpeerconnection.
getsenders().
... var pc, sender; navigator.
getusermedia({video: true}, function(stream) { pc = new rtcpeerconnection(); var track = stream.
getvideotracks()[0]; sender = pc.addtrack(track, stream); }); document.
getelementbyid("closebutton").addeventlistener("click", function(event) { pc.removetrack(sender); pc.close(); }, false); specifications specification status comment webrtc 1.0: real-time communic...
RTCRtpParameters - Web APIs
to obtain the parameters of a sender or receiver, call its
getparameters() method:
getparameters()
getparameters() properties codecs an array of rtcrtpcodecparameters objects describing the set of codecs from which the sender or receiver will choose.
... function
getrtpcname(rtpobject) { let parameters = rtpobject.
getparameters(); return parameters.rtcp.cname; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpreceiveparameters' in that specification.
RTCRtpReceiveParameters - Web APIs
the rtcrtpreceiveparameters dictionary, based upon the rtcrtpparameters dictionary, is returned by the the rtcrtpreceiver method
getparameters().
... function
getrtcpcname(receiver) { let parameters = receiver.
getparameters(); return parameters.rtcp.cname; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpreceiveparameters' in that specification.
RTCTrackEvent - Web APIs
the tar
get is the rtcpeerconnection object to which the track is being added.
... peerconnection.addeventlistener("track", e => { let videoelement = document.
getelementbyid("videobox"); videoelement.srcobject = e.streams[0]; }, false); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent' in that specification.
RadioNodeList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/nodelist" tar
get="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">nodelist</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dd...
...e4"/><a xlink:href="/docs/web/api/radionodelist" tar
get="_top"><rect x="121" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">radionodelist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties the radionodelist interface inherits the properties of nodelist.
Range() - Web APIs
we then select the range using window.
getselection() and selection.addrange().
... html <p>first paragraph.</p> <p>second paragraph.</p> <p>third paragraph.</p> <p>fourth paragraph.</p> javascript const paragraphs = document.queryselectorall('p'); // create new range const range = new range(); // start range at second paragraph range.setstartbefore(paragraphs[1]); // end range at third paragraph range.setendafter(paragraphs[2]); //
get window selection const selection = window.
getselection(); // add range to window selection selection.addrange(range); result specification specification status comment domthe definition of 'range.range()' in that specification.
Range.commonAncestorContainer - Web APIs
the listener
gets the common ancestors of each piece of selected text, and triggers an animation to highlight them.
... .highlight { animation: highlight linear 1s; } @keyframes highlight { from { outline: 1px solid #f00f; } to { outline: 1px solid #f000; } } body { padding: 1px; } javascript document.addeventlistener('pointerup', e => { const selection = window.
getselection(); if (selection.type === 'range') { for (let i = 0; i < selection.rangecount; i++) { const range = selection.
getrangeat(i); playanimation(range.commonancestorcontainer); } } }); function playanimation(el) { if (el.nodetype === node.text_node) { el = el.parentnode; } el.classlist.remove('highlight'); settimeout(() => { el.classlist.add('highligh...
Range.extractContents() - Web APIs
syntax documentfragment = range.extractcontents(); example basic example var range = document.createrange(); range.selectnode(document.
getelementsbytagname("div").item(0)); var documentfragment = range.extractcontents(); document.body.appendchild(documentfragment); moving items between containers this example lets you move items between two containers.
... html <p id="list1">123456</p> <button id="swap">swap selected item(s)</button> <p id="list2">abcdef</p> css body { pointer-events: none; } p { border: 1px solid; font-size: 2em; padding: .3em; } button { font-size: 1.2em; padding: .5em; pointer-events: auto; } javascript const list1 = document.
getelementbyid('list1'); const list2 = document.
getelementbyid('list2'); const button = document.
getelementbyid('swap'); button.addeventlistener('click', e => { selection = window.
getselection(); for (let i = 0; i < selection.rangecount; i++) { const range = selection.
getrangeat(i); if (range.commonancestorcontainer === list1 || range.commonancestorcontainer.parentnode === list...
ReadableStream.cancel() - Web APIs
to read those chunks still and not completely
get rid of the stream, you'd use readablestreamdefaultcontroller.close().
... var searchterm = "service workers"; // chars to show either side of the result in the match var contextbefore = 30; var contextafter = 30; var caseinsensitive = true; var url = 'https://html.spec.whatwg.org/'; console.log(`searching '${url}' for '${searchterm}'`); fetch(url).then(response => { console.log('received headers'); var decoder = new textdecoder(); var reader = response.body.
getreader(); var tomatch = caseinsensitive ?
ReadableStreamDefaultReader - Web APIs
fetch("https://www.example.org/").then((response) => { const reader = response.body.
getreader(); const stream = new readablestream({ start(controller) { // the following function handles each data chunk function push() { // "done" is a boolean and value a "uint8array" return reader.read().then(({ done, value }) => { // is there no more data to read?
... if (done) { // tell the browser that we have finished sending data controller.close(); return; } //
get the data and send it to the browser via the controller controller.enqueue(value); push(); }); }; push(); } }); return new response(stream, { headers: { "content-type": "text/html" } }); }); specifications specification status comment streamsthe definition of 'readablestreamdefaultreader' in that specification.
ReportingObserver - Web APIs
observer) { reportbtn.onclick = () => displayreports(reports); }, options); we then tell it to start observing reports using reportingobserver.observe(); this tells the observer to start collecting reports in its report queue, and runs the callback function specified inside the constructor: observer.observe(); later on in the example we deliberately use the deprecated version of mediadevices.
getusermedia(): if(navigator.moz
getusermedia) { navigator.moz
getusermedia( constraints, success, failure); } else { navigator.
getusermedia( constraints, success, failure); } this causes a deprecation report to be generated; because of the event handler we set up inside the reportingobserver() constructor, we can now click the button to display the report details.
... note: if you look at the complete source code, you'll notice that we actually call the deprecated
getusermedia() method twice.
Request.cache - Web APIs
({status: 504}) : // workaround for chrome; which simply fails with a typeerror promise.reject(e)) .then(res => { if (res.status === 504) { controller.abort() controller = new abortcontroller(); return fetch("some.json", {cache: "force-cache", mode: "same-origin", signal: controller.signal}) } const date = res.headers.
get("date"), dt = date ?
... new date(date).
gettime() : 0 if (dt < (date.now() - 86400000)) { // if older than 24 hours controller.abort() controller = new abortcontroller(); return fetch("some.json", {cache: "reload", mode: "same-origin", signal: controller.signal}) } // other possible conditions if (dt < (date.now() - 300000)) // if it's older than 5 minutes fetch("some.json", {cache: "no-cache", mode: "same-origin"}) // no cancellation or return value.
Request.method - Web APIs
the method read-only property of the request interface contains the request's method (
get, post, etc.) syntax var mymethod = request.method; value a bytestring indicating the method of the request.
... example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the method of the request in a variable: var myrequest = new request('flowers.jpg'); var mymethod = myrequest.method; //
get specifications specification status comment fetchthe definition of 'method' in that specification.
ResizeObserverEntry.borderBoxSize - Web APIs
examples const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.borderboxsize && entry.borderboxsize.length > 0) { entry.tar
get.style.borderradius = math.min(100, (entry.borderboxsize[0].inlinesize/10) + (entry.borderboxsize[0].blocksize/10)) + 'px'; } else { entry.tar
get.style.borderradius = math.min(100, (entry.contentrect.width/10) + (entry.contentrect.height/10)) + 'px'; } } }); resizeobserver.o...
...bserve(document.queryselector('div')); specifications specification status comment resize observerthe definition of 'tar
get' in that specification.
ResizeObserverEntry.contentBoxSize - Web APIs
const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { entry.tar
get.style.borderradius = math.min(100, (entry.contentboxsize.inlinesize/10) + (entry.contentboxsize.blocksize/10)) + 'px'; } else { entry.tar
get.style.borderradius = math.min(100, (entry.contentrect.width/10) + (entry.contentrect.height/10)) + 'px'; } } }); resizeobserver.obser...
...ve(document.queryselector('div')); specifications specification status comment resize observerthe definition of 'tar
get' in that specification.
ResizeObserverEntry - Web APIs
resizeobserverentry.tar
get read only a reference to the element or svgelement being observed.
...this uses a simple feature detection test to see if the browser supports the newer contentboxsize property — if so, it uses that to
get the sizing data it needs.
Resize Observer API - Web APIs
the window resize event), then figure out what the new dimensions or other features of the element after a resize using element.
getboundingclientrect or window.
getcomputedstyle, for example.
... the code will usually follow this kind of pattern (taken from resize-observer-border-radius.html): const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { entry.tar
get.style.borderradius = math.min(100, (entry.contentboxsize.inlinesize/10) + (entry.contentboxsize.blocksize/10)) + 'px'; } else { entry.tar
get.style.borderradius = math.min(100, (entry.contentrect.width/10) + (entry.contentrect.height/10)) + 'px'; } } }); resizeobserver.obser...
Resource Timing API - Web APIs
resource loading timestamps an application can
get timestamps for the various stages used to load a resource.
...this requires the server providing the resource to send the timing-allow-origin http response header with a value specifying the origin or origins which are allowed to
get the restricted timestamp values.
Response.redirected - Web APIs
fetch("awesome-picture.jpg").then(function(response) { let elem = document.
getelementbyid("warning-message-box"); if (response.redirected) { elem.innerhtml = "unexpected redirect"; } else { elem.innerhtml = ""; } return response.blob(); }).then(function(imageblob) { let imgobjecturl = url.createobjecturl(imageblob); document.
getelementbyid("img-element-id").src = imgobjecturl; }); disallowing redirects because using redirected to manually filter out r...
...edirects can allow forgery of redirects, you should instead set the redirect mode to "error" in the init parameter when calling fetch(), like this: fetch("awesome-picture.jpg", { redirect: "error" }).then(function(response) { return response.blob(); }).then(function(imageblob) { let imgobjecturl = url.createobjecturl(imageblob); document.
getelementbyid("img-element-id").src = imgobjecturl; }); specifications specification status comment fetchthe definition of 'redirected' in that specification.
SVGGraphicsElement: paste event - Web APIs
a handler for this event can access the clipboard contents by calling
getdata() on the event's clipboarddata property.
...rg/2000/svg"> <foreignobject x="5" y="-10" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" value="copy this text"/> </foreignobject> <text x="5" y="30" id="element-to-paste-text" tabindex="1">paste it here</text> </svg> css input { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript document.
getelementbyid("element-to-paste-text").addeventlistener("paste", evt => { evt.tar
get.textcontent = evt.clipboarddata.
getdata("text/plain").touppercase(); evt.preventdefault(); }); result specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation definition that the clipboard events apply to svg elements.
SVGLengthList - Web APIs
note: starting in gecko 5.0,the svglengthlist dom interface is now indexable and can be accessed like arrays interface overview also implement none methods void clear() svglength initialize(in svglength newitem) svglength
getitem(in unsigned long index) svglength insertitembefore(in svglength newitem, in unsigned long index) svglength replaceitem(in svglength newitem, in unsigned long index) svglength removeitem(in unsigned long index) svglength appenditem(in svglength newitem) properties readonly unsigned long numberofitems readonly unsigned long length ...
...
getitem(in unsigned long index) svglength returns the specified item from the list.
SVGNumberList - Web APIs
interface overview also implement none methods void clear() svgnumber initialize(in svgnumber newitem) svgnumber
getitem(in unsigned long index) svgnumber insertitembefore(in svgnumber newitem, in unsigned long index) svgnumber replaceitem(in svgnumber newitem, in unsigned long index) svgnumber removeitem(in unsigned long index) svgnumber appenditem(in svgnumber newitem) properties readonly unsigned long numberofitems readonly unsigned long length ...
...
getitem(in unsigned long index) svgnumber returns the specified item from the list.
SVGPathSegList - Web APIs
interface overview also implement none methods void clear() svgpathseg initialize(in svgpathseg newitem) svgpathseg
getitem(in unsigned long index) svgpathseg insertitembefore(in svgpathseg newitem, in unsigned long index) svgpathseg replaceitem(in svgpathseg newitem, in unsigned long index) svgpathseg removeitem(in unsigned long index) svgpathseg appenditem(in svgpathseg newitem) properties readonly unsigned long num...
...
getitem(in unsigned long index) svgpathseg returns the specified item from the list.
SVGPointList - Web APIs
interface overview also implement none methods void clear() svgpoint initialize(in svgpoint newitem) svgpoint
getitem(in unsigned long index) svgpoint insertitembefore(in svgpoint newitem, in unsigned long index) svgpoint replaceitem(in svgpoint newitem, in unsigned long index) svgpoint removeitem(in unsigned long index) svgpoint appenditem(in svgpoint newitem) properties readonly unsigned lon...
...
getitem(in unsigned long index) svgpoint returns the specified item from the list.
SVGStringList - Web APIs
interface overview also implement none methods void clear() domstring initialize(in domstring newitem) domstring
getitem(in unsigned long index) domstring insertitembefore(in domstring newitem, in unsigned long index) domstring replaceitem(in domstring newitem, in unsigned long index) domstring removeitem(in unsigned long index) domstring appenditem(in domstring newitem) properties readonly unsigned long numberofitems readonly unsigned long length ...
...
getitem(in unsigned long index) domstring returns the specified item from the list.
SVGStylable - Web APIs
interface overview also implement none methods cssvalue
getpresentationattribute(in domstring name) properties readonly svganimatedstring classname readonly cssstyledeclaration style normative document svg 1.1 (2nd edition) properties name type description classname svganimatedstring corresponds to attribute class on the given element.
... methods name & arguments return description
getpresentationattribute(in domstring name) cssvalue returns the base (i.e., static) value of a given presentation attribute as an object of type cssvalue.
SVGURIReference - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgurireference" tar
get="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgurireference</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgurireference.href read on...
...on
getting href, an svganimatedstring object is returned that reflects the href attribute, and if the element is defined to support the deprecated xlink:href attribute, additionally reflects that deprecated attribute.
Screen Wake Lock API - Web APIs
get an instance of the object by calling wakelock.request.
... document.addeventlistener('visibilitychange', () => { if (wakelock !== null && document.visibilitystate === 'visible') { wakelock = await navigator.wakelock.request('screen'); } }); putting it all to
gether you can find the complete code on github here.
ScriptProcessorNode.bufferSize - Web APIs
ueryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function
getdata() { request = new xmlhttprequest(); request.open('
get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } //...
...is the song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.
getchanneldata(channel); var outputdata = outputbuffer.
getchanneldata(channel); // loop through the 4096 samples for (var sample = 0; sample < inputbuffer.length; sample++) { // make output equal to the same as the input outputdata[sample] = inputdata[sample]; // add noise to each output sample outputdata[sample] += ((math.random() * 2) - 1) * 0.2; } } } g...
ScriptProcessorNode - Web APIs
ueryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function
getdata() { request = new xmlhttprequest(); request.open('
get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } //...
...is the song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.
getchanneldata(channel); var outputdata = outputbuffer.
getchanneldata(channel); // loop through the 4096 samples for (var sample = 0; sample < inputbuffer.length; sample++) { // make output equal to the same as the input outputdata[sample] = inputdata[sample]; // add noise to each output sample outputdata[sample] += ((math.random() * 2) - 1) * 0.2; } } } g...
Selection.containsNode() - Web APIs
console.log(window.
getselection().containsnode(document.body, true)); find the hidden word in this example, a message appears when you select the secret word.
... html <p>can you find the secret word?</p> <p>hmm, where <span id="secret" style="color:transparent">secret</span> could it be?</p> <p id="win" hidden>you found it!</p> javascript const secret = document.
getelementbyid('secret'); const win = document.
getelementbyid('win'); // listen for selection changes document.addeventlistener('selectionchange', () => { const selection = window.
getselection(); const found = selection.containsnode(secret); win.toggleattribute('hidden', !found); }); result specifications specification status comment selection apithe definition of 'selection.containsnode()' in that specification.
Selection.deleteFromDocument() - Web APIs
upon clicking the button, the window.
getselection() method
gets the selected text, and the deletefromdocument() method removes it.
...once you do, you can remove the selected content by clicking the button below.</p> <button>delete selected text</button> javascript let button = document.queryselector('button'); button.addeventlistener('click', deleteselection); function deleteselection() { let selection = window.
getselection(); selection.deletefromdocument(); } result specifications specification status comment selection apithe definition of 'selection.deletefromdocument()' in that specification.
ServiceWorker.onstatechange - Web APIs
} else if (registration.waiting) { serviceworker = registration.waiting; document.queryselector('#kind').textcontent = 'waiting'; } else if (registration.active) { serviceworker = registration.active; document.queryselector('#kind').textcontent = 'active'; } if (serviceworker) { logstate(serviceworker.state); serviceworker.addeventlistener('statechange', function(e) { logstate(e.tar
get.state); }); } note that when statechange fires, the service worker's references may have changed.
...this is because the statechange // event
gets queued, meanwhile the underlying worker may have gone into the waiting // state and will be immediately activated if possible.
ServiceWorkerContainer.startMessages() - Web APIs
explanation by default, all messages sent from a page's controlling service worker to the page (using client.postmessage()) are queued while the page is loading, and
get dispatched once the page's html document has been loaded and parsed (i.e.
...it's possible to start dispatching these messages earlier by calling serviceworkercontainer.startmessages(), for example if you've invoked a message handler using eventtar
get.addeventlistener() before the page has finished loading, but want to start processing the messages right away.
ServiceWorkerContainer - Web APIs
serviceworkercontainer.
getregistration()
gets a serviceworkerregistration object whose scope matches the provided document url.
... serviceworkercontainer.
getregistrations() returns all serviceworkerregistration objects associated with a serviceworkercontainer in an array.
SpeechSynthesisUtterance.onboundary - Web APIs
}; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.
getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].
getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onboundary = function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onboundary' in that specification.
SpeechSynthesisUtterance.onend - Web APIs
}; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.
getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].
getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onend = function(event) { console.log('utterance has finished being spoken after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onend' in that specification.
SpeechSynthesisUtterance.onerror - Web APIs
}; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.
getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].
getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onerror' in that specification.
SpeechSynthesisUtterance.onmark - Web APIs
}; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.
getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].
getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onmark = function(event) { console.log('a mark was reached: ' + event.name); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onmark' in that specification.
SpeechSynthesisUtterance.onpause - Web APIs
}; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.
getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].
getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onpause = function(event) { console.log('speech paused after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onpause' in that specification.
SpeechSynthesisUtterance.onresume - Web APIs
}; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.
getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].
getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onresume = function(event) { console.log('speech resumed after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onresume' in that specification.
SpeechSynthesisUtterance.onstart - Web APIs
}; examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.
getvoices(); ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].
getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onstart = function(event) { console.log('we have started uttering this speech: ' + event.utterance.text); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onstart' in that specification.
SpeechSynthesisVoice - Web APIs
function populatevoicelist() { voices = synth.
getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); }...
... } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].
getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); utterthis.onpause = function(event) { var char = event.utterance.text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.text + '", which is "' + char + '".'); ...
Storage.key() - Web APIs
syntax var akeyname = storage.key(index); parameters index an integer representing the number of the key you want to
get the name of.
... examples the following function iterates over the local storage keys: function foreachkey(callback) { for (var i = 0; i < localstorage.length; i++) { callback(localstorage.key(i)); } } the following function iterates over the local storage keys and
gets the value set for each key: for(var i =0; i < localstorage.length; i++){ console.log(localstorage.
getitem(localstorage.key(i))); } note: for a real world example, see our web storage demo.
StorageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/storageevent" tar
get="_top"><rect x="116" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">storageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} method overview void initstorageevent( in domstring type, in boolean canbubble, in boolean cancelable, in domstring key, in domstring oldvalue, in domstring newvalue, in usvstring url, in storage storagearea ); attributes attribute type description key domstring represents the key changed.
StorageManager - Web APIs
you can
get a reference to this interface using either navigator.storage or workernavigator.storage.
... specifications specification status comment stora
gethe definition of 'storagemanger' in that specification.
Streams API - Web APIs
there are more advantages too — you can detect when streams start or end, chain streams to
gether, handle errors and cancel streams as required, and react to the speed of the stream is being read at.
...for example, the response body returned by a successful fetch request can be exposed as a readablestream, and you can then read it using a reader created with readablestream.
getreader(), cancel it with readablestream.cancel(), etc.
SubtleCrypto.deriveKey() - Web APIs
/*
get some key material to use as input to the derivekey method.
...*/ function
getkeymaterial() { let password = window.prompt("enter your password"); let enc = new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), "pbkdf2", false, ["derivebits", "derivekey"] ); } async function encrypt(plaintext, salt, iv) { let keymaterial = await
getkeymaterial(); let key = await window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-256" }, keymaterial, { "name": "aes-gcm", "length": 256}, true, [ "encrypt", "decrypt" ] ); return window.crypto.subtle.encrypt( { name: "aes-gcm", iv: iv }, key, plaintext ); } specifications ...
SyncEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/extendableevent" tar
get="_top"><rect x="116" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,25 276,20 276,30 266,25" stroke="#d4dde4" fill="none"/><line x1="276" y1="25" x2="306" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/syncevent" tar
get="_top"><rect x="306" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="351" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">syncevent</text></a><...
TaskAttributionTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" tar
get="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25"...
... stroke="#d4dde4"/><a xlink:href="/docs/web/api/taskattributiontiming" tar
get="_top"><rect x="201" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">taskattributiontiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties taskattributiontiming.containertype read only returns the type of frame container, one of iframe, embed, or object.
TextEncoder.prototype.encodeInto() - Web APIs
this is potentially more performant than the older encode() method especially when the tar
get buffer is a view into a wasm heap.
...if not, reallocate the tar
get buffer to written + (s.length - read) * 3 and then convert the rest by taking a substring of s starting from index read and a subbuffer of the tar
get buffer starting from index written.
TextMetrics - Web APIs
html <canvas id="canvas" width="550" height="500"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); const baselinesabovealphabetic = ['fontboundingboxascent', 'actualboundingboxascent', 'emheightascent', 'hangingbaseline']; const baselinesbelowalphabetic = ['ideographicbaseline', 'emheightdescent', 'actualboundingboxdescent', 'fontboundingboxdescent']; const baselines = [...baselinesabovealphabetic...
... it can therefore be useful to use the sum of actualboundingboxleft and actualboundingboxright as a more accurate way to
get the absolute text width: const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); const text = 'abcdefghijklmnop'; ctx.font = 'italic 50px serif'; const textmetrics = ctx.measuretext(text); console.log(textmetrics.width); // 459.8833312988281 console.log(math.abs(textmetrics.actualboundingboxleft) + math.abs(textmetrics.actualboundingboxright)); // 462...
TextTrack - Web APIs
properties this interface also inherits properties from eventtar
get.
... methods this interface also inherits methods from eventtar
get.
TimeEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/timeevent" tar
get="_top"><rect x="116" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="161" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">timeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties timeevent.detail read only is a long that specifies some detail information about the event, depending on the type of the event.
TouchEvent.touches - Web APIs
touches is a read-only touchlist listing all the touch objects for touch points that are currently in contact with the touch surface, regardless of whether or not they've changed or what their tar
get element was at touchstart time.
... syntax var touches = touchevent.touches; return value touches a touchlist listing all the touch objects for touch points that are still in contact with the touch surface, regardless of whether or not they've changed or what their tar
get element was at touchstart time.
Supporting both TouchEvent and MouseEvent - Web APIs
consequently, if an application does not want mouse events fired on a specific touch tar
get element, the element's touch event handlers should call preventdefault() and no additional mouse events will be dispatched.
...canceled during an interaction, no mouse or click events will be fired, and the resulting sequence of events would just be: touchstart zero or more touchmove events, depending on movement of the finger(s) touchend community touch events community group mail list w3c #touchevents irc channel related topics and resources touch events overview using touch events touch and mouse (to
gether again for the first time) ...
TransformStream - Web APIs
const tes = { start(){this.encoder = new textencoder()}, transform(chunk, controller) { controller.enqueue(this.encoder.encode(chunk)) } } let _jstes_wm = new weakmap(); /* info holder */ class jstextencoderstream extends transformstream { constructor() { let t = {...tes} super(t) _jstes_wm.set(this, t) }
get encoding() {return _jstes_wm.
get(this).encoder.encoding} } similarly, textdecoderstream can be written as such: const tes = { start(){ this.decoder = new textdecoder(this.encoding, this.options) }, transform(chunk, controller) { controller.enqueue(this.decoder.decode(chunk)) } } let _jstds_wm = new weakmap(); /* info holder */ class jstextdecoderstream extends transformstream {...
... constructor(encoding = 'utf-8', {...options} = {}) { let t = {...tds, encoding, options} super(t) _jstes_wm.set(this, t) }
get encoding() {return _jstds_wm.
get(this).decoder.encoding}
get fatal() {return _jstds_wm.
get(this).decoder.fatal}
get ignorebom() {return _jstds_wm.
get(this).decoder.ignorebom} } chaining multiple readablestreams to
gether this is a useful one, where multiple streams can be conjoined.
UIEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" tar
get="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde...
...4"/><a xlink:href="/docs/web/api/uievent" tar
get="_top"><rect x="116" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructors uievent() creates a uievent object.
URL - Web APIs
be sure to check to see if any of your tar
get browsers require this to be prefixed.
... to
get the search params from the current window's url, you can do this: // https://some.site/?id=123 const parsedurl = new url(window.location.href); console.log(parsedurl.searchparams.
get("id")); // "123" the tostring() method of url just returns the value of the href property, so the constructor can be used to normalize and encode a url directly.
URL API - Web APIs
you can also look up the values of individual parameters with the urlsearchparams object's
get() method: let addr = new url("https://mysite.com/login?user=someguy&page=news"); try { loginuser(addr.searchparams.
get("user")); gotopage(addr.searchparams.
get("page")); } catch(err) { showerrormessage(err); } for example, in the above snippet, the username and tar
get page are taken from the query and passed to appropriate functions that are used by the site's code to log in and route th...
... function filltablewithparameters(tbl) { let url = new url(document.location.href); url.searchparams.sort(); let keys = url.searchparams.keys(); for (let key of keys) { let val = url.searchparams.
get(key); let row = document.createelement("tr"); let cell = document.createelement("td"); cell.innertext = key; row.appendchild(cell); cell = document.createelement("td"); cell.innertext = val; row.appendchild(cell); tbl.appendchild(row); }; } a working version of this example can be found on glitch.
VideoPlaybackQuality.creationTime - Web APIs
example this example calls
getvideoplaybackquality() to obtain a videoplaybackquality object, then determines what percentage of frames have been lost by either corruption or being dropped.
... var videoelem = document.
getelementbyid("my_vid"); var quality = videoelem.
getvideoplaybackquality(); if ((quality.corruptedvideoframes + quality.droppedvideoframes)/quality.totalvideoframes > 0.1) { lostframesthresholdexceeded(); } specifications specification status comment media playback qualitythe definition of 'videoplaybackquality.corruptedvideoframes' in that specification.
VideoPlaybackQuality.droppedVideoFrames - Web APIs
example this example calls
getvideoplaybackquality() to obtain a videoplaybackquality object, then determines what percentage of frames have been dropped.
... var videoelem = document.
getelementbyid("my_vid"); var percentelem = document.
getelementbyid("percent"); var quality = videoelem.
getvideoplaybackquality(); var droppercent = (quality.droppedvideoframes/quality.totalvideoframes)*100; percentelem.innertext = math.trunc(droppercent).tostring(10); specifications specification status comment media playback qualitythe definition of 'videoplaybackquality.droppedvideoframes' in that specification.
VideoPlaybackQuality.totalVideoFrames - Web APIs
example this example calls
getvideoplaybackquality() to obtain a videoplaybackquality object, then determines what percentage of frames have been lost by either corruption or being dropped.
... var videoelem = document.
getelementbyid("my_vid"); var quality = videoelem.
getvideoplaybackquality(); if ((quality.corruptedvideoframes + quality.droppedvideoframes)/quality.totalvideoframes > 0.1) { lostframesthresholdexceeded(); } a similar algorithm might be used to attempt to switch to a lower-resolution video that requires less bandwidth, in order to avoid dropping frames.
VideoTrack.id - Web APIs
this id can be used with the videotracklist.
gettrackbyid() method to locate a specific track within the media associated with a media element.
... syntax var trackid = videotrack.id; value a domstring which identifies the track, suitable for use when calling
gettrackbyid() on an videotracklist such as the one specified by a media element's videotracks property.
Visual Viewport API - Web APIs
let pendingupdate = false; function viewporthandler(event) { if (pendingupdate) return; pendingupdate = true; requestanimationframe(() => { pendingupdate = false; var layoutviewport = document.
getelementbyid('layoutviewport'); // since the bar is position: fixed we need to offset it by the // visual viewport's offset from the layout viewport origin.
... var viewport = event.tar
get; var offsetleft = viewport.offsetleft; var offsettop = viewport.height - layoutviewport.
getboundingclientrect().height + viewport.offsettop; // you could also do this by setting style.left and style.top if you // use width: 100% instead.
WEBGL_color_buffer_float - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... examples var ext = gl.
getextension('webgl_color_buffer_float'); gl.renderbufferstorage(gl.renderbuffer, ext.rbga32f_ext, 256, 256); specifications specification status comment webgl_color_buffer_floatthe definition of 'webgl_color_buffer_float' in that specification.
WEBGL_compressed_texture_atc - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... examples var ext = gl.
getextension('webgl_compressed_texture_atc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgb_atc_webgl, 512, 512, 0, texturedata); specifications specification status comment webgl_compressed_texture_atcthe definition of 'webgl_compressed_texture_atc' in that specification.
WEBGL_compressed_texture_etc - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... examples var ext = gl.
getextension('webgl_compressed_texture_etc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgba8_etc2_eac, 512, 512, 0, texturedata); specifications specification status comment webgl_compressed_texture_etcthe definition of 'webgl_compressed_texture_etc' in that specification.
WEBGL_compressed_texture_etc1 - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... examples var ext = gl.
getextension('webgl_compressed_texture_etc1'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgb_etc1_webgl, 512, 512, 0, texturedata); specifications specification status comment webgl_compressed_texture_etc1the definition of 'webgl_compressed_texture_etc1' in that specification.
WEBGL_compressed_texture_pvrtc - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... examples var ext = gl.
getextension('webgl_compressed_texture_pvrtc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgb_pvrtc_4bppv1_img, 512, 512, 0, texturedata); specifications specification status comment webgl_compressed_texture_pvrtcthe definition of 'webgl_compressed_texture_pvrtc' in that specification...
WEBGL_compressed_texture_s3tc - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... examples var ext = ( gl.
getextension('webgl_compressed_texture_s3tc') || gl.
getextension('moz_webgl_compressed_texture_s3tc') || gl.
getextension('webkit_webgl_compressed_texture_s3tc') ); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgba_s3tc_dxt5_ext, 512, 512, 0, texturedata); gl.texparameteri(gl.texture_2d, gl.texture_mag_filter,...
WEBGL_compressed_texture_s3tc_srgb - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... examples var ext = gl.
getextension('webgl_compressed_texture_s3tc_srgb'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_srgb_s3tc_dxt1_ext, 512, 512, 0, texturedata); gl.texparameteri(gl.texture_2d, gl.texture_mag_filter, gl.linear); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear); specifications specificat...
WEBGL_debug_shaders - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... methods webgl_debug_shaders.
gettranslatedshadersource() returns the translated shader source.
WEBGL_lose_context.restoreContext() - Web APIs
syntax gl.
getextension('webgl_lose_context').restorecontext(); errors thrown invalid_operation if the context was not lost.
... examples with this method, you can simulate the webglcontextrestored event: var canvas = document.
getelementbyid('canvas'); var gl = canvas.
getcontext('webgl'); canvas.addeventlistener('webglcontextrestored', function(e) { console.log(e); }, false); gl.
getextension('webgl_lose_context').restorecontext(); specifications specification status comment webgl_lose_contextthe definition of 'webgl_lose_context.losecontext' in that specification.
WEBGL_lose_context - Web APIs
webgl extensions are available using the webglrenderingcontext.
getextension() method.
... examples with this extension, you can simulate the webglcontextlost and webglcontextrestored events: const canvas = document.
getelementbyid('canvas'); const gl = canvas.
getcontext('webgl'); canvas.addeventlistener('webglcontextlost', (event) => { console.log(event); }); gl.
getextension('webgl_lose_context').losecontext(); // webglcontextevent event with type "webglcontextlost" is logged.
WebGL2RenderingContext.copyBufferSubData() - Web APIs
syntax void gl.copybuffersubdata(readtar
get, writetar
get, readoffset, writeoffset, size); parameters readtar
get writetar
get a glenum specifying the binding point (tar
get) from whose data store should be read or written.
... size a glsizei in bytes specifying the size of the data to be copied from readtar
get to writetar
get.
WebGL2RenderingContext.endQuery() - Web APIs
the webgl2renderingcontext.endquery() method of the webgl 2 api marks the end of a given query tar
get.
... syntax void gl.endquery(tar
get); parameters tar
get a glenum specifying the tar
get of the query.
WebGLActiveInfo.name - Web APIs
the read-only webglactiveinfo.name property represents the name of the requested data returned by calling the
getactiveattrib() or
getactiveuniform() methods.
... examples var activeattrib = gl.
getactiveattrib(program, index); activeattrib.name; var activeuniform = gl.
getactiveuniform(program, index); activeuniform.name; specifications specification status comment webgl 1.0the definition of 'webglactiveinfo.name' in that specification.
WebGLActiveInfo.size - Web APIs
the read-only webglactiveinfo.size property is a number representing the size of the requested data returned by calling the
getactiveattrib() or
getactiveuniform() methods.
... examples var activeattrib = gl.
getactiveattrib(program, index); activeattrib.size; var activeuniform = gl.
getactiveuniform(program, index); activeuniform.size; specifications specification status comment webgl 1.0the definition of 'webglactiveinfo.size' in that specification.
WebGLActiveInfo.type - Web APIs
the read-only webglactiveinfo.type property represents the type of the requested data returned by calling the
getactiveattrib() or
getactiveuniform() methods.
... examples var activeattrib = gl.
getactiveattrib(program, index); activeattrib.type; var activeuniform = gl.
getactiveuniform(program, index); activeuniform.type; specifications specification status comment webgl 1.0the definition of 'webglactiveinfo.type' in that specification.
WebGLRenderbuffer - Web APIs
the webglrenderbuffer interface is part of the webgl api and represents a buffer that can contain an image, or can be source or tar
get of an rendering operation.
...when working with webglrenderbuffer objects, the following methods of the webglrenderingcontext are useful: webglrenderingcontext.bindrenderbuffer() webglrenderingcontext.createrenderbuffer() webglrenderingcontext.deleterenderbuffer() webglrenderingcontext.isrenderbuffer() examples creating a render buffer var canvas = document.
getelementbyid('canvas'); var gl = canvas.
getcontext('webgl'); var buffer = gl.createrenderbuffer(); specifications specification status comment webgl 1.0the definition of 'webglrenderbuffer' in that specification.
WebGLRenderingContext.blendColor() - Web APIs
examples to set the blend color, use: gl.blendcolor(0, 0.5, 1, 1); to
get the blend color, query the blend_color constant which returns a float32array.
... gl.
getparameter(gl.blend_color); // float32array[0, 0.5, 1, 1] specifications specification status comment webgl 1.0the definition of 'blendcolor' in that specification.
WebGLRenderingContext.blendEquation() - Web APIs
examples to set the blend equation, use: gl.blendequation(gl.func_add); gl.blendequation(gl.func_subtract); gl.blendequation(gl.func_reverse_subtract); to
get the blend equations, query the blend_equation, blend_equation_rgb and blend_equation_alpha constants which return gl.func_add, gl.func_subtract, gl.func_reverse_subtract, or if the ext_blend_minmax is enabled: ext.min_ext or ext.max_ext.
... gl.
getparameter(gl.blend_equation_rgb) === gl.func_add; // true gl.
getparameter(gl.blend_equation_alpha) === gl.func_add; // true specifications specification status comment webgl 1.0the definition of 'blendequation' in that specification.
WebGLRenderingContext.blendEquationSeparate() - Web APIs
examples to set the blend equations, use: gl.blendequationseparate(gl.func_add, gl.func_subtract); to
get the current blend equations, query the blend_equation, blend_equation_rgb and blend_equation_alpha constants which return gl.func_add, gl.func_subtract, gl.func_reverse_subtract, or if the ext_blend_minmax is enabled: ext.min_ext or ext.max_ext.
... gl.
getparameter(gl.blend_equation_rgb) === gl.func_add; // true gl.
getparameter(gl.blend_equation_alpha) === gl.func_add; // true specifications specification status comment webgl 1.0the definition of 'blendequationseparate' in that specification.
WebGLRenderingContext.canvas - Web APIs
examples canvas element given this <canvas> element: <canvas id="canvas"></canvas> you can
get back a reference to it from the webglrenderingcontext using the canvas property: var canvas = document.
getelementbyid('canvas'); var gl = canvas.
getcontext('webgl'); gl.canvas; // htmlcanvaselement offscreen canvas example using the experimental offscreencanvas object.
... var offscreen = new offscreencanvas(256, 256); var gl = offscreen.
getcontext('webgl'); gl.canvas; // offscreencanvas specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.canvas' in that specification.
WebGLRenderingContext.clear() - Web APIs
gl.clear(gl.depth_buffer_bit); gl.clear(gl.depth_buffer_bit | gl.color_buffer_bit); to
get the current clear values, query the color_clear_value, depth_clear_value, and stencil_clear_value constants.
... gl.
getparameter(gl.color_clear_value); gl.
getparameter(gl.depth_clear_value); gl.
getparameter(gl.stencil_clear_value); specifications specification status comment webgl 1.0the definition of 'clear' in that specification.
WebGLRenderingContext.clearColor() - Web APIs
examples gl.clearcolor(1, 0.5, 0.5, 3); to
get the current clear color, query the color_clear_value constant which returns a float32array.
... gl.
getparameter(gl.color_clear_value); // float32array[1, 0.5, 0.5, 1] specifications specification status comment webgl 1.0the definition of 'clearcolor' in that specification.
WebGLRenderingContext.clearDepth() - Web APIs
examples gl.cleardepth(0.5); to
get the current depth clear value, query the depth_clear_value constant.
... gl.
getparameter(gl.depth_clear_value); // 0.5 specifications specification status comment webgl 1.0the definition of 'cleardepth' in that specification.
WebGLRenderingContext.clearStencil() - Web APIs
examples gl.clearstencil(1); to
get the current stencil clear value, query the stencil_clear_value constant.
... gl.
getparameter(gl.stencil_clear_value); // 1 specifications specification status comment webgl 1.0the definition of 'clearstencil' in that specification.
WebGLRenderingContext.colorMask() - Web APIs
examples gl.colormask(true, true, true, false); to
get the current color mask, query the color_writemask constant which returns an array.
... gl.
getparameter(gl.color_writemask); // [true, true, true, false] specifications specification status comment webgl 1.0the definition of 'colormask' in that specification.
WebGLRenderingContext.createRenderbuffer() - Web APIs
return value a webglrenderbuffer object that stores data such an image, or can be source or tar
get of an rendering operation.
... examples creating a render buffer var canvas = document.
getelementbyid('canvas'); var gl = canvas.
getcontext('webgl'); var renderbuffer = gl.createrenderbuffer(); specifications specification status comment webgl 1.0the definition of 'createrenderbuffer' in that specification.
WebGLRenderingContext.depthMask() - Web APIs
examples gl.depthmask(false); to
get the current depth mask, query the depth_writemask constant which returns a boolean.
... gl.
getparameter(gl.depth_writemask); // false specifications specification status comment webgl 1.0the definition of 'depthmask' in that specification.
WebGLRenderingContext.isContextLost() - Web APIs
examples include: two or more pages are using the gpu, but to
gether place too high a demand on the gpu, so the browser tells the two contexts that they've lost the connection, then selects one of the two to restore access for.
... examples for example, when checking for program linking success, you could also check if the context is not lost: gl.linkprogram(program); if (!gl.
getprogramparameter(program, gl.link_status) && !gl.iscontextlost()) { var info = gl.
getprograminfolog(program); console.log('error linking program:\n' + info); } specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.iscontextlost' in that specification.
WebGLRenderingContext.lineWidth() - Web APIs
examples setting the line width: gl.linewidth(5);
getting the line width: gl.
getparameter(gl.line_width);
getting the range of available widths.
... gl.
getparameter(gl.aliased_line_width_range); specifications specification status comment webgl 1.0the definition of 'linewidth' in that specification.
WebGLRenderingContext.makeXRCompatible() - Web APIs
javascript the code that handles starting up graphics, switching to vr mode, and so forth looks like this: const outputcanvas = document.queryselector(".output-canvas"); const gl = outputcanvas.
getcontext("webgl"); let xrsession = null; let usingxr = false; let currentscene = "scene1"; let glstartbutton; let xrstartbutton; window.addeventlistener("load", (event) => { loadsceneresources(currentscene); glstartbutton.addeventlistener("click", handlestartbuttonclick); xrstartbutton.addeventlistener("click", handlestartbuttonclick); }); outputcanvas.addeventlistener("webglcontextlost", ...
...wsimplemessagebox("unable to transfer the game to your xr headset.", "cancel"); break; case invalidstateerror: showsimplemessagebox("you don't appear to have a compatible xr headset available.", "cancel"); break; default: handlefatalerror(err); break; } xrsession.end(); } } async function handlestartbuttonclick(event) { if (event.tar
get.classlist.contains("use-webxr") && navigator.xr) { try { xrsession = await navigator.xr.requestsession("immersive-vr"); usingxr = true; } catch(err) { xrsession = null; usingxr = false; } } startgame(); } function startgame() { currentscene = "scene1"; loadsceneresources(currentscene); /* and so on */ } this works by having two buttons, one which ...
WebGLRenderingContext.pixelStorei() - Web APIs
var tex = gl.createtexture(); gl.bindtexture(gl.texture_2d, tex); gl.pixelstorei(gl.pack_alignment, 4); to check the values for packing and unpacking of pixel data, you can query the same pixel storage parameters with webglrenderingcontext.
getparameter().
... gl.
getparameter(gl.pack_alignment); gl.
getparameter(gl.unpack_alignment); specifications specification status comment webgl 1.0the definition of 'pixelstorei' in that specification.
WebGLRenderingContext.renderbufferStorage() - Web APIs
syntax void gl.renderbufferstorage(tar
get, internalformat, width, height); parameters tar
get a glenum specifying the tar
get renderbuffer object.
... webgl 2.0the definition of '
getrenderbufferparameter' in that specification.
WebGLRenderingContext.scissor() - Web APIs
clear) // turn off scissor test again gl.disable(gl.scissor_test); to
get the current scissor box dimensions, query the scissor_box constant which returns an int32array.
... gl.scissor(0, 0, 200, 200); gl.
getparameter(gl.scissor_box); // int32array[0, 0, 200, 200] specifications specification status comment webgl 1.0the definition of 'scissor' in that specification.
WebGLRenderingContext.stencilFunc() - Web APIs
gl.enable(gl.stencil_test); gl.stencilfunc(gl.less, 0, 0b1110011); to
get the current stencil function, reference value, or other stencil information, query the following constants with
getparameter().
... gl.
getparameter(gl.stencil_func); gl.
getparameter(gl.stencil_value_mask); gl.
getparameter(gl.stencil_ref); gl.
getparameter(gl.stencil_back_func); gl.
getparameter(gl.stencil_back_value_mask); gl.
getparameter(gl.stencil_back_ref); gl.
getparameter(gl.stencil_bits); specifications specification status comment webgl 1.0the definition of 'stencilfunc' in that specification.
WebGLRenderingContext.stencilFuncSeparate() - Web APIs
gl.enable(gl.stencil_test); gl.stencilfuncseparate(gl.front, gl.less, 0.2, 1110011); to
get the current stencil function, reference value, or other stencil information, query the following constants with
getparameter().
... gl.
getparameter(gl.stencil_func); gl.
getparameter(gl.stencil_value_mask); gl.
getparameter(gl.stencil_ref); gl.
getparameter(gl.stencil_back_func); gl.
getparameter(gl.stencil_back_value_mask); gl.
getparameter(gl.stencil_back_ref); gl.
getparameter(gl.stencil_bits); specifications specification status comment webgl 1.0the definition of 'stencilfuncseparate' in that specification.
WebGLRenderingContext.stencilMask() - Web APIs
examples gl.stencilmask(110101); to
get the current stencil masks, query the stencil_writemask, stencil_back_writemask, or stencil_bits constants.
... gl.
getparameter(gl.stencil_writemask); // 110101 gl.
getparameter(gl.stencil_back_writemask); // 110101 gl.
getparameter(gl.stencil_bits); // 0 specifications specification status comment webgl 1.0the definition of 'stencilmask' in that specification.
WebGLRenderingContext.stencilMaskSeparate() - Web APIs
examples gl.stencilmaskseparate(gl.front, 110101); to
get the current stencil masks, query the stencil_writemask, stencil_back_writemask, or stencil_bits constants.
... gl.
getparameter(gl.stencil_writemask); // 110101 gl.
getparameter(gl.stencil_back_writemask); // 110101 gl.
getparameter(gl.stencil_bits); // 0 specifications specification status comment webgl 1.0the definition of 'stencilmaskseparate' in that specification.
WebGLRenderingContext.stencilOp() - Web APIs
gl.enable(gl.stencil_test); gl.stencilop(gl.incr, gl.decr, gl.invert); to
get the current information about stencil and depth pass or fail, query the following constants with
getparameter().
... gl.
getparameter(gl.stencil_fail); gl.
getparameter(gl.stencil_pass_depth_pass); gl.
getparameter(gl.stencil_pass_depth_fail); gl.
getparameter(gl.stencil_back_fail); gl.
getparameter(gl.stencil_back_pass_depth_pass); gl.
getparameter(gl.stencil_back_pass_depth_fail); gl.
getparameter(gl.stencil_bits); specifications specification status comment webgl 1.0the definition of 'stencilop' in that specification.
WebGLRenderingContext.stencilOpSeparate() - Web APIs
gl.enable(gl.stencil_test); gl.stencilopseparate(gl.front, gl.incr, gl.decr, gl.invert); to
get the current information about stencil and depth pass or fail, query the following constants with
getparameter().
... gl.
getparameter(gl.stencil_fail); gl.
getparameter(gl.stencil_pass_depth_pass); gl.
getparameter(gl.stencil_pass_depth_fail); gl.
getparameter(gl.stencil_back_fail); gl.
getparameter(gl.stencil_back_pass_depth_pass); gl.
getparameter(gl.stencil_back_pass_depth_fail); gl.
getparameter(gl.stencil_bits); specifications specification status comment webgl 1.0the definition of 'stencilopseparate' in that specification.
Animating textures in WebGL - Web APIs
this is actually pretty easy to do and fun to watch, so let's
get started.
...
getting access to the video the first step is to create the <video> element that we'll use to retrieve the video frames: // will set to true when video can be copied to texture var copyvideo = false; function setupvideo(url) { const video = document.createelement('video'); var playing = false; var timeupdate = false; video.autoplay = true; video.muted = true; video.loop = true; // waiting for these 2 events ensures // there is data in the video video.add...
Using textures in WebGL - Web APIs
attribute and uniform locations because we changed an attribute and added a uniform we need to look up their locations const programinfo = { program: shaderprogram, attriblocations: { vertexposition: gl.
getattriblocation(shaderprogram, 'avertexposition'), texturecoord: gl.
getattriblocation(shaderprogram, 'atexturecoord'), }, uniformlocations: { projectionmatrix: gl.
getuniformlocation(shaderprogram, 'uprojectionmatrix'), modelviewmatrix: gl.
getuniformlocation(shaderprogram, 'umodelviewmatrix'), usampler: gl.
getuniformlocation(shaderprogram, 'usampler'), }, }; dr...
... first, the code to specify the colors buffer is gone, replaced with this: // tell webgl how to pull out the texture coordinates from buffer { const num = 2; // every coordinate composed of 2 values const type = gl.float; // the data in the buffer is 32 bit float const normalize = false; // don't normalize const stride = 0; // how many bytes to
get from one set to the next const offset = 0; // how many bytes inside the buffer to start from gl.bindbuffer(gl.array_buffer, buffers.texturecoord); gl.vertexattribpointer(programinfo.attriblocations.texturecoord, num, type, normalize, stride, offset); gl.enablevertexattribarray(programinfo.attriblocations.texturecoord); } then add code to specify the texture to map onto the faces...
WebGL tutorial - Web APIs
the examples provided should give you some clear ideas what you can do with webgl and will provide code snippets that may
get you started in building your own content.
... in this tutorial
getting started with webgl how to set up a webgl context.
Web Speech API - Web APIs
you can
get these spoken by passing them to the speechsynthesis.speak() method.
... window.speechsynthesis specced out as part of a [nointerfaceobject] interface called speechsynthesis
getter, and implemented by the window object, the speechsynthesis property provides access to the speechsynthesis controller, and therefore the entry point to speech synthesis functionality.
Window.console - Web APIs
console.log("an error occurred while loading the content"); the next example logs an object to the console, with the object's fields expandable using disclosure wid
gets: console.dir(someobject); see usage in console for more thorough examples.
... currently there are many implementation differences among browsers, but work is being done to bring them to
gether and make them more consistent with one another.
Window.customElements - Web APIs
the customelements read-only property of the window interface returns a reference to the customelementregistry object, which can be used to register new custom elements and
get information about previously registered custom elements.
... examples the most common example you'll see of this property being used is to
get access to the customelementregistry.define() method to define and register a new custom element, e.g.: let customelementregistry = window.customelements; customelementregistry.define('my-custom-element', mycustomelement); however, it is usually shortened to something like the following: customelements.define('element-details', class extends htmlelement { constructor() { super(); const template = document .
getelementbyid('element-details-template') .content; const shadowroot = this.attachshadow({mode: 'open'}) .appendchild(template.clonenode(true)); } } ); see our web-components-examples repo for more usage examples.
Window.localStorage - Web APIs
localstorage is similar to sessionstorage, except that while data stored in localstorage has no expiration time, data stored in sessionstorage
gets cleared when the page session ends — that is, when the page is closed.
... localstorage.setitem('mycat', 'tom'); the syntax for reading the localstorage item is as follows: const cat = localstorage.
getitem('mycat'); the syntax for removing the localstorage item is as follows: localstorage.removeitem('mycat'); the syntax for removing all the localstorage items is as follows: localstorage.clear(); note: please refer to the using the web storage api article for a full example.
Window.name - Web APIs
gets/sets the name of the window's browsing context.
... syntax string = window.name; window.name = string; example <script> // open a tab with a specific browsing context name const othertab = window.open("url1", "_blank"); if (othertab) othertab.name = "other-tab"; </script> <a href="url2" tar
get="other-tab">this link will be opened in the other tab.</a> notes the name of the window is used primarily for setting tar
gets for hyperlinks and forms.
Window.openDialog() - Web APIs
passing extra parameters to the dialog to pass extra parameters into the dialog, you can simply supply them after the windowfeatures parameter: opendialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98); the extra parameters will then
get packed into a property named arguments of type array, and this property
gets added to the newly opened dialog window.
...the variables specified in the javascript code which
gets loaded from the dialog), it is not possible to pass return values back past the close operation using globals (or any other constructs).
Window.requestAnimationFrame() - Web APIs
be sure to always use the first argument (or some other method for
getting the current time) to calculate how much the animation will progress in a frame, otherwise the animation will run faster on high refresh rate screens.
... const element = document.
getelementbyid('some-element-you-want-to-animate'); let start; function step(timestamp) { if (start === undefined) start = timestamp; const elapsed = timestamp - start; // `math.min()` is used here to make sure that the element stops at exactly 200px.
Window: storage event - Web APIs
console.log(json.parse(window.localstorage.
getitem('samplelist'))); }); the same action can be achieved using the onstorage event handler property: window.onstorage = () => { // when local storage changes, dump the list to // the console.
... console.log(json.parse(window.localstorage.
getitem('samplelist'))); }; specifications specification status html living standardthe definition of 'storage' in that specification.
WindowOrWorkerGlobalScope.btoa() - Web APIs
so if you pass a string into btoa() containing characters that occupy more than one byte, you will
get an error, because this is not considered binary data: const ok = "a"; console.log(ok.codepointat(0).tostring(16)); // 61: occupies < 1 byte const notok = "✓" console.log(notok.codepointat(0).tostring(16)); // 2713: occupies > 1 byte console.log(btoa(ok)); // yq== console.log(btoa(notok)); // error if you need to encode unicode text as ascii using btoa(), one option is to convert the st...
...creation of windowbase64 (properties where on the tar
get before it).
Worker - Web APIs
properties inherits properties from its parent, eventtar
get, and implements properties from abstractworker.
... methods inherits methods from its parent, eventtar
get, and implements methods from abstractworker.
WorkerGlobalScope - Web APIs
properties this interface inherits properties from the eventtar
get interface and windoworworkerglobalscope and windoweventhandlers mixins.
... methods this interface inherits methods from the eventtar
get interface and windoworworkerglobalscope and windoweventhandlers mixins.
WritableStreamDefaultWriter.close() - Web APIs
inside this function it calls the stream's
getwriter() method, which returns an instance of writablestreamdefaultwriter.
... const list = document.queryselector('ul'); function sendmessage(message, writablestream) { // defaultwriter is of type writablestreamdefaultwriter const defaultwriter = writablestream.
getwriter(); const encoder = new textencoder(); const encoded = encoder.encode(message, { stream: true }); encoded.foreach((chunk) => { defaultwriter.ready .then(() => { return defaultwriter.write(chunk); }) .then(() => { console.log("chunk written to sink."); }) .catch((err) => { console.log("chunk error:", err); }); }); // call ready agai...
XDomainRequest.onprogress - Web APIs
note: while handling this event, you can look at xdomainrequest.responsetext to
get the response so far.
... once loading is complete, the xdomainrequest.onload event handler
gets called.
XRHandedness - Web APIs
function updateinputsources(session, frame, refspace) { for (let source of session.inputsources) { if (source.gripspace) { let grippose = frame.
getpose(source.gripspace, refspace); if (grippose) { myrenderhandobject(grippose, inputsource.handedness); } } } } this function, which would be called every animation frame (or possibly just periodically, depending on the degree of smoothness required and any performance constraints), scans the list of input sources looking for any which have a gripspace which isn't null...
... if gripspace is non-null, the function proceeds to
get the pose for the gripspace transformed into the current reference space.
XRInputSource.gripSpace - Web APIs
for example, only inputs whose tar
getraymode is tracked-pointer provide a gripspace.
... for (let source in xrsession.inputsources) { if (source.gripspace) { let grippose = frame.
getpose(source.gripspace, xrrefspace); if (grippose) { mydrawmeshusingtransform(controllermesh, grippose.transform.matrix); } } } for each input source which has a value for gripspace, this loop obtains the xrpose representing the position and orientation that are described by gripspace.
XRInputSource.handedness - Web APIs
function updateinputsources(session, frame, refspace) { for (let source of session.inputsources) { if (source.gripspace) { let grippose = frame.
getpose(source.gripspace, refspace); if (grippose) { myrenderhandobject(grippose, inputsource.handedness); } } } } this function, which would be called every animation frame (or possibly just periodically, depending on the degree of smoothness required and any performance constraints), scans the list of input sources looking for any which have a gripspace which isn't null...
... if gripspace is non-null, the function proceeds to
get the pose for the gripspace transformed into the current reference space.
XRInputSourceArray.entries() - Web APIs
examples this example snippet
gets the list of inputs for a session and tries to handle each type of input device it supports using.
... let sources = xrsession.inputsources; for (let input of sources.entries()) { if (input.gamepad) { checkgamepad(input.gamepad); } else { if (input.tar
getraymode === "tracked-pointer" && input.handedness === player.handedness) { /* handle main hand controller */ handlemainhandinput(input); } else { /* handle other inputs */ } } } for each input in the llist, gamepad inputs are dispatched to a checkgamepad() with the input's gamepad object, taken from its gamepad property, as an input for other devices, we look for tracked-pointer devices in the player's main hand, dispatching those to a handlemainhandinput() method.
XRInputSourceArray.forEach() - Web APIs
examples this example snippet
gets the list of inputs for a session and tries to handle each type of input device it supports using.
... let inputsources = xrsession.inputsources; inputsources.foreach((input) => { if (input.gamepad) { checkgamepad(input.gamepad); } else { if (input.tar
getraymode === "tracked-pointer" && input.handedness === player.handedness) { /* handle main hand controller */ handlemainhandinput(input); } else { /* handle other inputs */ } } }); for each input in the llist, the callback dispatches gamepad inputs to a checkgamepad() with the input's gamepad object, taken from its gamepad property, as an input for other devices, we look for tracked-pointer devices in the player's main hand, dispatching those to a handlemainhandinput() method.
XRInputSourceEvent.inputSource - Web APIs
the device type is identified by looking at the xrinputsource in inputsource and its tar
getraymode property.
... xrsession.onselect = event => { let source = event.inputsource; if (source.tar
getraymode == "gaze") { /* handle selection using a gaze input */ } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceevent.inputsource' in that specification.
XRInputSourceEvent - Web APIs
because this is an event frame, not an animation frame, you cannot call the xrframe method
getviewerpose() on it; instead, use
getpose().
... xrsession.addeventlistener("select", event => { let tar
getraypose = event.frame.
getpose(event.inputsource.tar
getrayspace, myrefspace); if (tar
getraypose) { let hit = myhittest(tar
getraypose.transform); if (hit) { /* handle the hit */ } } }); specifications specification status comment webxr device apithe definition of 'xrinputsourceevent' in that specification.
XRInputSourcesChangeEvent.added - Web APIs
it looks for new and removed devices whose tar
getraymode is tracked-pointer.
... xrsession.oninputsourcescchange = event => { for (let input of event.added) { if (input.tar
getraymode == "tracked-pointer") { addedpointerdevice(input); } } for (let input of event.removed) { if (input.tar
getraymode == "tracked-pointer") { removedpointerdevice(input); } } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeevent.added' in that specification.
XRInputSourcesChangeEvent.removed - Web APIs
it looks for new and removed devices whose tar
getraymode is tracked-pointer.
... xrsession.oninputsourcescchange = event => { for (let input of event.added) { if (input.tar
getraymode == "tracked-pointer") { addedpointerdevice(input); } } for (let input of event.removed) { if (input.tar
getraymode == "tracked-pointer") { removedpointerdevice(input); } } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeevent.removed' in that specification.
XRPose - Web APIs
to obtain the xrpose for the xrspace used as the local coordinate system of an object, call xrframe.
getpose(), specifying that local xrspace and the space to which you wish to convert: thepose = xrframe.
getpose(localspace, basespace); the pose for a viewer (or camera) is represented by the xrviewerpose subclass of xrpose.
... this is obtained using xrframe.
getviewerpose() instead of
getpose(), specifying a reference space which has been adjusted to position and orient the node to provide the desired viewing position and angle: viewerpose = xrframe.
getviewerpose(adjreferencespace); here, adjreferencespace is a reference space which has been updated using the base frame of reference for the frame and any adjustments needed to position the viewer based on movement or rotation which is being supplied from a source other than the xr device, such as keyboard or mouse inputs.
XRRenderState - Web APIs
the xrrenderstate interface of the webxr device api contains configurable values which affect how the imagery generated by an xrsession
gets composited.
... these properties include the range of distances from the viewer within which content should be rendered, the vertical field of view (for inline presentations), and a reference to the xrwebgllayer being used as the tar
get for rendering the scene prior to it being presented on the xr device's display or displays.
XRRigidTransform.position - Web APIs
e("bounded-floor").then((refspace) => { refspacecreated(refspace); }).catch(() => { session.requestreferencespace("local-floor").then(refspacecreated); }); } else { session.requestreferencespace("viewer").then(refspacecreated); } } function refspacecreated(refspace) { if (immersivesession) { xrreferencespace = refspace; } else { xrreferencespace = refspace.
getoffsetreferencespace( new xrrigidtransform({y: -1.5}); ); } xrsession.requestanimationframe(onframe); } after setting up the graphics context for webxr use, this begins by looking to see if a variable immersivesession is true; if so, we first request a bounded-floor reference space.
... in all cases, once the space has been obtained, it
gets passed into the refspacecreated() function.
XRRigidTransform - Web APIs
xrrigidtransform is used to specify transforms throughout the webxr apis, including: the offset and orientation relative to the parent reference space to use when creating a new reference space with
getoffsetreferencespace().
... xrsession.requestreferencespace(refspacetype) .then((refspace) => { xrreferencespace = refspace; xrreferencespace = xrreferencespace.
getoffsetreferencespace( new xrrigidtransform(viewerstartposition, cubeorientation)); animationframerequestid = xrsession.requestanimationframe(drawframe); specifications specification status comment webxr device apithe definition of 'xrrigidtransform' in that specification.
XRSession.onsqueezestart - Web APIs
examples this snippet of code adds a simple handler for the squeezestart event, which responds only to events on the user's dominant hand by
getting the tar
get ray, then calling a function findobjectusingray() to identify the object that the user is pointing at.
... xrsession.onsqueezestart = event => { if (event.inputsource.handedness == user.handedness) { let tar
getraypose = event.frame.
getpose(event.inputsource.tar
getrayspace, myrefspace; if (tar
getraypose) { user.heldobject = findobjectusingray(tar
getraypose.transform); } } }; specifications specification status comment webxr device apithe definition of 'xrsession.onsqueezestart' in that specification.
XRSession: select event - Web APIs
the handler fetches the pose representing the tar
get ray for tracked-pointer inputs and sends the pose's transform to a function called myhandleselectwithray().
... xrsession.addeventlistener("select", event => { if (event.inputsource.tar
getraymode == "tracked-pointer") { let tar
getraypose = event.frame.
getpose(event.inputsource.tar
getrayspace, myrefspace); if (tar
getraypose) { myhandleselectwithray(tar
getraypose.transform); } } }); you can of course also set up a handler for select events by setting the xrsession object's onselect event handler property to a function that handles the event: xrsession.onselect = event => { if (event.inputsource.tar
getraymode == "tracked-pointer") { let tar
getraypose = event.frame.
getpose(event.inputsource.tar
getrayspace, myrefspace); if (tar
getraypose) { myhandleselectwithray(tar
getraypose.transform); } } }; spec...
XRSpace - Web APIs
properties the xrspace interface defines no properties of its own; however, it does inherit the properties of its parent interface, eventtar
get.
...however, it inherits the methods of eventtar
get, its parent interface.
XRViewerPose.views - Web APIs
examples in this example—part of the code to render an xrframe,
getviewerpose() is called to
get an xrviewerpose using the same reference space the code is using as its base reference space.
... let pose = frame.
getviewerpose(xrreferencespace); if (pose) { let gllayer = xrsession.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebuffer); gl.clearcolor(0, 0, 0, 1); gl.cleardepth(1); gl.clear(gl.color_buffer_bit, gl.depth_buffer_bit); for (let view of pose.views) { let viewport = gllayer.
getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); /* render the scene for the eye view.eye */ } } passing each view to
getviewport() returns the webgl viewport to apply in order to cause the rendered output to be positioned ...
XRViewport - Web APIs
these values may be passed directly into the webglrenderingcontext.viewport() method: let xrviewport = xrwebgllayer.
getviewport(xrview); gl.viewport(xrviewport.x, xrviewport.y, xrviewport.width, xrviewport.height); example this example sets up an animation frame callback using requestanimationframe().
... xrsession.requestanimationframe((time, xrframe) => { let viewerpose = xrframe.
getviewerpose(xrreferencespace); gl.bindframebuffer(xrwebgllayer.framebuffer); for (xrview of viewerpose.views) { let xrviewport = xrwebgllayer.
getviewport(xrview); gl.viewport(xrviewport.x, xrviewport.y, xrviewport.width, xrviewport.height); // now we can use webgl to draw into a viewport matching // the viewer's needs } }); specifications specification status comment webxr device apithe definition of 'xrviewport' in that specification.
XRWebGLLayer.framebuffer - Web APIs
calling functions such as framebuffertexture2d(), framebufferrenderbuffer(), deleteframebuffer(), or
getframebufferattachmentparameter() on an opaque framebuffer results in the webgl error invalid_operation (0x0502).
... examples this example
gets the xrwebgllayer for a session and then passes its framebuffer into the webgl context's bindframebuffer() function.
XRWebGLLayerInit.antialias - Web APIs
example in this example, before creating a new xrwebgllayer to use for rendering, the value of a user preference from a configuration interface is obtained using a function called
getpreferencevalue() to determine whether the user has enabled or disabled anti-aliasing support; this is passed into the constructor.
... let options = { antialias:
getpreferencevalue("antialiasing") }; let gllayer = new xrwebgllayer(xrsession, gl, options); if (gllayer) { xrsession.updaterenderstate({ baselayer: gllayer }); } offering the user features such as the ability to enable or disable things like anti-aliasing can provide them with optiions to try when your app isn't performing as well as they'd like.
ARIA guides - Accessibility
a few guidelines to follow that ensure better accessibility, like using drag and drop for placement of the wid
gets.
... error handling in forms labeling wid
gets labeling composite wid
gets and regions managing focus in composite wid
gets (aria-activedescendant vs roving tabindex) using landmark roles handling dynamic updates & live regions virtual vs.
Using the alert role - Accessibility
the pseudo code snippet below illustrates this approach: <p id="forminstruction">you must select at least 3 options</p> // when the user tries to submit the form with less than 3 checkboxes selected: document.
getelementbyid("forminstruction").setattribute("role", "alert"); example 4: making an element with an alert role visible if an element already has role="alert" and is initially hidden using css, making it visible will cause the alert to fire as if it was just added to the page.
... .hidden { display:none; } <p id="expirationwarning" role="alert" class="hidden">your log in session will expire in 2 minutes</p> // removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert: document.
getelementbyid("expirationwarning").classname = ""; working examples: alert role example using an aria alert box alert example using a modal aria dialog box notes using the alert role on an element implies that element has aria-live="assertive".
Using the aria-activedescendant attribute - Accessibility
description the aria-activedescendant attribute contains the id of the currently active child object that is part of a composite wid
get within the document object model.
...as the name specifies, it helps in managing the current active child of the composite wid
get.
Using the aria-describedby attribute - Accessibility
it is used to establish a relationship between wid
gets or groups and text that described them.
... the aria-describedby attribute is not used only for form elements; it is also used to associate static text with wid
gets, groups of elements, panes, regions that have a heading, definitions, and more.
Using the aria-invalid attribute - Accessibility
the snippet below shows a very simple validation function, which only checks for the presence of a particular character (in the real world, validation will likely be more sophisticated): function checkvalidity(aid, asearchterm, amsg){ var elem = document.
getelementbyid(aid); var invalid = (elem.value.indexof(asearchterm) < 0); if (invalid) { elem.setattribute("aria-invalid", "true"); updatealert(amsg); } else { elem.setattribute("aria-invalid", "false"); updatealert(); } } the snippet below shows the alert functions, which add (or remove) the error message: function updatealert(msg) { var oldaler...
...t = document.
getelementbyid("alert"); if (oldalert) { document.body.removechild(oldalert); } if (msg) { var newalert = document.createelement("div"); newalert.setattribute("role", "alert"); newalert.setattribute("id", "alert"); var content = document.createtextnode(msg); newalert.appendchild(content); document.body.appendchild(newalert); } } note that the alert has the aria role attribute set to "alert." working examples: alert role example (uses the aria-invalid attribute) notes when aria-invalid is used in conjunction with the aria-required attribute, aria-invalid should not be set to true before the form is submitted - only in response to validation.
Using ARIA: Roles, states, and properties - Accessibility
roles wid
get roles button checkbox gridcell link menuitem menuitemcheckbox menuitemradio option progressbar radio scrollbar searchbox separator (when focusable) slider spinbutton switch tab tabpanel textbox treeitem composite roles the techniques below describe each composite role as well as their required and optional child roles.
...ory document feed figure group heading img list listitem math none note presentation row rowgroup rowheader separator table term textbox toolbar tooltip landmark roles banner complementary contentinfo form main navigation region search live region roles alert log marquee status timer window roles alertdialog dialog states and properties wid
get attributes aria-autocomplete aria-checked aria-current aria-disabled aria-errormessage aria-expanded aria-haspopup aria-hidden aria-invalid aria-label aria-level aria-modal aria-multiline aria-multiselectable aria-orientation aria-placeholder aria-pressed aria-readonly aria-required aria-selected aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext liv...
ARIA: article role - Accessibility
it is usually set on related content items such as comments, forum posts, newspaper articles or other items grouped to
gether on one page.
... inside an application or other wid
get that causes screen readers and other assistive technologies to be in pass-through mode, an article can be used to indicate that these should switch back to treating the enclosed content as regular web content.
ARIA: img role - Accessibility
this will cause screen readers to just consider it as a single entity and describe it using the label, rather than trying to read out all the child nodes: <svg role="img" aria-label="description of your svg image"> <!-- contents of the svg image --> </svg> using role="img" to confer meaning that is obscured or implied in certain cases, assistive technology users won't be able to
get the meaning of content expressed in certain ways, through certain media, or implied in certain ways.
... for example, if you use emojis in your text, the meaning might be obvious to a sighted user, but someone using a screenreader might
get confused because the emojis might have either no text representation at all, or the alternative text might be confusing and not match the context it is being used in.
ARIA: table role - Accessibility
the cells are not focusable or selectable, though wid
gets within individual cells of the table can be interactive.
... to create an interactive wid
get that has a tabular structure, use the grid pattern instead.
Basic form hints - Accessibility
pe="checkbox" value="pinot-grigio"/> <label for="wine-3">pinot grigio</label> </li> <li> <input id="wine-4" type="checkbox" value="gewurztraminer"/> <label for="wine-4">gewürztraminer</label> </li> </ul> </form> labeling with aria the html <label> element is appropriate for form-related elements, but many form controls are implemented as a dynamic javascript wid
get, using <div>s or <span>s.
...> <div> <label for="phone">phone:</label> <input type="text" value="phone" id="phone" aria-required="false"/> </div> <div> <label for="email">* e-mail:</label> <input type="text" value="email" id="email" aria-required="true"/> </div> </form> the script that validates the form entry would look something like this: var validate = function () { var emailelement = document.
getelementbyid(emailfieldid); var valid = emailvalid(formdata.email); // returns true if valid, false otherwise emailelement.setattribute("aria-invalid", !valid); setelementbordercolour(emailelement, valid); // sets the border to red if second arg is false }; providing helpful error messages read how to use aria alerts to enhance forms.
Multipart labels: Using ARIA for labels with embedded fields inside them - Accessibility
with firefox 3, your blind users will automatically
get better accessibility from the new attribute, but the users of older browsers are not left in the dark this way.
...tdowntime shutdownunit" type="checkbox" /> <span id="labelshutdown">shut down computer after</span> <input aria-labelledby="labelshutdown shutdowntime shutdownunit" id="shutdowntime" type="text" value="10" /> <span id="shutdownunit"> minutes</span> a note for jaws 8 users jaws 8.0 has its own logic to find labels, causing it to always override the accessiblename the textbox of an html document
gets.
overview - Accessibility
warning: needs updating introduction here's a look at working examples and best practices in building accessible javascript wid
gets.
... general resources dhtml style guide provides keyboard interaction recommendations wai-aria authoring practices guide checkbox aria toggle button and tri-state checkbox examples (from "the paciello group blog") aria example checkbox wid
gets from the university of illinois menu using wai-aria roles and states with the yui menu control slider from the paciello group blog: aria slider, part one, part two, part threet (example) creating an accessible, internationalized dojo rating wid
get tabs enhancing tabview accessibility with wai-aria roles and states, from the yui blog enhancing the jquery ui tabs accordingly to wcag 2.0 and aria tab panel example here on codetalks lightbox wcag 2.0 and aria-conformant lightbox application http://majx-js.digissime.net/js/pop...
Cognitive accessibility - Accessibility
for example, dementia and alzheimer's are permanent cognitive impairments that
get progressively worse.
...solutions include providing users enough additional time to complete tasks or eliminate time constraints alto
gether.
Text labels and names - Accessibility
use a legend to label a fieldset when grouping a set of form elements to
gether with a <fieldset> element, you should include a nested <legend> element inside it, containing a clear description of the group.
... 2.4.4 link purpose (in context) (a) the purpose of each link can be determined from the link text alone or from the link text to
gether with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
Understandable - Accessibility
client-side validation is too easy to turn off or otherwise
get around, so it can't be relied on alone.
...when a simple instruction or prompt is required, you can use <label> elements for single inputs like name or age, a combination or <label>s and <fieldset>s/<legend>s for multiple inputs that go to
gether (like the elements of a date of birth or postal address).
-moz-image-rect - CSS: Cascading Style Sheets
function rotate() { var prevstyle = window.
getcomputedstyle(document.
getelementbyid("box4"), null).
getpropertyvalue("background-image"); // now that we've saved the last one, start rotating for (var i=1; i<=4; i++) { var curid = "box" + i; // shift the background images var curstyle = window.
getcomputedstyle(document.
getelementbyid(curid), null).
getpropertyvalue("background-image"); document.
getelementbyid(curid).style...
....backgroundimage = prevstyle; prevstyle = curstyle; } } this uses window.
getcomputedstyle() to fetch the style of each element, shifting it to the following element.
-webkit-touch-callout - CSS: Cascading Style Sheets
the -webkit-touch-callout css property controls the display of the default callout shown when you touch and hold a touch tar
get.
... when a tar
get is touched and held on ios, safari displays a callout information about the link.
::before (:before) - CSS: Cascading Style Sheets
; } li.done { background: #ccff99; } li.done::before { content: ''; position: absolute; border-color: #009933; border-style: solid; border-width: 0 0.3em 0.25em 0; height: 1em; top: 1.3em; left: 0.6em; margin-top: -1em; transform: rotate(45deg); width: 0.5em; } javascript var list = document.queryselector('ul'); list.addeventlistener('click', function(ev) { if (ev.tar
get.tagname === 'li') { ev.tar
get.classlist.toggle('done'); } }, false); here is the above code example running live.
...go ahead and
get some stuff done.
::slotted() - CSS: Cascading Style Sheets
note also that this selector won't select a text node placed into a slot; it only tar
gets actual elements.
...rson-name">name missing</slot> <ul> <li><slot name="person-age">age missing</slot></li> <li><slot name="person-occupation">occupation missing</slot></li> </ul> </div> </template> a custom element — <person-details> — is defined like so: customelements.define('person-details', class extends htmlelement { constructor() { super(); let template = document.
getelementbyid('person-template'); let templatecontent = template.content; const shadowroot = this.attachshadow({mode: 'open'}); let style = document.createelement('style'); style.textcontent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' + 'h2 { margin: 0 0 10px; }' + 'ul { margin: 0; }' +...
:active - CSS: Cascading Style Sheets
other common tar
gets of this pseudo-class include elements that contain an activated element, and form elements that are being activated through their associated <label>.
... syntax :active examples active links html <p>this paragraph contains a link: <a href="#">this link will turn red while you click on it.</a> the paragraph will
get a gray background while you click on it or the link.
:first-of-type - CSS: Cascading Style Sheets
syntax :first-of-type examples styling the first paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p> css p:first-of-type { color: red; font-style: italic; } result nested elements this example shows how nested elements can also be tar
geted.
... html <article> <div>this `div` is first!</div> <div>this <span>nested `span` is first</span>!</div> <div>this <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> <div>this <span>nested `span`
gets styled</span>!</div> <b>this `b` qualifies!</b> <div>this is the final `div`.</div> </article> css article :first-of-type { background-color: pink; } result specifications specification status comment selectors level 4the definition of ':first-of-type' in that specification.
:indeterminate - CSS: Cascading Style Sheets
/* selects any <input> whose state is indeterminate */ input:indeterminate { background: lime; } elements tar
geted by this selector are: <input type="checkbox"> elements whose indeterminate property is set to true by javascript <input type="radio"> elements, when all radio buttons with the same name value in the form are unchecked <progress> elements in an indeterminate state syntax :indeterminate examples checkbox & radio button this example applies special styles to the labels associated with i...
... html <div> <input type="checkbox" id="checkbox"> <label for="checkbox">this label starts out lime.</label> </div> <div> <input type="radio" id="radio"> <label for="radio">this label starts out lime.</label> </div> css input:indeterminate + label { background: lime; } javascript var inputs = document.
getelementsbytagname("input"); for (var i = 0; i < inputs.length; i++) { inputs[i].indeterminate = true; } progress bar html <progress> css progress { margin: 4px; } progress:indeterminate { opacity: 0.5; background-color: lightgray; box-shadow: 0 0 2px 1px red; } result specifications specification status comment html living standardthe definition of ':indeterminate' in that specification.
size - CSS: Cascading Style Sheets
most of the time, this size corresponds to the tar
get size of the printed page if applicable.
...in most cases, the dimensions and orientation of the tar
get sheet are used.
Using feature queries - CSS: Cascading Style Sheets
if you test for the gap property, because you want to use it in flexbox, you will
get a positive response even though it is not implemented.
... in the above scenario, it doesn't matter that ie11 doesn't support feature queries or css grid — it would
get the floated version anyway, which is then overwritten by browsers that do support grid.
Ordering Flex Items - CSS: Cascading Style Sheets
the order property in addition to reversing the order in which flex items are visually displayed, you can tar
get individual items and change where they appear in the visual order with the order property.
...you will quickly see if your development choices make
getting around the content difficult.
Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
this article details many of the ways that grid layout differs from flex layout, and demonstrates some of the extra functionality you
get when using grid layout such as layering of items on the grid.
...they have been laid out as flex items, but as they are not direct children they do not
get the other styling.
Typical use cases of Flexbox - CSS: Cascading Style Sheets
in reality we also often use flexbox for jobs that might be better done by grid layout, as a fallback for grid, and also in order to
get alignment capabilities.
...as in the above example, make a container into a flex container, and then use either align-items on the parent element or tar
get the flex item itself with align-self.
Block and inline layout in normal flow - CSS: Cascading Style Sheets
by default block elements will consume all of the space in the inline direction, so our paragraphs spread out and
get as big as they can inside their containing block.
... the boxes around the words before the <strong> element and after the <strong> element are referred to as anonymous boxes, boxes introduced to ensure that everything is wrapped in a box, but ones that we cannot tar
get directly.
OpenType font features guide - CSS: Cascading Style Sheets
in addition to broad feature sets like ligatures or lining figures (numerals that line up evenly as opposed to 'oldstyle', which look more like lower-case letters), there are also very specific ones such as stylistic sets (which might include several specific variants of glyphs meant to be used to
gether), alternates (which might be one or more variants of the letter 'a'), or even language-specific alterations for east asian languages.
...while these last ones are not technically ligatures, they are generally similar in that they replace specific combinations of letters when they appear to
gether.
Variable fonts guide - CSS: Cascading Style Sheets
this article will give you all you need to know to
get you started using variable fonts.
...fonts module 4 specification (editor’s draft) w3c github issue queue microsoft open type variations introduction microsoft opentype design-variation axis tag registry wakamai fondue (a site that will tell you what your font can do via a simple drag-and-drop inspection interface) axis praxis (the original variable fonts playground site) v-fonts.com (a catalog of variable fonts and where to
get them) font playground (another playground for variable fonts with some very unique approaches to user interface) ...
CSS Fonts - CSS: Cascading Style Sheets
p { width: 600px; margin: 0 auto; font-family: "helvetica neue", "arial", sans-serif; font-style: italic; font-weight: 100; font-variant-ligatures: normal; font-size: 2rem; letter-spacing: 1px; } <p>three hundred years ago<br> i thought i might
get some sleep<br> i stretched myself out onna antique bed<br> an' my spirit did a midnite creep</p> the result is as follows: variable fonts examples you can find a number of variable fonts examples at v-fonts.com and axis-praxis.org; see also our variable fonts guide for more information and usage information.
...this article will give you all you need to know to
get you started using variable fonts.
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
<div class="grid"> i am a string and will become an anonymous item <div>a grid item</div> <div>a grid item</div> </div> anonymous items are always auto-placed because there is no way to tar
get them.
...currently we can’t do things like tar
get every other cell of the grid with our items.
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
start with a structured and accessible document a grid layout should mean we do not need to change our document source in order to
get the layout that we want.
...this is a huge improvement over a float-based layout for example, where document source matters a lot in order to
get layouts at different breakpoints.
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
i am using floats for older browsers and grid for new ones.</div> </div> the image below shows the media object in a non-supporting browser on the left, and a supporting one on the right: using feature queries the above example is very simple, and we can
get away without needing to write code that would be a problem to browsers that do not support grid, and legacy code is not an issue to our grid supporting browsers.
...this means i don’t
get a final margin on the last row of boxes.
Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
margin-block-start margin-top margin-inline-end margin-right margin-inline-start margin-left padding-block-end padding-bottom padding-block-start padding-top padding-inline-end padding-right padding-inline-start padding-left there are also some additional shorthands, made possible because we have the ability to tar
get both block or both inline edges of the box simultaneously.
... margin shorthands as we can now tar
get both sides of a box — either both inline sides or both block sides — there are new shorthands available, margin-inline and margin-block, which accept two values.
Using CSS transitions - CSS: Cascading Style Sheets
eight; transition-duration: 3s, 5s; } this is treated as if it were: div { transition-property: opacity, left, top, height; transition-duration: 3s, 5s, 3s, 5s; } similarly, if any property's value list is longer than that for transition-property, it's truncated, so if you have the following css: div { transition-property: opacity, left; transition-duration: 3s, 5s, 2s, 1s; } this
gets interpreted as: div { transition-property: opacity, left; transition-duration: 3s, 5s; } using transitions when highlighting menus a common use of css is to highlight items in a menu as the user hovers the mouse cursor over them.
... <p>click anywhere to move the ball</p> <div id="foo"></div> using javascript you can make the effect of moving the ball to a certain position happen: var f = document.
getelementbyid('foo'); document.addeventlistener('click', function(ev){ f.style.transform = 'translatey('+(ev.clienty-25)+'px)'; f.style.transform += 'translatex('+(ev.clientx-25)+'px)'; },false); with css you can make it smooth without any extra effort.
Introducing the CSS Cascade - CSS: Cascading Style Sheets
keyframes don't cascade, meaning that at any given time css takes values from only one single @keyframes, and never mixes multiple ones to
gether.
... when several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all to
gether.
Privacy and the :visited selector - CSS: Cascading Style Sheets
this was done through window.
getcomputedstyle and other techniques.
... little white lies to preserve users' privacy, firefox and other browsers will lie to web applications under certain circumstances: the window.
getcomputedstyle method, and similar functions such as element.queryselector, will always return values indicating that a user has never visited any of the links on a page.
Syntax - CSS: Cascading Style Sheets
the last declaration of a block doesn't need to be terminated by a semi-colon, though it is often considered good style to do it as it prevents for
getting to add it when extending the block with another declaration.
...a selector group and an associated declarations block, to
gether, are called a ruleset, or often simply a rule.
Viewport concepts - CSS: Cascading Style Sheets
if you query the width or height of the window and document in chrome or firefox, you may
get: document.documentelement.clientwidth /* 1200 */ window.innerwidth /* 1200 */ window.outerwidth /* 1200 */ document.documentelement.clientheight /* 800 */ window.innerheight /* 800 */ window.outerheight /* 900 */ there are several dom properties that can help you query viewport size, and other similar lengths: the document element's element.clientwidth is the inner width of a document in ...
...when zoomed in you may
get: document.documentelement.clientwidth /* 800 */ window.innerwidth /* 800 */ window.outerwidth /* 800 in firefox, 1200 in chrome */ document.documentelement.clientheight /* 533 */ window.innerheight /* 533 */ window.outerheight /* 596 in firefox, 900 in chrome */ the viewport was originally 1200 x 800 pixels.
background-attachment - CSS: Cascading Style Sheets
st-line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <attachment>#where <attachment> = scroll | fixed | local examples simple example html <p> there were doors all round the hall, but they were all locked; and when alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to
get out again.
... html <p> there were doors all round the hall, but they were all locked; and when alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to
get out again.
border-image-slice - CSS: Cascading Style Sheets
the source image for the borders is as follows: the diamonds are 30px across, therefore setting 30 pixels as the value for both border-width and border-image-slice will
get you complete and fairly crisp diamonds in your border: border-width: 30px; border-image-slice: 30; these are the default values we have used in this example.
...t">30</output> </li> </ul> css .wrapper { width: 400px; height: 300px; } div > div { width: 300px; height: 200px; border-width: 30px; border-style: solid; border-image: url(https://udn.realityripple.com/samples/56/bb98f533ef.png); border-image-slice: 30; border-image-repeat: round; } li { display: flex; place-content: center; } javascript const widthslider = document.
getelementbyid('width'); const sliceslider = document.
getelementbyid('slice'); const widthoutput = document.
getelementbyid('width-output'); const sliceoutput = document.
getelementbyid('slice-output'); const divelem = document.queryselector('div > div'); widthslider.addeventlistener('input', () => { const newvalue = widthslider.value + 'px'; divelem.style.borderwidth = newvalue; widthoutput.tex...
break-after - CSS: Cascading Style Sheets
quisque commodo e
get nisi sed pretium.
...morbi metus libero, pharetra non porttitor a, molestie nec nisi.</p> <h2>subheading</h2> <p>vivamus eleifend metus vitae neque placerat, e
get interdum elit mattis.
break-before - CSS: Cascading Style Sheets
quisque commodo e
get nisi sed pretium.
...morbi metus libero, pharetra non porttitor a, molestie nec nisi.</p> <h2>subheading</h2> <p>vivamus eleifend metus vitae neque placerat, e
get interdum elit mattis.
<color> - CSS: Cascading Style Sheets
-moz-cellhighlight background color for selected item in a tree wid
get.
... -moz-dragtar
getzone -moz-eventreerow background color for even-numbered rows in a tree.
cross-fade() - CSS: Cascading Style Sheets
black */ cross-fade( url(white.png) 50%, url(black.png) 50%); /* 50% white, 50% black */ cross-fade( url(white.png) 75%, url(black.png) 25%); /* 75% white, 25% black */ cross-fade( url(white.png) 100%, url(black.png) 0%); /* fully white */ cross-fade( url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */ if any percentages are omitted, all the specified percentages are summed to
gether and subtracted from 100%.
...the 50%/50% example seen above did not need to have the percentages listed, as when a percentage value is omitted, the included percentages are added to
gether and subtracted from 100%.
<display-listitem> - CSS: Cascading Style Sheets
the list-item keyword causes the element to generate a ::marker pseudo-element with the content specified by its list-style properties (for example a bullet point) to
gether with a principal box of the specified type for its own contents.
...this can be used to
gether with list-style-type and list-style-position.
font - CSS: Cascading Style Sheets
.setpropcont { margin-bottom: 1em; } .curcss { border: none; border-bottom: 1px solid black; text-align: center; width: 80px; } .mandatory { border-bottom-color: red; } .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .tar { width: 40px; text-align: right; } .fontfamily { display: inline-block; } javascript var textareas = document.
getelementsbyclassname("curcss"), shorttext = "",
getcheckedvalue, setcss,
getproperties, injectcss;
getproperties = function () { shorttext =
getcheckedvalue("font_style") + " " +
getcheckedvalue("font_variant") + " " +
getcheckedvalue("font_weight") + " " +
getcheckedvalue("font_size") +
getcheckedvalue("line_height") + " " +
getcheckedvalu...
...e("font_family"); return shorttext; }
getcheckedvalue = function(radio_name) { oradio = document.forms[0].elements[radio_name]; for (var i = 0; i < oradio.length; i++) { if(oradio[i].checked) { var propinput = "input_" + radio_name, curelemname = "input_" + radio_name, curelem = document.
getelementbyid(curelemname); curelem.value = oradio[i].value; return oradio[i].value; } } } setcss = function () {
getproperties(); injectcss(shorttext); } injectcss = function(cssfragment) { old = document.body.
getelementsbytagname("style"); if (old.length > 1) { old[1].parentelement.removechild(old[1]); } css = document.createelement("style"); css.innerhtml = ".fontshorthand{font: " + cssfragment + "}"; document.body.appendchild(...
grid-auto-flow - CSS: Cascading Style Sheets
the grid-auto-flow css property controls how the auto-placement algorithm works, specifying exactly how auto-placed items
get flowed into the grid.
...e: repeat(4, 1fr) / repeat(2, 1fr); grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */ } #item1 { background-color: lime; grid-row-start: 3; } #item2 { background-color: yellow; } #item3 { background-color: blue; } #item4 { grid-column-start: 2; background-color: red; } #item5 { background-color: aqua; } function changegridautoflow() { var grid = document.
getelementbyid("grid"); var direction = document.
getelementbyid("direction"); var dense = document.
getelementbyid("dense"); var gridautoflow = direction.value === "row" ?
list-style-type - CSS: Cascading Style Sheets
一萬一千一百一十一 upper-armenian * example disclosure-open symbol indicating that a disclosure wid
get such as <details> is opened.
... disclosure-closed symbol indicating that a disclosure wid
get, like <details> is closed.
overscroll-behavior - CSS: Cascading Style Sheets
you can use overscroll-behavior to
get rid of unwanted scroll chaining and the browser's facebook/twitter app-inspired "pull to refresh"-type behavior.
...this can be stopped using overscroll-behavior-y (overscroll-behavior would also work) on the chat window, like this: .messages { height: 220px; overflow: auto; overscroll-behavior-y: contain; } we also wanted to
get rid of the standard overscroll effects when the contacts are scrolled to the top or bottom (e.g.
place-content - CSS: Cascading Style Sheets
ter</option> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="left">left</option> <option value="right">right</option> <option value="safe">safe</option> <option value="unsafe">unsafe</option> </select><code>;</code> var update = function () { document.
getelementbyid("container").style.placecontent = document.
getelementbyid("aligncontentalignment").value + " " + document.
getelementbyid("justifycontentalignment").value; } var aligncontentalignment = document.
getelementbyid("aligncontentalignment"); aligncontentalignment.addeventlistener("change", update); var justifycontentalignment = document.
getelementbyid("justifycontentalignment"); justifycon...
...tentalignment.addeventlistener("change", update); var writingm = document.
getelementbyid("writingmode"); writingm.addeventlistener("change", function (evt) { document.
getelementbyid("container").style.writingmode = evt.tar
get.value; }); var direction = document.
getelementbyid("direction"); direction.addeventlistener("change", function (evt) { document.
getelementbyid("container").style.direction = evt.tar
get.value; }); css #container { display: flex; height:240px; width: 240px; flex-wrap: wrap; background-color: #8c8c8c; writing-mode: horizontal-tb; /* can be changed in the live sample */ direction: ltr; /* can be changed in the live sample */ place-content: flex-end center; /* can be changed in the live sample */ } div > div { border: 2px solid #8c8c8c; width: ...
scroll-padding-block-end - CSS: Cascading Style Sheets
the scroll-padding-block-end property defines offsets for the end edge in the block dimension of the optimal viewing region of the scrollport: the region used as the tar
get region for placing things in view of the user.
... this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a tar
getted element and the edges of the scrollport.
scroll-padding-block-start - CSS: Cascading Style Sheets
the scroll-padding-block-start property defines offsets for the start edge in the block dimension of the optimal viewing region of the scrollport: the region used as the tar
get region for placing things in view of the user.
... this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a tar
getted element and the edges of the scrollport.
Live streaming web audio and video - Developer guides
this is a fairly complex and nascent subject with a lot of variables, so in this article, we'll introduce you to the subject and let you know how you can
get started.
... rtsp real time streaming protocol (rtsp) controls media sessions between endpoints and is often used to
gether with real-time transport protocol (rtp) and with real-time control protocol (rtcp) for media stream delivery.
Writing Web Audio API code that works in every browser - Developer guides
writing for today (and tomorrow) first,
get a copy of audiocontext-monkeypatch by chris wilson.
...if it's using, for example, oscillatornode, you will have to wait until it is supported, or maybe, if you're really eager, hack in some replacement using scriptprocessornode, which allows you to write a node with callbacks that
get called periodically, so that your javascript code generates or processes audio.
Challenge solutions - Developer guides
this page provides solutions to the challenges posed in the css
getting started tutorial.
...the following script achieves the desired result: // javascript demonstration function dodemo (button) { var square = document.
getelementbyid("square"); square.style.backgroundcolor = "#fa4"; square.style.marginleft = "20em"; button.setattribute("disabled", "true"); settimeout(cleardemo, 2000, button); } function cleardemo (button) { var square = document.
getelementbyid("square"); square.style.backgroundcolor = "transparent"; square.style.marginleft = "0em"; button.removeattribute("disabled"); } svg an...
Using device orientation with 3D transforms - Developer guides
here's a simple code snippet to sum it up: var elem = document.
getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // remember to use vendor-prefixed transform property elem.style.transform = "rotatez(" + ( e.alpha - 180 ) + "deg) " + "rotatex(" + e.beta + "deg) " + "rotatey(" + ( -e.gamma ) + "deg)"; }); orientation compensation compensating the orientation of the device can be useful to create parallax effec...
...this is achieved by inverting the previous order of rotations and negating the alpha value: var elem = document.
getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // again, use vendor-prefixed transform property elem.style.transform = "rotatey(" + ( -e.gamma ) + "deg)" + "rotatex(" + e.beta + "deg) " + "rotatez(" + - ( e.alpha - 180 ) + "deg) "; }); rotate3d to orientation should you ever need to convert a rotate3d axis-angle to orientation euler angles, you can use the following algorithm: // convert a rotate3d axis-angle to deviceorientation angles function orient( aa ) { var x = aa.x, y = aa.y, z = aa.z, a = aa.a, c = math.cos( aa.a ), s = math.sin( aa.a ), t = 1 - c, // axi...
Event developer guide - Developer guides
such events are commonly called synthetic events, as opposed to the events fired by the browser itself.dom on-event handlersthe web platform provides several ways to
get notified of dom events.
...these are special movements that can be made with a mouse or trackpad and can be interpreted to perform specific tasks.mutation eventsmutation events provide a mechanism for a web page or an extension to
get notified about changes made to the dom.
Rich-Text Editing in Mozilla - Developer guides
figure 3 : setting up rich-text editing html: <body onload="load()"> javascript: function load(){
getiframedocument("editorwindow").designmode = "on"; } function
getiframedocument(aid){ // if contentdocument exists, w3c compliant (mozilla) if (document.
getelementbyid(aid).contentdocument){ return document.
getelementbyid(aid).contentdocument; } else { // ie return document.frames[aid].document; } } the example contains a doricheditcommand function that makes it easier to exe...
... figure 4 : executing rich editing commands html: <button onclick="doricheditcommand('bold')" style="font-weight:bold;">b</button> javascript: function doricheditcommand(aname, aarg){
getiframedocument('editorwindow').execcommand(aname,false, aarg); document.
getelementbyid('editorwindow').contentwindow.focus() } example: a simple but complete rich text editor <!doctype html> <html> <head> <title>rich text editor</title> <script type="text/javascript"> var odoc, sdeftxt; function initdoc() { odoc = document.
getelementbyid("textbox"); sdeftxt = odoc.innerhtml; if (docum...
Separate sites for mobile and desktop - Developer guides
when it is right to choose this option firstly, if your tar
get audience includes users on older or low-end feature phones, it is worth noting that you may need to employ this strategy to some degree no matter what.
... this is because the default browsers on some feature-phones do not support the same markup that you would use to code a website tar
geted at the desktop, but instead understand formats like xhtml-mp or the older wml.
Mobile Web Development - Developer guides
if you do need to use these features, check whether other browsers implement their own versions of these features, and tar
get them too.
...if you don't do that, at least make sure that the default background contrasts with the text: that way, the page will at least be usable in a browser which is not tar
geted by your linear-gradient rule.
Parsing and serializing XML - Developer guides
"error while parsing" : odom.documentelement.nodename); parsing url-addressable resources into dom trees using xmlhttprequest here is sample code that reads and parses a url-addressable xml file into a dom tree: var xhr = new xmlhttprequest(); xhr.onload = function() { dump(xhr.responsexml.documentelement.nodename); } xhr.onerror = function() { dump("error while
getting xml."); } xhr.open("
get", "example.xml"); xhr.responsetype = "document"; xhr.send(); the value returned in the xhr object's responsexml field is a document constructed by parsing the xml.
... you can
get html corresponding to the <body> and its descendants with this code: var dochtml = document.documentelement.outerhtml; ...
Optimization and performance - Developer guides
google pagespeed insights lighthouse webpa
getest browser developer tools the above resources also include web performance best practices.
... making web performance a priority by considering web performance throughout the development process is important in ensuring users
get the best user experience possible.
HTML attribute: multiple - HTML: Hypertext Markup Language
when the form is submitted,had we used method="
get" each selected file's name would have been added to url parameters as?uploads=img1.jpg&uploads=img2.svg.
... <form method="
get" action="#"> <p> <label for="dwarfs">select the woodsmen you like:</label> <select multiple name="drawfs" id="drawfs"> <option>grumpy@woodworkers.com</option> <option>happy@woodworkers.com</option> <option>sleepy@woodworkers.com</option> <option>bashful@woodworkers.com</option> <option>sneezy@woodworkers.com</option> <option>dopey@woodworkers.com</option> <option>do...
HTML attribute: size - HTML: Hypertext Markup Language
if css tar
gets the element with properties impacting the width, css takes precedence.
... <label for="fruit">enter a fruit</label> <input type="text" size="15" id="fruit"> <label for="ve
getable">enter a ve
getable</label> <input type="text" id="ve
getable"> <select name="fruits" size="5"> <option>banana</option> <option>cherry</option> <option>strawberry</option> <option>durian</option> <option>blueberry</option> </select> <select name="ve
getables" size="5"> <option>carrot</option> <option>cucumber</option> <option>cauliflower</option> <option>celery</option> <option>collard greens</option> </select> specifications ...
Block-level elements - HTML: Hypertext Markup Language
while the "inline" category roughly corresponds to the category of phrasing content, the "block-level" category doesn't directly correspond to any html5 content category, but "block-level" and "inline" elements combined to
gether correspond to the flow content in html5.
... <details> disclosure wid
get.
Date and time formats used in HTML - HTML: Hypertext Markup Language
for <input>, the values of type that return a value which contains a string representing a date and/or time are: date datetime datetime-local month time week examples before
getting into the intricacies of how date and time strings are written and parsed in html, here are some examples that should give you a good idea what the more commonly-used date and time string formats look like.
... examples of valid time strings time string time 00:00:30.75 12:00:30.75 am (30.75 seconds after midnight) 12:15 12:15 pm 13:44:25 1:44:25 pm (25 seconds after 1:44 pm) local date and time strings a valid datetime-local string consists of a date string and a time string concatenated to
gether with either the letter "t" or a space character separating them.
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
this is only supported by mozilla-based browsers; use the standardized canvas.
getcontext('2d', { alpha: false }) instead.
...</canvas> javascript then in the javascript code, call htmlcanvaselement.
getcontext() to
get a drawing context and start drawing onto the canvas: const canvas = document.queryselector('canvas'); const ctx = canvas.
getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); result accessibility concerns alternative content the <canvas> element on its own is just a bitmap and does not provide information about any drawn objects.
<dfn>: The Definition element - HTML: Hypertext Markup Language
</p> <p>because of all of that, we decided to use the <code><a href="#definition-dfn"><dfn></a></code> element for this project.</p> here we see the definition — now with an id attribute, "definition-dfn", which can be used as the tar
get of a link.
... result the resulting content looks like this: using abbreviations and definitions to
gether in some cases, you may wish to use an abbreviation for a term when defining it.
<img>: The Image Embed element - HTML: Hypertext Markup Language
image loading errors if an error occurs while loading or rendering an image, and an onerror event handler has been set on the error event, that event handler will
get called.
... omitting alt alto
gether indicates that the image is a key part of the content and no textual equivalent is available.
<input type="email"> - HTML: Hypertext Markup Language
when you create an email input with the proper type value, email, you
get automatic validation that the entered text is at least in the correct form to potentially be a legitimate e-mail address.
...if the text in the input box isn't an e-mail address, you'll
get an error message that looks something like this: if we left things at that, we would at least be validating on legitimate e-mail addresses.
<input type="number"> - HTML: Hypertext Markup Language
when you create a number input with the proper type value, number, you
get automatic validation that the entered text is a number, and usually a set of up and down buttons to step the value up and down.
...roup = document.queryselector('.metersinputgroup'); let feetinputgroup = document.queryselector('.feetinputgroup'); let metersinput = document.queryselector('#meters'); let feetinput = document.queryselector('#feet'); let inchesinput = document.queryselector('#inches'); let switchbtn = document.queryselector('input[type="button"]'); switchbtn.addeventlistener('click', function() { if(switchbtn.
getattribute('class') === 'meters') { switchbtn.setattribute('class', 'feet'); switchbtn.value = 'enter height in meters'; metersinputgroup.style.display = 'none'; feetinputgroup.style.display = 'block'; feetinput.setattribute('required', ''); inchesinput.setattribute('required', ''); metersinput.removeattribute('required'); metersinput.value = ''; } else { sw...
<input type="url"> - HTML: Hypertext Markup Language
value a domstring representing a url, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value, selectionend, selectiondirection methods select(), setran
getext() and setselectionrange().
... using url inputs when you create a url input with the proper type value, url, you
get automatic validation that the entered text is at least in the correct form to potentially be a legitimate url.
<input type="week"> - HTML: Hypertext Markup Language
you can also
get and set the value in javascript using the input element's value property, for example: var weekcontrol = document.queryselector('input[type="week"]'); weekcontrol.value = '2017-w45'; additional attributes in addition to the attributes common to <input> elements, week inputs offer the following attributes: attribute description max the latest year and week to accept...
... the best way to deal with week/years in forms in a cross-browser way at the moment is to
get the user to enter the week number and year in separate controls (<select> elements being popular; see below for an example), or use javascript libraries such as jquery date picker.
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
for example, you can explain how to choose the "new document" option in the "file" menu using html that looks like this: <p>to create a new file, choose the menu option <kbd><kbd><samp>file</samp></kbd>⇒<kbd><samp>new document</samp></kbd></kbd>.</p> <p>don't for
get to click the <kbd><samp>ok</samp></kbd> button to confirm once you've entered the name of the new file.</p> this does some interesting nesting.
...then, inside that, both the menu and menu item names are contained within both <kbd> and <samp>, indicating an input which is selected from a screen wid
get.
<script>: The Script element - HTML: Hypertext Markup Language
for module scripts, if the async attribute is present then the scripts and all their dependencies will be executed in the defer queue, therefore they will
get fetched in parallel to parsing and evaluated as soon as they are available.
... <!-- generated by the server --> <script id="data" type="application/json">{"userid":1234,"username":"john doe","membersince":"2000-01-01t00:00:00.000z"}</script> <!-- static --> <script> const userinfo = json.parse(document.
getelementbyid("data").text); console.log("user information: %o", userinfo); </script> specifications specification status comments html living standardthe definition of '<script>' in that specification.
<select>: The HTML Select element - HTML: Hypertext Markup Language
for further examples, see the native form wid
gets: drop-down content.
...if you want to
get full control, you should consider using a library with good facilities for styling form wid
gets, or try rolling your own dropdown menu using non-semantic elements, javascript, and wai-aria to provide semantics.
<template>: The Content Template element - HTML: Hypertext Markup Language
} the result is the original html table, with two new rows appended to it via javascript: table { background: #000; } table td { background: #fff; } avoiding documentfragment pitfall a documentfragment is not a valid tar
get for various events, as such it is often preferable to clone or refer to the elements within it.
... consider the following html and javascript: html <div id="container"></div> <template id="template"> <div>click me</div> </template> javascript const container = document.
getelementbyid("container"); const template = document.
getelementbyid("template"); function clickhandler(event) { alert("clicked a div"); } const firstclone = template.content.clonenode(true); firstclone.addeventlistener("click", clickhandler); container.appendchild(firstclone); const secondclone = template.content.firstelementchild.clonenode(true); secondclone.addeventlistener("click", clickhandler); container.appendchild(secondclone); result firstclone is a documentfragment instance, so while it
gets appended inside the container as expected, clicking on it does not trigger the click event.
Global attributes - HTML: Hypertext Markup Language
classes allows css and javascript to select and access specific elements via the class selectors or functions like the method document.
getelementsbyclassname().
...if so, the browser modifies its wid
get to allow editing.
Link types: noopener - HTML: Hypertext Markup Language
the noopener keyword for the rel attribute of the <a>, <area>, and <form> elements instructs the browser to navigate to the tar
get resource without granting the new browsing context access to the document that opened it — by not setting the window.opener property on the opened window (it returns null).
... note that when noopener is used, nonempty tar
get names other than _top, _self, and _parent are all treated like _blank in terms of deciding whether to open a new window/tab.
Data URLs - HTTP
[convert]::tobase64string([text.encoding]::utf8.
getbytes("hello")) # outputs to console: agvsbg8= bash -c "echo -n hello`|base64" # outputs to console: agvsbg8= # the backtick (`) is used to escape the piping (|) character here common problems this section describes problems that commonly occur when creating and using data urls.
... data:text/html,lots of text...<p><a name%3d"bottom">bottom</a>?arg=val this represents an html resource whose contents are: lots of text...<p><a name="bottom">bottom</a>?arg=val syntax the format for data urls is very simple, but it's easy to for
get to put a comma before the "data" segment, or to incorrectly encode the data into base64 format.
Identifying resources on the Web - HTTP
the tar
get of an http request is called a "resource", whose nature isn't defined further; it can be a document, a photo, or anything else.
... ftp is still acceptable at the top level (such as typed directly into the browser's url bar, or the tar
get of a link), although some browsers may delegate loading ftp content to another application.
MIME types (IANA media types) - HTTP
a multipart type is one which represents a document that's comprised of multiple component parts, each of which may have its own individual mime type; or, a multipart type may encapsulate multiple files being sent to
gether in one transaction.
... audio and video types as is the case for images, html doesn't mandate that web browsers support any specific file and codec types for the <audio> and <video> elements, so it's important to consider your tar
get audience and the range of browsers (and versions of those browsers) they may be using when choosing the file type and codecs to use for media.
Connection management in HTTP/1.x - HTTP
persistent connections short-lived connections have two major hitches: the time taken to establish a new connection is significant, and performance of the underlying tcp connection
gets better only when this connection has been in use for some time (warm connection).
... not all types of http requests can be pipelined: only idempotent methods, that is
get, head, put and delete, can be replayed safely: should a failure happen, the pipeline content can simply be repeated.
Using HTTP cookies - HTTP
get /sample_page.html http/2.0 host: www.example.org cookie: yummy_cookie=choco; tasty_cookie=strawberry note: here's how to use the set-cookie header in various server-side applications: php node.js python ruby on rails define the lifetime of a cookie the lifetime of a cookie can be defined in two ways: session cookies are deleted when the current session ends.
...cookie blocking can cause some third-party components (such as social media wid
gets) to not function as intended.
Access-Control-Allow-Credentials - HTTP
note that simple
get requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content.
... examples allow credentials: access-control-allow-credentials: true using xhr with credentials: var xhr = new xmlhttprequest(); xhr.open('
get', 'http://example.com/', true); xhr.withcredentials = true; xhr.send(null); using fetch with credentials: fetch(url, { credentials: 'include' }) specifications specification status comment fetchthe definition of 'access-control-allow-credentials' in that specification.
CSP: report-uri - HTTP
so for compatibility with current browsers while also adding forward compatibility when browsers
get report-to support, you can specify both report-uri and report-to: content-security-policy: ...; report-uri https://endpoint.com; report-to groupname in browsers that support report-to, the report-uri directive will be ignored.
...$current_domain; http_response_code(204); // http 204 no content $json_data = file_
get_contents('php://input'); // we pretty print the json before adding it to the log file if ($json_data = json_decode($json_data)) { $json_data = json_encode($json_data, json_pretty_print | json_unescaped_slashes); if (!file_exists($log_file)) { // send an email $message = "the following content-security-policy violation occurred on " .
Content-Security-Policy - HTTP
form-action restricts the urls which can be used as the tar
get of a form submissions from a given context.
...so for compatibility with current browsers while also adding forward compatibility when browsers
get report-to support, you can specify both report-uri and report-to: content-security-policy: ...; report-uri https://endpoint.example.com; report-to groupname in browsers that support report-to, the report-uri directive will be ignored.
DNT - HTTP
header type request header forbidden header name yes syntax dnt: 0 dnt: 1 dnt: null directives 0 the user prefers to allow tracking on the tar
get site.
... 1 the user prefers not to be tracked on the tar
get site.
Feature-Policy: display-capture - HTTP
the http feature-policy header display-capture directive controls whether or not the document is permitted to use screen capture api, i.e.,
getdisplaymedia() to capture the screen's contents.
... if display-capture is disabled in a document, the document will not be able to initiate screen capture via
getdisplaymedia().
If-Match - HTTP
for
get and head methods, the server will send back the requested resource only if it matches one of the listed etags.
... there are two common use cases: for
get and head methods, used in combination with a range header, it can guarantee that the new ranges requested comes from the same resource than the previous one.
Location - HTTP
in cases of redirection, the http method used to make the new request to fetch the page pointed to by location depends of the original method and of the kind of redirection: if 303 (see also) responses always lead to the use of a
get method, 307 (temporary redirect) and 308 (permanent redirect) don't change the method used in the original request; 301 (permanent redirect) and 302 (found) doesn't change the method most of the time, though older user-agents may (so you basically don't know).
... location and content-location are different: location indicates the tar
get of a redirection (or the url of a newly created resource), while content-location indicates the direct url to use to access the resource when content negotiation happened, without the need of further content negotiation.
Firefox user agent string reference - HTTP
the preferred way to tar
get content to a device form factor is to use css media queries.
... however, if you use ua sniffing to tar
get content to a device form factor, please look for mobi (to include opera mobile, which uses "mobi") for the phone form factor and do not assume any correlation between "android" and the device form factor.
Want-Digest - HTTP
examples want-digest: sha-256 want-digest: sha-512;q=0.3, sha-256;q=1, md5;q=0 basic operation the sender provides a list of digests which it is prepared to accept, and the server uses one of them: request:
get /item want-digest: sha-256;q=0.3, sha;q=1 response: http/1.1 200 ok digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= unsupported digests the server does not support any of the requested digest algorithms, so uses a different algorithm: request:
get /item want-digest: sha;q=1 response: http/1.1 200 ok digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= t...
...he server does not support any of the requested digest algorithms, so responds with a 400 error and includes another want-digest header, listing the algorithms that it does support: request:
get /item want-digest: sha;q=1 response: http/1.1 400 bad request want-digest: sha-256, sha-512 specifications specification title draft-ietf-httpbis-digest-headers-latest resource digests for http this header was originally defined in rfc 3230, but the definition of "selected representation" in rfc 7231 made the original definition inconsistent with current http specifications.
HTTP range requests - HTTP
curl http://i.imgur.com/z4d4kwk.jpg -i -h "range: bytes=0-1023" the issued request looks like this:
get /z4d4kwk.jpg http/1.1 host: i.imgur.com range: bytes=0-1023 the server responses with the 206 partial content status: http/1.1 206 partial content content-range: bytes 0-1023/146515 content-length: 1024 ...
... multipart ranges the range header also allows you to
get multiple ranges at once in a multipart document.
301 Moved Permanently - HTTP
it is therefore recommended to use the 301 code only as a response for
get or head methods and to use the 308 permanent redirect for post methods instead, as the method change is explicitly prohibited with this status.
... status 301 moved permanently example client request
get /index.php http/1.1 host: www.example.org server response http/1.1 301 moved permanently location: http://www.example.org/index.asp specifications specification title rfc 7231, section 6.4.2: 301 moved permanently hypertext transfer protocol (http/1.1): semantics and content ...
302 Found - HTTP
it is therefore recommended to set the 302 code only as a response for
get or head methods and to use 307 temporary redirect instead, as the method change is explicitly prohibited in that case.
... in the cases where you want the method used to be changed to
get, use 303 see other instead.
405 Method Not Allowed - HTTP
the hypertext transfer protocol (http) 405 method not allowed response status code indicates that the request method is known by the server but is not supported by the tar
get resource.
... the server must generate an allow header field in a 405 response containing a list of the tar
get resource's currently supported methods.
412 Precondition Failed - HTTP
the hypertext transfer protocol (http) 412 precondition failed client error response code indicates that access to the tar
get resource has been denied.
... this happens with conditional requests on methods other than
get or head when the condition defined by the if-unmodified-since or if-none-match headers is not fulfilled.
504 Gateway Timeout - HTTP
the hypertext transfer protocol (http) 504 gateway timeout server error response code indicates that the server, while acting as a gateway or proxy, did not
get a response in time from the upstream server that it needed in order to complete the request.
... note: a gateway might refer to different things in networking and a 504 error is usually not something you can fix, but requires a fix by the web server or the proxies you are trying to
get access through.
Indexed collections - JavaScript
the simplest way to do this is as follows: let colors = ['red', 'green', 'blue'] for (let i = 0; i < colors.length; i++) { console.log(colors[i]) } if you know that none of the elements in your array evaluate to false in a boolean context—if your array consists only of dom nodes, for example—you can use a more efficient idiom: let divs = document.
getelementsbytagname('div') for (let i = 0, div; div = divs[i]; i++) { /* process div in some way */ } this avoids the overhead of checking the length of the array, and ensures that the div variable is reassigned to the current item each time around the loop for added convenience.
... working with array-like objects some javascript objects, such as the nodelist returned by document.
getelementsbytagname() or the arguments object made available within the body of a function, look and behave like arrays on the surface but do not share all of their methods.
Assertions - JavaScript
do not for
get to edit it as well, thanks!
...in this example, we can
get the fruits that start with 'a' by a /^a/ regex.
Quantifiers - JavaScript
do not for
get to edit it as well, thanks!
... optionally followed by a "u" // r followed by an "r" console.table(britishtext.match(regexpending)); // ["neighbour", "favour"] console.table(americantext.match(regexpending)); // ["neighbor", "favor"] greedy versus non-greedy var text = "i must be
getting somewhere near the centre of the earth."; var greedyregexp = /[\w ]+/; // [\w ] a letter of the latin alphabet or a whitespace // + one or several times console.log(text.match(greedyregexp)[0]); // "i must be
getting somewhere near the centre of the earth" // almost all of the text matches (leaves out the dot character) var nongreedyregexp = /[\w ]+?/; // notice the question m...
About the JavaScript reference - JavaScript
for the most part, this reference attempts to be environment-agnostic and does not tar
get a web browser environment.
...once you have a firm grasp of the fundamentals, you can use the reference to
get more details on individual objects and language constructs.
Private class fields - JavaScript
class classwithprivatemethod { #privatemethod() { return 'hello world' }
getprivatemessage() { return this.#privatemethod() } } const instance = new classwithprivatemethod() console.log(instance.
getprivatemessage()) // expected output: "hello world" private instance methods may be generator, async, or async generator functions.
... private
getters and setters are also possible: class classwithprivateaccessor { #message
get #decoratedmessage() { return `✨${this.#message}✨` } set #decoratedmessage(msg) { this.#message = msg } constructor() { this.#decoratedmessage = 'hello world' console.log(this.#decoratedmessage) } } new classwithprivateaccessor(); // expected output: "✨hello world✨" specifications specification public and private instance fieldsthe definition of 'fielddefinition' in that specification.
constructor - JavaScript
this.name = 'square'; }
get area() { return this.height * this.width; } set area(value) { this.height = value**0.5; this.width = value**0.5; } } another example here the prototype of square class is changed—but the constructor of its base class polygon is still called when a new instance of a square is created.
... class polygon { constructor() { this.name = "polygon"; } } class square extends polygon { constructor() { super(); } } class rectangle {} object.setprototypeof(square.prototype, rectangle.prototype); console.log(object.
getprototypeof(square.prototype) === polygon.prototype); //false console.log(object.
getprototypeof(square.prototype) === rectangle.prototype); //true let newinstance = new square(); console.log(newinstance.name); //polygon specifications specification ecmascript (ecma-262)the definition of 'constructor method' in that specification.
extends - JavaScript
this.name = 'square'; }
get area() { return this.height * this.width; } } using extends with built-in objects this example extends the built-in date object.
... class mydate extends date {
getformatteddate() { var months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']; return this.
getdate() + '-' + months[this.
getmonth()] + '-' + this.
getfullyear(); } } specifications specification ecmascript (ecma-262)the definition of 'extends' in that specification.
SyntaxError: invalid regular expression flag "x" - JavaScript
regular expression flags can be used separately or to
gether in any order, but there are only six of them in ecmascript.
...to match newlines (added in ecmascript 2018) u unicode; treat pattern as a sequence of unicode code points y perform a "sticky" search that matches starting at the current position in the tar
get string.
Warning: JavaScript 1.6's for-each-in loops are deprecated - JavaScript
deprecated syntax var object = { a: 10, b: 20 }; for each (var x in object) { console.log(x); // 10 // 20 } alternative standard syntax you can now use the standard for...in loop to iterate over specified object keys, and
get each value inside the loop: var object = { a: 10, b: 20 }; for (var key in object) { var x = object[key]; console.log(x); // 10 // 20 } or, using for...of (es2015) and object.values (es2017), you can
get an array of the specified object values and iterate over the array like this: var object = { a: 10, b: 20 }; for (var x of object.values(object)) { con...
... var object = { a: 10, b: 20 }; for each (var [key, value] in iterator(object)) { console.log(key, value); // "a", 10 // "b", 20 } alternative standard syntax you can now use the standard for...in loop to iterate over specified object keys, and
get each value inside the loop: var object = { a: 10, b: 20 }; for (var key in object) { var value = object[key]; console.log(key, value); // "a", 10 // "b", 20 } or, using for...of (es2015) and object.entries (es2017), you can
get an array of the specified object values and iterate over the array like this: var object = { a: 10, b: 20 }; for (var [key, value] o...
TypeError: Reduce of empty array with no initial value - JavaScript
similarly, the same issue can happen if there is a typo in a selector, or an unexpected number of elements in a list: var names = document.
getelementsbyclassname("names"); var name_list = array.prototype.reduce.call(names, (acc, name) => acc + ", " + name); valid cases these problems can be solved in two different ways.
... var names = document.
getelementsbyclassname("names"); var name_list1 = ""; if (names1.length >= 1) name_list1 = array.prototype.reduce.call(names, (acc, name) => acc + ", " + name); // name_list1 == "" when names is empty.
JavaScript error reference - JavaScript
to
gether, these two properties provide a starting point toward understanding and resolving the error.
...ray elementtypeerror: can't redefine non-configurable property "x"typeerror: cannot use "in" operator to search for "x" in "y"typeerror: cyclic object valuetypeerror: invalid "instanceof" operand "x"typeerror: invalid array.prototype.sort argumenttypeerror: invalid argumentstypeerror: invalid assignment to const "x"typeerror: property "x" is non-configurable and can't be deletedtypeerror: setting
getter-only property "x"typeerror: variable "x" redeclares argumenturierror: malformed uri sequencewarning: 08/09 is not a legal ecma-262 octal constantwarning: -file- is being assigned a //# sourcemappingurl, but already has onewarning: date.prototype.tolocaleformat is deprecatedwarning: javascript 1.6's for-each-in loops are deprecatedwarning: string.x is deprecated; use string.prototype.x insteadw...
Method definitions - JavaScript
syntax const obj = {
get property() {}, set property(value) {}, property( parameters… ) {}, *generator( parameters… ) {}, async property( parameters… ) {}, async* generator( parameters… ) {}, // with computed keys
get [property]() {}, set [property](value) {}, [property]( parameters… ) {}, *[generator]( parameters… ) {}, async [property]( parameters… ) {}, async* [generator]( param...
...eters… ) {}, }; description the shorthand syntax is similar to the
getter and setter syntax introduced in ecmascript 2015.
arguments.callee - JavaScript
to
get around this arguments.callee was added so you could do [1, 2, 3, 4, 5].map(function(n) { return !(n > 1) ?
...* n; }); however, this was actually a really bad solution as this (in conjunction with other arguments, callee, and caller issues) make inlining and tail recursion impossible in the general case (you can achieve it in select cases through tracing, etc., but even the best code is suboptimal due to checks that would not otherwise be necessary.) the other major issue is that the recursive call will
get a different this value, e.g.: var global = this; var sillyfunction = function(recursed) { if (!recursed) { return arguments.callee(true); } if (this !== global) { alert('this is: ' + this); } else { alert('this is the global'); } } sillyfunction(); ecmascript 3 resolved these issues by allowing named function expressions.
setter - JavaScript
setters are most often used in conjunction with
getters to create a type of pseudo-property.
... note the following when working with the set syntax: it can have an identifier which is either a number or a string; it must have exactly one parameter (see incompatible es5 change: literal
getter and setter functions must now have exactly zero or one arguments for more information); it must not appear in an object literal with another set or with a data entry for the same property.
Array.prototype[@@iterator]() - JavaScript
examples iteration using for...of loop html <ul id="letterresult"> </ul> javascript var arr = ['a', 'b', 'c']; var earr = arr[symbol.iterator](); var letterresult = document.
getelementbyid('letterresult'); // your browser must support for..of loop // and let-scoped variables in for loops // const and var could also be used for (let letter of earr) { letterresult.innerhtml += "<li>" + letter + "</li>"; } result alternative iteration var arr = ['a', 'b', 'c', 'd', 'e']; var earr = arr[symbol.iterator](); console.log(earr.next().value); // a console.log(earr.next().v...
... function logiterable(it) { if (!(symbol.iterator in object.
getprototypeof(it) /* or "symbol.iterator in object.__proto__" or "it[symbol.iterator]" */)) { console.log(it, ' is not an iterable object...'); return; } var iterator = it[symbol.iterator](); // your browser must support for..of loop // and let-scoped variables in for loops // const and var could also be used for (let letter of iterator) { console.log(letter); } } // a...
Array.prototype.every() - JavaScript
let lenvalue be the result of calling the
get internal method // of o with the argument "length".
...let kvalue be the result of calling the
get internal method // of o with argument pk.
ArrayBuffer - JavaScript
you can also
get an array buffer from existing data, for example from a base64 string or from a local file.
... static properties
get arraybuffer[@@species] the constructor function that is used to create derived objects.
AsyncFunction - JavaScript
it can be obtained with the following code: object.
getprototypeof(async function(){}).constructor syntax new asyncfunction([arg1[, arg2[, ...argn]],] functionbody) parameters arg1, arg2, ...
... examples creating an async function from an asyncfunction() constructor function resolveafter2seconds(x) { return new promise(resolve => { settimeout(() => { resolve(x); }, 2000); }); } let asyncfunction = object.
getprototypeof(async function(){}).constructor let a = new asyncfunction('a', 'b', 'return await resolveafter2seconds(a) + await resolveafter2seconds(b);'); a(10, 20).then(v => { console.log(v); // prints 30 after 4 seconds }); specifications specification ecmascript (ecma-262)the definition of 'asyncfunction object' in ...
FinalizationRegistry - JavaScript
description finalizationregistry provides a way to request that a cleanup callback
get called at some point when an object registered with the registry has been reclaimed (garbage-collected).
... instance methods finalizationregistry.prototype.register() registers an object with the registry in order to
get a cleanup callback when/if the object is garbage-collected.
Function.name - JavaScript
function foo() {}; foo.bind({}).name; // "bound foo" function names for
getters and setters when using
get and set accessor properties, "
get" or "set" will appear in the function name.
... let o = {
get foo(){}, set foo(x){} }; var descriptor = object.
getownpropertydescriptor(o, "foo"); descriptor.
get.name; // "
get foo" descriptor.set.name; // "set foo"; function names in classes you can use obj.constructor.name to check the "class" of an object (but be sure to read the warnings below): function foo() {} // es2015 syntax: class foo {} var fooinstance = new foo(); console.log(fooinstance.constructor.name); // logs "foo" warning: the script interpreter will set the built-in function.name property only if a function does not have an own property called name (see section 9.2.11 of the ecmascript2015 language specification).
Generator.prototype.next() - JavaScript
this is equivalent of not specifying the done property alto
gether.
...erator and the object that the next method returns: function* gen() { yield 1; yield 2; yield 3; } const g = gen(); // "generator { }" g.next(); // "object { value: 1, done: false }" g.next(); // "object { value: 2, done: false }" g.next(); // "object { value: 3, done: false }" g.next(); // "object { value: undefined, done: true }" using next() with a list function*
getpage(pagesize = 1, list) { let output = []; let index = 0; while (index < list.length) { output = []; for (let i = index; i < index + pagesize; i++) { if (list[i]) { output.push(list[i]); } } yield output; index += pagesize; } } list = [1, 2, 3, 4, 5, 6, 7, 8] var page =
getpage(3, list); // generator { } page.next(); ...
GeneratorFunction - JavaScript
object.
getprototypeof(function*(){}).constructor syntax new generatorfunction ([arg1[, arg2[, ...argn]],] functionbody) parameters arg1, arg2, ...
... examples creating a generator function from a generatorfunction() constructor var generatorfunction = object.
getprototypeof(function*(){}).constructor var g = new generatorfunction('a', 'yield a * 2'); var iterator = g(10); console.log(iterator.next().value); // 20 specifications specification ecmascript (ecma-262)the definition of 'generatorfunction' in that specification.
Intl.Collator - JavaScript
instance methods intl.collator.prototype.compare
getter function that compares two strings according to the sort order of this intl.collator object.
...in order to
get the sort order of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: // in german, ä sorts with a console.log(new intl.collator('de').compare('ä', 'z')); // → a negative value // in swedish, ä sorts after z console.log(new intl.collator('sv').compare('ä', 'z')); // → a positiv...
Intl.Locale - JavaScript
instance methods intl.locale.prototype.maximize()
gets the most likely values for the language, script, and region of the locale based on existing values.
... intl.locale.prototype.minimize()
gets the most likely values for the language, script, and region of the locale based on existing values.
Intl.NumberFormat.prototype.format() - JavaScript
description the format
getter function formats a number into a string according to the locale and formatting options of this numberformat object.
... examples using format use the format
getter function for formatting a single currency value, here for russia: var options = { style: 'currency', currency: 'rub' }; var numberformat = new intl.numberformat('ru-ru', options); console.log(numberformat.format(654321.987)); // → "654 321,99 руб." using format with map use the format
getter function for formatting all numbers in an array.
Intl.NumberFormat - JavaScript
instance methods intl.numberformat.prototype.format()
getter function that formats a number according to the locale and formatting options of this numberformat object.
...in order to
get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: var number = 123456.789; // german uses comma as decimal separator and period for thousands console.log(new intl.numberformat('de-de').format(number)); // → 123.456,789 // arabic in most arabic speaking countries uses...
Object.prototype.__lookupSetter__() - JavaScript
it is now possible to do this in a standardized way using object.
getownpropertydescriptor().
... examples standard-compliant and non-standard ways to
get a property setter var obj = { set foo(value) { this.bar = value; } }; // non-standard and deprecated way obj.__lookupsetter__('foo') // (function(value) { this.bar = value; }) // standard-compliant way object.
getownpropertydescriptor(obj, 'foo').set; // (function(value) { this.bar = value; }) specifications specification ecmascript (ecma-262)the definition of 'object.prototype.__lookupsetter__()' in that specification.
Object.prototype.hasOwnProperty() - JavaScript
note that the for...in loop is already only iterating enumerable items, so one should not assume based on the lack of non-enumerable properties shown in the loop that hasownproperty itself is confined strictly to enumerable items (as with object.
getownpropertynames()).
...value: ' + buz[name]); } else { console.log(name); // tostring or something else } } using hasownproperty as a property name javascript does not protect the property name hasownproperty; thus, if the possibility exists that an object might have a property with this name, it is necessary to use an external hasownproperty to
get correct results: var foo = { hasownproperty: function() { return false; }, bar: 'here be dragons' }; foo.hasownproperty('bar'); // always returns false // use another object's hasownproperty // and call it with 'this' set to foo ({}).hasownproperty.call(foo, 'bar'); // true // it's also possible to use the hasownproperty property // from the object prototype for this purpose object.
Object.isFrozen() - JavaScript
description an object is frozen if and only if it is not extensible, all its properties are non-configurable, and all its data properties (that is, properties which are not accessor properties with
getter or setter components) are non-writable.
...var accessor = {
get food() { return 'yum'; } }; object.preventextensions(accessor); object.isfrozen(accessor); // === false // ...but make that property non-configurable // and it becomes frozen.
Object.preventExtensions() - JavaScript
this method makes the [[prototype]] of the tar
get immutable; any [[prototype]] re-assignment will throw a typeerror.
... this behavior is specific to the internal [[prototype]] property, other properties of the tar
get object will remain mutable.
Object.setPrototypeOf() - JavaScript
appending prototype chains a combination of object.
getprototypeof() and object.prototype.__proto__ permits appending a whole prototype chain to a new prototype object: /** *** object.appendchain(@object, @prototype) * * appends the first non-native prototype of a chain to a new prototype.
...ochain : new ochain.constructor(ochain); for (var o1st = this.
getprototypeof(o2nd); o1st !== object.prototype && o1st !== function.prototype; o1st = this.
getprototypeof(o2nd) ) { o2nd = o1st; } if (oproto.constructor === string) { onewproto = function.prototype; oreturn = function.apply(null, array.prototype.slice.call(arguments, 1)); this.setprototypeof(oreturn, olast); } this.setprototypeof(o2nd, onewproto); return oretur...
Promise() constructor - JavaScript
resolutionfunc(value) // call on fulfilled rejectionfunc(reason) // call on rejected the returned value can be another promise object, in which case the promise
gets dynamically inserted into the chain.
...ething asynchronous which eventually calls either: // // resolve(somevalue) // fulfilled // or // reject("failure reason") // rejected }); making functions return a promise to provide a function with promise functionality, have it return a promise: function myasyncfunction(url) { return new promise((resolve, reject) => { const xhr = new xmlhttprequest() xhr.open("
get", url) xhr.onload = () => resolve(xhr.responsetext) xhr.onerror = () => reject(xhr.statustext) xhr.send() }); } specifications specification ecmascript (ecma-262)the definition of 'promise constructor' in that specification.
Promise.any() - JavaScript
if no promises in the iterable fulfil (if all of the given promises are rejected), then the returned promise is rejected with an aggregateerror, a new subclass of error that groups to
gether individual errors.
...unlike promise.all(), which returns an array of fulfillment values, we only
get one fulfillment value (assuming at least one promise fulfills).
Reflect.deleteProperty() - JavaScript
syntax reflect.deleteproperty(tar
get, propertykey) parameters tar
get the tar
get object on which to delete the property.
... exceptions a typeerror, if tar
get is not an object.
RegExp() constructor - JavaScript
y (sticky) matches only from the index indicated by the lastindex property of this regular expression in the tar
get string.
...use the constructor function when you know the regular expression pattern will be changing, or you don't know the pattern and are
getting it from another source, such as user input.
RegExp - JavaScript
static properties
get regexp[@@species] the constructor function that is used to create derived objects.
... using regular expression on multiple lines let s = 'please yes\nmake my day!' s.match(/yes.*day/); // returns null s.match(/yes[^]*day/); // returns ["yes\nmake my day"] using a regular expression with the sticky flag the sticky flag indicates that the regular expression performs sticky matching in the tar
get string by attempting to match starting at regexp.prototype.lastindex.
Planned changes to shared memory - JavaScript
webassembly.memory can still be used to
get an instance.
... to avoid having to check whether postmessage() throws, self.crossoriginisolated is being standardized (a
getter that returns a boolean; true if the headers are set), available in window and worker contexts.
SharedArrayBuffer - JavaScript
apis which use sharedarraybuffer objects webglrenderingcontext.bufferdata() webglrenderingcontext.buffersubdata() webgl2renderingcontext.
getbuffersubdata() security requirements shared memory and high-resolution timers were effectively disabled at the start of 2018 in light of spectre.
...ffer var sab = new sharedarraybuffer(1024); slicing the sharedarraybuffer sab.slice(); // sharedarraybuffer { bytelength: 1024 } sab.slice(2); // sharedarraybuffer { bytelength: 1022 } sab.slice(-2); // sharedarraybuffer { bytelength: 2 } sab.slice(0, 1); // sharedarraybuffer { bytelength: 1 } using it in a webgl buffer const canvas = document.queryselector('canvas'); const gl = canvas.
getcontext('webgl'); const buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, sab, gl.static_draw); specifications specification ecmascript (ecma-262)the definition of 'sharedarraybuffer' in that specification.
String length - JavaScript
unicode since `length` counts code units instead of characters, if you want to
get the number of characters you need something like this: function
getcharacterlength (str) { // the string iterator that is used here iterates over characters, // not mere code units return [...str].length; } console.log(
getcharacterlength('a\ud87e\udc04z')); // 3 // while not recommended, you could add this to each string as follows: object.defineproperty(string.prototype, 'charlength',...
... {
get () { return
getcharacterlength(this); } }); console.log('a\ud87e\udc04z'.charlength); // 3 examples basic usage let x = 'mozilla'; let empty = ''; console.log(x + ' is ' + x.length + ' code units long'); /* "mozilla is 7 code units long" */ console.log('the empty string has a length of ' + empty.length); // expected output: "the empty string has a length of 0" assigning to length let mystring = "bluebells"; // attempting to assign a value to a string's .length property has no observable effect.
String.raw() - JavaScript
(but it is not identical; see explanations in this issue.) it's used to
get the raw string form of template strings, that is, substitutions (e.g.
... string.raw`hi\u000a!`; // 'hi\u000a!', same here, this time we will
get the // \, u, 0, 0, 0, a, 6 characters.
TypedArray.prototype.copyWithin() - JavaScript
the copywithin() method copies the sequence of array elements within the array to the position starting at tar
get.
... syntax typedarray.copywithin(tar
get, start[, end = this.length]) parameters tar
get tar
get start index position where to copy the elements to.
TypedArray.from() - JavaScript
description typedarray.from() lets you create typed arrays from: array-like objects (objects with a length property and indexed elements); or iterable objects (objects where you can
get its elements, such as map and set).
... when array.from()
gets an array-like which isn't an iterator, it respects holes.
WeakRef() constructor - JavaScript
the weakref constructor creates a weakref object referring to a given tar
get object.
... syntax new weakref(tar
getobject); parameters tar
getobject the tar
get object the weakref should refer to (also called the referent).
WebAssembly.Global() constructor - JavaScript
const output = document.
getelementbyid('output'); function asserteq(msg, got, expected) { output.innerhtml += `testing ${msg}: `; if (got !== expected) output.innerhtml += `fail!<br>got: ${got}<br>expected: ${expected}<br>`; else output.innerhtml += `success!
... got: ${got}<br>`; } asserteq("webassembly.global exists", typeof webassembly.global, "function"); const global = new webassembly.global({value:'i32', mutable:true}, 0); webassembly.instantiatestreaming(fetch('global.wasm'), { js: { global } }) .then(({instance}) => { asserteq("
getting initial value from wasm", instance.exports.
getglobal(), 0); global.value = 42; asserteq("
getting js-updated value from wasm", instance.exports.
getglobal(), 42); instance.exports.incglobal(); asserteq("
getting wasm-updated value from js", global.value, 43); }); note: you can see the example running live on github; see also the source code.
WebAssembly.Memory() constructor - JavaScript
examples creating a new memory instance there are two ways to
get a webassembly.memory object.
... var memory = new webassembly.memory({initial:10, maximum:100}); the second way to
get a webassembly.memory object is to have it exported by a webassembly module.
WebAssembly.Memory - JavaScript
examples creating a new memory object there are two ways to
get a webassembly.memory object.
... var memory = new webassembly.memory({initial:10, maximum:100}); the second way to
get a webassembly.memory object is to have it exported by a webassembly module.
encodeURI() - JavaScript
s encodeuri vs encodeuricomponent encodeuri() differs from encodeuricomponent() as follows: var set1 = ";,/?:@&=+$#"; // reserved characters var set2 = "-_.!~*'()"; // unreserved marks var set3 = "abc abc 123"; // alphanumeric characters + space console.log(encodeuri(set1)); // ;,/?:@&=+$# console.log(encodeuri(set2)); // -_.!~*'() console.log(encodeuri(set3)); // abc%20abc%20123 (the space
gets encoded as %20) console.log(encodeuricomponent(set1)); // %3b%2c%2f%3f%3a%40%26%3d%2b%24%23 console.log(encodeuricomponent(set2)); // -_.!~*'() console.log(encodeuricomponent(set3)); // abc%20abc%20123 (the space
gets encoded as %20) note that encodeuri() by itself cannot form proper http
get and post requests, such as for xmlhttprequest, because "&", "+", and "=" are not encoded, which are t...
...reated as special characters in
get and post requests.
encodeURIComponent() - JavaScript
ri as follows: var set1 = ";,/?:@&=+$"; // reserved characters var set2 = "-_.!~*'()"; // unescaped characters var set3 = "#"; // number sign var set4 = "abc abc 123"; // alphanumeric characters + space console.log(encodeuri(set1)); // ;,/?:@&=+$ console.log(encodeuri(set2)); // -_.!~*'() console.log(encodeuri(set3)); // # console.log(encodeuri(set4)); // abc%20abc%20123 (the space
gets encoded as %20) console.log(encodeuricomponent(set1)); // %3b%2c%2f%3f%3a%40%26%3d%2b%24 console.log(encodeuricomponent(set2)); // -_.!~*'() console.log(encodeuricomponent(set3)); // %23 console.log(encodeuricomponent(set4)); // abc%20abc%20123 (the space
gets encoded as %20) note that a urierror will be thrown if one attempts to encode a surrogate which is not part of a high-low pair, e.g.,...
... for example, if a user writes "jack & jill", the text may
get encoded as "jack & jill".
globalThis - JavaScript
examples search for the global across environments prior to globalthis, the only reliable cross-platform way to
get the global object for an environment was function('return this')().
... however, this causes csp violations in some settings, so es6-shim uses a check like this, for example: var
getglobal = function () { if (typeof self !== 'undefined') { return self; } if (typeof window !== 'undefined') { return window; } if (typeof global !== 'undefined') { return global; } throw new error('unable to locate global object'); }; var globals =
getglobal(); if (typeof globals.settimeout !== 'function') { // no settimeout in this environment!
Lexical grammar - JavaScript
the source text of ecmascript scripts
gets scanned from left to right and is converted into a sequence of input elements which are tokens, control characters, line terminators, comments or white space.
...they include: arguments
get set literals null literal see also null for more information.
Operator precedence - JavaScript
assignment operators are right-associative, so you can write: a = b = 5; // same as writing a = (b = 5); with the expected result that a and b
get the value 5.
...for example, in the expression a && (b + c), if a is falsy, then the sub-expression (b + c) will not even
get evaluated, even if it is in parentheses.
Optional chaining (?.) - JavaScript
let mymap = new map(); mymap.set("foo", {name: "baz", desc: "inga"}); let namebar = mymap.
get("bar")?.name; short-circuiting evaluation when using optional chaining with expressions, if the left operand is null or undefined, the expression will not be evaluated.
...ted stacking the optional chaining operator with nested structures, it is possible to use optional chaining multiple times: let customer = { name: "carl", details: { age: 82, location: "paradise falls" // detailed address is unknown } }; let customercity = customer.details?.address?.city; // … this also works with optional chaining function call let duration = vacations.trip?.
gettime?.(); combining with the nullish coalescing operator the nullish coalescing operator may be used after optional chaining in order to build a default value when none was found: let customer = { name: "carl", details: { age: 82 } }; const customercity = customer?.city ??
export - JavaScript
e top-level module included in your html page, we could have: import { cube, foo, graph } from './my-module.js'; graph.options = { color:'blue', thickness:'3px' }; graph.draw(); console.log(cube(3)); // 27 console.log(foo); // 4.555806215962888 it is important to note the following: you need to include this script in your html with a <script> element of type="module", so that it
gets recognised as a module and dealt with appropriately.
... you can't run js modules via a file:// url — you'll
get cors errors.
throw - JavaScript
function userexception(message) { this.message = message; this.name = 'userexception'; } function
getmonthname(mo) { mo = mo - 1; // adjust month number for array index (1 = jan, 12 = dec) var months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']; if (months[mo] !== undefined) { return months[mo]; } else { throw new userexception('invalidmonthno'); } } try { // statements to try var mymonth = 15; // 15 is out of bound...
... to raise the exception var monthname =
getmonthname(mymonth); } catch (e) { monthname = 'unknown'; console.error(e.message, e.name); // pass exception object to err handler } another example of throwing an object the following example tests an input string for a u.s.
Strict mode - JavaScript
any assignment that silently fails in normal code (assignment to a non-writable global or property, assignment to a
getter-only property, assignment to a new property on a non-extensible object) will throw in strict mode: 'use strict'; // assignment to a non-writable global var undefined = 5; // throws a typeerror var infinity = 5; // throws a typeerror // assignment to a non-writable property var obj1 = {}; object.defineproperty(obj1, 'x', { value: 42, writable: false }); obj1.x = 9; // throws a typeerror // ...
...assignment to a
getter-only property var obj2 = {
get x() { return 17; } }; obj2.x = 5; // throws a typeerror // assignment to a new property on a non-extensible object var fixed = {}; object.preventextensions(fixed); fixed.newprop = 'ohai'; // throws a typeerror third, strict mode makes attempts to delete undeletable properties throw (where before the attempt would simply have no effect): 'use strict'; delete object.prototype; // throws a typeerror fourth, strict mode prior to gecko 34 requires that all properties named in an object literal be unique.
MathML documentation index - MathML
you will still
get an xml parsing error (in case of the xhtml notation of mathml), which has nothing to do with <merror>.
... 32 <msubsup> mathml, mathml reference, mathml:element, mathml:script and limit schemata the mathml <msubsup> element is used to attach both a subscript and a superscript, to
gether, to an expression.
Populating the page: how browsers work - Web Performance
response once we have an established connection to a web server, the browser sends an initial http
get request on behalf of the user, which for websites is most often an html file.
...avoid occupying the main thread, as demonstrated in this webpa
getest example: in this example, the dom content load process took over 1.5 seconds, and the main thread was fully occupied that entire time, unresponsive to click events or screen taps.
Understanding latency - Web Performance
latency is generally considered to be the amount of time it takes from when a request is made by the user to the time it takes for the response to
get back to that user.
... measuring latency network latency is the time it takes for a data request to
get from the computer making the request, to the computer responding.
Privacy, permissions, and information security
good security practices aim to prevent unauthorized access to systems or data, regardless of what the tar
get is.
... keeping personal data safe managing site permissions bringing it all to
gether <using feature policy with permissions and so forth; how to use them to
gether, how they interact, etc> permission requests in <iframe> elements things can
get tricky when your web app uses the <iframe> element to embed content from another site inside your own, especially if the document you load into the frame has its own permission needs to consider.
Structural overview of progressive web apps - Progressive web apps (PWAs)
var entry = template.replace(/pos/g,(i+1)) .replace(/slug/g,games[i].slug) .replace(/name/g,games[i].name) .replace(/author/g,games[i].author) .replace(/twitter/g,games[i].twitter) .replace(/website/g,games[i].website) .replace(/github/g,games[i].github); entry = entry.replace('<a href=\'http:///\'></a>','-'); content += entry; }; document.
getelementbyid('content').innerhtml = content; then it registers a service worker: if ("serviceworker" in navigator) { navigator.serviceworker.register("/pwa-examples/js13kpwa/sw.js"); } after that, the app adds a handler for clicks on a button whose id is notifications; this handler requests permission to send notifications to the user, then generates and sends a random notification.
... var button = document.
getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.requestpermission().then(function(result) { if (result === 'granted') { randomnotification(); } }); }); the randomnotification() function follows, rounding out the last of the code in the file: function randomnotification() { var randomitem = math.floor(math.random()*games.length); var notiftitle = games[randomitem].name; var notifbody = 'created by '+games[randomitem].author+'.'; var notifimg = 'data/img/'+games[randomitem].slug+'.jpg'; var options = { body: notifbody, icon: notifimg } var notif = new notification(notiftitle, options); settimeout(randomnotification, 30000); } the service worker the last file we'll briefly look ...
Web technology reference
the open web is based on a number of technologies which, to
gether, can be used to create everything from simple sites to powerful web applications.
... introduction to css |
getting started with css | learn css | common css questions | reference javascript — dynamic client-side scripting the javascript programming language is used to add interactivity and other dynamic features to web sites.
SVG Presentation Attributes - SVG: Scalable Vector Graphics
value: none|<funciri>|inherit; animatable: yes clip-rule it indicates how to determine what side of a path is inside a shape in order to know how a <clippath> should clip its tar
get.
... value: visible|hidden|scroll|auto|inherit; animatable: yes pointer-events defines whether or when an element may be the tar
get of a mouse event.
attributeName - SVG: Scalable Vector Graphics
the attributename attribute indicates the name of the css property or attribute of the tar
get element that is going to be changed during an animation.
...lns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value <name> default value none animatable no <name> this value indicates the name of the css property or attribute of the tar
get element to be animated.
d - SVG: Scalable Vector Graphics
large-arc-flag allows a choice of large arc (1) or small arc (0), sweep-flag allows a choice of a clockwise arc (1) or anticlockwise arc (0) the current point
gets its x and y coordinates shifted by dx and dy for the next command.
... note: the appearance of a shape closed with closepath may be different to that of one closed by drawing a line to the origin, using one of the other commands, because the line ends are joined to
gether (according to the stroke-linejoin setting), rather than just being placed at the same coordinates.
gradientTransform - SVG: Scalable Vector Graphics
the gradienttransform attribute contains the definition of an optional additional transformation from the gradient coordinate system onto the tar
get coordinate system (i.e., userspaceonuse or objectboundingbox).
...t1)" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient2)" style="transform: translatex(220px);" /> </svg> usage notes default value identity transform value <transform-list> animatable yes <transform-list> a list of transformation functions specifying some additional transformation from the gradient coordinate system onto the tar
get coordinate system.
in - SVG: Scalable Vector Graphics
fillpaint this keyword represents the value of the fill property on the tar
get element for the filter effect.
... strokepaint this keyword represents the value of the stroke property on the tar
get element for the filter effect.
patternContentUnits - SVG: Scalable Vector Graphics
note that the size of the tile is computed against the bounding box of the tar
get element --> <pattern id="p1" width="20%" height="20%" patterncontentunits="userspaceonuse"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- a pattern tile that content coordinates and values are computed against the bounding box of the tar
get element.
... note that the size of the tile is also computed against the bounding box of the tar
get element --> <pattern id="p2" width="20%" height="20%" patterncontentunits="objectboundingbox"> <circle cx=".1" cy=".1" r=".1" /> </pattern> <!-- left square with user space tiles --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> <!-- right square with bounding box tiles --> <rect x="110" y="10" width="80" height="80" fill="url(#p2)" /> </svg> pattern for <pattern>, patterncontentunits defines the coordinate system in use for the content of the element.
pointer-events - SVG: Scalable Vector Graphics
the pointer-events attribute is a presentation attribute that allows defining whether or when an element may be the tar
get of a mouse event.
... fill="white" pointer-events="none" /> </svg> window.addeventlistener('mouseup', (e) => { // let's pick a random color between #000000 and #ffffff const color = math.round(math.random() * 0xffffff) // let's format the color to fit css requirements const fill = '#' + color.tostring(16).padstart(6,'0') // let's apply our color in the // element we actually clicked on e.tar
get.style.fill = fill }) as a presentation attribute, it can be applied to any element but it is mostly relevant only on the following twenty-three elements: <a>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use> usage notes val...
SVG Attribute reference - SVG: Scalable Vector Graphics
spacing specularconstant specularexponent speed spreadmethod startoffset stddeviation stemh stemv stitchtiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfacescale systemlanguage t tabindex tablevalues tar
get tar
getx tar
gety text-anchor text-decoration text-rendering textlength to transform transform-origin type u u1 u2 underline-position underline-thickness unicode unicode-bidi unicode-range units-per-em v v-alphabetic v-hanging v-ideographic v-mathematical values vector-effect version vert-adv-y vert-origin-x vert-origin-y viewbox viewtar
get visibility w w...
...limit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, transform, transform-origin, unicode-bidi, vector-effect, visibility, word-spacing, writing-mode filters attributes filter primitive attributes height, result, width, x, y transfer function attributes type, tablevalues, slope, intercept, amplitude, exponent, offset animation attributes animation attribute tar
get attributes attributetype, attributename animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by, autoreverse, accelerate, decelerate animation addition attributes additive, accumulate event attributes animation event attributes onbegin, onend, onrepeat document event att...
<a> - SVG: Scalable Vector Graphics
value type: no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; default value: none; animatable: no rel the relationship of the tar
get object to the link object.
... value type: <list-of-link-types> ; default value: none; animatable: yes tar
get where to display the linked url.
<animateTransform> - SVG: Scalable Vector Graphics
the animatetransform element animates a transformation attribute on its tar
get element, thereby allowing animations to control translation, scaling, rotation, and/or skewing.
... type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatcount="indefinite"/> </polygon> </svg> live sample attributes global attributes conditional processing attributes » core attributes » animation event attributes » xlink attributes » animation attribute tar
get attributes » animation timing attributes » animation value attributes » animation addition attributes » externalresourcesrequired specific attributes by from to type dom interface this element implements the svganimatetransformelement interface.
<set> - SVG: Scalable Vector Graphics
svg { height:100%; margin:0; padding:0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style> rect { cursor: pointer } .round { rx: 5px; fill: green; } </style> <rect id="me" width="10" height="10"> <set attributename="class" to="round" begin="me.click" dur="2s" /> </rect> </svg> attributes to this attribute defines the value to be applied to the tar
get attribute for the duration of the animation.
... the value must match the requirements of the tar
get attribute.
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
svgsvgelement unimplemented attributes: contentscripttype, contentstyletype, viewport, currentview unimplemented bindings:
getintersectionlist,
getenclosurelist, checkintersection, checkenclosure g implemented.
... hyperlinking module a only xlink:href, xlink:show, xlink:tar
get and xlink:title attributes implemented.
Specification Deviations - SVG: Scalable Vector Graphics
extending the 'style' attribute to apply to all svg elements should only really be visible to svg authors if they call viewcss.
getcomputedstyle on the element or one of its descendants.
... since these elements and their descendants are not displayed, it seems unlikely that anyone will either specify 'style' or call
getcomputedstyle on them.
SVG: Scalable Vector Graphics
getting started this tutorial will help
get you started using svg.
... applying svg effects to html content svg works to
gether with html, css and javascript.
Using the Mozilla JavaScript interface to XSL Transformations - XSLT: Extensible Stylesheet Language Transformations
var testtransform = document.implementation.createdocument("", "test", null); // just an example to
get a transform into a script as a dom // xmldocument.load is asynchronous, so all processing happens in the // onload handler testtransform.addeventlistener("load", onload, false); testtransform.load("test-transform.xml"); function onload() { processor.importstylesheet(testtransform); } xsltprocessor.importstylesheet() requires one argument, a dom node.
... setting parameters you can control parameters for the stylesheet using the xsltprocessor.setparameter(), xsltprocessor.
getparameter(), and xsltprocessor.removeparameter() methods.
Basic Example - XSLT: Extensible Stylesheet Language Transformations
figure 6 : example var xslstylesheet; var xsltprocessor = new xsltprocessor(); var mydom; var xmldoc; function init(){ // load the xslt file, example1.xsl var myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("
get", "example1.xsl", false); myxmlhttprequest.send(null); xslstylesheet = myxmlhttprequest.responsexml; xsltprocessor.importstylesheet(xslstylesheet); // load the xml file, example1.xml myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("
get", "example1.xml", false); myxmlhttprequest.send(null); xmldoc = myxmlhttprequest.responsexml; var fragment = xsltprocessor.tr...
...ansformtofragment(xmldoc, document); document.
getelementbyid("example").innerhtml = ""; mydom = fragment; document.
getelementbyid("example").appendchild(fragment); } ...
JavaScript/XSLT Bindings - XSLT: Extensible Stylesheet Language Transformations
figure 1 : instantiating an xsltprocessor var xsltprocessor = new xsltprocessor(); // load the xsl file using synchronous (third param is set to false) xmlhttprequest var myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("
get", "example.xsl", false); myxmlhttprequest.send(null); var xslref = myxmlhttprequest.responsexml; // finally import the .xsl xsltprocessor.importstylesheet(xslref); for the actual transformation, xsltprocessor requires an xml document, which is used in conjunction with the imported xsl file to produce the final result.
... // importnode is used to clone the nodes we want to process via xslt - true makes it do a deep clone var mynode = document.
getelementbyid("example"); var clonednode = xmlref.importnode(mynode, true); // add the cloned dom into the xml document xmlref.appendchild(clonednode); once the stylesheet has been imported, xsltprocessor has to perform two methods for the actual transformation, namely xsltprocessor.transformtodocument() and xsltprocessor.transformtofragment().
Setting Parameters - XSLT: Extensible Stylesheet Language Transformations
xsltprocessor provides three javascript methods to interact with these parameters: xsltprocessor.setparameter(), xsltprocessor.
getparameter() and xsltprocessor.removeparameter().
... figure 7 : parameters /* xslt: <xsl:param name="myorder" /> */ // javascript: var sortval = xsltprocessor.
getparameter(null, "myorder"); if (sortval == "" || sortval == "descending") xsltprocessor.setparameter(null, "myorder", "ascending"); else xsltprocessor.setparameter(null, "myorder", "descending"); ...
More Wizards - Archive of obsolete content
wizard example source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="thewizard" title="secret code wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function checkcode(){ document.
getelementbyid('thewizard').canadvance = (document.
getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode(); return true;"> <label value="enter the secret code:"/> <textbox id="secretcode" onkeyup="checkcode();"/> </wizardpage> <wizardpage> <label value="that is the correct secret code."/> </wizardpage> </wizard> there is also ...
action - Archive of obsolete content
urces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
assign - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
bbox - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
binding - Archive of obsolete content
ources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
bindings - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
box - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
broadcaster - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
broadcasterset - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
column - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
columns - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
command - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
conditions - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
content - Archive of obsolete content
métodos inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
dropmarker - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
grid - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
grippy - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
hbox - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
keyset - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
listcol - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
listcols - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
listheader - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
member - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
observes - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
page - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
param - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
popupset - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
query - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
queryset - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
row - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
rows - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
rule - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
scrollbar - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
scrollcorner - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
separator - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
spacer - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
spinbuttons - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
splitter - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
stack - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
statusbar - Archive of obsolete content
ources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
stringbundleset - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
tabpanel - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
template - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
textnode - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
titlebar - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
toolbar - Archive of obsolete content
inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
toolbargrippy - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
toolbarpalette - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
toolbarseparator - Archive of obsolete content
ources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
toolbarset - Archive of obsolete content
ources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
toolbarspacer - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
toolbarspring - Archive of obsolete content
ources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
toolbox - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(),...
treechildren - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
treecols - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
treeitem - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
treerow - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
treeseparator - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
triple - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
vbox - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
where - Archive of obsolete content
rces, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
wizardpage - Archive of obsolete content
ht, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus,
getattribute(),
getattributenode(),
getattributenodens(),
getattributens(),
getboundingclientrect(),
getclientrects(),
getelementsbyattribute,
getelementsbyattributens,
getelementsbyclassname(),
getelementsbytagname(),
getelementsbytagnamens(),
getfeature,
getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, is...
AudioListener.forwardY - Web APIs
setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon
get used to it with a bit of experimentation.
AudioListener.forwardZ - Web APIs
setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon
get used to it with a bit of experimentation.
AudioListener.positionX - Web APIs
setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon
get used to it with a bit of experimentation.
AudioListener.positionY - Web APIs
setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon
get used to it with a bit of experimentation.
AudioListener.positionZ - Web APIs
setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon
get used to it with a bit of experimentation.
AudioListener.setOrientation() - Web APIs
setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon
get used to it with a bit of experimentation.
AudioListener.setPosition() - Web APIs
setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon
get used to it with a bit of experimentation.
AudioListener.speedOfSound - Web APIs
setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon
get used to it with a bit of experimentation.
AudioListener.upX - Web APIs
setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon
get used to it with a bit of experimentation.
AudioListener.upY - Web APIs
setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon
get used to it with a bit of experimentation.
AudioListener.upZ - Web APIs
setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon
get used to it with a bit of experimentation.
AudioListener - Web APIs
setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.innerhtml = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon
get used to it with a bit of experimentation.
AudioScheduledSourceNode: ended event - Web APIs
examples in this simple example, an event listener for the ended event is set up to enable a "start" button in the user interface when the node stops playing: node.addeventlistener('ended', () => { document.
getelementbyid("startbutton").disabled = false; }) you can also set up the event handler using the audioscheduledsourcenode.onended property: node.onended = function() { document.
getelementbyid("startbutton").disabled = false; } for an example of the ended event in use, see our audio-buffer example on github.
AudioScheduledSourceNode.onended - Web APIs
node.onended = function(event) { document.
getelementbyid("startbutton").disabled = false; } specifications specification status comment web audio apithe definition of 'onended' in that specification.
CSSValue.cssValueType - Web APIs
example var styledeclaration = document.stylesheets[0].cssrules[0].style; var cssvalue = styledeclaration.
getpropertycssvalue("color"); console.log(cssvalue.cssvaluetype); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssvalue.cssvaluetype' in that specification.
CSS Object Model (CSSOM) - Web APIs
ssfontfacerule cssfontfeaturevaluesmap cssfontfeaturevaluesrule cssgroupingrule cssimportrule csskeyframerule csskeyframesrule cssmarginrule cssmediarule cssnamespacerule csspagerule cssrule cssrulelist cssstyledeclaration cssstylesheet cssstylerule csssupportsrule cssvariablesmap cssviewportrule elementcssinlinestyle fontface fontfaceset fontfacesetloadevent geometryutils
getstyleutils linkstyle medialist mediaquerylist mediaquerylistevent mediaquerylistlistener screen stylesheet stylesheetlist transitionevent several other interfaces are also extended by the cssom-related specifications: document, window, element, htmlelement, htmlimageelement, range, mouseevent, and svgelement.
CSS Painting API - Web APIs
we create our paintworklet called 'hollowhighlights' using the registerpaint() function: registerpaint('hollowhighlights', class { static
get inputproperties() { return ['--boxcolor']; } static
get inputarguments() { return ['*','<length>']; } static
get contextoptions() { return {alpha: true}; } paint(ctx, size, props, args) { const x = 0; const y = size.height * 0.3; const blockwidth = size.width * 0.33; const blockheight = size.height * 0.85; const thecolor = props.
get( '--boxcolor' ); const stroketype = args[0...
CanvasCaptureMediaStreamTrack.canvas - Web APIs
example // find the canvas element to capture var canvaselt = document.
getelementsbytagname("canvas")[0]; //
get the stream var stream = canvaselt.capturestream(25); // 25 fps // do things to the stream ...
CanvasCaptureMediaStreamTrack.requestFrame() - Web APIs
example // find the canvas element to capture var canvaselt = document.
getelementsbytagname("canvas")[0]; //
get the stream var stream = canvaselt.capturestream(25); // 25 fps // send the current state of the canvas as a frame to the stream stream.
getvideotracks()[0].requestframe(); specifications specification status comment media capture from dom elementsthe definition of 'canvascapturemediastream.requestframe()' in that specification.
CanvasGradient.addColorStop() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); let gradient = ctx.createlineargradient(0, 0, 200, 0); gradient.addcolorstop(0, 'green'); gradient.addcolorstop(.7, 'white'); gradient.addcolorstop(1, 'pink'); ctx.fillstyle = gradient; ctx.fillrect(10, 10, 200, 100); result specifications specification status comment html living standardthe definition of 'c...
CanvasRenderingContext2D.beginPath() - Web APIs
const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // first path ctx.beginpath(); ctx.strokestyle = 'blue'; ctx.moveto(20, 20); ctx.lineto(200, 20); ctx.stroke(); // second path ctx.beginpath(); ctx.strokestyle = 'green'; ctx.moveto(20, 20); ctx.lineto(120, 120); ctx.stroke(); result specifications specification status comment html living standardthe defini...
CanvasRenderingContext2D.canvas - Web APIs
you can
get a reference to the canvas element within the canvasrenderingcontext2d by using the canvas property: var canvas = document.
getelementbyid('canvas'); var ctx = canvas.
getcontext('2d'); ctx.canvas // htmlcanvaselement specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.canvas' in that specification.
CanvasRenderingContext2D.clearHitRegions() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // set some hit regions ctx.addhitregion({id: 'eyes'}); ctx.addhitregion({id: 'nose'}); ctx.addhitregion({id: 'mouth'}); // remove them alto
gether from the canvas ctx.clearhitregions(); specifications canvas hit regions have been removed from the whatwg living standard, although discussions about future standardization are ongoing.
CanvasRenderingContext2D.createLinearGradient() - Web APIs
html <canvas id="canvas"></canvas> javascript var canvas = document.
getelementbyid('canvas'); var ctx = canvas.
getcontext('2d'); // create a linear gradient // the start gradient point is at x=20, y=0 // the end gradient point is at x=220, y=0 var gradient = ctx.createlineargradient(20,0, 220,0); // add three color stops gradient.addcolorstop(0, 'green'); gradient.addcolorstop(.5, 'cyan'); gradient.addcolorstop(1, 'green'); // set the fill style and draw a rectang...
CanvasRenderingContext2D.createRadialGradient() - Web APIs
html <canvas id="canvas" width="200" height="200"></canvas> javascript var canvas = document.
getelementbyid('canvas'); var ctx = canvas.
getcontext('2d'); // create a radial gradient // the inner circle is at x=110, y=90, with radius=30 // the outer circle is at x=100, y=100, with radius=70 var gradient = ctx.createradialgradient(110,90,30, 100,100,70); // add three color stops gradient.addcolorstop(0, 'pink'); gradient.addcolorstop(.9, 'white'); gradient.addcolorstop(1, 'green'); // set t...
CanvasRenderingContext2D.currentTransform - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); let matrix = ctx.currenttransform; matrix.a = 1; matrix.b = 1; matrix.c = 0; matrix.d = 1; matrix.e = 0; matrix.f = 0; ctx.currenttransform = matrix; ctx.fillrect(0, 0, 100, 100); result ...
CanvasRenderingContext2D.direction - Web APIs
html <canvas id="canvas"></canvas> javascript var canvas = document.
getelementbyid('canvas'); var ctx = canvas.
getcontext('2d'); ctx.font = '48px serif'; ctx.filltext('hi!', 150, 50); ctx.direction = 'rtl'; ctx.filltext('hi!', 150, 130); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.direction' in that specification.
CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
html <canvas id="canvas"> <button id="button1">continue</button> <button id="button2">quit</button> </canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); const button1 = document.
getelementbyid('button1'); const button2 = document.
getelementbyid('button2'); document.addeventlistener('focus', redraw, true); document.addeventlistener('blur', redraw, true); canvas.addeventlistener('click', handleclick, false); redraw(); function redraw() { ctx.clearrect(0, 0, canvas.width, canvas.height);...
CanvasRenderingContext2D.font - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.font = 'bold 48px serif'; ctx.stroketext('hello world', 50, 100); result loading fonts with the css font loading api with the help of the fontface api, you can explicitly load fonts before using them in a canvas.
CanvasRenderingContext2D.globalCompositeOperation - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.globalcompositeoperation = 'xor'; ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); ctx.fillstyle = 'red'; ctx.fillrect(50, 50, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.globalcompositeoperation' in that specifica...
CanvasRenderingContext2D.imageSmoothingQuality - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); let img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { ctx.imagesmoothingquality = 'low'; ctx.drawimage(img, 0, 0, 300, 150); }; result specifications specification status comment html living standardthe definition of 'imagesmoothingq...
CanvasRenderingContext2D.lineWidth - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.linewidth = 15; ctx.beginpath(); ctx.moveto(20, 20); ctx.lineto(130, 130); ctx.rect(40, 40, 70, 70); ctx.stroke(); result more examples for more examples and explanation about this property, see applying styles and color in the canvas tutorial.
CanvasRenderingContext2D.measureText() - Web APIs
you can
get a textmetrics object using the following code: const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); let text = ctx.measuretext('hello world'); console.log(text.width); // 56; specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.measuretext' in that specification.
CanvasRenderingContext2D.miterLimit - Web APIs
playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginpath(); ctx.moveto(0,0); ctx.linewidth = 15; ctx.lineto(100, 100); ctx.stroke();</textarea> var canvas = document.
getelementbyid("canvas"); var ctx = canvas.
getcontext("2d"); var textarea = document.
getelementbyid("code"); var reset = document.
getelementbyid("reset"); var edit = document.
getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; d...
CanvasRenderingContext2D.moveTo() - Web APIs
var canvas = document.
getelementbyid('canvas'); var ctx = canvas.
getcontext('2d'); ctx.beginpath(); ctx.moveto(50, 50); // begin first sub-path ctx.lineto(200, 50); ctx.moveto(50, 90); // begin second sub-path ctx.lineto(280, 120); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.moveto' in that specification...
CanvasRenderingContext2D.rect() - Web APIs
const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.rect(10, 20, 150, 100); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.rect' in that specification.
CanvasRenderingContext2D.removeHitRegion() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // set a hit region ctx.addhitregion({id: 'eyes'}); // remove it from the canvas ctx.removehitregion('eyes'); specifications canvas hit regions have been removed from the whatwg living standard, although discussions about future standardization are ongoing.
CanvasRenderingContext2D.restore() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // save the default state ctx.save(); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); // restore the default state ctx.restore(); ctx.fillrect(150, 40, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.restore' in that sp...
CanvasRenderingContext2D.shadowBlur - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowblur = 15; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowblur' in that specification.
CanvasRenderingContext2D.shadowOffsetX - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsetx = 25; ctx.shadowblur = 10; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowoffsetx' in that specification.
CanvasRenderingContext2D.shadowOffsetY - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsety = 25; ctx.shadowblur = 10; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150, 80); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowoffsety' in that specification.
CanvasRenderingContext2D.textBaseline - Web APIs
html <canvas id="canvas" width="550" height="500"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom']; ctx.font = '36px serif'; ctx.strokestyle = 'red'; baselines.foreach(function (baseline, index) { ctx.textbaseline = baseline; const y = 75 + index * 75; ctx.beginpath(); ctx.moveto(0, y + 0.5); ctx.lineto(550, y + 0.5); ctx.stroke(); ctx...
CanvasRenderingContext2D.transform() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); ctx.transform(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.transform' in that specification.
CanvasRenderingContext2D.translate() - Web APIs
const canvas = document.
getelementbyid('canvas'); const ctx = canvas.
getcontext('2d'); // moved square ctx.translate(110, 30); ctx.fillstyle = 'red'; ctx.fillrect(0, 0, 80, 80); // reset current transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); // unmoved square ctx.fillstyle = 'gray'; ctx.fillrect(0, 0, 80, 80); result the moved square is red, and the unmoved square is gray.
IDBCursor.source - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.source); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed ...
IDBCursorWithValue.value - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.value); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed d...
IDBDatabase.createObjectStore() - Web APIs
request.onupgradeneeded = function(event) { var db = event.tar
get.result; db.onerror = function(event) { note.innerhtml += "<li>error loading database.</li>"; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minute...
IDBDatabase.onabort - Web APIs
dbopenrequest.onupgradeneeded = function(event) { var db = event.tar
get.result; db.onerror = function() { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function() { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.creat...
IDBDatabase.onversionchange - Web APIs
request.onupgradeneeded = function(event) { var db = event.tar
get.result; db.onerror = function(event) { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function(event) { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objects...
IDBKeyRange.bound() - Web APIs
ange, have a look at the idbkeyrange directory in the indexeddb-examples repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment i...
IDBKeyRange.lower - Web APIs
our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.lower); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment ...
IDBKeyRange.lowerBound() - Web APIs
you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.lowerbound("f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment ...
IDBKeyRange.lowerOpen - Web APIs
idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.loweropen); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment in...
IDBKeyRange.only() - Web APIs
mple allowing you to experiment with key range, have a look at our idbkeyrange repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.only("a"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment in...
IDBKeyRange.upper - Web APIs
our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upper); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment ...
IDBKeyRange.upperBound() - Web APIs
you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.upperbound("f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment ...
IDBKeyRange.upperOpen - Web APIs
idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upperopen); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.tar
get.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment ...
SVGEvent - Web APIs
properties property type description tar
get read only eventtar
get the event tar
get (the topmost tar
get in the dom tree).
SVGExternalResourcesRequired - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgexternalresourcesrequired" tar
get="_top"><rect x="1" y="1" width="280" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgexternalresourcesrequired</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was...
SVGFilterPrimitiveStandardAttributes - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfilterprimitivestandardattributes" tar
get="_top"><rect x="1" y="1" width="360" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfilterprimitivestandardattributes</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgfil...
SVGFontElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontelement" tar
get="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no propertie...
SVGFontFaceElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfaceelement" tar
get="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfaceelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no prope...
SVGFontFaceFormatElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfaceformatelement" tar
get="_top"><rect x="1" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="121" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfaceformatelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has n...
SVGFontFaceNameElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfacenameelement" tar
get="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfacenameelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no ...
SVGFontFaceSrcElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfacesrcelement" tar
get="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfacesrcelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no p...
SVGFontFaceUriElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfaceurielement" tar
get="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfaceurielement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no p...
SVGGeometryElement.isPointInFill() - Web APIs
example svg <svg viewbox="0 0 100 100" width="150" height="150" xmlns="http://www.w3.org/2000/svg"> <circle id="circle" cx="50" cy="50" r="45" fill="white" stroke="black" stroke-width="10"/> <circle cx="10" cy="10" r="5" fill="seagreen"/> <circle cx="40" cy="30" r="5" fill="seagreen"/> </svg> javascript var circle = document.
getelementbyid('circle'); // point not in circle console.log('point at 10,10:', circle.ispointinfill(new dompoint(10, 10))); // point in circle console.log('point at 40,30:', circle.ispointinfill(new dompoint(40, 30))); result specifications specification status comment scalable vector graphics (svg) 2the definition of 'svggeometryelement.ispointinfill()' in that specif...
SVGGeometryElement.isPointInStroke() - Web APIs
example svg <svg viewbox="0 0 100 100" width="150" height="150" xmlns="http://www.w3.org/2000/svg"> <circle id="circle" cx="50" cy="50" r="45" fill="white" stroke="black" stroke-width="10"/> <circle cx="10" cy="10" r="5" fill="seagreen"/> <circle cx="40" cy="30" r="5" fill="seagreen"/> <circle cx="83" cy="17" r="5" fill="seagreen"/> </svg> javascript var circle = document.
getelementbyid('circle'); // point not in circle console.log('point at 10,10:', circle.ispointinstroke(new dompoint(10, 10))); // point in circle but not stroke console.log('point at 40,30:', circle.ispointinstroke(new dompoint(40, 30))); // point in circle stroke console.log('point at 83,17:', circle.ispointinstroke(new dompoint(83, 17))); result specifications specification stat...
SVGGlyphElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgglyphelement" tar
get="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgglyphelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in th...
SVGGlyphRefElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgglyphrefelement" tar
get="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgglyphrefelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherit...
SVGGraphicsElement: copy event - Web APIs
"http://www.w3.org/2000/svg"> <text x="5" y="10" id="text-to-copy">copy this text</text> <foreignobject x="5" y="20" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" placeholder="paste it here"/> </foreignobject> </svg> css input { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript document.
getelementsbytagname("text")[0].addeventlistener("copy", evt => { evt.clipboarddata.setdata('text/plain', document.
getselection().tostring().touppercase()); evt.preventdefault(); }); result specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation definition that the clipboard events apply to svg elements.
SVGHKernElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svghkernelement" tar
get="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svghkernelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properti...
XMLDocument.async - Web APIs
(it has been possible to load documents synchronously since 1.4 alpha.) example function loadxmldata(e) { alert(new xmlserializer().serializetostring(e.tar
get)); // gives querydata.xml contents as string } var xmldoc = document.implementation.createdocument("", "test", null); xmldoc.async = false; xmldoc.onload = loadxmldata; xmldoc.load('querydata.xml'); ...
XMLDocument.load() - Web APIs
examples var xmldoc = document.implementation.createdocument("", "test", null); function documentloaded (e) { alert(new xmlserializer().serializetostring(e.tar
get)); // gives querydata.xml contents as string } xmldoc.addeventlistener("load", documentloaded, false); xmldoc.load('querydata.xml'); see also the load sample in the xml tests directory.
XMLHttpRequest.abort() - Web APIs
var xhr = new xmlhttprequest(), method = "
get", url = "https://developer.mozilla.org/"; xhr.open(method, url, true); xhr.send(); if (oh_noes_we_need_to_cancel_right_now_or_else) { xhr.abort(); } specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest: abort event - Web APIs
('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("
get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jp...
XMLHttpRequest: error event - Web APIs
('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("
get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jp...
XMLHttpRequest: load event - Web APIs
('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("
get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jp...
XMLHttpRequest: loadend event - Web APIs
('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("
get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jp...
XMLHttpRequest: loadstart event - Web APIs
('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("
get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jp...
XMLHttpRequest.onreadystatechange - Web APIs
examples const xhr = new xmlhttprequest(), method = "
get", url = "https://developer.mozilla.org/"; xhr.open(method, url, true); xhr.onreadystatechange = function () { // in local files, status is 0 upon success in mozilla firefox if(xhr.readystate === xmlhttprequest.done) { var status = xhr.status; if (status === 0 || (status >= 200 && status < 400)) { // the request has been completed successfully console.log(xhr.responset...
XMLHttpRequest.open() - Web APIs
syntax xmlhttprequest.open(method, url[, async[, user[, password]]]) parameters method the http request method to use, such as "
get", "post", "put", "delete", etc.
XMLHttpRequest.overrideMimeType() - Web APIs
// interpret the received data as plain text req = new xmlhttprequest(); req.overridemimetype("text/plain"); req.addeventlistener("load", callback, false); req.open("
get", url); req.send(); specifications specification status comment xmlhttprequestthe definition of 'overridemimetype()' in that specification.
XMLHttpRequest: progress event - Web APIs
('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("
get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jp...
XMLHttpRequest.readyState - Web APIs
example var xhr = new xmlhttprequest(); console.log('unsent', xhr.readystate); // readystate will be 0 xhr.open('
get', '/api', true); console.log('opened', xhr.readystate); // readystate will be 1 xhr.onprogress = function () { console.log('loading', xhr.readystate); // readystate will be 3 }; xhr.onload = function () { console.log('done', xhr.readystate); // readystate will be 4 }; xhr.send(null); specifications specification status comment xmlhttprequest living standar...
XMLHttpRequest.response - Web APIs
var url = 'somepage.html'; //a local page function load(url, callback) { var xhr = new xmlhttprequest(); xhr.onreadystatechange = function() { if (xhr.readystate === 4) { callback(xhr.response); } } xhr.open('
get', url, true); xhr.send(''); } specifications specification status comment xmlhttprequest living standard whatwg living standard ...
align-content - CSS: Cascading Style Sheets
nsafe center</option> <option value="safe right">safe right</option> <option value="unsafe right">unsafe right</option> <option value="safe end">safe end</option> <option value="unsafe end">unsafe end</option> <option value="safe flex-end">safe flex-end</option> <option value="unsafe flex-end">unsafe flex-end</option> </select> </div> javascript var values = document.
getelementbyid('values'); var display = document.
getelementbyid('display'); var container = document.
getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.aligncontent = evt.tar
get.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.tar
get.value; }); result specifications specification status co...
align-items - CSS: Cascading Style Sheets
</option> <option value="safe end">safe end</option> <option value="unsafe end">unsafe end</option> <option value="safe self-end">safe self-end</option> <option value="unsafe self-end">unsafe self-end</option> <option value="safe flex-end">safe flex-end</option> <option value="unsafe flex-end">unsafe flex-end</option> </select> </div> javascript var values = document.
getelementbyid('values'); var display = document.
getelementbyid('display'); var container = document.
getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.alignitems = evt.tar
get.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.tar
get.value; }); result specifications specification status comm...
background-blend-mode - CSS: Cascading Style Sheets
ption>difference</option> <option>exclusion</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosity</option> </select> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: screen; } document.
getelementbyid("select").onchange = function(event) { document.
getelementbyid("div").style.backgroundblendmode = document.
getelementbyid("select").selectedoptions[0].innerhtml; } console.log(document.
getelementbyid('div')); specifications specification status comment compositing and blending level 1the definition of 'background-blend-mode' in that specification.
background-position - CSS: Cascading Style Sheets
(position x%) = (x offset value) (container height - image height) * (position y%) = (y offset value) using the x axis for an example, let's say we have an image that is 300px wide and we are using it in a container that is 100px wide, with background-size set to auto: 100px - 300px = -200px (container & image difference) so that with position percentages of -25%, 0%, 50%, 100%, 125%, we
get these image-to-container edge offset values: -200px * -25% = 50px -200px * 0% = 0px -200px * 50% = -100px -200px * 100% = -200px -200px * 125% = -250px so with these resultant values for our example, the left edge of the image is offset from the left edge of the container by: + 50px (putting the left image edge in the center of the 100-pixel-wide container) 0px (left ...
border-image-repeat - CSS: Cascading Style Sheets
try out various border repetition rules on me!</div> <select id="repetition"> <option value="stretch">stretch</option> <option value="repeat">repeat</option> <option value="round">round</option> <option value="space">space</option> <option value="stretch repeat">stretch repeat</option> <option value="space round">space round</option> </select> javascript var repetition = document.
getelementbyid("repetition"); repetition.addeventlistener("change", function (evt) { document.
getelementbyid("bordered").style.borderimagerepeat = evt.tar
get.value; }); results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-repeat' in that specification.
border - CSS: Cascading Style Sheets
alternatively, you can tar
get one border at a time with the physical (e.g., border-top ) and logical (e.g., border-block-start) border properties.
clip-path - CSS: Cascading Style Sheets
</option> <option value="circle(100px at 110px 100px)">circle</option> <option value="url(#cross)" selected>cross</option> <option value="inset(20px round 20px)">inset</option> <option value="path('m 0 200 l 0,110 a 110,90 0,0,1 240,100 l 200 340 z')">path</option> </select> css #clipped { margin-bottom: 20px; clip-path: url(#cross); } javascript const clippathselect = document.
getelementbyid("clippath"); clippathselect.addeventlistener("change", function (evt) { document.
getelementbyid("clipped").style.clippath = evt.tar
get.value; }); result specifications specification status comment css masking module level 1the definition of 'clip-path' in that specification.
contain - CSS: Cascading Style Sheets
this property is useful on pages that contain a lot of wid
gets that are all independent, as it can be used to prevent each wid
get's internals from having side effects outside of the wid
get's bounding-box.
<filter-function> - CSS: Cascading Style Sheets
lider.max = 1; slider.step = 0.01; slider.setattribute('data-unit', ''); } else if(filter === 'hue-rotate') { slider.value = 0; slider.min = 0; slider.max = 360; slider.step = 1; slider.setattribute('data-unit', 'deg'); } } function setdiv(filter) { if(filter === 'drop-shadow') { divelem.style.filter = `${selectelem.value}(${math.round(slider.value)}${slider.
getattribute('data-unit')} ${math.round(slider.value)}${slider.
getattribute('data-unit')} ${math.round(math.abs(slider.value/2))}${slider.
getattribute('data-unit')})`; } else { divelem.style.filter = `${selectelem.value}(${slider.value}${slider.
getattribute('data-unit')}`; } updateoutput(); updatecurvalue(); } function updateoutput() { output.textcontent = slider.value; } function up...
filter - CSS: Cascading Style Sheets
.mydiv { filter: grayscale(50%); } /* gray all images by 50% and blur by 10px */ img { filter: grayscale(0.5) blur(10px); } applying svg filters examples of using the url function with an svg resource are as follows: .tar
get { filter: url(#c1); } .mydiv { filter: url(commonfilters.xml#large-blur); } specifications specification status comment filter effects module level 1the definition of 'filter' in that specification.
Math.log() - JavaScript
logxy\log_x y): function
getbaselog(x, y) { return math.log(y) / math.log(x); } if you run
getbaselog(10, 1000) it returns 2.9999999999999996 due to floating-point rounding, which is very close to the actual answer of 3.
Math.tan() - JavaScript
function
gettandeg(deg) { var rad = deg * math.pi/180; return math.tan(rad); } specifications specification ecmascript (ecma-262)the definition of 'math.tan' in that specification.
Number.prototype.toLocaleString() - JavaScript
in order to
get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: var number = 123456.789; // german uses comma as decimal separator and period for thousands console.log(number.tolocalestring('de-de')); // → 123.456,789 // arabic in most arabic speaking countries uses eastern arabic...
Object.entries() - JavaScript
'bar', baz: 42 }; console.log(object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] // array like object const obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] // array like object with random key ordering const anobj = { 100: 'a', 2: 'b', 7: 'c' }; console.log(object.entries(anobj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ] //
getfoo is property which isn't enumerable const myobj = object.create({}, {
getfoo: { value() { return this.foo; } } }); myobj.foo = 'bar'; console.log(object.entries(myobj)); // [ ['foo', 'bar'] ] // non-object argument will be coerced to an object console.log(object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ] // returns an empty array for any primitive type, since primitives have n...
Object.isSealed() - JavaScript
object.isfrozen(sealed); // === true // (all properties also non-writable) var s2 = object.seal({ p: 3 }); object.isfrozen(s2); // === false // ('p' is still writable) var s3 = object.seal({
get p() { return 0; } }); object.isfrozen(s3); // === true // (only configurability matters for accessor properties) non-object coercion in es5, if the argument to this method is not an object (a primitive), then it will cause a typeerror.
Object.keys() - JavaScript
ing object.keys // simple array const arr = ['a', 'b', 'c']; console.log(object.keys(arr)); // console: ['0', '1', '2'] // array-like object const obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(object.keys(obj)); // console: ['0', '1', '2'] // array-like object with random key ordering const anobj = { 100: 'a', 2: 'b', 7: 'c' }; console.log(object.keys(anobj)); // console: ['2', '7', '100'] //
getfoo is a property which isn't enumerable const myobj = object.create({}, {
getfoo: { value: function () { return this.foo; } } }); myobj.foo = 1; console.log(object.keys(myobj)); // console: ['foo'] if you want all properties—including non-enumerables—see object.
getownpropertynames().
Object.seal() - JavaScript
object.defineproperty(obj, 'foo', {
get: function() { return 'g'; } }); // throws a typeerror // now any changes, other than to property values, // will fail.
Object.prototype.toString() - JavaScript
rn `dog ${this.name} is a ${this.sex} ${this.color} ${this.breed}`; } with the preceding code in place, any time thedog is used in a string context, javascript automatically calls the dogtostring() function, which returns the following string: "dog gabby is a female chocolate lab" using tostring() to detect object class tostring() can be used with every object and (by default) allows you to
get its class.
Object.prototype.valueOf() - JavaScript
examples using valueof on custom types function mynumbertype(n) { this.number = n; } mynumbertype.prototype.valueof = function() { return this.number; }; var myobj = new mynumbertype(4); myobj + 3; // 7 using unary plus +"5" // 5 (string to number) +"" // 0 (string to number) +"1 + 2" // nan (doesn't evaluate) +new date() // same as (new date()).
gettime() +"foo" // nan (string to number) +{} // nan +[] // 0 (tostring() returns an empty string list) +[1] // 1 +[1,2] // nan +new set([1]) // nan +bigint(1) // uncaught typeerror: cannot convert a bigint value to a number +undefined // nan +null // 0 +true // 1 +false // 0 specifications specification ecmascript (ecma-262)the definition of 'object.prototype.valueof' in th...
Object.values() - JavaScript
); // ['bar', 42] // array-like object const arraylikeobj1 = { 0: 'a', 1: 'b', 2: 'c' }; console.log(object.values(arraylikeobj1 )); // ['a', 'b', 'c'] // array-like object with random key ordering // when using numeric keys, the values are returned in the keys' numerical order const arraylikeobj2 = { 100: 'a', 2: 'b', 7: 'c' }; console.log(object.values(arraylikeobj2 )); // ['b', 'c', 'a'] //
getfoo is property which isn't enumerable const my_obj = object.create({}, {
getfoo: { value: function() { return this.foo; } } }); my_obj.foo = 'bar'; console.log(object.values(my_obj)); // ['bar'] // non-object argument will be coerced to an object console.log(object.values('foo')); // ['f', 'o', 'o'] specifications specification ecmascript (ecma-262)the definition of 'ob...
Promise.all() - JavaScript
w promise((resolve, reject) => { settimeout(() => { resolve("foo"); }, 100); }); promise.all([p1, p2, p3]).then(values => { console.log(values); // [3, 1337, "foo"] }); if the iterable contains non-promise values, they will be ignored, but still counted in the returned promise array value (if the promise is fulfilled): // this will be counted as if the iterable passed is empty, so it
gets fulfilled var p = promise.all([1,2,3]); // this will be counted as if the iterable passed contains only the resolved promise with value "444", so it
gets fulfilled var p2 = promise.all([1,2,3, promise.resolve(444)]); // this will be counted as if the iterable passed contains only the rejected promise with value "555", so it
gets rejected var p3 = promise.all([1,2,3, promise.reject(555)]); // us...
Promise.prototype.finally() - JavaScript
examples using finally let isloading = true; fetch(myrequest).then(function(response) { var contenttype = response.headers.
get("content-type"); if(contenttype && contenttype.includes("application/json")) { return response.json(); } throw new typeerror("oops, we haven't got json!"); }) .then(function(json) { /* process your json further */ }) .catch(function(error) { console.error(error); /* this line can also throw, e.g.