Search completed in 1.49 seconds.
ByteLengthQueuingStrategy.ByteLengthQueuingStrategy() - Web APIs
the byte
lengthqueuingstrategy() constructor creates and returns a byte
lengthqueuingstrategy object instance.
... syntax var byte
lengthqueuingstrategy = new byte
lengthqueuingstrategy({highwatermark}); parameters {highwatermark} an object containing a highwatermark property.
... return value an instance of the byte
lengthqueuingstrategy object.
...And 2 more matches
SVGLength - Web APIs
svg
length interface the svg
length interface correspond to the <
length> basic data type.
... an svg
length object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
...implement none methods void newvaluespecifiedunits(in unsigned short unittype, in float valueinspecifiedunits) void converttospecifiedunits(in unsigned short unittype) properties readonly unsigned short unittype float value float valueinspecifiedunits domstring valueasstring constants svg_
lengthtype_unknown = 0 svg_
lengthtype_number = 1 svg_
lengthtype_percentage = 2 svg_
lengthtype_ems = 3 svg_
lengthtype_exs = 4 svg_
lengthtype_px = 5 svg_
lengthtype_cm = 6 svg_
lengthtype_mm = 7 svg_
lengthtype_in = 8 svg_
lengthtype_pt = 9 svg_
lengthtype_pc = 10 normative document svg 1.1 (2nd edition) example <svg height="200" on...
...And 21 more matches
<length> - CSS: Cascading Style Sheets
the <
length> css data type represents a distance value.
...
lengths can be used in numerous css properties, such as width, height, margin, padding, border-width, font-size, and text-shadow.
... note: although <percentage> values are also css dimensions, and are usable in some of the same properties that accept <
length> values, they are not themselves <
length> values.
...And 21 more matches
pathLength - SVG: Scalable Vector Graphics
the path
length attribute lets authors specify a total
length for the path, in user units.
... this value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio path
length/(computed value of path
length).
... this can affect the actual rendered
lengths of paths; including text paths, animation paths, and various stroke operations.
...And 12 more matches
kernelUnitLength - SVG: Scalable Vector Graphics
the kernelunit
length attribute has two meanings based on the context it's used in.
... three elements are using this attribute: <feconvolvematrix>, <fediffuselighting>, and <fespecularlighting> feconvolvematrix for the <feconvolvematrix>, kernelunit
length indicates the intended distance in current filter units (i.e., units as determined by the value of primitiveunits attribute) between successive columns and rows, respectively, in the kernelmatrix.
... by specifying value(s) for kernelunit
length, the kernel becomes defined in a scalable, abstract coordinate system.
...And 10 more matches
String length - JavaScript
the
length property of a string object contains the
length of the string, in utf-16 code units.
...
length is a read-only data property of string instances.
...utf-16, the string format used by javascript, uses a single 16-bit code unit to represent the most common characters, but needs to use two code units for less commonly-used characters, so it's possible for the value returned by
length to not match the actual number of characters in the string.
...And 9 more matches
JS_HasArrayLength
determines if an object has an array
length property.
... syntax jsbool js_hasarray
length(jscontext *cx, jsobject *obj, jsuint *
lengthp); name type description cx jscontext * pointer to a js context from which to derive runtime information.
... obj jsobject * array object to get the
length of.
...And 8 more matches
JS_SetArrayLength
set the
length property of an object.
... syntax bool js_setarray
length(jscontext *cx, js::handle<jsobject*> obj, uint32_t
length); name type description cx jscontext * the context in which to change the
length of the array.
...
length uint32_t number of array elements to set.
...And 8 more matches
SVGLengthList - Web APIs
svg
length list interface the svg
lengthlist defines a list of svg
length objects.
... an svg
lengthlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
... note: starting in gecko 5.0,the svg
lengthlist dom interface is now indexable and can be accessed like arrays interface overview also implement none methods void clear() svg
length initialize(in svg
length newitem) svg
length getitem(in unsigned long index) svg
length insertitembefore(in svg
length newitem, in unsigned long index) svg
length replaceitem(in svg
length newitem, in unsigned long index) svg
length removeitem(in unsigned long index) svg
length appenditem(in svg
length newitem) properties readonly unsigned long numberofitems readonly unsigned long
length normative document svg 1.1 (2nd edition) properties name type description numberofitems ...
...And 8 more matches
Array.prototype.length - JavaScript
the
length property of an object which is an instance of type array sets or returns the number of elements in that array.
... description the value of the
length property is an integer with a positive sign and a value less than 2 to the 32nd power (232).
... var namelista = new array(4294967296); //2 to the 32nd power = 4294967296 var namelistc = new array(-100) //negative sign console.log(namelista.
length); //rangeerror: invalid array
length console.log(namelistc.
length); //rangeerror: invalid array
length var namelistb = []; namelistb.
length = math.pow(2,32)-1; //set array
length less than 2 to the 32nd power console.log(namelistb.
length); //4294967295 you can set the
length property to truncate an array at any time.
...And 8 more matches
textLength - SVG: Scalable Vector Graphics
the text
length attribute, available on svg <text> and <tspan> elements, lets you specify the width of the space into which the text will draw.
... the user agent will ensure that the text does not extend farther than that distance, using the method or methods specified by the
lengthadjust attribute.
... by default, only the spacing between characters is adjusted, but the glyph size can also be adjusted if you change
lengthadjust.
...And 8 more matches
HTML attribute: minlength - HTML: Hypertext Markup Language
the min
length attribute defines the minimum number of characters (as utf-16 code units) the user can enter into an <input> or <textarea>.
...if no min
length is specified, or an invalid value is specified, the input has no minimum
length.
... this value must be less than or equal to the value of max
length, otherwise the value will never be valid, as it is impossible to meet both criteria.
...And 6 more matches
JS_GetArrayLength
syntax bool js_getarray
length(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.
...
lengthp uint32_t * out parameter.
... on success, *
lengthp receives the
length of the array.
...And 5 more matches
RangeError: invalid array length - JavaScript
the javascript exception "invalid array
length" occurs when creating an array or an arraybuffer which has a
length which is either negative or larger or equal to 232, or when setting the array.
length property to a value which is either negative or larger or equal to 232.
... message rangeerror: array
length must be a finite positive integer (edge) rangeerror: invalid array
length (firefox) rangeerror: invalid array
length (chrome) rangeerror: invalid array buffer
length (chrome) error type rangeerror what went wrong?
... an invalid array
length might appear in these situations: when creating an array or an arraybuffer which has a
length which is either negative or larger or equal to 232, or when setting the array.
length property to a value which is either negative or larger or equal to 232.
...And 5 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_getlatin1stringcharsand
length(jscontext *cx, const js::autocheckcannotgc &nogc, jsstring *str, size_t *
length); const char16_t * js_gettwobytestringcharsand
length(jscontext *cx, const js::autocheckcannotgc &nogc, jsstring *str, size_t *
length); name type description cx jscontext * a context.
...
length size_t * out parameter.
...And 4 more matches
ByteLengthQueuingStrategy - Web APIs
the byte
lengthqueuingstrategy interface of the the streams api provides a built-in byte
length queuing strategy that can be used when constructing streams.
... constructor byte
lengthqueuingstrategy() creates a new byte
lengthqueuingstrategy object instance.
... methods byte
lengthqueuingstrategy.size() returns the given chunk’s byte
length property.
...And 4 more matches
<length-percentage> - CSS: Cascading Style Sheets
the <
length-percentage> css data type represents a value that can be either a <
length> or a <percentage>.
... syntax refer to the documentation for <
length> and <percentage> for details of the individual syntaxes allowed by this type.
... examples
length-percentage examples the following simple example demonstrates several properties that use <
length-percentage> values.
...And 4 more matches
HTML attribute: maxlength - HTML: Hypertext Markup Language
the max
length attribute defines the maximum number of characters (as utf-16 code units) the user can enter into an <input> or <textarea>.
...if no max
length is specified, or an invalid value is specified, the input or textarea has no maximum
length.
... any max
length value must be greater than or equal to the value of min
length, if present and valid.
...And 4 more matches
Function.length - JavaScript
the
length property indicates the number of parameters expected by the function.
... property attributes of function.
length writable no enumerable no configurable yes description
length is a property of a function object, and indicates how many arguments the function expects, i.e.
...by contrast, arguments.
length is local to a function and provides the number of arguments actually passed to the function.
...And 4 more matches
lengthAdjust - SVG: Scalable Vector Graphics
the
lengthadjust attribute controls how the text is stretched into the
length defined by the text
length attribute.
... four elements are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg width="300" height="150" xmlns="http://www.w3.org/2000/svg"> <g font-face="sans-serif"> <text x="0" y="20" text
length="300"
lengthadjust="spacing"> stretched using spacing only.
... </text> <text x="0" y="50" text
length="300"
lengthadjust="spacingandglyphs"> stretched using spacing and glyphs.
...And 4 more matches
JS_GetStringLength
return the
length, in 16-bit code units, of a javascript string.
... syntax size_t js_getstring
length(jsstring *str); name type description str jsstring * the string to examine.
... description js_getstring
length reports the
length, in 16-bit code units, of the string str.
...And 3 more matches
DataTransferItemList.length - Web APIs
the read-only
length property of the datatransferitemlist interface returns the number of items currently in the drag item list.
... syntax
length = datatransferitemlist.
length; value the number of drag data items in the list, or 0 if the list is empty or disabled.
... example this example shows the use of the
length property.
...And 3 more matches
SVGAnimatedLengthList - Web APIs
svg animated
length list interface the svganimated
lengthlist interface is used for attributes of type svg
lengthlist which can be animated.
... interface overview also implement none methods none properties readonly svg
lengthlist baseval readonly svg
lengthlist animval normative document svg 1.1 (2nd edition) properties name type description baseval svg
lengthlist the base value of the given attribute before applying any animations.
... animval svg
lengthlist a read only svg
lengthlist representing the current animated value of the given attribute.
...And 3 more matches
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_getstringcharsand
length(jscontext *cx, jsstring *str, size_t *
length); name type description cx jscontext * the context.
...
length size_t * out parameter.
...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_getstringencoding
length(jscontext *cx, jsstring *str); name type description cx jscontext * a context.
... description js_getstringencoding
length returns the
length of the specified string in bytes, regardless of its encoding.
...And 2 more matches
JS_IdArrayLength
this article covers features introduced in spidermonkey 17 get the
length of a jsidarray.
... syntax int js_idarray
length(jscontext *cx, jsidarray *ida); name type description cx jscontext * a context.
... ida jsidarray * the jsidarray to get the
length of.
...And 2 more matches
AudioTrackList.length - Web APIs
the read-only audiotracklist property
length returns the number of entries in the audiotracklist, each of which is an audiotrack representing one audio track in the media element.
... syntax var trackcount = audiotracklist.
length; value a number indicating how many audio tracks are included in the audiotracklist.
... var videoelem = document.queryselector("video"); var numaudiotracks = 0; if (videoelem.audiotracks) { numaudiotracks = videoelem.audiotracks.
length; } note that this sample checks to be sure htmlmediaelement.audiotracks is defined, to avoid failing on browsers without support for audiotrack.
...And 2 more matches
NodeList.length - Web APIs
the nodelist.
length property returns the number of items in a nodelist.
... syntax numitems = nodelist.
length numitems is an integer value representing the number of items in a nodelist.
... example the
length property is often useful in dom programming.
...And 2 more matches
SVGAnimatedLength - Web APIs
svg animated
length interface the svganimated
length interface is used for attributes of basic type <
length> which can be animated.
... interface overview also implement none methods none properties readonly svg
length baseval readonly svg
length animval normative document svg 1.1 (2nd edition) properties name type description baseval svg
length the base value of the given attribute before applying any animations.
... animval svg
length if the given attribute or property is being animated, contains the current animated value of the attribute or property.
...And 2 more matches
XRInputSourceArray.length - Web APIs
the read-only
length property returns an integer value indicating the number of items in the input source list represented by the xrinputsourcearray object.
... syntax let inputsourcecount = xrinputsourcearray.
length; value an integer value indicating the number of xrinputsource objects representing webxr input sources are includled in the array.
... examples in this example, a game that requires at least one input source uses
length to check this before proceeding to allow the user to play the game.
...And 2 more matches
arguments.length - JavaScript
the arguments.
length property contains the number of arguments passed to the function.
... description the arguments.
length property provides the number of arguments actually passed to a function.
... this can be more or less than the defined parameter's count (see function.
length).
...And 2 more matches
JS::GetDeflatedUTF8StringLength
this article covers features introduced in spidermonkey 38 returns the
length of the char buffer required to encode given string as utf8.
... syntax size_t getdeflatedutf8string
length(jsflatstring* s); name type description s jsflatstring * the pointer to the string to calculate the
length.
... description js::getdeflatedutf8string
length returns the
length of the char buffer required to encode s as utf8.
... the returned
length does not include the null-terminator.
ByteLengthQueuingStrategy.size() - Web APIs
the size() method of the byte
lengthqueuingstrategy interface returns the given chunk’s byte
length property.
... syntax var size = byte
lengthqueuingstrategy.size(chunk); parameters chunk a chunk of data being passed through the stream.
... return value an integer representing the byte
length of the given chunk.
... examples const queuingstrategy = new byte
lengthqueuingstrategy({ highwatermark: 1 }); const readablestream = new readablestream({ start(controller) { ...
CSSValueList.length - Web APIs
the
length read-only property of the cssvaluelist interface represents the number of cssvalues in the list.
... the range of valid values of the indices is 0 to
length-1 inclusive.
... syntax var
length = cssvaluelist.
length; value an unsigned long representing the number of cssvalues.
... specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssvaluelist.
length' in that specification.
DOMTokenList.length - Web APIs
the
length read-only property of the domtokenlist interface is an integer representing the number of objects stored in the object.
... syntax tokenlist.
length; value an integer.
... examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist, then write the
length of the list to the <span>'s node.textcontent.
... first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let
length = classes.
length; span.textcontent = `classlist
length = ${
length}`; the output looks like this: specifications specification status comment domthe definition of '
length' in that specification.
HTMLFormElement.length - Web APIs
the htmlformelement.
length read-only property returns the number of controls in the <form> element.
... 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.
... syntax numcontrols = form.
length; value numcontrols is the number of form controls within the <form>.
... 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.
SpeechGrammarList.length - Web APIs
the
length read-only property of the speechgrammarlist interface returns the number of speechgrammar objects contained in the speechgrammarlist.
... syntax var mylist
length = speechgrammarlistinstance.
length; value a number indicating the number of speechgrammar objects contained in the speechgrammarlist.
... moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; speechrecognitionlist.
length; // should return 1.
... specifications specification status comment web speech apithe definition of '
length' in that specification.
Storage.length - Web APIs
the
length read-only property of the storage interface returns the number of data items stored in a given storage object.
... syntax
length = storage.
length; return value the number of items stored in the storage object.
... example the following function adds three data items to the local storage for the current domain, then returns the number of items in the storage: function populatestorage() { localstorage.setitem('bgcolor', 'yellow'); localstorage.setitem('font', 'helvetica'); localstorage.setitem('image', 'cats.png'); return localstorage.
length; // should return 3 } note: for a real world example, see our web storage demo.
... specifications specification status comment html living standardthe definition of 'storage.
length' in that specification.
TextTrackList.length - Web APIs
the read-only texttracklist property
length returns the number of entries in the texttracklist, each of which is a texttrack representing one track in the media element.
... syntax var trackcount = texttracklist.
length; value a number indicating how many text tracks are included in the texttracklist.
... var mediaelem = document.queryselector("video, audio"); var numtexttracks = 0; if (mediaelem.texttracks) { numtexttracks = mediaelem.texttracks.
length; } note that this sample checks to be sure htmlmediaelement.texttracks is defined, to avoid failing on browsers without support for texttrack.
... specifications specification status comment html living standardthe definition of 'texttracklist:
length' in that specification.
TouchList.length - Web APIs
the
length read-only property indicates the number of items (touch points) in a given touchlist.
... syntax var numtouches = touchlist.
length; return value numtouches the number of touch points in touchlist.
... example this code example illustrates the use of the touchlist interface's item method and the
length property.
... target = document.getelementbyid("target"); target.addeventlistener('touchstart', function(ev) { // if this touchstart event started on element target, // set touch to the first item in the targettouches list; // otherwise set touch to the first item in the touches list var touch; if (ev.targettouches.
length >= 1) touch = ev.targettouches.item(0); else touch = ev.touches.item(0); }, false); specifications specification status comment touch events – level 2 draft non-stable version.
VideoTrackList.length - Web APIs
the read-only videotracklist property
length returns the number of entries in the videotracklist, each of which is a videotrack representing one video track in the media element.
... syntax var trackcount = videotracklist.
length; value a number indicating how many video tracks are included in the videotracklist.
... var videoelem = document.queryselector("video"); var numvideotracks = 0; if (videoelem.videotracks) { numvideotracks = videoelem.videotracks.
length; } note that this sample checks to be sure htmlmediaelement.videotracks is defined, to avoid failing on browsers without support for videotrack.
... specifications specification status comment html living standardthe definition of 'videotracklist:
length' in that specification.
XPathResult.snapshotLength - Web APIs
the read-only snapshot
length property of the xpathresult interface represents the number of nodes in the result snapshot.
... syntax var snapshot
length = result.snapshot
length; return value an integer value representing the number of nodes in the result snapshot.
... example the following example shows the use of the snapshot
length property.
... html <div>xpath example</div> <div>number of matched nodes: <output></output></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.ordered_node_snapshot_type, null); document.queryselector("output").textcontent = result.snapshot
length; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.snapshot
length' in that specification.
DataView.prototype.byteLength - JavaScript
the byte
length accessor property represents the
length (in bytes) of this view from the start of its arraybuffer or sharedarraybuffer.
... description the byte
length property is an accessor property whose set accessor function is undefined, meaning that you can only read this property.
...if the dataview is not specifying an offset or a byte
length, the byte
length of the referenced arraybuffer or sharedarraybuffer will be returned.
... examples using the byte
length property var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.byte
length; // 8 (matches the byte
length of the buffer) var dataview2 = new dataview(buffer, 1, 5); dataview2.byte
length; // 5 (as specified when constructing the dataview) var dataview3 = new dataview(buffer, 2); dataview3.byte
length; // 6 (due to the offset of the constructed dataview) specifications specification ecmascript (ecma-262)the definition of 'dataview.prototype.byte
length' in that specification.
TypedArray.prototype.byteLength - JavaScript
the byte
length accessor property represents the
length (in bytes) of a typed array.
... description the byte
length property is an accessor property whose set accessor function is undefined, meaning that you can only read this property.
...if the typedarray is not specifying an byteoffset or a
length, the
length of the referenced arraybuffer will be returned.
... examples using the byte
length property var buffer = new arraybuffer(8); var uint8 = new uint8array(buffer); uint8.byte
length; // 8 (matches the byte
length of the buffer) var uint8 = new uint8array(buffer, 1, 5); uint8.byte
length; // 5 (as specified when constructing the uint8array) var uint8 = new uint8array(buffer, 2); uint8.byte
length; // 6 (due to the offset of the constructed uint8array) specifications specification ecmascript (ecma-262)the definition of 'typedarray.prototype.byte
length' in that specification.
TypedArray.prototype.length - JavaScript
the
length accessor property represents the
length (in elements) of a typed array.
... description the
length property is an accessor property whose set accessor function is undefined, meaning that you can only read this property.
...if the typedarray is not specifying an byteoffset or a
length, the
length of the referenced arraybuffer will be returned.
... examples using the
length property var buffer = new arraybuffer(8); var uint8 = new uint8array(buffer); uint8.
length; // 8 (matches the
length of the buffer) var uint8 = new uint8array(buffer, 1, 5); uint8.
length; // 5 (as specified when constructing the uint8array) var uint8 = new uint8array(buffer, 2); uint8.
length; // 6 (due to the offset of the constructed uint8array) specifications specification ecmascript (ecma-262)the definition of 'typedarray.prototype.
length' in that specification.
WebAssembly.Table.prototype.length - JavaScript
the
length prototype property of the webassembly.table object returns the
length of the table, i.e.
... syntax table.
length; examples using
length the following example creates a new webassembly table instance with an initial size of 2 and a maximum size of 10.
... var table = new webassembly.table({ element: "anyfunc", initial: 2, maximum: 10 }); you can then grow the table by 1 with the following: console.log(table.
length); // "2" console.log(table.grow(1)); // "2" console.log(table.
length); // "3" specifications specification webassembly javascript interfacethe definition of '
length' in that specification.
... desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.js
lengthchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noop...
AudioBuffer.length - Web APIs
the
length property of the audiobuffer interface returns an integer representing the
length, in sample-frames, of the pcm data stored in the buffer.
... syntax var myarraybuffer = audioctx.createbuffer(2, framecount, audioctx.samplerate); myarraybuffer.
length; value an integer.
... 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; } } console.log(myarraybuffer.
length); } specification specification status comment web audio apithe definition of '
length' in that specification.
CSSUnparsedValue.length - Web APIs
the
length read-only property of the cssunparsedvalue interface returns the number of items in the object.
... syntax var
length = cssunparsedvalue.
length; value an integer.
... examples in this example we employ the cssunparsedvalue.cssunparsedvalue() constructor, then query the
length: let values = new cssunparsedvalue( ['1em', '#445566', '-45px'] ); console.log( values.
length ) // 3 specifications specification status comment css typed om level 1the definition of '
length' in that specification.
History.length - Web APIs
the history.
length read-only property returns an integer representing the number of elements in the session history, including the currently loaded page.
... syntax const
length = history.
length specifications specification status comment html living standardthe definition of 'history.
length' in that specification.
... html5the definition of 'history.
length' in that specification.
OfflineAudioContext.length - Web APIs
the
length property of the offlineaudiocontext interface returns an integer representing the size of the buffer in sample-frames.
... syntax var
length = offlineaudiocontext.
length; value an integer representing the size of the buffer in sample-frames.
... specifications specification status comment web audio apithe definition of '
length' in that specification.
SVGGeometryElement.getPointAtLength() - Web APIs
the svggeometryelement.getpointat
length() method returns the point at a given distance along the path.
... syntax dompoint someelement.getpointat
length(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.gettotal
length()' in that specification.
SVGGeometryElement.getTotalLength() - Web APIs
the svggeometryelement.gettotal
length() method returns the user agent's computed value for the total
length of the path in user units.
... syntax float someelement.gettotal
length(); 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.gettotal
length()' in that specification.
SVGPathElement.getPointAtLength() - Web APIs
the svgpathelement.getpointat
length() method returns the point at a given distance along the path.
... syntax svgpoint someelement.getpointat
length(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.gettotal
length()' in that specification.
SVGPathElement.getTotalLength() - Web APIs
the svgpathelement.gettotal
length() method returns the user agent's computed value for the total
length of the path in user units.
... syntax float someelement.gettotal
length(); 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.gettotal
length()' in that specification.
SourceBufferList.length - Web APIs
the
length read-only property of the sourcebufferlist interface returns the number of sourcebuffer objects in the list.
... syntax var mylist
length = sourcebufferlist.
length; value an unsigned long number.
... example tbd specifications specification status comment media source extensionsthe definition of '
length' in that specification.
SpeechRecognitionResult.length - Web APIs
the
length read-only property of the speechrecognitionresult interface returns the
length of the "array" — the number of speechrecognitionalternative objects contained in the result (also referred to as "n-best alternatives".) the number of alternatives contained in the result depends on what the speechrecognition.maxalternatives property was set to when the speech recognition was first initiated.
... syntax var my
length = speechrecognitionresultinstance.
length; returns a number.
... // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log(event.results[0].
length); } specifications specification status comment web speech apithe definition of '
length' in that specification.
SpeechRecognitionResultList.length - Web APIs
the
length read-only property of the speechrecognitionresultlist interface returns the
length of the "array" — the number of speechrecognitionresult objects in the list.
... syntax var my
length = speechrecognitionresultlistinstance.
length; returns a number.
... // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log(event.results.
length); } specifications specification status comment web speech apithe definition of '
length' in that specification.
TimeRanges.length - Web APIs
the timeranges.
length read-only property returns the number of ranges in the object.
... syntax
length = timeranges.
length; example given a video element with the id "myvideo": var v = document.getelementbyid("myvideo"); var buf = v.buffered; var numranges = buf.
length; if (buf.
length == 1) { // only one range if (buf.start(0) == 0 && buf.end(0) == v.duration) { // the one range starts at the beginning and ends at // the end of the video, so the whole thing is loaded } } this example looks at the time ranges and looks to see if the entire video has been loaded.
... specifications specification status comment html living standardthe definition of 'timeranges.
length()' in that specification.
Window.length - Web APIs
syntax framescount = window.
length; framescount is the number of frames.
... example if (window.
length) { // this is a document with subframes } specifications specification status comment html living standardthe definition of 'window.
length' in that specification.
... living standard html5the definition of 'window.
length' in that specification.
Content-Length - HTTP
the content-
length entity header indicates the size of the entity-body, in bytes, sent to the recipient.
... header type entity header forbidden header name yes syntax content-
length: <
length> directives <
length> the
length in decimal number of octets.
... specifications specification title rfc 7230, section 3.3.2: content-
length hypertext transfer protocol (http/1.1): message syntax and routing ...
411 Length Required - HTTP
the hypertext transfer protocol (http) 411
length required client error response code indicates that the server refuses to accept the request without a defined content-
length header.
... note: by specification, when sending data in a series of chunks, the content-
length header is omitted and at the beginning of each chunk you need to add the
length of the current chunk in hexadecimal format.
... status 411
length required specifications specification title rfc 7231, section 6.5.10: 411
length required hypertext transfer protocol (http/1.1): semantics and content ...
ArrayBuffer.prototype.byteLength - JavaScript
the byte
length accessor property represents the
length of an arraybuffer in bytes.
... description the byte
length property is an accessor property whose set accessor function is undefined, meaning that you can only read this property.
... examples using byte
length var buffer = new arraybuffer(8); buffer.byte
length; // 8 specifications specification ecmascript (ecma-262)the definition of 'arraybuffer.prototype.byte
length' in that specification.
SharedArrayBuffer.prototype.byteLength - JavaScript
the byte
length accessor property represents the
length of an sharedarraybuffer in bytes.
... description the byte
length property is an accessor property whose set accessor function is undefined, meaning that you can only read this property.
... examples using byte
length var sab = new sharedarraybuffer(1024); sab.byte
length; // 1024 specifications specification ecmascript (ecma-262)the definition of 'sharedarraybuffer.prototype.byte
length' in that specification.
PR_GetErrorTextLength
gets the
length of the error text.
... syntax #include <prerror.h> print32 pr_geterrortext
length(void) returns if a zero is returned, no error text is currently set.
Length
« xpcom api reference summary the
length function returns the number of storage units in the string's internal buffer (not including the null-terminator if present).
... size_type
length() const; ...
Length
« xpcom api reference summary the
length function returns the number of storage units in the string's internal buffer (not including the null-terminator if present).
... size_type
length() const; ...
CSSStyleDeclaration.length - Web APIs
syntax var num = styles.
length; value an integer that provides the number of styles explictly set on the parent of the instance.
... example the following gets the number of explicitly set styles on the following html element: <div id="div1" style="margin: 0 10px; background-color: #ca1; font-family: monospace"></div> javascript code: var mydiv = document.getelementbyid('div1'); var divstyle = mydiv.style; var len = divstyle.
length; // 6 specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.
length' in that specification.
ProgressEvent.lengthComputable - Web APIs
the progressevent.
lengthcomputable read-only property is a boolean flag indicating if the resource concerned by the progressevent has a
length that can be calculated.
... syntax flag = progressevent.
lengthcomputable specifications specification status comment xmlhttprequestthe definition of 'progressevent.
lengthcomputable' in that specification.
SVGGeometryElement.pathLength - Web APIs
the svggeometryelement.path
length property reflects the path
length attribute and returns the total
length of the path, in user units.
... syntax var path
length = someelement.path
length; specifications specification status comment scalable vector graphics (svg) 2the definition of 'svggeometryelement.path
length' in that specification.
SVGPathElement.pathLength - Web APIs
the svgpathelement.path
length property reflects the path
length attribute and returns the total
length of the path, in user units.
... syntax var path
length = someelement.path
length; specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgpathelement.path
length' in that specification.
TrackDefaultList.length - Web APIs
the
length read-only property of the trackdefaultlist interface returns the number of trackdefault objects in the list.
... syntax var mylist
length = trackdefaultlist.
length; value an unsigned long number.
string-length - XPath
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the string-
length function returns a number equal to the number of characters in a given string.
... syntax string-
length( [string] ) arguments string(optional) the string to evaluate.
StringView - Archive of obsolete content
|*| http://www.gnu.org/licenses/lgpl-3.0.html |*| \*/ function stringview (vinput, sencoding /* optional (default: utf-8) */, noffset /* optional */, n
length /* optional */) { var ftaview, awhole, araw, fputoutptcode, fgetoutptchrsize, ninptlen, nstartidx = isfinite(noffset) ?
... noffset : 0, ntranscrtype = 15; if (sencoding) { this.encoding = sencoding.tostring(); } encswitch: switch (this.encoding) { case "utf-8": fputoutptcode = stringview.pututf8charcode; fgetoutptchrsize = stringview.getutf8char
length; ftaview = uint8array; break encswitch; case "utf-16": fputoutptcode = stringview.pututf16charcode; fgetoutptchrsize = stringview.getutf16char
length; 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 argument i...
... vinput.byte
length >>> 2 : this.encoding === "utf-16" ?
...And 97 more matches
Index - Web APIs
109 audiobuffer.
length api, audiobuffer, property, reference, web audio api,
length the
length property of the audiobuffer interface returns an integer representing the
length, in sample-frames, of the pcm data stored in the buffer.
... 195 audiotracklist.
length api, audio, audiotracklist, html dom, media, property, read-only, reference,
length, list, track the read-only audiotracklist property
length returns the number of entries in the audiotracklist, each of which is an audiotrack representing one audio track in the media element.
... 289 blob.size api, blob, bytes, file api, files, property, reference,
length, size the blob interface's size property returns the size of the blob or file in bytes.
...And 52 more matches
JavaScript Daemons Management - Archive of obsolete content
|*| http://www.gnu.org/licenses/gpl-3.0.html |*| \*/ "use strict"; /**************************** * the daemon system * ****************************/ /* the global "daemon" constructor */ function daemon (oowner, ftask, nrate, nlen, finit, fonstart) { if (!(this && this instanceof daemon)) { return; } if (arguments.
length < 2) { throw new typeerror("daemon - not enough arguments"); } if (oowner) { this.owner = oowner }; this.task = ftask; if (isfinite(nrate) && nrate > 0) { this.rate = math.floor(nrate); } if (nlen > 0) { this.
length = math.floor(nlen); } if (fonstart) { this.onstart = fonstart; } if (finit) { this.onstop = finit; finit.call(oowner, this.index, this.
length, this...
...*/ daemon.prototype; daemon.context.constructor = object; /* these properties can be manually reconfigured after the creation of the daemon */ daemon.prototype.owner = daemon.context; daemon.prototype.task = null; daemon.prototype.rate = 100; daemon.prototype.
length = infinity; daemon.prototype.reversals = 0; daemon.prototype.onstart = null; daemon.prototype.onstop = null; /* these properties should be read-only after the creation of the daemon */ daemon.prototype.session = -1; daemon.prototype.index = 0; daemon.prototype.paused = true; daemon.prototype.backw = true; /* system required daemon global object methods */ daemon.forcecall...
...-1 : 1; var bbreak = odmn.task.call(odmn.owner, odmn.index, odmn.
length, odmn.backw) === false, bend = odmn.isatend(), binvert = odmn.reversals > 0; if (bend && !binvert || bbreak) { odmn.pause(); return false; } if (bend && binvert) { odmn.backw = !odmn.backw; odmn.reversals--; } return true; }; /* system not required daemon global object methods */ /** * daemon global object optional methods (shortcuts).
...And 39 more matches
x - SVG: Scalable Vector Graphics
value list of <
length> default value none animatable yes feblend for <feblend>, x defines the minimum x coordinate for the rendering area of the primitive.
... value <
length> | <percentage> default value 0% animatable yes fecolormatrix for <fecolormatrix>, x defines the minimum x coordinate for the rendering area of the primitive.
... value <
length> | <percentage> default value 0% animatable yes fecomponenttransfer for <fecomponenttransfer>, x defines the minimum x coordinate for the rendering area of the primitive.
...And 31 more matches
y - SVG: Scalable Vector Graphics
value list of <
length> default value none animatable yes feblend for <feblend>, y defines the minimum y coordinate for the rendering area of the primitive.
... value <
length> | <percentage> default value 0% animatable yes fecolormatrix for <fecolormatrix>, y defines the minimum y coordinate for the rendering area of the primitive.
... value <
length> | <percentage> default value 0% animatable yes fecomponenttransfer for <fecomponenttransfer>, y defines the minimum y coordinate for the rendering area of the primitive.
...And 31 more matches
Mozilla internal string guide
common read-only methods: .
length() - the number of code units (bytes for 8-bit string classes and char16_ts for 16-bit string classes) in the string.
...use this instead of testing string.
length == 0 .equals(string) - true if the given string has the same value as the current string.
... .truncate(
length) - shortens the string to the given
length.
...And 30 more matches
height - SVG: Scalable Vector Graphics
the height attribute defines the vertical
length of an element in the user coordinate system.
...pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- with a height of 0 or less, nothing will be rendered --> <rect y="0" x="0" width="90" height="0"/> <rect y="0" x="100" width="90" height="60"/> <rect y="0" x="200" width="90" height="100%"/> </svg> feblend for <feblend>, height defines the vertical
length for the rendering area of the primitive.
... value <
length> | <percentage> default value 100% animatable yes fecolormatrix for <fecolormatrix>, height defines the vertical
length for the rendering area of the primitive.
...And 28 more matches
width - SVG: Scalable Vector Graphics
the width attribute defines the horizontal
length of an element in the user coordinate system.
...pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <!-- with a width of 0 or less, nothing will be rendered --> <rect x="0" y="0" width="0" height="90"/> <rect x="0" y="100" width="60" height="90"/> <rect x="0" y="200" width="100%" height="90"/> </svg> feblend for <feblend>, width defines the horizontal
length for the rendering area of the primitive.
... value <
length> | <percentage> default value 100% animatable yes fecolormatrix for <fecolormatrix>, width defines the horizontal
length for the rendering area of the primitive.
...And 28 more matches
Index
the caller must either ensure dst has enough space to encode the entire string, or pass the
length of the buffer as dstlenp.
... 44 js::getdeflatedutf8string
length jsapi reference, reference, référence(2), spidermonkey js::getdeflatedutf8string
length returns the
length of the char buffer required to encode s as utf8.
... the returned
length does not include the null-terminator.
...And 25 more matches
jspage - Archive of obsolete content
his;};d.implement=function(m,l,o){if(typeof m=="string"){return j(this,m,l,o);}for(var n in m){j(this,n,m[n],l); }return this;};if(c){d.implement(c);}return d;};native.genericize=function(b,c,a){if((!a||!b[c])&&typeof b.prototype[c]=="function"){b[c]=function(){var d=array.prototype.slice.call(arguments); return b.prototype[c].apply(d.shift(),d);};}};native.implement=function(d,c){for(var b=0,a=d.
length;b<a;b++){d[b].implement(c);}};native.typize=function(a,b){if(!a.type){a.type=function(c){return($type(c)===b); };}};(function(){var a={array:array,date:date,function:function,number:number,regexp:regexp,string:string};for(var h in a){new native({name:h,initialize:a[h],protect:true}); }var d={"boolean":boolean,"native":native,object:object};for(var c in d){native.typize(d[c],c);}var f={array:["con...
...cat","indexof","join","lastindexof","pop","push","reverse","shift","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;},get
length:function(){var b=0;for(var a in this){if(this.hasownp...
...roperty(a)){b++; }}return b;}});hash.alias("foreach","each");array.implement({foreach:function(c,d){for(var b=0,a=this.
length;b<a;b++){c.call(d,this[b],b,this);}}});array.alias("foreach","each"); function $a(b){if(b.item){var a=b.
length,c=new array(a);while(a--){c[a]=b[a];}return c;}return array.prototype.slice.call(b);}function $arguments(a){return function(){return arguments[a]; };}function $chk(a){return !!(a||a===0);}function $clear(a){cleartimeout(a);clearinterval(a);return null;}function $defined(a){return(a!=undefined);}function $each(c,b,d){var a=$type(c); ((a=="arguments"||a=="collection"||a=="array")?array:hash).each(c,b,d);}function $empty(){}function $extend(c,a){for(var b in (a||{})){c[b]=a[b];}return c; }function $h(a){return new hash(a);}function $lambda(a){return($type(a)=="funct...
...And 22 more matches
JXON - Archive of obsolete content
.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 jxontree (oxmlparent) { var nattrlen = 0, n
length = 0, scollectedtxt = ""; if (oxmlparent.haschildnodes()) { for (var onode, sprop, vcontent, nitem = 0; nitem < oxmlparent.childnodes.
length; nitem++) { onode = oxmlparent.childnodes.item(nitem); if ((onode.nodetype - 1 | 1) === 3) { scollectedtxt += onode.nodetype === 3 ?
...3) or "cdatasection" (4) else if (onode.nodetype === 1 && !onode.prefix) { // nodetype is "element" (1) sprop = onode.nodename.tolowercase(); vcontent = new jxontree(onode); if (this.hasownproperty(sprop)) { if (this[sprop].constructor !== array) { this[sprop] = [this[sprop]]; } this[sprop].push(vcontent); } else { this[sprop] = vcontent; n
length++; } } } this.keyvalue = parsetext(scollectedtxt); } else { this.keyvalue = null; } if (oparentnode.hasattributes && oxmlparent.hasattributes()) { var oattrib; this.keyattributes = {}; for (nattrlen; nattrlen < oxmlparent.attributes.
length; nattrlen++) { oattrib = oxmlparent.attributes.item(nattrlen); this.keyattributes[oattrib.name.tolowercase()] = parse...
... this.key
length = n
length; this.attributes
length = nattrlen; // this.domnode = oxmlparent; */ /* object.freeze(this); */ } /* * optional methods...
...And 19 more matches
Index
-m | --key-len key
length specify the desired
length of the symmetric key to be used to encrypt the private key.
... -n | --cert-key-len certkey
length specify the desired
length of the symmetric key to be used to encrypt the certificates and other meta-data.
... example 1 $ ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output connected to interzone.mcom.com:443 -->; [ alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-
length = 39 (0x27) sid-
length = 0 (0x00) challenge-
length = 16 (0x10) cipher-suites = { (0x010080) ssl2/rsa/rc4-128/md5 (0x020080) ssl2/rsa/rc4-40/md5 (0x030080) ssl2/rsa/rc2cbc128/md5 (0x040080) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x...
...And 19 more matches
Looping code - Learn web development
const cats = ['bill', 'jeff', 'pete', 'biggles', 'jasmin']; let info = 'my cats are called '; const para = document.queryselector('p'); for (let i = 0; i < cats.
length; i++) { info += cats[i] + ', '; } para.textcontent = info; this gives us the following output: hidden code 2 <!doctype html> <html> <head> <meta charset="utf-8"> <title>basic for loop example</title> <style> </style> </head> <body> <p></p> <script> const cats = ['bill', 'jeff', 'pete', 'biggles', 'jasmin']; let info = 'my cats are called '; const...
... para = document.queryselector('p'); for (let i = 0; i < cats.
length; i++) { info += cats[i] + ', '; } para.textcontent = info; </script> </body> </html> note: you can find this example code on github too (also see it running live).
... the loop has been told to run until i is no longer smaller than the
length of the cats array.
...And 18 more matches
Indexed collections - JavaScript
it has a property for determining the array
length and other properties for use with regular expressions.
...the array's
length property is set to the number of arguments.
... to create an array with non-zero
length, but without any items, either of the following can be used: // this...
...And 18 more matches
TextEncoder.prototype.encodeInto() - Web APIs
this may be less than string.
length if uint8array did not have enough space.
...u8array.subarray(position|0) : u8array); } var u8array = new uint8array(8); encodeintoatposition("hello", u8array, 2); console.log( "" + u8array.join() ); // 0,0,104,101,108,108,111,0 buffer sizing to convert a javascript string s, the output space needed for full conversion is never less than s.
length bytes and never greater than s.
length * 3 bytes.
... if the output allocation (typically within wasm heap) is expected to be short-lived, it makes sense to simply allocate s.
length * 3 bytes for the output, in which case the first conversion attempt is guaranteed to convert the whole string.
...And 17 more matches
NSS tools : ssltap
example 1 $ ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output connected to interzone.mcom.com:443 -->; [ alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-
length = 39 (0x27) sid-
length = 0 (0x00) challenge-
length = 16 (0x10) cipher-suites = { (0x010080) ssl2/rsa/rc4-128/md5 (0x020080) ssl2/rsa/rc4-40/md5 (0x030080) ssl2/rsa/rc2cbc128/md5 (0x040080) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x...
... type = 22 (handshake) version = { 3,0 }
length = 997 (0x3e5) handshake { 0: 02 00 00 46 |...f type = 2 (server_hello)
length = 70 (0x000046) serverhello { server_version = {3, 0} random = {...} 0: 77 8c 6e 26 6c 0c ec c0 d9 58 4f 47 d3 2d 01 45 | wn&l.ì..xog.-.e 10: 5c 17 75 43 a7 4c 88 c7 88 64 3c 50 41 48 4f 7f | \.uc§l.Ç...
... session id = {
length = 32 contents = {..} 0: 14 11 07 a8 2a 31 91 29 11 94 40 37 57 10 a7 32 | ...¨*1.)..@7w.§2 10: 56 6f 52 62 fe 3d b3 65 b1 e4 13 0f 52 a3 c8 f6 | vorbþ=³e±...r£È.
...And 16 more matches
nsIDOMWindowUtils
vekeyboardlayout, in long anativekeycode, in long amodifierflags, in astring acharacters, in astring aunmodifiedcharacters); void sendnativemouseevent(in long ascreenx, in long ascreeny, in long anativemessage, in long amodifierflags, in nsidomelement aelement); nsiquerycontenteventresult sendquerycontentevent(in unsigned long atype, in unsigned long aoffset, in unsigned long a
length, in long ax, in long ay); obsolete since gecko 31.0 nsiquerycontenteventresult sendquerycontentevent(in unsigned long atype, in unsigned long aoffset, in unsigned long a
length, in long ax, in long ay, [optional] in unsigned long aadditionalflags); boolean sendselectionsetevent(in unsigned long aoffset, in unsigned long a
length, in boolean areverse); obsolete since gecko 31.0 ...
... boolean sendselectionsetevent(in unsigned long aoffset, in unsigned long a
length, [optional] in unsigned long aadditionalflags); void sendsimplegestureevent(in astring atype, in float ax, in float ay, in unsigned long adirection, in double adelta, in long amodifiers); void sendtextevent(in astring acompositionstring, in long afirstclause
length, in unsigned long afirstclauseattr, in long asecondclause
length, in unsigned long asecondclauseattr, in long athirdclause
length, in unsigned long athirdclauseattr, in long acaretstart, in long acaret
length); obsolete since gecko 26 boolean sendtouchevent(in astring atype, [array, size_is(count)] in pruint32 aidentifiers, [array, size_is(count)] in print32 axs, [array, size_is(count)] in print32 ays, [array, size_is(cou...
...when this is set (or not set query_content_flag_use_xp_line_break), the aoffset and a
length are offset and
length in/of the content generated with native line breaks (e.g., "\r\n" on windows).
...And 16 more matches
nsDependentCString
r 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(char assign assignascii assignliteral(const char assignliteral(char adopt replace replacea...
...scii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity set
length truncate getdata getmutabledata setisvoid stripchar base classes nscstring data members no public members.
...pruint32
length the
length of the string.
...And 15 more matches
<input type="email"> - HTML: Hypertext Markup Language
value a domstring representing an e-mail address, or empty events change and input supported common attributes autocomplete, list, max
length, min
length, multiple, name,pattern, placeholder, readonly, required, size, and type idl attributes list and value methods select() value the <input> element's value attribute contains a domstring which is automatically validated as conforming to e-mail syntax.
... additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, email inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options max
length the maximum number of characters the input should accept min
length the minimum number of characters long the input can be and still be considered valid multiple whether or not to allow multiple, comma-separated, e-mail addresses to be entered pattern a regular expression the input's contents must match in order to be valid placeholder an exemplar...
... max
length the maximum number of characters (as utf-16 code units) the user can enter into the email input.
...And 15 more matches
Content type - SVG: Scalable Vector Graphics
coordinate <coordinate> a <coordinate> is a
length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for x coordinates, the y-axis for y coordinates).
... its syntax is the same as that for <
length>.
... within the svg dom, a <coordinate> is represented as an svg
length or an svganimated
length.
...And 15 more matches
NSS tools : ssltab
example 1 $ ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output connected to interzone.mcom.com:443 -->; [ alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-
length = 39 (0x27) sid-
length = 0 (0x00) challenge-
length = 16 (0x10) cipher-suites = { (0x010080) ssl2/rsa/rc4-128/md5 (0x020080) ssl2/rsa/rc4-40/md5 (0x030080) ssl2/rsa/rc2cbc128/md5 (0x040080) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0700c0) ssl2/rsa/3des192ede-cbc/md5 (0x000004) ssl3/rsa/rc4-128/md5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/rsa/3des192ede-cbc/sha (...
...type = 22 (handshake) version = { 3,0 }
length = 997 (0x3e5) handshake { 0: 02 00 00 46 |...f type = 2 (server_hello)
length = 70 (0x000046) serverhello { server_version = {3, 0} random = {...} 0: 77 8c 6e 26 6c 0c ec c0 d9 58 4f 47 d3 2d 01 45 | wn&l.ì..xog.-.e 10: 5c 17 75 43 a7 4c 88 c7 88 64 3c 50 41 48 4f 7f | \.uc§l.Ç.d<paho.
... session id = {
length = 32 contents = {..} 0: 14 11 07 a8 2a 31 91 29 11 94 40 37 57 10 a7 32 | ...¨*1.)..@7w.§2 10: 56 6f 52 62 fe 3d b3 65 b1 e4 13 0f 52 a3 c8 f6 | vorbþ=³e±...r£È.
...And 14 more matches
NSS tools : ssltap
example 1 $ ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output connected to interzone.mcom.com:443 -->; [ alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-
length = 39 (0x27) sid-
length = 0 (0x00) challenge-
length = 16 (0x10) cipher-suites = { (0x010080) ssl2/rsa/rc4-128/md5 (0x020080) ssl2/rsa/rc4-40/md5 (0x030080) ssl2/rsa/rc2cbc128/md5 (0x040080) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0700c0) ssl2/rsa/3des192ede-cbc/md5 (0x000004) ssl3/rsa/rc4-128/md5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/rsa/3des192ede-cbc/sha (...
...type = 22 (handshake) version = { 3,0 }
length = 997 (0x3e5) handshake { 0: 02 00 00 46 |...f type = 2 (server_hello)
length = 70 (0x000046) serverhello { server_version = {3, 0} random = {...} 0: 77 8c 6e 26 6c 0c ec c0 d9 58 4f 47 d3 2d 01 45 | wn&l.ì..xog.-.e 10: 5c 17 75 43 a7 4c 88 c7 88 64 3c 50 41 48 4f 7f | \.uc§l.Ç.d<paho.
... session id = {
length = 32 contents = {..} 0: 14 11 07 a8 2a 31 91 29 11 94 40 37 57 10 a7 32 | ...¨*1.)..@7w.§2 10: 56 6f 52 62 fe 3d b3 65 b1 e4 13 0f 52 a3 c8 f6 | vorbþ=³e±...r£È.
...And 14 more matches
<input type="tel"> - HTML: Hypertext Markup Language
value a domstring representing a telephone number, or empty events change and input supported common attributes autocomplete, list, max
length, min
length, pattern, placeholder, readonly, and size idl attributes list, selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), setselectionrange() value the <input> element's value attribute contains a domstring that either represents a telephone number or is an empty string ("").
... additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, telephone number inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options max
length the maximum
length, in utf-16 characters, to accept as a valid input min
length the minimum
length that is considered valid for the field's contents pattern a regular expression the entered value must match to pass constraint validation placeholder an example value to display inside the field when it has no value readonly a boolean attribute which, if present, indicates that the field's contents should not be...
... max
length the maximum number of characters (as utf-16 code units) the user can enter into the telephone number field.
...And 14 more matches
Array - JavaScript
neither the
length of a javascript array nor the types of its elements are fixed.
... since an array's
length can change at any time, and data can be stored at non-contiguous locations in the array, javascript arrays are not guaranteed to be dense; this depends on how the programmer chooses to use them.
... common operations create an array let fruits = ['apple', 'banana'] console.log(fruits.
length) // 2 access an array item using the index position let first = fruits[0] // apple let last = fruits[fruits.
length - 1] // banana loop over an array fruits.foreach(function(item, index, array) { console.log(item, index) }) // apple 0 // banana 1 add an item to the end of an array let new
length = fruits.push('orange') // ["apple", "banana", "orange"] remove an item from the end of an...
...And 14 more matches
nss tech note5
ch 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 */ /* turn the secitem into a key object */ pk11symkey* symkey = pk11_importsymkey(slot, ciphermech, pk11_originunwrap, cka_encrypt, &keyitem, null); if generating the key - see section generate a symmetric key <big>prepare th...
...if not using cbc mode, just pass a null iv parm to pk11_paramfromiv function secitem ivitem; ivitem.data = /* ptr to an array of iv bytes */ ivitem.len = /*
length of the array of iv bytes */ secitem *secparam = pk11_paramfromiv(ciphermech, &ivitem);</big> <big>now encrypt and decrypt using the key and parameter setup in above steps</big> create encryption context pk11context* enccontext = pk11_createcontextbysymkey(ciphermech, cka_encrypt or cka_decrypt, symkey, secparam); do the operation.
... pk11context* digestcontext = pk11_createdigestcontext(sec_oid_md5); <big>digest the data</big> <big>secstatus s = pk11_digestbegin(digestcontext); s = pk11_digestop(digestcontext, data, sizeof data); s = pk11_digestfinal(digestcontext, digest, &len, sizeof digest); /* now, digest contains the 'digest', and len contains the
length of the digest */</big> clean up pk11_destroycontext(digestcontext, pr_true); you can also look at a sample program illustrating this hash / digest with secret key included include headers #include "nss.h" #include "pk11pub.h" make sure nss is initialized.the simplest init function, in case you don't need a nss database is nss_nodb_init(".") choose a digest mech...
...And 13 more matches
NSS Tools ssltap
command ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output output connected to interzone.mcom.com:443--> [alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-
length = 39 (0x27) sid-
length = 0 (0x00) challenge-
length = 16 (0x10) cipher-suites = { (0x010080) ssl2/rsa/rc4-128/md5 (0x020080) ssl2/rsa/rc4-40/md5 (0x030080) ssl2/rsa/rc2cbc128/md5 (0x040080) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0700c0) ssl2/rsa/3d...
... type = 22 (handshake) version = { 3,0 }
length = 997 (0x3e5) handshake { 0: 02 00 00 46 |...f type = 2 (server_hello)
length = 70 (0x000046) serverhello { server_version = {3, 0} random = {...} 0: 77 8c 6e 26 6c 0c ec c0 d9 58 4f 47 d3 2d 01 45 |wn&l.ì..xog.-.e 10: 5c 17 75 43 a7 4c 88 c7 88 64 3c 50 41 48 4f 7f |\.uc§l.Ç.d<paho.
... session id = {
length = 32 contents = {..} 0: 14 11 07 a8 2a 31 91 29 11 94 40 37 57 10 a7 32 | ...¨*1.)..@7w.§2 10: 56 6f 52 62 fe 3d b3 65 b1 e4 13 0f 52 a3 c8 f6 | vorbþ=³e±...r£È.
...And 13 more matches
nsDependentString
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 assign assignascii assignliteral(const char assignliteral(char adopt replace replacea...
...scii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity set
length truncate getdata getmutabledata setisvoid stripchar base classes nsstring data members no public members.
... methods constructors void nsdependentstring(const prunichar*, const prunichar*) - source constructors parameters prunichar* start prunichar* end void nsdependentstring(const prunichar*, pruint32) - source parameters prunichar* data pruint32
length void nsdependentstring(const prunichar*) - source parameters prunichar* data void nsdependentstring(const nsastring_internal&) - source parameters nsastring_internal& str void nsdependentstring() - source assertvalid void assertvalid() - source verify restrictions rebind void rebind(const prunichar*) - source allow this class to be bound to a different string...
...And 13 more matches
WindowOrWorkerGlobalScope.setInterval() - Web APIs
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>javascript typewriter - mdn example</title> <script> function typewriter (sselector, nrate) { function clean () { clearinterval(nintervid); btyping = false; bstart = true; ocurrent = null; asheets.
length = nidx = 0; } function scroll (osheet, npos, beraseandstop) { if (!osheet.hasownproperty('parts') || amap.
length < npos) { return true; } var orel, bexit = false; if (amap.
length === npos) { amap.push(0); } while (amap[npos] < osheet.parts.
length) { orel = osheet.parts[amap[npos]]; scroll(orel, npos + 1, beraseandstop) ?
... amap[npos]++ : bexit = true; if (beraseandstop && (orel.ref.nodetype - 1 | 1) === 3 && orel.ref.nodevalue) { bexit = true; ocurrent = orel.ref; spart = ocurrent.nodevalue; ocurrent.nodevalue = ''; } osheet.ref.appendchild(orel.ref); if (bexit) { return false; } } amap.
length--; return true; } function typewrite () { if (spart.
length === 0 && scroll(asheets[nidx], 0, true) && nidx++ === asheets.
length - 1) { clean(); return; } ocurrent.nodevalue += spart.charat(0); spart = spart.slice(1); } function sheet (onode) { this.ref = onode; if (!onode.haschildnodes()) { return; } this.parts = array.prototype.slice.call(onode.childnodes); for (var nchild = 0; nchild < this.parts.
length; nchild++...
...ovechild(this.parts[nchild]); this.parts[nchild] = new sheet(this.parts[nchild]); } } var nintervid, ocurrent = null, btyping = false, bstart = true, nidx = 0, spart = "", asheets = [], amap = []; this.rate = nrate || 100; this.play = function () { if (btyping) { return; } if (bstart) { var aitems = document.queryselectorall(sselector); if (aitems.
length === 0) { return; } for (var nitem = 0; nitem < aitems.
length; nitem++) { asheets.push(new sheet(aitems[nitem])); /* uncomment the following line if you have previously hidden your elements via css: */ // aitems[nitem].style.visibility = "visible"; } bstart = false; } nintervid = setinterval(typewrite, this.rate); btyping = true; }; this...
...And 13 more matches
<input type="text"> - HTML: Hypertext Markup Language
events change and input supported common attributes autocomplete, list, max
length, min
length, pattern, placeholder, readonly, required and size idl attributes list, value methods select(), setrangetext() and setselectionrange().
... additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, text inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options max
length the maximum number of characters the input should accept min
length the minimum number of characters long the input can be and still be considered valid pattern a regular expression the input's contents must match in order to be valid placeholder an exemplar value to display in the input field whenever it is empty readonly a boolean attribute indi...
... max
length the maximum number of characters (as utf-16 code units) the user can enter into the text input.
...And 13 more matches
<input type="url"> - HTML: Hypertext Markup Language
value a domstring representing a url, or empty events change and input supported common attributes autocomplete, list, max
length, min
length, pattern, placeholder, readonly, required and size idl attributes list, value, selectionend, selectiondirection methods select(), setrangetext() and setselectionrange().
... additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, url inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options max
length the maximum number of characters the input should accept min
length the minimum number of characters long the input can be and still be considered valid pattern a regular expression the input's contents must match in order to be valid placeholder an exemplar value to display in the input field whenever it is empty readonly a boolean attribute indi...
... max
length the maximum number of characters (as utf-16 code units) the user can enter into the url input.
...And 13 more matches
CSS values and units - Learn web development
in css specifications and on the property pages here on mdn you will be able to spot values as they will be surrounded by angle brackets, such as <color> or <
length>.
... numbers,
lengths, and percentages there are various numeric data types that you might find yourself using in css.
...<dimension> is an umbrella category that includes the <
length>, <angle>, <time>, and <resolution> types.
...And 12 more matches
Client-side form validation - Learn web development
min
length and max
length: specifies the minimum and maximum
length of textual data (strings) min and max: specifies the minimum and maximum values of numerical input types type: specifies whether the data needs to be a number, an email address, or some other specific preset type.
... constraining the
length of your entries you can constrain the character
length of all text fields created by <input> or <textarea> by using the min
length and max
length attributes.
... a field is invalid if it has a value and that value has fewer characters than the min
length value or more than the max
length value.
...And 12 more matches
Useful string methods - Learn web development
previous overview: first steps next now that we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the
length of a text string, joining and splitting strings, substituting one character in a string for another, and more.
... finding the
length of a string this is easy — you simply use the
length property.
... try entering the following lines: let browsertype = 'mozilla'; browsertype.
length; this should return the number 7, because "mozilla" is 7 characters long.
...And 12 more matches
NS_ConvertASCIItoUTF16
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 assign assignascii assignliteral(const char assignliteral(char adopt replace replacea...
...scii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity set
length truncate getdata getmutabledata setisvoid stripchar base classes nsautostring data members no public members.
... methods constructors void ns_convertasciitoutf16(const char*) - source parameters char* acstring void ns_convertasciitoutf16(const char*, pruint32) - source parameters char* acstring pruint32 a
length void ns_convertasciitoutf16(const nsacstring_internal&) - source parameters nsacstring_internal& acstring operator= nsautostring& operator=(const nsautostring&) - source parameters nsautostring& str nsstring& operator=(const nsstring&) - source parameters 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& ...
...And 12 more matches
NS_ConvertUTF16toUTF8
r 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(char assign assignascii assignliteral(const char assignliteral(char adopt replace replacea...
...scii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity set
length truncate getdata getmutabledata setisvoid stripchar base classes nscautostring data members no public members.
... methods constructors void ns_convertutf16toutf8(const prunichar*) - source a helper class that converts a utf-16 string to utf-8 parameters prunichar* astring void ns_convertutf16toutf8(const prunichar*, pruint32) - source parameters prunichar* astring pruint32 a
length void ns_convertutf16toutf8(const nsastring_internal&) - source parameters nsastring_internal& astring operator= nscautostring& operator=(const nscautostring&) - source parameters nscautostring& str nscstring& operator=(const nscstring&) - source parameters 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 par...
...And 12 more matches
NS_ConvertUTF8toUTF16
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 assign assignascii assignliteral(const char assignliteral(char adopt replace replacea...
...scii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity set
length truncate getdata getmutabledata setisvoid stripchar base classes nsautostring data members no public members.
... methods constructors void ns_convertutf8toutf16(const char*) - source parameters char* acstring void ns_convertutf8toutf16(const char*, pruint32) - source parameters char* acstring pruint32 a
length void ns_convertutf8toutf16(const nsacstring_internal&) - source parameters nsacstring_internal& acstring operator= nsautostring& operator=(const nsautostring&) - source parameters nsautostring& str nsstring& operator=(const nsstring&) - source parameters 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& ope...
...And 12 more matches
NS_LossyConvertUTF16toASCII
r 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(char assign assignascii assignliteral(const char assignliteral(char adopt replace replacea...
...scii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity set
length truncate getdata getmutabledata setisvoid stripchar base classes nscautostring data members no public members.
... methods constructors void ns_lossyconvertutf16toascii(const prunichar*) - source a helper class that converts a utf-16 string to ascii in a lossy manner parameters prunichar* astring void ns_lossyconvertutf16toascii(const prunichar*, pruint32) - source parameters prunichar* astring pruint32 a
length void ns_lossyconvertutf16toascii(const nsastring_internal&) - source parameters nsastring_internal& astring operator= nscautostring& operator=(const nscautostring&) - source parameters nscautostring& str nscstring& operator=(const nscstring&) - source parameters nscstring& str nsacstring_internal& operator=(char) - source parameters char c nsacstring_internal& operator=(const char*) - source parameters char* data nsacstring_internal& operator=(const ...
...And 12 more matches
nsAdoptingCString
r 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 set
length truncate getdata getmutabledata setisvoid stripchar base classes nsxpidlcstring data members no public members.
... methods constructors void nsadoptingcstring() - source void nsadoptingcstring(char*, pruint32) - source parameters char* str pruint32
length void nsadoptingcstring(const nsadoptingcstring&) - source parameters nsadoptingcstring& str operator= nsadoptingcstring& operator=(const nsadoptingcstring&) - source parameters nsadoptingcstring& str nsxpidlcstring& operator=(const nsxpidlcstring&) - source parameters nsxpidlcstring& str nscstring& operator=(const nscstring&) - source parameters 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 ...
...And 12 more matches
nsAdoptingString
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 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 set
length truncate getdata getmutabledata setisvoid stripchar base classes nsxpidlstring data members no public members.
... methods constructors void nsadoptingstring() - source void nsadoptingstring(prunichar*, pruint32) - source parameters prunichar* str pruint32
length void nsadoptingstring(const nsadoptingstring&) - source parameters nsadoptingstring& str operator= nsadoptingstring& operator=(const nsadoptingstring&) - source parameters nsadoptingstring& str nsxpidlstring& operator=(const nsxpidlstring&) - source parameters nsxpidlstring& str nsstring& operator=(const nsstring&) - source parameters 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_inte...
...And 12 more matches
nsAutoString
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 assign assignascii assignliteral(const char assignliteral(char adopt replace replacea...
...scii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity set
length truncate getdata getmutabledata setisvoid stripchar base classes nsfixedstring data members no public members.
... methods constructors void nsautostring() - source constructors void nsautostring(prunichar) - source parameters prunichar c void nsautostring(const prunichar*, pruint32) - source parameters prunichar* data pruint32
length void nsautostring(const nsautostring&) - source parameters nsautostring& str void nsautostring(const nsastring_internal&) - source parameters nsastring_internal& str void nsautostring(const nssubstringtuple&) - source parameters nssubstringtuple& tuple operator= nsautostring& operator=(const nsautostring&) - source parameters nsautostring& str nsstring& operator=(const nsstring&) - source parameters nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(co...
...And 12 more matches
nsCAutoString
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 assign assignas...
...cii assignliteral(const char assignliteral(char adopt replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity set
length truncate getdata getmutabledata setisvoid stripchar base classes nsfixedcstring data members no public members.
... methods constructors void nscautostring() - source constructors void nscautostring(char) - source parameters char c void nscautostring(const char*, pruint32) - source parameters char* data pruint32
length void nscautostring(const nscautostring&) - source parameters nscautostring& str void nscautostring(const nsacstring_internal&) - source parameters nsacstring_internal& str void nscautostring(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple operator= nscautostring& operator=(const nscautostring&) - source parameters nscautostring& str nscstring& operator=(const nscstring&) - source parameters nscstring& str nsacstring_internal& operator=(char) - source paramet...
...And 12 more matches
nsCString
r 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(char assign assignascii assignliteral(const char assignliteral(char adopt replace replacea...
...scii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity set
length truncate getdata getmutabledata setisvoid stripchar base classes nsacstring_internal data members no public members.
... methods constructors void nscstring() - source constructors void nscstring(char) - source parameters char c void nscstring(const char*, pruint32) - source parameters char* data pruint32
length void nscstring(const nscstring&) - source parameters nscstring& str void nscstring(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple void nscstring(const nsacstring_internal&) - source parameters nsacstring_internal& readable operator= nscstring& operator=(const nscstring&) - source parameters 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 ...
...And 12 more matches
nsFixedCString
r 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(char assign assignascii assignliteral(const char assignliteral(char adopt replace replacea...
...scii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity set
length truncate getdata getmutabledata setisvoid stripchar base classes nscstring data members no public members.
... methods constructors void nsfixedcstring(char*, pruint32) - source @param data fixed-size buffer to be used by the string (the contents of this buffer may be modified by the string) @param storagesize the size of the fixed buffer @param
length (optional) the
length of the string already contained in the buffer parameters char* data pruint32 storagesize void nsfixedcstring(char*, pruint32, pruint32) - source parameters char* data pruint32 storagesize pruint32
length operator= nscstring& operator=(const nscstring&) - source parameters 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 par...
...And 12 more matches
nsFixedString
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 assign assignascii assignliteral(const char assignliteral(char adopt replace replacea...
...scii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity set
length truncate getdata getmutabledata setisvoid stripchar base classes nsstring data members no public members.
... methods constructors void nsfixedstring(prunichar*, pruint32) - source @param data fixed-size buffer to be used by the string (the contents of this buffer may be modified by the string) @param storagesize the size of the fixed buffer @param
length (optional) the
length of the string already contained in the buffer parameters prunichar* data pruint32 storagesize void nsfixedstring(prunichar*, pruint32, pruint32) - source parameters prunichar* data pruint32 storagesize pruint32
length operator= nsstring& operator=(const nsstring&) - source parameters nsstring& str nsastring_internal& operator=(prunichar) - source parameters prunichar c nsastring_internal& operator=(const prunichar*) - source parameters prunichar* data nsastring_internal& operator=(const nsas...
...And 12 more matches
nsString
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 assign assignascii assignliteral(const char assignliteral(char adopt replace replacea...
...scii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity set
length truncate getdata getmutabledata setisvoid stripchar base classes nsastring_internal data members no public members.
... methods constructors void nsstring() - source constructors void nsstring(prunichar) - source parameters prunichar c void nsstring(const prunichar*, pruint32) - source parameters prunichar* data pruint32
length void nsstring(const nsstring&) - source parameters nsstring& str void nsstring(const nssubstringtuple&) - source parameters nssubstringtuple& tuple void nsstring(const nsastring_internal&) - source parameters nsastring_internal& readable operator= nsstring& operator=(const nsstring&) - source parameters 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&) -...
...And 12 more matches
<input type="password"> - HTML: Hypertext Markup Language
value a domstring representing a password, or empty events change and input supported common attributes autocomplete, inputmode, max
length, min
length, pattern, placeholder, readonly, required, and size idl attributes selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), 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.
... additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, password field inputs support the following attributes: attribute description max
length the maximum
length the value may be, in utf-16 characters min
length the minimum
length in characters that will be considered valid pattern a regular expression the value must match in order to be valid placeholder an example value to display in the field when the field is empty readonly a boolean attribute which, if present, indicates that the fi...
...eld's contents should not be editable size the number of characters wide the input field should be max
length the maximum number of characters (as utf-16 code units) the user can enter into the password field.
...And 12 more matches
<input type="search"> - HTML: Hypertext Markup Language
events change and input supported common attributes autocomplete, list, max
length, min
length, pattern, placeholder, required, size.
... additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, search field inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options max
length the maximum number of characters the input should accept min
length the minimum number of characters long the input can be and still be considered valid pattern a regular expression the input's contents must match in order to be valid placeholder an exemplar value to display in the input field whenever it is empty readonly a boolean attribute indi...
... max
length the maximum number of characters (as utf-16 code units) the user can enter into the search field.
...And 12 more matches
Arrays - Learn web development
finding the
length of an array you can find out the
length of an array (how many items are in it) in exactly the same way as you find out the
length (in characters) of a string — by using the
length property.
... try the following: shopping.
length; // should return 5 this has other uses, but it is most commonly used to tell a loop to keep going until it has looped through all the items in an array.
... so for example: let sequence = [1, 1, 2, 3, 5, 8, 13]; for (let i = 0; i < sequence.
length; i++) { console.log(sequence[i]); } you'll learn about loops properly later on (in our looping code article), but briefly, this code is saying: start looping at item number 0 in the array.
...And 11 more matches
nsACString_internal
ii"> <area alt="" coords="251,389,435,437" href="http://developer.mozilla.org/en/ns_convertutf16toutf8" shape="rect" title="ns_convertutf16toutf8"> <area alt="" coords="309,293,445,341" href="http://developer.mozilla.org/en/nsadoptingcstring" shape="rect" title="nsadoptingcstring"> </map> method overview constructors 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 assign assignascii assignliteral(const char assignliteral(char operator= adopt replac...
...e replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity set
length truncate getdata getmutabledata setisvoid stripchar data members no public members.
...parameters nscsubstringtuple& tuple void nsacstring_internal(char*, pruint32, pruint32) - source parameters char* data pruint32
length pruint32 flags beginreading char* beginreading() const - source reading iterators nsreadingiterator<char>& beginreading(nsreadingiterator<char>&) const - source deprecated reading iterators parameters nsreadingiterator<char>& iter char*& beginreading(const char*&) const - source parameters char*& iter endreading char* endreading() const - source nsreadingiterator<char>& endreading(nsreadingiterator<char>&) const - source...
...And 11 more matches
nsAString_internal
tf16"> <area alt="" coords="216,389,400,437" href="http://developer.mozilla.org/en/ns_convertutf8toutf16" shape="rect" title="ns_convertutf8toutf16"> <area alt="" coords="277,293,405,341" href="http://developer.mozilla.org/en/nsadoptingstring" shape="rect" title="nsadoptingstring"> </map> method overview constructors 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 assign assignascii assignliteral(const char assignliteral(char operator= adopt replac...
...e replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity set
length truncate getdata getmutabledata setisvoid stripchar data members no public members.
...parameters nssubstringtuple& tuple void nsastring_internal(prunichar*, pruint32, pruint32) - source parameters prunichar* data pruint32
length pruint32 flags beginreading prunichar* beginreading() const - source reading iterators nsreadingiterator<short unsigned int>& beginreading(nsreadingiterator<short unsigned int>&) const - source deprecated reading iterators parameters nsreadingiterator<short unsigned int>& iter prunichar*& beginreading(const prunichar*&) const - source parameters prunichar*& iter endreading prunichar* endreading() const - source nsr...
...And 11 more matches
nsDependentCSubstring
names: nsdependentsubstring for wide characters nsdependentcsubstring for narrow characters method overview constructors rebind 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 assign assignascii assignliteral(const char assignliteral(char operator= adopt replac...
...e replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity set
length truncate getdata getmutabledata setisvoid stripchar base classes nsacstring_internal data members no public members.
... methods constructors void nsdependentcsubstring(const nsacstring_internal&, pruint32, pruint32) - source parameters nsacstring_internal& str pruint32 startpos pruint32
length void nsdependentcsubstring(const char*, const char*) - source parameters char* start char* end void nsdependentcsubstring(const nsreadingiterator<char>&, const nsreadingiterator<char>&) - source parameters nsreadingiterator<char>& start nsreadingiterator<char>& end void nsdependentcsubstring() - source rebind void rebind(const nsacstring_internal&, pruint32, pruint32) - source parameters nsacstring_internal& <anonymous> pruint32 startpos pruint32
length void rebind(const char*, const char*) - source parameters char* start char* end beginreading char* beginreading() const - sour...
...And 11 more matches
nsDependentSubstring
names: nsdependentsubstring for wide characters nsdependentcsubstring for narrow characters method overview constructors rebind 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 assign assignascii assignliteral(const char assignliteral(char operator= adopt replac...
...e replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity set
length truncate getdata getmutabledata setisvoid stripchar base classes nsastring_internal data members no public members.
... methods constructors void nsdependentsubstring(const nsastring_internal&, pruint32, pruint32) - source parameters nsastring_internal& str pruint32 startpos pruint32
length void nsdependentsubstring(const prunichar*, const prunichar*) - source parameters prunichar* start prunichar* end void nsdependentsubstring(const nsreadingiterator<short unsigned int>&, const nsreadingiterator<short unsigned int>&) - source parameters nsreadingiterator<short unsigned int>& start nsreadingiterator<short unsigned int>& end void nsdependentsubstring() - source rebind void rebind(const nsastring_internal&, pruint32, pruint32) - source parameters nsastring_internal& <anonymous> pruint32 startpos pruint32
length void rebind(const prunichar*, const prunichar*) - source parameter...
...And 11 more matches
nsPromiseFlatCString
r 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(char assign assignascii assignliteral(const char assignliteral(char adopt replace replacea...
...scii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity set
length truncate getdata getmutabledata setisvoid stripchar base classes nscstring data members no public members.
... aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsastring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsastring_internal& astring void assignwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 a
length appendwithconversion void appendwithconversion(const nsastring_internal&) - source parameters nsastring_internal& astring void appendwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 a
length appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void ap...
...And 11 more matches
nsPromiseFlatString
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 assign assignascii assignliteral(const char assignliteral(char adopt replace replacea...
...scii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity set
length truncate getdata getmutabledata setisvoid stripchar base classes nsstring data members no public members.
... @param aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsacstring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsacstring_internal& astring void assignwithconversion(const char*, print32) - source parameters char* adata print32 a
length appendwithconversion void appendwithconversion(const nsacstring_internal&) - source parameters nsacstring_internal& astring void appendwithconversion(const char*, print32) - source parameters char* adata print32 a
length appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(...
...And 11 more matches
nsXPIDLCString
r 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 set
length truncate getdata getmutabledata setisvoid stripchar base classes nscstring data members no public members.
... aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsastring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsastring_internal& astring void assignwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 a
length appendwithconversion void appendwithconversion(const nsastring_internal&) - source parameters nsastring_internal& astring void appendwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 a
length appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void ap...
...And 11 more matches
nsXPIDLString
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 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 set
length truncate getdata getmutabledata setisvoid stripchar base classes nsstring data members no public members.
... @param aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsacstring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsacstring_internal& astring void assignwithconversion(const char*, print32) - source parameters char* adata print32 a
length appendwithconversion void appendwithconversion(const nsacstring_internal&) - source parameters nsacstring_internal& astring void appendwithconversion(const char*, print32) - source parameters char* adata print32 a
length appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(...
...And 11 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.
...in the toast code we have the following: types - context, charsequence, int, toast, and void methods - maketext, show fields -
length_short no constructors are used.
...in our case, we have a class called toast, and to this belongs maketext, show, and
length_short.
...And 10 more matches
NS ConvertUTF16toUTF8 external
class declaration method overview constructors get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting set
length 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 a
length 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 a
length beginreading pruint32 beginreading(const char**, const char**) const - source returns the
length, beginning, and end of a string in one operation.
...And 10 more matches
NS LossyConvertUTF16toASCII external
class declaration method overview constructors get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting set
length 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 a
length 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 a
length beginreading pruint32 beginreading(const char**, const char**) const - source returns the
length, beginning, and end of a string in one operation.
...And 10 more matches
nsCString external
class declaration method overview constructors get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting set
length 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 ...
...rnal() - source 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 a
length 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 a
length beginreading pruint32 beginreading(const char**, const char**) const - source returns the
length, beginning, and end of a string in one operation.
...And 10 more matches
nsDependentCString external
class declaration method overview constructors rebind get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting set
length 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 a
length rebind void rebind(const char*, pruint32) - source parameters char* adata pruint32 a
length 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 a
length beginreading pruint32 beginreading(const char**, const char**) const - source returns the
length, beginning, and end of a string in one operation.
...And 10 more matches
nsDependentCSubstring external
class declaration method overview constructors rebind beginreading endreading charat operator[] first beginwriting endwriting set
length length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar rfindch...
...methods constructors void nsdependentcsubstring_external() - source void nsdependentcsubstring_external(const char*, pruint32) - source parameters char* astart pruint32 a
length void nsdependentcsubstring_external(const nsacstring&, pruint32) - source parameters nsacstring& astr pruint32 astartpos void nsdependentcsubstring_external(const nsacstring&, pruint32, pruint32) - source parameters nsacstring& astr pruint32 astartpos pruint32 a
length rebind void rebind(const char*, pruint32) - source parameters ...
... char* astart pruint32 a
length beginreading pruint32 beginreading(const char**, const char**) const - source returns the
length, beginning, and end of a string in one operation.
...And 10 more matches
nsLiteralCString (External)
class declaration method overview rebind get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting set
length 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 r...
...methods rebind void rebind(const char*, pruint32) - source parameters char* adata pruint32 a
length 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 a
length beginreading pruint32 beginreading(const char**, const char**) const - source returns the
length, beginning, and end of a string in one operation.
...And 10 more matches
nsLiteralString (External)
class declaration method overview rebind get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting set
length 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 r...
...methods rebind void rebind(const char*, pruint32) - source parameters char* adata pruint32 a
length 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 a
length beginreading pruint32 beginreading(const char**, const char**) const - source returns the
length, beginning, and end of a string in one operation.
...And 10 more matches
HTMLTextAreaElement - Web APIs
inputmode max
length long: returns / sets the element's max
length attribute, indicating the maximum number of characters the user can enter.
... min
length long: returns / sets the element's min
length attribute, indicating the minimum number of characters the user can enter.
... text
length read only long: returns the codepoint
length of the control's value.
...And 10 more matches
background-position - CSS: Cascading Style Sheets
syntax /* keyword values */ background-position: top; background-position: bottom; background-position: left; background-position: right; background-position: center; /* <percentage> values */ background-position: 25% 75%; /* <
length> values */ background-position: 0 0; background-position: 1cm 2cm; background-position: 10ch 8em; /* multiple images */ background-position: 0 0, center; /* edge offsets values */ background-position: bottom 10px right 20px; background-position: right 3em bottom 10px; background-position: bottom 10px right; background-position: top right 10px; /* global values */ background-position: inherit; ...
...if three or four values are used, the
length-percentage values are offsets for the preceding keyword value(s).
... a <
length> or <percentage>.
...And 10 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
to find the
length of a string (in code units), access its
length property: 'hello'.
length; // 5 there's our first brush with javascript objects!
...they work very much like regular objects (numerical properties can naturally be accessed only using [] syntax) but they have one magic property called '
length'.
... one way of creating arrays is as follows: var a = new array(); a[0] = 'dog'; a[1] = 'cat'; a[2] = 'hen'; a.
length; // 3 a more convenient notation is to use an array literal: var a = ['dog', 'cat', 'hen']; a.
length; // 3 note that array.
length isn't necessarily the number of items in the array.
...And 10 more matches
NS ConvertASCIItoUTF16 external
class declaration method overview constructors get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting set
length 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 a
length 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*) - sou...
...rce parameters prunichar* aptr nsastring& operator=(prunichar) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 a
length beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the
length, beginning, and end of a string in one operation.
...And 9 more matches
NS ConvertUTF8toUTF16 external
class declaration method overview constructors get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting set
length 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 a
length 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*) - sou...
...rce parameters prunichar* aptr nsastring& operator=(prunichar) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 a
length beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the
length, beginning, and end of a string in one operation.
...And 9 more matches
PromiseFlatCString (External)
class declaration method overview get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting set
length 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 ...
...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 a
length beginreading pruint32 beginreading(const char**, const char**) const - source returns the
length, beginning, and end of a string in one operation.
...harat 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.
...And 9 more matches
nsACString (External)
oascii_external" shape="rect" title="ns_lossyconvertutf16toascii_external"> <area alt="" coords="803,294,925,342" href="http://developer.mozilla.org/en/nsliteralcstring_(external)" shape="rect" title="nsliteralcstring_(external)"></map> method overview beginreading endreading charat operator[] first beginwriting endwriting set
length length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< ope...
...methods beginreading pruint32 beginreading(const char**, const char**) const - source returns the
length, beginning, and end of a string in one operation.
...harat 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.
...And 9 more matches
nsCAutoString (External)
class declaration method overview get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting set
length 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 ...
...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 a
length beginreading pruint32 beginreading(const char**, const char**) const - source returns the
length, beginning, and end of a string in one operation.
...harat 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.
...And 9 more matches
nsCStringContainer (External)
class declaration method overview beginreading endreading charat operator[] first beginwriting endwriting set
length length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare(const char*, print32 (*) compare(const nsacstring&, print32 (*) equals(const char*, print32 (*) equals(const nsacstring&, print32 (*) operator< operator<= operator== operator>= operator>...
...methods beginreading pruint32 beginreading(const char**, const char**) const - source returns the
length, beginning, and end of a string in one operation.
...harat 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.
...And 9 more matches
nsDependentString external
class declaration dependent strings method overview constructors rebind get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting set
length 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 lowercas...
...methods constructors void nsdependentstring_external() - source void nsdependentstring_external(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 a
length rebind void rebind(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 a
length get prunichar* get() const - source operator= nsstring_external& operator=(const nsstring_external&) - source parameters nsstring_external& astring nsas...
... 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 prunichar* adata pruint32 a
length beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the
length, beginning, and end of a string in one operation.
...And 9 more matches
nsDependentSubstring external
class declaration substrings method overview constructors rebind beginreading endreading charat operator[] first beginwriting endwriting set
length length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare(const prunichar*, print32 (*) compare(const nsastring&, print32 (*) equals(const prunichar*, print32 (*) equals(const nsastring&, print32 (*) operator< operator<= ...
...methods constructors void nsdependentsubstring_external() - source void nsdependentsubstring_external(const prunichar*, pruint32) - source parameters prunichar astart pruint32 a
length void nsdependentsubstring_external(const nsastring&, pruint32) - source parameters nsastring astr pruint32 astartpos void nsdependentsubstring_external(const nsastring&, pruint32, pruint32) - source parameters nsastring astr pruint32 astartpos pruint32 a
length rebind void rebind(const...
... prunichar*, pruint32) - source parameters prunichar astart pruint32 a
length beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the
length, beginning, and end of a string in one operation.
...And 9 more matches
nsString external
class declaration basic strings method overview constructors get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting set
length 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 ...
...l() - source 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 a
length 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*) - sou...
...rce parameters prunichar* aptr nsastring& operator=(prunichar) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 a
length beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the
length, beginning, and end of a string in one operation.
...And 9 more matches
IAccessibleEditableText
the valid range is 0..
length.
...the valid range is 0..
length.
...the valid range is 0..
length.
...And 9 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 aintoken
length, out voidptr aouttoken, out unsigned long aouttoken
length); 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 aintoken
length, out voidptr aouttoken, out unsigned long aouttoken
length); void wrap([const] in voidptr aintoken, in unsigned long aintoken
length, in boolean confidential, out voidptr aouttoken, out unsign...
...ed long aouttoken
length); constants constant value description req_default 0 default behavior.
...void getnexttoken( [const] in voidptr aintoken, in unsigned long aintoken
length, out voidptr aouttoken, out unsigned long aouttoken
length ); parameters aintoken a buffer containing the input token (for example a challenge from a server).
...And 9 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
talpha = function setalpha(value) { if (typeof(value) !== 'number' || isnan(value) === true || value < 0 || value > 1) return; this.a = parsefloat(value.tofixed(2)); }; color.prototype.sethexa = function sethexa(value) { var valid = /(^#{0,1}[0-9a-f]{6}$)|(^#{0,1}[0-9a-f]{3}$)/i.test(value); if (valid !== true) return; if (value[0] === '#') value = value.slice(1, value.
length); if (value.
length === 3) value = value.replace(/([0-9a-f])([0-9a-f])([0-9a-f])/i,'$1$1$2$2$3$3'); this.r = parseint(value.substr(0, 2), 16); this.g = parseint(value.substr(2, 2), 16); this.b = parseint(value.substr(4, 2), 16); this.alpha = 1; this.rgbtohsv(); }; /*========== conversion methods ==========*/ color.prototype.converttohsl = function converttohsl() { if (this...
... }; var subscribe = function subscribe(topic, callback) { if (subscribers[topic] === undefined) subscribers[topic] = []; subscribers[topic].push(callback); }; var unsubscribe = function unsubscribe(callback) { subscribers.indexof(callback); subscribers.splice(index, 1); }; var notify = function notify(topic, value) { if (subscribers[topic] === undefined || subscribers[topic].
length === 0) return; var color = new color(value); for (var i in subscribers[topic]) subscribers[topic][i](color); }; var init = function init() { var elem = document.queryselectorall('.ui-color-picker'); var size = elem.
length; for (var i = 0; i < size; i++) new colorpicker(elem[i]); }; return { init : init, color : color, rgbcolor : rgbcolor, rgbacolor : rgbacolor, ...
...n.classname = 'ui-dropdown'; for (var i in options) { var x = document.createelement('div'); x.setattribute('data-value', i); x.textcontent = options[i]; dropdown.appendchild(x); } new dropdown(dropdown); return dropdown; }; var setvalue = function setvalue(topic, index, send_notify) { if (dropdowns[topic] === undefined || index >= dropdowns[topic].dropmenu.children.
length) return; dropdowns[topic].setnodevalue(dropdowns[topic].dropmenu.children[index], send_notify); }; var subscribe = function subscribe(topic, callback) { if (subscribers[topic] === undefined) subscribers[topic] = []; subscribers[topic].push(callback); }; var unsubscribe = function unsubscribe(topic, callback) { var index = subscribers[topic].indexof(callback); subscribers[to...
...And 9 more matches
Value definition syntax - CSS: Cascading Style Sheets
bold [ thin && <
length> ] this example matches the following values: bold thin 2vh bold 0 thin bold thin 3.5em but not: thin bold 3em, as bold is juxtaposed with the component defined by the brackets, it must appear before it.
... bold <
length> , thin this example matches the following values: bold 1em, thin bold 0, thin bold 2.5cm, thin bold 3vh, thin but not: thin 1em, bold, as the entities must be in the expressed order bold 1em thin, as the entities are mandatory; the comma, a literal, must be present bold 0.5ms, thin, as the ms values are not <
length> double ampersand separating two or more components, by a double ampersand, &&, means that all these entities are mandatory but may appear in any order.
... bold && <
length> this example matches the following values: bold 1em bold 0 2.5cm bold 3vh bold but not: bold, as both components must appear in the value.
...And 9 more matches
border-radius - CSS: Cascading Style Sheets
ues) / top-left | top-right-and-bottom-left | bottom-right */ border-radius: 10px 5px 2em / 20px 25px 30%; /* (first radius values) / top-left | top-right | bottom-right | bottom-left */ border-radius: 10px 5% / 20px 25em 30px 35em; /* global values */ border-radius: inherit; border-radius: initial; border-radius: unset; the border-radius property is specified as: one, two, three, or four <
length> or <percentage> values.
... followed optionally by "/" and one, two, three, or four <
length> or <percentage> values.
... values radius is a <
length> or a <percentage> denoting a radius to use for the border in each corner of the border.
...And 9 more matches
SVG documentation index - SVG: Scalable Vector Graphics
100 height svg, svg attribute the height attribute defines the vertical
length of an element in the user coordinate system.
... 117 kernelunit
length filters, needscompattable, needsexample, svg, svg attribute the kernelunit
length attribute has two meanings based on the context it's used in.
... 118 kerning deprecated, svg, svg attribute the kerning attribute indicates whether the spacing between glyphs should be adjusted based on kerning tables that are included in the relevant font (i.e., enable auto-kerning) or instead disable auto-kerning and set the spacing between them to a specific
length (typically, zero).
...And 9 more matches
PromiseFlatString (External)
class declaration method overview get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting set
length 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 fin...
... 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 prunichar* adata pruint32 a
length beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the
length, beginning, and end of a string in one operation.
...r 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.
...And 8 more matches
nsAString (External)
733,342" href="http://developer.mozilla.org/en/ns_convertutf8toutf16_external" shape="rect" title="ns_convertutf8toutf16_external"> <area alt="" coords="757,294,869,342" href="http://developer.mozilla.org/en/nsliteralstring_(external)" shape="rect" title="nsliteralstring_(external)"> </map> method overview beginreading endreading charat operator[] first beginwriting endwriting set
length length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral find rfind findchar rfindchar appendint to...
...methods beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the
length, beginning, and end of a string in one operation.
...har* beginreading() const - source endreading prunichar* endreading() const - source charat 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.
...And 8 more matches
nsAutoString (External)
class declaration method overview get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting set
length 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 fin...
... 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 prunichar* adata pruint32 a
length beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the
length, beginning, and end of a string in one operation.
...r 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.
...And 8 more matches
nsStringContainer (External)
class declaration method overview beginreading endreading charat operator[] first beginwriting endwriting set
length length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral find rfind findchar rfindchar ...
...methods beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the
length, beginning, and end of a string in one operation.
...r 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.
...And 8 more matches
Using the CSS Typed Object Model - Web APIs
<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', 'color', '--color']; // iterate through our properties of interest for ( let i = 0; i < ofinterest.
length; i++ ) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(ofinterest[i])); styleslist.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode( allcomputedstyles.get(ofinterest[i]))); styleslist.appendchild(cssvalue); } we included border-left...
...itation'); // retrieve all computed styles with computedstylemap() const allcomputedstyles = myelement.computedstylemap(); // array of properties we're interested in const ofinterest = ['padding-top', 'margin-bottom', 'font-size', 'font-stretch', 'animation-duration', 'animation-iteration-count', 'width', 'height']; // iterate thru our properties of interest for ( let i = 0; i < ofinterest.
length; i++ ) { // create a row const row = document.createelement( 'tr' ); // add the name of the property const cssproperty = document.createelement( 'td' ); cssproperty.appendchild( document.createtextnode( ofinterest[i] ) ); row.appendchild( cssproperty ); // and the unitless value const cssvalue = document.createelement( 'td' ); // shrink long floats to...
...ut should looks something like this: property value unit padding-top 0 px margin-bottom 16 px font-size 16 px font-stretch 100 percent animation-duration 0 s animation-iteration-count 1 number width auto undefined height auto undefined you'll note the <
length> unit returned is px, the <percentage> unit returned is percent, the <time> unit is s for 'seconds', and the unitless <number> unit is number.
...And 8 more matches
Element.classList - Web APIs
a domtokenlist with the
length property equal to 0.
...operty, allowtokenlistconstruction = 0, skippropchange = 0; function domtokenlist(){ if (!allowtokenlistconstruction) throw typeerror("illegal constructor"); // internally let it through } domtokenlist.prototype.tostring = domtokenlist.prototype.tolocalestring = function(){return this.value}; domtokenlist.prototype.add = function(){ a: for(var v=0, arglen=arguments.
length,val="",ele=this[" ucl"],proto=ele[" uclp"]; v!==arglen; ++v) { val = arguments[v] + "", checkifvalidclasslistentry("add", val); for (var i=0, len=proto.
length, resstr=val; i !== len; ++i) if (this[i] === val) continue a; else resstr += " " + this[i]; this[len] = val, proto.
length += 1, proto.value = resstr; } skippropchange = 1, ...
...ele.classname = proto.value, skippropchange = 0; }; domtokenlist.prototype.remove = function(){ for (var v=0, arglen=arguments.
length,val="",ele=this[" ucl"],proto=ele[" uclp"]; v !== arglen; ++v) { val = arguments[v] + "", checkifvalidclasslistentry("remove", val); for (var i=0, len=proto.
length, resstr="", is=0; i !== len; ++i) if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resstr+=this[i]+" "; }else{ is=1; } } if (!is) continue; delete 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; ...
...And 8 more matches
Using the User Timing API - Web APIs
mark === undefined) { log("create marks: performance.mark not supported", 0); return; } else { log("create marks", 0); // create several performance marks including two with the same name performance.mark("mark-1"); do_work(50000); performance.mark("mark-2"); do_work(50000); performance.mark("mark-2"); var marks = ["mark-1", "mark-2", "mark-2"]; for (var i=0; i < marks.
length; i++) log("...
... 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 8 more matches
Writing a WebSocket server in C# - Web APIs
networkstream methods: write(byte[] buffer, int offset, int size) writes bytes from buffer, offset and size determine
length of message.
...offset and size determine the
length of the message.
... 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.
...And 8 more matches
Border-image generator - CSS: Cascading Style Sheets
allback) { 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 notify() { if (subscribers[this.topic] === undefined) return; for (var i = 0; i < subscribers[this.topic].
length; i++) subscribers[this.topic][i](this.value); }; var createslider = function createslider(topic, label) { var slider = document.createelement('div'); slider.classname = 'ui-input-slider'; slider.setattribute('data-topic', topic); if (label !== undefined) slider.setattribute('data-info', label); new inputslider(slider); return slider; }; var init = function init() { var...
... elem = document.queryselectorall('.ui-input-slider'); var size = elem.
length; for (var i = 0; i < size; i++) new inputslider(elem[i]); }; return { init : init, setmax : setmax, setmin : setmin, setunit : setunit, setstep : setstep, getnode : getnode, getstep : getstep, setvalue : setvalue, subscribe : subscribe, unsubscribe : unsubscribe, setprecision : setprecision, setsensivity : setsensivity, getprecision : getprecision, createslider : createslider, }; })(); /** * ui-dropdown select */ var dropdownmanager = (function dropdownmanager() { var subscribers = {}; var dropdowns = []; var active = null; var visbility = ["hidden", "visible"]; var dropdown = function dropdown(node) { var topic = node.getattribute('data-topic'); var label = nod...
...c); dropdown.classname = 'ui-dropdown'; for (var i in options) { var x = document.createelement('div'); x.setattribute('data-value', i); x.textcontent = options[i]; dropdown.appendchild(x); } new dropdown(dropdown); return dropdown; }; var setvalue = function setvalue(topic, index) { if (dropdowns[topic] === undefined || index >= dropdowns[topic].dropmenu.children.
length) return; dropdowns[topic].setnodevalue(dropdowns[topic].dropmenu.children[index]); }; var subscribe = function subscribe(topic, callback) { if (subscribers[topic] === undefined) subscribers[topic] = []; subscribers[topic].push(callback); }; var unsubscribe = function unsubscribe(topic, callback) { var index = subscribers[topic].indexof(callback); subscribers[topic].splice(i...
...And 8 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
novalidate image, submit bypass form control validation for form submission formtarget 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 max
length password, search, tel, text, url maximum
length (number of characters) of value min numeric types minimum value min
length password, search, tel, text, url minimum
length (number of characters) of value multiple email, file boolean.
... max
length valid for text, search, url, tel, email, and password, it defines the maximum number of characters (as utf-16 code units) the user can enter into the field.
...if no max
length is specified, or an invalid value is specified, the field has no maximum
length.
...And 8 more matches
Array.from() - JavaScript
description array.from() lets you create arrays from: array-like objects (objects with a
length property and indexed elements); or iterable objects (objects such as map and set).
... the
length property of the from() method is 1.
...1 : -1) * math.floor(math.abs(number)); }; var maxsafeinteger = math.pow(2, 53) - 1; var to
length = function (value) { var len = tointeger(value); return math.min(math.max(len, 0), maxsafeinteger); }; var setgetitemhandler = function setgetitemhandler(isiterator, items) { var iterator = isiterator && items[symboliterator](); return function getitem(k) { return isiterator ?
...And 8 more matches
String.prototype.substr() - JavaScript
syntax str.substr(start[,
length]) parameters start the index of the first character to include in the returned substring.
...
length optional.
... description substr() extracts
length characters from a str, counting from the start index.
...And 8 more matches
Tree View Details - Archive of obsolete content
first, the simple functions: { treebox: null, selection: null, get rowcount() { return this.visibledata.
length; }, settree: function(treebox) { this.treebox = treebox; }, getcelltext: function(idx, column) { return this.visibledata[idx][0]; }, iscontainer: function(idx) { return this.visibledata[idx][1]; }, iscontaineropen: function(idx) { return this.visibledata[idx][2]; }, iscontainerempty: function(idx) { return false; }, isseparator: function(idx) { return fa...
...lse; }, issorted: function() { return false; }, iseditable: function(idx, column) { return false; }, } the rowcount function will return the
length of the visibledata array.
... hasnextsibling: function(idx, after) { var thislevel = this.getlevel(idx); for (var t = after + 1; t < this.visibledata.
length; t++) { var nextlevel = this.getlevel(t); if (nextlevel == thislevel) return true; if (nextlevel < thislevel) break; } return false; } the hasnextsibling function needs to return true if there is a row at the same level after a given row.
...And 7 more matches
imgIContainer
obsolete since gecko 2.0 void appendframe(in print32 ax, in print32 ay, in print32 awidth, in print32 aheight, in gfximageformat aformat, [array, size_is(image
length)] out pruint8 imagedata, out unsigned long image
length); native code only!
... obsolete since gecko 2.0 void appendpalettedframe(in print32 ax, in print32 ay, in print32 awidth, in print32 aheight, in gfximageformat aformat, in pruint8 apalettedepth, [array, size_is(image
length)] out pruint8 imagedata, out unsigned long image
length, [array, size_is(palette
length)] out pruint32 palettedata, out unsigned long palette
length); native code only!
... void endframedecode(in unsigned long framenumber); obsolete since gecko 2.0 void ensurecleanframe(in unsigned long aframenum, in print32 ax, in print32 ay, in print32 awidth, in print32 aheight, in gfximageformat aformat, [array, size_is(image
length)] out pruint8 imagedata, out unsigned long image
length); native code only!
...And 7 more matches
nsICompositionStringSynthesizer
compositionstringsynthesizer.appendclause("foo-".
length, compositionstringsynthesizer.attr_convertedtext); compositionstringsynthesizer.appendclause("bar".
length, compositionstringsynthesizer.attr_selectedconvertedtext); compositionstringsynthesizer.appendclause("-buzz".
length, compositionstringsynthesizer.attr_convertedtext); // set caret position in the composition string.
... (optional) compositionstringsynthesizer.setcaret("foo-bar".
length, 0); // dispatch dom events to modify the focused editor compositionstringsynthesizer.dispatchevent(); when you modify the composing string, you don't need to recreate the instance anymore.
...for example, if the "bar" is converted to "bar": compositionstringsynthesizer.setstring("foo-bar-buzz"); compositionstringsynthesizer.appendclause("foo-".
length, compositionstringsynthesizer.attr_convertedtext); compositionstringsynthesizer.appendclause("bar".
length, compositionstringsynthesizer.attr_selectedconvertedtext); compositionstringsynthesizer.appendclause("-buzz".
length, compositionstringsynthesizer.attr_convertedtext); compositionstringsynthesizer.setcaret("foo-bar".
length, 0); compositionstringsynthesizer.dispatchevent(); finally, when you commits composition with the last composition string "foo-bar-buzz": // deprecated in 36, first, dispatch commit string without clause information compositionstringsy...
...And 7 more matches
Working with data
if type is an array type of unspecified
length, the following steps are taken: if the value is a size value, a new array of that
length is created, with its cells ready to accept values of the same type as those in the specified array.
... if the value is a javascript array object and it has a non-negative
length, a new array is created and the contents of the array specified by value are converted to cdata objects and copied into the new array, which is then returned.
... example: creating an array let arraytype = ctypes.arraytype(ctypes.int32_t); let myarray = new arraytype(5); at this point, myarray.
length is 5; there are 5 entries in the array.
...And 7 more matches
Using CSS gradients - CSS: Cascading Style Sheets
to fine-tune their locations, you can give each one zero, one, or two percentage or, for radial and linear gradients, absolute
length values.
... in both examples, the gradient is written twice: the first is the css images level 3 method of repeating the color for each stop and the second example is the css images level 4 multiple color stop method of including two color-stop-
lengths in a linear-color-stop declaration.
..., the center of the gradient is at the 50% 50% mark, and the gradient is elliptical matching the aspect ratio of it's box: <div class="simple-radial"></div> div { width: 240px; height: 120px; } .simple-radial { background: radial-gradient(red, blue); } positioning radial color stops again like linear gradients, you can position each radial color stop with a percentage or absolute
length.
...And 7 more matches
CSS values and units - CSS: Cascading Style Sheets
css uses dimensions to specify: <
length> (distance units) <angle> <time> <frequency> <resolution> these are all covered in subsections below.
... distance units where a distance unit, also known as a
length, is allowed as a value for a property, this is described as the <
length> type.
... there are two types of
lengths in css: relative and absolute.
...And 7 more matches
box-shadow - CSS: Cascading Style Sheets
ur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold; /* any number of shadows, separated by commas */ box-shadow: 3px 3px red, -1em 0 0.4em olive; /* global keywords */ box-shadow: inherit; box-shadow: initial; box-shadow: unset; specify a single box-shadow using: two, three, or four <
length> values.
... <offset-x> <offset-y> these are two <
length> values to set the shadow offset.
...see <
length> for possible units.
...And 7 more matches
Drawing graphics - Learn web development
one of the basic trigonometric formulae states that the
length of the adjacent multiplied by the tangent of the angle is equal to the opposite, hence we come up with 50 * math.tan(degtorad(60)).
... now add the following code to the bottom of the javascript: function degtorad(degrees) { return degrees * math.pi / 180; }; function rand(min, max) { return math.floor(math.random() * (max-min+1)) + (min); } let
length = 250; let moveoffset = 20; for(var i = 0; i <
length; i++) { } here we are implementing the same degtorad() function we saw in the triangle example above, a rand() function that returns a random number between given lower and upper bounds,
length and moveoffset variables (which we'll find out more about later), and an empty for loop.
...add the following code inside your for loop: ctx.fillstyle = 'rgba(' + (255-
length) + ', 0, ' + (255-
length) + ', 0.9)'; ctx.beginpath(); ctx.moveto(moveoffset, moveoffset); ctx.lineto(moveoffset+
length, moveoffset); let triheight =
length/2 * math.tan(degtorad(60)); ctx.lineto(moveoffset+(
length/2), moveoffset+triheight); ctx.lineto(moveoffset, moveoffset); ctx.fill();
length--; moveoffset += 0.7; ctx.rotate(degtorad(5)); so on each iteration, we: set the fillstyle to be a shade of slightly transparent purple, which changes each time based on the value of
length.
...And 6 more matches
Enc Dec MAC Output Public Key as CSR
cksize]; unsigned int ptextlen; unsigned char mac[digestsize]; unsigned int maclen; unsigned int nwritten; unsigned char encbuf[blocksize]; unsigned int encbuflen; secitem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned int pad[1]; secitem paditem; unsigned int padding
length = 0; static unsigned int firsttime = 1; int j; ctxmac = pk11_createcontextbysymkey(ckm_md5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, ivlen,...
... ckm_aes_cbc); /* read a buffer of plaintext from input file */ while ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { /* encrypt using it using cbc, using previously created iv */ if (ptextlen != blocksize) { padding
length = blocksize - ptextlen; for ( j=0; j < padding
length; j++) { ptext[ptextlen+j] = (unsigned char)padding
length; } ptextlen = blocksize; } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "encrypt failure\n"); goto cleanup; } /* save the last block of ciphertext as the next iv */ iv = encbuf; ivlen...
...buf, encbuflen); /*pr_assert(nwritten == encbuflen);*/ rv = macupdate(ctxmac, ptext, ptextlen); if (rv != secsuccess) goto cleanup; } rv = macfinal(ctxmac, mac, &maclen, digestsize); if (rv != secsuccess) { pr_fprintf(pr_stderr, "macfinal failure\n"); goto cleanup; } if (maclen == 0) { pr_fprintf(pr_stderr, "bad mac
length\n"); rv = secfailure; goto cleanup; } writetoheaderfile(mac, maclen, mac, headerfile); if (rv != secsuccess) { pr_fprintf(pr_stderr, "write mac failure\n"); goto cleanup; } pad[0] = padding
length; paditem.type = sibuffer; paditem.data = (unsigned char *)pad; paditem.len = sizeof(pad[0]); writetoheaderfile(paditem.data, paditem...
...And 6 more matches
JIT Optimization Strategies
getproperty getproperty_arguments
length attempts to optimize an arguments.
length property access.
...the function containing the arguments.
length is allowed to use the arguments object in the following ways without disabling this optimization: access arguments.
length access arguments.callee access individual args using arguments[i] save arguments into variables, as long as those variables cannot be accessed by any nested function, and as long as there exists no eval anywhere within the function or nested function definitions.
...the function containing the arguments.callee is allowed to use the arguments object in the following ways without disabling this optimization: access arguments.
length access arguments.callee access individual args using arguments[i] save arguments into variables, as long as those variables cannot be accessed by any nested function, and as long as there exists no eval anywhere within the function or nested function definitions.
...And 6 more matches
nsITextInputProcessor
tip.appendclausetopendingcomposition("foo-".
length, tip.attr_converted_clause); tip.appendclausetopendingcomposition("bar".
length, tip.attr_selected_clause); tip.appendclausetopendingcomposition("-buzz".
length, tip.attr_converted_clause); // then, sets the caret if you need tip.setcaretinpendingcomposition("foo-bar".
length); // finally, flush the pending composition on the focused editor if (!tip.flushpendingcomposition()) { return; // compo...
...for example: tip.setpendingcompositionstring("a"); tip.appendclausetopendingcomposition("a".
length, tip.attr_raw_clause); tip.setcaretposition("a".
length); // this means that the first composition character is inputted by a keypress of "a" key.
...var shiftkeyevent = new keyboardevent("", { key: "shift", code: "shiftleft", keycode: keyboardevent.dom_vk_shift }); tip.keydown(shiftkeyevent); tip.setpendingcompositionstring("ab"); tip.appendclausetopendingcomposition("ab".
length, tip.attr_raw_clause); tip.setcaretposition("ab".
length); // this means that the second composition character is inputted by a keypress of "b" key during left shift key is down.
...And 6 more matches
ArrayType
ctype arraytype() type[
length] ); parameters type: it represents the type of the elements or variable which is going to be present in an array
length optional it denotes the number of entries present in an array or the number of elements that an array should contain.
... if you don't specify this parameter, the array's
length is unspecified.
... exceptions thrown typeerror type is not a ctype, or type.size is undefined.if the
length is specifed but if it is not a valid one,then it is also thrown rangeerror the size of the resulting array can't be represented as both a size_t and as a javascript number.
...And 6 more matches
Using the Gamepad API - Web APIs
%d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.
length, e.gamepad.axes.
length); }); each gamepad has a unique id associated with it, which is available on the event's gamepad property.
...%d buttons, %d axes.", gp.index, gp.id, gp.buttons.
length, gp.axes.
length); }); the gamepad object's properties are as follows: id: a string containing some information about the controller.
...it has " + gp.buttons.
length + " buttons and " + gp.axes.
length + " axes."; gameloop(); }); now we use the gamepaddisconnected event to check if the gamepad is disconnected again.
...And 6 more matches
Visualizations with Web Audio API - Web APIs
we return the analysernode.frequencybincount value, which is half the fft, then call uint8array() with the frequencybincount as its
length argument — this is how many data points we will be collecting, for that fft size.
... analyser.fftsize = 2048; var buffer
length = analyser.frequencybincount; var dataarray = new uint8array(buffer
length); to actually retrieve the data and copy it into our array, we then call the data collection method we want, with the array passed as it's argument.
... creating a waveform/oscilloscope to create the oscilloscope visualisation (hat tip to soledad penadés for the original code in voice-change-o-matic), we first follow the standard pattern described in the previous section to set up the buffer: analyser.fftsize = 2048; var buffer
length = analyser.frequencybincount; var dataarray = new uint8array(buffer
length); next, we clear the canvas of what had been drawn on it before to get ready for the new visualization display: canvasctx.clearrect(0, 0, width, height); we now define the draw() function: function draw() { in here, we use requestanimationframe() to keep looping the drawing function once it has been started: var drawv...
...And 6 more matches
Using XMLHttpRequest - Web APIs
// progress on transfers from the server to the client (downloads) function updateprogress (oevent) { if (oevent.
lengthcomputable) { var percentcomplete = oevent.loaded / oevent.total * 100; // ...
...however, if the
lengthcomputable field is false, the total
length is not known and will be zero.
...arset=utf-8" /> <title>sending forms with pure ajax – mdn</title> <script type="text/javascript"> "use strict"; /*\ |*| |*| :: xmlhttprequest.prototype.sendasbinary() polyfill :: |*| |*| https://developer.mozilla.org/docs/dom/xmlhttprequest#sendasbinary() \*/ if (!xmlhttprequest.prototype.sendasbinary) { xmlhttprequest.prototype.sendasbinary = function(sdata) { var nbytes = sdata.
length, ui8data = new uint8array(nbytes); for (var nidx = 0; nidx < nbytes; nidx++) { ui8data[nidx] = sdata.charcodeat(nidx) & 0xff; } /* send as arraybufferview...: */ this.send(ui8data); /* ...or as arraybuffer (legacy)...: this.send(ui8data.buffer); */ }; } /*\ |*| |*| :: ajax form submit framework :: |*| |*| https://developer.mozilla.org/docs/dom/xmlhttprequest/using_x...
...And 6 more matches
pad - CSS: Cascading Style Sheets
the pad descriptor can be used with custom counter style definitions when you need the marker representations to have a minimum
length.
... syntax pad: 3 "0"; values <integer> && <symbol> the <integer> specifies a minimum
length that all counter representations must reach.
...if the minimum
length is not reached, the representation will be padded with the specified <symbol>.
...And 6 more matches
Color picker tool - CSS: Cascading Style Sheets
unction setlightness(value) { if (typeof(value) !== 'number' || isnan(value) === true || value < 0 || value > 100) return; this.lightness = value; this.hsltorgb(); }; color.prototype.sethexa = function sethexa(value) { var valid = /(^#{0,1}[0-9a-f]{6}$)|(^#{0,1}[0-9a-f]{3}$)/i.test(value); if (valid !== true) return; if (value[0] === '#') value = value.slice(1, value.
length); if (value.
length === 3) value = value.replace(/([0-9a-f])([0-9a-f])([0-9a-f])/i,'$1$1$2$2$3$3'); this.r = parseint(value.substr(0, 2), 16); this.g = parseint(value.substr(2, 2), 16); this.b = parseint(value.substr(4, 2), 16); this.alpha = 1; this.rgbtohsv(); }; /*========== conversion methods ==========*/ color.prototype.converttohsl = function converttohsl() { if (this...
... }; var subscribe = function subscribe(topic, callback) { if (subscribers[topic] === undefined) subscribers[topic] = []; subscribers[topic].push(callback); }; var unsubscribe = function unsubscribe(callback) { subscribers.indexof(callback); subscribers.splice(index, 1); }; var notify = function notify(topic, value) { if (subscribers[topic] === undefined || subscribers[topic].
length === 0) return; var color = new color(value); for (var i in subscribers[topic]) subscribers[topic][i](color); }; var init = function init() { var elem = document.queryselectorall('.ui-color-picker'); var size = elem.
length; for (var i = 0; i < size; i++) new colorpicker(elem[i]); }; return { init : init, color : color, rgbcolor : rgbcolor, rgbacolor : rgbacolor, ...
...allback) { 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 notify() { if (subscribers[this.topic] === undefined) return; for (var i = 0; i < subscribers[this.topic].
length; i++) subscribers[this.topic][i](this.value); }; var createslider = function createslider(topic, label) { var slider = document.createelement('div'); slider.classname = 'ui-input-slider'; slider.setattribute('data-topic', topic); if (label !== undefined) slider.setattribute('data-info', label); new inputslider(slider); return slider; }; var init = function init() { var...
...And 6 more matches
Index - Archive of obsolete content
931 max
length xul attributes, xul reference no summary!
... 1479 max
length xul properties, xul reference no summary!
... 1589 text
length xul properties, xul reference no summary!
...And 5 more matches
Anatomy of a video game - Game development
always increments by tick
length.
... * mygame.tick
length is how frequently the game state updates.
...it should always * increment by tick
length.
...And 5 more matches
TypeScript support in Svelte - Learn web development
(ts) $: completedtodos = todos.filter(t => t.completed).
length we will use the todotype we already defined to tell typescript that todos is a todotype array — replace your export let todos line with the following: import type { todotype } from '../types/todo.type' export let todos: todotype[] notice that now typescript can infer that the t variable in todos.filter(t => t.completed) is of type todotype.
... nevertheless, if we think it makes our code easier to read, we could specify it like this: $: completedtodos = todos.filter((t: todotype) => t.completed).
length most of the time typescript will be able to correctly infer the reactive variable type, but sometimes you might get an "implicitly has an 'any' type" error when working with reactive assignments.
... in those cases you can declare the typed variable in a different statement, like this: let completetodos: number $: completedtodos = todos.filter((t: todotype) => t.completed).
length you can't specify the type in the reactive assignment itself.
...And 5 more matches
JNI.jsm
working with arrays creating/preallocating a typed array methods cdata .get(number aindex); cdata .getelements(number astart, number a
length); void .set(number aindex, cdata avalue); void .setelements(number astart, [array, size_is(arr.
length > number anynumber > 0)] in cdata avalsarray); .get() gets the value of the element in the array at given aindex.
... .getelements() returns a new cdata object of the section of the array specified by astart and ending at position astart + a
length.
... void setelements(number astart, number a
length); parameters astart the position to start setting elements of the array in.
...And 5 more matches
Encrypt Decrypt MAC Keys As Session Objects
cksize]; unsigned int ptextlen; unsigned char mac[digestsize]; unsigned int maclen; unsigned int nwritten; unsigned char encbuf[blocksize]; unsigned int encbuflen; secitem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned int pad[1]; secitem paditem; unsigned int padding
length; static unsigned int firsttime = 1; int j; ctxmac = pk11_createcontextbysymkey(ckm_md5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, ivlen, ckm...
..._aes_cbc); /* read a buffer of plaintext from input file */ while ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { /* encrypt using it using cbc, using previously created iv */ if (ptextlen != blocksize) { padding
length = blocksize - ptextlen; for ( j=0; j < padding
length; j++) { ptext[ptextlen+j] = (unsigned char)padding
length; } ptextlen = blocksize; } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "encrypt failure\n"); goto cleanup; } /* save the last block of ciphertext as the next iv */ iv = encbuf; ivlen = ...
...mediate file */ nwritten = pr_write(encfile, encbuf, encbuflen); /*pr_assert(nwritten == encbuflen);*/ rv = macupdate(ctxmac, ptext, ptextlen); } rv = macfinal(ctxmac, mac, &maclen, digestsize); if (rv != secsuccess) { pr_fprintf(pr_stderr, "macfinal failure\n"); goto cleanup; } if (maclen == 0) { pr_fprintf(pr_stderr, "bad mac
length\n"); rv = secfailure; goto cleanup; } writetoheaderfile(mac, maclen, mac, headerfile); if (rv != secsuccess) { pr_fprintf(pr_stderr, "write mac failure\n"); goto cleanup; } pad[0] = padding
length; paditem.type = sibuffer; paditem.data = (unsigned char *)pad; paditem.len = sizeof(pad[0]); writetoheaderfile(paditem.data, paditem...
...And 5 more matches
Encrypt and decrypt MAC using token
cksize]; unsigned int ptextlen; unsigned char mac[digestsize]; unsigned int maclen; unsigned int nwritten; unsigned char encbuf[blocksize]; unsigned int encbuflen; secitem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned int pad[1]; secitem paditem; unsigned int padding
length; static unsigned int firsttime = 1; int j; ctxmac = pk11_createcontextbysymkey(ckm_md5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, ivlen, ckm...
..._aes_cbc); /* read a buffer of plaintext from input file */ while ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { /* encrypt using it using cbc, using previously created iv */ if (ptextlen != blocksize) { padding
length = blocksize - ptextlen; for ( j=0; j < padding
length; j++) { ptext[ptextlen+j] = (unsigned char)padding
length; } ptextlen = blocksize; } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "encrypt failure\n"); goto cleanup; } /* save the last block of ciphertext as the next iv */ iv = encbuf; ivlen = ...
...mediate file */ nwritten = pr_write(encfile, encbuf, encbuflen); /*pr_assert(nwritten == encbuflen);*/ rv = macupdate(ctxmac, ptext, ptextlen); } rv = macfinal(ctxmac, mac, &maclen, digestsize); if (rv != secsuccess) { pr_fprintf(pr_stderr, "macfinal failure\n"); goto cleanup; } if (maclen == 0) { pr_fprintf(pr_stderr, "bad mac
length\n"); rv = secfailure; goto cleanup; } writetoheaderfile(mac, maclen, mac, headerfile); if (rv != secsuccess) { pr_fprintf(pr_stderr, "write mac failure\n"); goto cleanup; } pad[0] = padding
length; paditem.type = sibuffer; paditem.data = (unsigned char *)pad; paditem.len = sizeof(pad[0]); writetoheaderfile(paditem.data, paditem...
...And 5 more matches
Encrypt Decrypt_MAC_Using Token
cksize]; unsigned int ptextlen; unsigned char mac[digestsize]; unsigned int maclen; unsigned int nwritten; unsigned char encbuf[blocksize]; unsigned int encbuflen; secitem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned int pad[1]; secitem paditem; unsigned int padding
length; static unsigned int firsttime = 1; int j; ctxmac = pk11_createcontextbysymkey(ckm_md5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, ivlen, ckm...
...*/ if (ptextlen != blocksize) { padding
length = blocksize - ptextlen; for ( j=0; j < padding
length; j++) { ptext[ptextlen+j] = (unsigned char)padding
length; } ptextlen = blocksize; } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "encrypt failure\n"); goto cleanup; } /* save the last block of ciphertext as the next iv.
...*/ nwritten = pr_write(encfile, encbuf, encbuflen); /* pr_assert(nwritten == encbuflen); */ rv = macupdate(ctxmac, ptext, ptextlen); } rv = macfinal(ctxmac, mac, &maclen, digestsize); if (rv != secsuccess) { pr_fprintf(pr_stderr, "macfinal failure\n"); goto cleanup; } if (maclen == 0) { pr_fprintf(pr_stderr, "bad mac
length\n"); rv = secfailure; goto cleanup; } writetoheaderfile(mac, maclen, mac, headerfile); if (rv != secsuccess) { pr_fprintf(pr_stderr, "write mac failure\n"); goto cleanup; } pad[0] = padding
length; paditem.type = sibuffer; paditem.data = (unsigned char *)pad; paditem.len = sizeof(pad[0]); writetoheaderfile(paditem.data, paditem...
...And 5 more matches
NSS Sample Code Sample_3_Basic Encryption and MACing
cksize]; unsigned int ptextlen; unsigned char mac[digestsize]; unsigned int maclen; unsigned int nwritten; unsigned char encbuf[blocksize]; unsigned int encbuflen; secitem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned int pad[1]; secitem paditem; unsigned int padding
length; static unsigned int firsttime = 1; int j; ctxmac = pk11_createcontextbysymkey(ckm_md5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, ivlen, ckm...
..._aes_cbc); /* read a buffer of plaintext from input file */ while ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { /* encrypt using it using cbc, using previously created iv */ if (ptextlen != blocksize) { padding
length = blocksize - ptextlen; for ( j=0; j < padding
length; j++) { ptext[ptextlen+j] = (unsigned char)padding
length; } ptextlen = blocksize; } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "encrypt failure\n"); goto cleanup; } /* save the last block of ciphertext as the next iv */ iv = encbuf; ivlen = ...
...mediate file */ nwritten = pr_write(encfile, encbuf, encbuflen); /*pr_assert(nwritten == encbuflen);*/ rv = macupdate(ctxmac, ptext, ptextlen); } rv = macfinal(ctxmac, mac, &maclen, digestsize); if (rv != secsuccess) { pr_fprintf(pr_stderr, "macfinal failure\n"); goto cleanup; } if (maclen == 0) { pr_fprintf(pr_stderr, "bad mac
length\n"); rv = secfailure; goto cleanup; } writetoheaderfile(mac, maclen, mac, headerfile); if (rv != secsuccess) { pr_fprintf(pr_stderr, "write mac failure\n"); goto cleanup; } pad[0] = padding
length; paditem.type = sibuffer; paditem.data = (unsigned char *)pad; paditem.len = sizeof(pad[0]); writetoheaderfile(paditem.data, paditem...
...And 5 more matches
EncDecMAC using token object - sample 3
r *iv, unsigned int ivlen, prbool ascii) { secstatus rv; unsigned char ptext[blocksize]; unsigned int ptextlen; unsigned char mac[digestsize]; unsigned int maclen; unsigned int nwritten; unsigned char encbuf[blocksize]; unsigned int encbuflen; secitem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned int pad[1]; secitem paditem; unsigned int padding
length; static unsigned int firsttime = 1; int j; ctxmac = pk11_createcontextbysymkey(ckm_md5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, ivlen, ckm_aes_cbc); /* read a buffer of plaintext from input file */ while ((pte...
...xtlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { /* encrypt using it using cbc, using previously created iv */ if (ptextlen != blocksize) { padding
length = blocksize - ptextlen; for ( j=0; j < padding
length; j++) { ptext[ptextlen+j] = (unsigned char)padding
length; } ptextlen = blocksize; } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "encrypt failure\n"); goto cleanup; } /* save the last block of ciphertext as the next iv */ iv = encbuf; ivlen = encbuflen; /* write the cipher text to intermediate file */ nwritten = pr_write(encfile, encbuf, encbuflen); /*pr_assert(nwritten == encbuflen);*/ rv = macupdate(ctxmac, ptext, ptextlen); } rv = macfinal(ctxmac, mac, &maclen, digestsize); if (rv != secsuccess) { pr_fprintf(p...
...r_stderr, "macfinal failure\n"); goto cleanup; } if (maclen == 0) { pr_fprintf(pr_stderr, "bad mac
length\n"); rv = secfailure; goto cleanup; } writetoheaderfile(mac, maclen, mac, headerfile); if (rv != secsuccess) { pr_fprintf(pr_stderr, "write mac failure\n"); goto cleanup; } pad[0] = padding
length; paditem.type = sibuffer; paditem.data = (unsigned char *)pad; paditem.len = sizeof(pad[0]); writetoheaderfile(paditem.data, paditem.len, pad, headerfile); if (rv != secsuccess) { pr_fprintf(pr_stderr, "write pad failure\n"); goto cleanup; } rv = secsuccess; cleanup: if (ctxmac != null) { pk11_destroycontext(ctxmac, pr_true); } if (ctxenc != null) { pk11_destroycontext(ctxenc, pr_true); } return rv; } /* * find the key for the given mechanism */ pk11symkey* findkey(pk11slotinfo *slot, ck_mechanism_t...
...And 5 more matches
JS_NewArrayObject
syntax jsobject * js_newarrayobject(jscontext *cx, const js::handlevaluearray& contents); // added in spidermonkey 31 jsobject * js_newarrayobject(jscontext *cx, size_t
length); // added in spidermonkey 31 jsobject * js_newarrayobject(jscontext *cx, int
length, jsval *vector); // obsolete since jsapi 30 name type description cx jscontext * the context in which to create the new array.
...added in spidermonkey 31
length size_t or int the
length of the new array.
... js_newarrayobject with
length parameter creates a new array object with the specified
length; the result is like the javascript expression new array(
length).
...And 5 more matches
Replace
void replace( index_type acutstart, index_type acut
length, const self_type& astring ); parameters acutstart [in] the starting index of the section to remove, measured in storage units.
... acut
length [in] the
length of the section to remove, measured in storage units.
... void replace( index_type acutstart, size_type acut
length, const char_type* adata, size_type adata
length = pr_uint32_max ); parameters acutstart [in] the starting index of the section to remove, measured in storage units.
...And 5 more matches
Replace
void replace( index_type acutstart, index_type acut
length, const self_type& astring ); parameters acutstart [in] the starting index of the section to remove, measured in storage units.
... acut
length [in] the
length of the section to remove, measured in storage units.
... void replace( index_type acutstart, size_type acut
length, const char_type* adata, size_type adata
length = pr_uint32_max ); parameters acutstart [in] the starting index of the section to remove, measured in storage units.
...And 5 more matches
nsIBinaryInputStream
inherits from: nsiinputstream last changed in gecko 1.7 method overview pruint8 read8(); pruint16 read16(); pruint32 read32(); pruint64 read64(); unsigned long readarraybuffer(in pruint32 a
length, in jsval aarraybuffer); prbool readboolean(); void readbytearray(in pruint32 a
length, [array, size_is(a
length), retval] out pruint8 abytes); void readbytes(in pruint32 a
length, [size_is(a
length), retval] out string astring); acstring readcstring(); double readdouble(); float readfloat(); astring readstring(); void setinputst...
... unsigned long readarraybuffer(in pruint32 a
length, in jsval aarraybuffer); parameters a
length the number of bytes that should be read.
... void readbytearray( in pruint32 a
length, [array, size_is(a
length), retval] out pruint8 abytes ); parameters a
length the number of bytes that must be read.
...And 5 more matches
nsIBinaryOutputStream
inherits from: nsioutputstream last changed in gecko 1.7 method overview void setoutputstream(in nsioutputstream aoutputstream); void write8(in pruint8 abyte); void write16(in pruint16 a16); void write32(in pruint32 a32); void write64(in pruint64 a64); void writeboolean(in prbool aboolean); void writebytearray([array, size_is(a
length)] in pruint8 abytes, in pruint32 a
length); void writebytes(a
length)] in string astring, in pruint32 a
length); void writedouble(in double adouble); void writefloat(in float afloat); void writestringz(in string astring); void writeutf8z(in wstring astring); void writewstringz(in wstring astring); methods setoutputstream() sets the stream to which output is directed.
...void writebytearray( [array, size_is(a
length)] in pruint8 abytes, in pruint32 a
length ); parameters abytes the bytes to write to the stream.
... a
length the number of bytes to write to the stream.
...And 5 more matches
Add to iPhoto
in c, the declaration looks like this: typedef struct { cfindex location; cfindex
length; } cfrange; to declare this for use with js-ctypes, we use the following code: this.cfrange = new ctypes.structtype("cfrange", [ {'location': ctypes.int32_t}, {'
length': ctypes.int32_t}]); this defines corefoundation.cfrange to represent this data type, comprised of two 32-bit integer fields called location and
length.
...clare("cfstringcreatewithcharacters", ctypes.default_abi, this.cfstringref, // returns a new cfstringref ctypes.voidptr_t, // allocator ctypes.jschar.ptr, // pointer to the unicode string ctypes.int32_t); //
length of the string cfstringcreatewithcharacters() is used to create a new cfstring object using a unicode string as the source string, which is copied into the new cfstring object.
... it returns a cfstringref, which is a pointer to the new string, and accepts, as input, three parameters: an allocator, which is a pointer to a routine that will allocate the memory to contain the new object (we use the ctypes.voidptr_t type for this), a pointer to the unicode string to copy into the new string object (ctypes.jschar.ptr), and the
length of the unicode string in characters.
...And 5 more matches
CSSPrimitiveValue.getFloatValue() - Web APIs
valid values are: constant description css_cm the value is a <
length> in centimeters.
... css_ems the value is a <
length> in em units.
... css_exs the value is a <
length> in ex units.
...And 5 more matches
CSSPrimitiveValue.setFloatValue() - Web APIs
valid values are: constant description css_cm the value is a <
length> in centimeters.
... css_ems the value is a <
length> in em units.
... css_exs the value is a <
length> in ex units.
...And 5 more matches
CSSPrimitiveValue - Web APIs
css_cm the value is a <
length> in centimeters.
... css_ems the value is a <
length> in em units.
... css_exs the value is a <
length> in ex units.
...And 5 more matches
Box-shadow generator - CSS: Cascading Style Sheets
allback) { subscribers[topic].indexof(callback); subscribers[topic].splice(index, 1); } var notify = function notify() { if (subscribers[this.topic] === undefined) return; for (var i in subscribers[this.topic]) { subscribers[this.topic][i](this.value); } } var init = function init() { var elem, size; elem = document.queryselectorall('.ui-slider-btn-set'); size = elem.
length; for (var i = 0; i < size; i++) setbuttoncomponent(elem[i]); elem = document.queryselectorall('.ui-slider-input'); size = elem.
length; for (var i = 0; i < size; i++) setinputcomponent(elem[i]); elem = document.queryselectorall('.ui-slider'); size = elem.
length; for (var i = 0; i < size; i++) new slider(elem[i]); } return { init : init, setvalue : setvalue, subscr...
...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 notify() { if (subscribers[this.topic] === undefined) return; for (var i = 0; i < subscribers[this.topic].
length; i++) subscribers[this.topic][i](this.checkbox.checked); } var init = function init() { var elem = document.queryselectorall('.ui-checkbox'); var size = elem.
length; for (var i = 0; i < size; i++) new checkbox(elem[i]); } return { init : init, setvalue : setvalue, subscribe : subscribe, unsubscribe : unsubscribe } })(); window.addeventlistener("load", function(){ bo...
...cmax) saturation = delta / cmax; } this.hue = 60 * hue | 0; if (this.hue < 0) this.hue += 360; this.saturation = (saturation * 100) | 0; this.value = (cmax * 100) | 0; } color.prototype.sethexa = function sethexa(value) { var valid = /(^#{0,1}[0-9a-f]{6}$)|(^#{0,1}[0-9a-f]{3}$)/i.test(value) if (valid !== true) return; if (value[0] === '#') value = value.slice(1, value.
length); if (value.
length === 3) value = value.replace(/([0-9a-f])([0-9a-f])([0-9a-f])/i,"$1$1$2$2$3$3"); this.r = parseint(value.substr(0, 2), 16); this.g = parseint(value.substr(2, 2), 16); this.b = parseint(value.substr(4, 2), 16); this.alpha = 1; } color.prototype.gethexa = function gethexa() { var r = this.r.tostring(16); var g = this.g.tostring(16); var b = this.b.tostring...
...And 5 more matches
attr() - CSS: Cascading Style Sheets
length <
length> the attribute value is parsed as a css <
length> dimension, that is including the unit (e.g.
...if it is not valid, that is not a
length or out of the range accepted by the css property, the default value is used.
... if the given unit is a relative
length, attr() computes it to an absolute
length.
...And 5 more matches
background - CSS: Cascading Style Sheets
idth for horizontal offsets and to the height for vertical offsetsbackground-size: relative to the background positioning areacomputed valueas each of the properties of the shorthand:background-image: as specified, but with <url> values made absolutebackground-position: a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute
length (if given a <
length>), otherwise as a percentagebackground-size: as specified, but with relative
lengths converted into absolute
lengthsbackground-repeat: a list, each item consisting of two keywords, one per dimensionbackground-origin: as specifiedbackground-clip: as specifiedbackground-attachment: as specifiedbackground-color: computed coloranimation typeas each of the properties of the shortha...
...nd:background-color: a colorbackground-image: discretebackground-clip: discretebackground-position: repeatable list of simple list of
length, percentage, or calcbackground-size: repeatable list of simple list of
length, percentage, or calcbackground-repeat: discretebackground-attachment: discrete formal syntax [ <bg-layer> , ]* <final-bg-layer>where <bg-layer> = <bg-image> | <bg-position> [ / <bg-size> ]?
...| <repeat-style> | <attachment> | <box> | <box>where <bg-image> = none | <image><bg-position> = [ [ left | center | right | top | bottom | <
length-percentage> ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ] | [ center | [ left | right ] <
length-percentage>?
...And 5 more matches
repeating-linear-gradient() - CSS: Cascading Style Sheets
the
length of the gradient that repeats is the distance between the first and last color stop.
... if the first color does not have a color-stop-
length, the color-stop-
length defaults to 0.
... with each repetition, the positions of the color stops are shifted by a multiple of the
length of the basic linear gradient.
...And 5 more matches
transform-origin - CSS: Cascading Style Sheets
one-value syntax: the value must be a <
length>, a <percentage>, or one of the keywords left, center, right, top, and bottom.
... two-value syntax: one value must be a <
length>, a <percentage>, or one of the keywords left, center, and right.
... the other value must be a <
length>, a <percentage>, or one of the keywords top, center, and bottom.
...And 5 more matches
<textarea> - HTML: Hypertext Markup Language
max
length the maximum number of characters (utf-16 code units) that the user can enter.
... min
length the minimum number of characters (utf-16 code units) required that the user should enter.
...those within, and outside the bounds set by min
length, max
length, or required) can be highlighted using the :valid and :invalid pseudo-classes.
...And 5 more matches
Functions - JavaScript
function map(f, a) { let result = []; // create a new array let i; // declare variable for (i = 0; i != a.
length; i++) result[i] = f(a[i]); return result; } in the following code, the function receives a function defined by a function expression and executes it for every element of the array received as a second argument.
... function map(f, a) { let result = []; // create a new array let i; // declare variable for (i = 0; i != a.
length; i++) result[i] = f(a[i]); return result; } const f = function(x) { return x * x * x; } let numbers = [0, 1, 2, 5, 10]; let cube = map(f,numbers); console.log(cube); function returns: [0, 1, 8, 125, 1000].
...for example, getting all the nodes of a tree structure (such as the dom) is easier via recursion: function walktree(node) { if (node == null) // return; // do something with node for (var i = 0; i < node.childnodes.
length; i++) { walktree(node.childnodes[i]); } } compared to the function loop, each recursive call itself makes many recursive calls here.
...And 5 more matches
TypeError: can't delete non-configurable array element - JavaScript
the javascript exception "can't delete non-configurable array element" occurs when it was attempted to shorten the
length of an array, but one of the array's elements is non-configurable.
... it was attempted to shorten the
length of an array, but one of the array's elements is non-configurable.
... when shortening an array, the elements beyond the new array
length will be deleted, which failed in this situation.
...And 5 more matches
Array.prototype.push() - JavaScript
the push() method adds one or more elements to the end of an array and returns the new
length of the array.
... return value the new
length property of the object upon which the method was called.
...the push method relies on a
length property to determine where to start inserting the given values.
...And 5 more matches
TypedArray - JavaScript
these objects all have a common syntax for their constructors: new typedarray(); new typedarray(
length); new typedarray(typedarray); new typedarray(object); new typedarray(buffer [, byteoffset [,
length]]); where typedarray is a constructor for one of the concrete types.
... parameters
length when called with a
length argument, an internal array buffer is created in memory, of size
length multiplied by bytes_per_element bytes, containing zeros.
...the
length of the new typed array will be same as the
length of the typedarray argument.
...And 5 more matches
textbox - Archive of obsolete content
attributes cols, decimalplaces, disabled, emptytext, hidespinbuttons, increment, label, max, max
length, min, multiline, newlines, onblur, onchange, onfocus, oninput, placeholder, preference, readonly, rows, searchbutton, size, spellcheck, tabindex, timeout, type, value, wrap, wraparound properties accessibletype, clickselectsall, decimalplaces, decimalsymbol, defaultvalue, disabled, editor, emptytext, increment, inputfield, label, max, max
length, min, placeholder, readonly, searchbutton, sele...
...ctionend, selectionstart, size, spinbuttons, tabindex, text
length, timeout, type, value, valuenumber, wraparound methods decrease, increase, reset, select, setselectionrange style classes plain examples <vbox> <label control="your-name" value="enter your name:"/> <textbox id="your-name" value="john"/> </vbox> attributes cols type: integer for multiline textboxes, the number of columns to display.
... max
length type: integer the maximum number of characters that the textbox allows to be entered.
...And 4 more matches
Encryption and Decryption - Archive of obsolete content
symmetric-key encryption public-key encryption key
length and encryption strength symmetric-key encryption with symmetric-key encryption, the encryption key can be calculated from the decryption key and vice versa.
... key
length and encryption strength breaking an encryption algorithm is basically finding the key to the access the encrypted data in plain text.
... for symmetric keys, encryption strength is often described in terms of the size or
length of the keys used to perform the encryption: in general, longer keys provide stronger encryption.
...And 4 more matches
ArrayBuffer.transfer() - Archive of obsolete content
the static arraybuffer.transfer() method returns a new arraybuffer whose contents have been taken from the oldbuffer's data and then is either truncated or zero-extended by newbyte
length.
... if newbyte
length is undefined, the byte
length of the oldbuffer is used.
... syntax arraybuffer.transfer(oldbuffer [, newbyte
length]); parameters oldbuffer an arraybuffer object from which to transfer.
...And 4 more matches
Backgrounds and borders - Learn web development
in this case we could use the background-size property, which can take
length or percentage values, to size the image to fit inside the background.
... in the example below i have used the larger image from the example above and used
length units to size it inside the box.
... change the
length units used to modify the size of the background.
...And 4 more matches
JS_EncodeStringToBuffer
syntax size_t js_encodestringtobuffer(jscontext *cx, jsstring *str, char *buffer, size_t
length); name type description cx jscontext * a context.
...
length size_t the size of buffer in bytes.
... description js_encodestringtobuffer converts the specified javascript str to a c string (an array of 8-bit chars) and fills the specified buffer with up to
length bytes of the string.
...And 4 more matches
IAccessibleText
the virtual character after the last character of the represented text(), that is the one at position
length is a special case.
...the valid range is 0..
length.
...the valid range is 0..
length.
...And 4 more matches
Using the clipboard
now that we have the object to copy, a transferring object needs to be created: var str = "text to copy"; var trans = transferable(sourcewindow); trans.adddataflavor("text/unicode"); // we multiply the
length of the string by 2, since it's stored in 2-byte utf-16 // format internally.
... trans.settransferdata("text/unicode", supportsstring(str), str.
length * 2); the first line gets the transferring component which implements nsitransferable.
...the first is the flavor we are setting, the second is the object holding the string, and the third is the
length of the data, in bytes.
...And 4 more matches
WebIDL bindings
example interface for a single value iterator: interface longiterable { iterable<long>; getter long(unsigned long index); readonly attribute unsigned long
length; }; for single value iterator interfaces, we treat the interface as an indexed getter, as required by the spec.
... example interface for a pair value iterator: interface stringandlongiterable { iterable<domstring, long>; }; the bindings for this pair value iterator interface require the following methods be implemented in the c++ object: class stringandlongiterable { public: // returns the number of items in the iterable storage size_t getiterable
length(); // returns key of pair at aindex in iterable storage nsastring& getkeyatindex(uint32_t aindex); // returns value of pair at aindex in iterable storage uint32_t& getvalueatindex(uint32_t aindex); } stringifiers named stringifiers operations in webidl will just invoke the corresponding c++ method.
... so for example, given this idl: interface interfacewithindexedgetter { getter long(unsigned long index); readonly attribute unsigned long
length; }; the corresponding c++ would be: class interfacewithindexedgetter { public: uint32_t
length() const; int32_t indexedgetter(uint32_t aindex, bool& afound) const; }; throwing exceptions from webidl methods, getters, and setters webidl methods, getters, and setters that are explicitly marked as allowed to throw have an errorresult& argument as their last argument.
...And 4 more matches
AuthenticatorAssertionResponse.authenticatorData - Web APIs
syntax var authnrdata = authenticatorassertionresponse.authenticatordata; value an arraybuffer that has a arraybuffer.byte
length of at least 37 bytes, containing the following fields: rpidhash (32 bytes) - a sha256 hash of the relying party id that was seen by the browser.
... attestedcredentialdata (variable
length) - the credential that was created.
... credentialid
length (2 bytes) - the
length of the credential id that immediately follows these bytes.
...And 4 more matches
Applying styles and colors - Web APIs
function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var 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 (var i = 0; i < linecap.
length; i++) { ctx.linewidth = 15; ctx.linecap = linecap[i]; ctx.beginpath(); ctx.moveto(25 + i * 50, 10); ctx.lineto(25 + i * 50, 140); ctx.stroke(); } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample a linejoin example the linejoin property determines how two connecting segments (of lines, arcs or curves) with non-zero
lengths in ...
...a shape are joined together (degenerate segments with zero
lengths, whose specified endpoints and control points are exactly at the same position, are skipped).
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var linejoin = ['round', 'bevel', 'miter']; ctx.linewidth = 10; for (var 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(); } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample a demo of the miterlimit property as you've seen in the p...
...And 4 more matches
Using files from web applications - Web APIs
you can determine how many files the user selected by checking the value of the file list's
length attribute: const numfiles = filelist.
length; individual file objects can be retrieved by simply accessing the list as an array: for (let i = 0, numfiles = filelist.
length; i < numfiles; i++) { const file = filelist[i]; // ...
...d> <body> <form name="uploadform"> <div> <input id="uploadinput" type="file" name="myfiles" multiple> selected files: <span id="filenum">0</span>; total size: <span id="filesize">0</span> </div> <div><input type="submit" value="send file"></div> </form> <script> function updatesize() { let nbytes = 0, ofiles = this.files, nfiles = ofiles.
length; for (let nfileid = 0; nfileid < nfiles; nfileid++) { nbytes += ofiles[nfileid].size; } 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) +...
... function handlefiles(files) { for (let i = 0; i < files.
length; i++) { const file = files[i]; if (!file.type.startswith('image/')){ continue } const img = document.createelement("img"); img.classlist.add("obj"); img.file = file; preview.appendchild(img); // assuming that "preview" is the div output where the content will be displayed.
...And 4 more matches
SVGSVGElement - Web APIs
svgsvgelement.x read only an svganimated
length corresponding to the x attribute of the given <svg> element.
... svgsvgelement.y read only an svganimated
length corresponding to the y attribute of the given <svg> element.
... svgsvgelement.width read only an svganimated
length corresponding to the width attribute of the given <svg> element.
...And 4 more matches
SVGTextContentElement - Web APIs
idth="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="156" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants constant value description
lengthadjust_unknown 0 some other value.
...
lengthadjust_spacing 1 the spacing keyword.
...
lengthadjust_spacingandglyphs 2 the spacingandglyphs keyword.
...And 4 more matches
SubtleCrypto.wrapKey() - Web APIs
*/ 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.
...*/ window.crypto.subtle.generatekey( { name: "aes-gcm",
length: 256, }, true, ["encrypt", "decrypt"] ) .then((secretkey) => { return wrapcryptokey(secretkey); }) .then((wrappedkey) => { console.log(wrappedkey); }); pkcs #8 wrap this example wraps an rsa private signing key.
...*/ function getkey(keymaterial, salt) { return window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-256" }, keymaterial, { "name": "aes-gcm", "
length": 256}, true, [ "wrapkey", "unwrapkey" ] ); } /* wrap the given key.
...And 4 more matches
Multi-touch interaction - Web APIs
function handle_pinch_zoom(ev) { if (ev.targettouches.
length == 2 && ev.changedtouches.
length == 2) { // check if the two target touches are the same ones that started // the 2-touch var point1=-1, point2=-1; for (var i=0; i < tpcache.
length; i++) { if (tpcache[i].identifier == ev.targettouches[0].identifier) point1 = i; if (tpcache[i].identifier == ev.targettouches[1].identifier) point2 = i; } if (point1 >=0 && point2 >= 0) { ...
...thus if there are // three simultaneous touches, the first touchstart event will have // targettouches
length of one, the second event will have a
length // of two, and so on.
... ev.preventdefault(); // cache the touch points for later processing of 2-touch pinch/zoom if (ev.targettouches.
length == 2) { for (var i=0; i < ev.targettouches.
length; i++) { tpcache.push(ev.targettouches[i]); } } if (logevents) log("touchstart", ev, true); update_background(ev); } touch move handler the touchmove handler calls preventdefault() for the same reason mentioned above, and invokes the pinch/zoom handler.
...And 4 more matches
Writing WebSocket servers - Web APIs
format each data frame (from the client to the server or vice-versa) follows this same format: frame format: ​​ 0 1 2 3 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 +-+-+-+-+-------+-+-------------+-------------------------------+ |f|r|r|r| opcode|m| payload len | extended payload
length | |i|s|s|s| (4) |a| (7) | (16/64) | |n|v|v|v| |s| | (if payload len==126/127) | | |1|2|3| |k| | | +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - + | extended payload
length continued, if payload len == 127 | + - - - - - - - - - - - - - - - +-...
... decoding payload
length to read the payload data, you must know when to stop reading.
... that's why the payload
length is important to know.
...And 4 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
the orientation can be represented using a 3d vector, which is typically normalized so that its
length is 1.0.
...the value of w is always 0 for vectors, so the aforementioned vector can also be represented using [3, 1, -2, 0] or: [31-20]\left [ \begin{matrix} 3 \\ 1 \\ -2 \\ 0 \end{matrix} \right ] webxr automatically normalizes vectors to have a
length of 1 meter; however, you may find that it makes sense to do it yourself for various reasons, such as to improve performance of calculations by not having to repeatedly perform normalization.
...zooming is performed in a physical camera by altering the focal
length of the lens; this is the distance between the center of the lens itself and the camera's light sensors.
...And 4 more matches
Background audio processing using AudioWorklet - Web APIs
by specification, each block of audio your process() function receives contains 128 frames (that is, 128 samples for each channel), but it is planned that this value will change in the future, and may in fact vary depending on circumstances, so you should always check the array's
length rather than assuming a particular size.
... it is, however, guaranteed that the inputs and outputs will have the same block
length.
... thus, given the input list inputlist: const numberofinputs = inputlist.
length; const firstinput = inputlist[0]; const firstinputchannelcount = firstinput.
length; const firstinputfirstchannel = firstinput[0]; // (or inputlist[0][0]) const firstchannelbytecount = firstinputfirstchannel.
length; const firstbyteoffirstchannel = firstinputfirstchannel[0]; // (or inputlist[0][0][0]) the output list is structured in exactly the same way; it's an array of outputs, each of which...
...And 4 more matches
<basic-shape> - CSS: Cascading Style Sheets
all the
lengths expressed in percentages are resolved from the used dimensions of the reference box.
... the required <string> is an svg path string encompassed in quotes the arguments not defined above are defined as follows: <shape-arg> = <
length> | <percentage> <shape-radius> = <
length> | <percentage> | closest-side | farthest-side defines a radius for a circle or ellipse.
... closest-side uses the
length from the center of the shape to the closest side of the reference box.
...And 4 more matches
filter - CSS: Cascading Style Sheets
ss(3%); /* use no filter */ filter: none; /* global values */ filter: inherit; filter: initial; filter: unset; with a function, use the following: filter: <filter-function> [<filter-function>]* | none for a reference to an svg <filter> element, use the following: filter: url(file.svg#filter-element-id) interpolation if both the beginning and end filters have a function list of the same
length without <url>, each of their filter functions is interpolated according to its specific rules.
... if they have different
lengths, the missing equivalent filter functions from the longer list are added to the end of the shorter list using their lacuna values, then all filter functions are interpolated according to their specific rules.
...the parameter is specified as a css
length, but does not accept percentage values.
...And 4 more matches
shape-outside - CSS: Cascading Style Sheets
the list values interpolate as <
length>, <percentage>, or calc() where possible.
...typeyes, as specified for <basic-shape>, otherwise no formal syntax none | <shape-box> | <basic-shape> | <image>where <shape-box> = <box> | margin-box<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <box> = border-box | padding-box | content-box<inset()> = inset( <
length-percentage>{1,4} [ round <'border-radius'> ]?
..., [ <
length-percentage> <
length-percentage> ]# )<path()> = path( [ <fill-rule>, ]?
...And 4 more matches
width - CSS: Cascading Style Sheets
syntax /* <
length> values */ width: 300px; width: 25em; /* <percentage> value */ width: 75%; /* keyword values */ width: max-content; width: min-content; width: fit-content(20em); width: auto; /* global values */ width: inherit; width: initial; width: unset; the width property is specified as either: one of the following keyword values: min-content, max-content, fit-content, auto.
... a <
length> or a <percentage>.
... values <
length> defines the width as an absolute value.
...And 4 more matches
HTTP range requests - HTTP
accept-ranges: bytes content-
length: 146515 in this response, accept-ranges: bytes indicates that bytes can be used as unit to define a range.
... here the content-
length header is also useful as it indicates the full size of the image to retrieve.
... 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 ...
...And 4 more matches
Grammar and types - JavaScript
when you create an array using an array literal, it is initialized with the specified values as its elements, and its
length is set to the number of arguments specified.
... the following example creates the coffees array with three elements and a
length of three: let coffees = ['french roast', 'colombian', 'kona']; note : an array literal is a type of object initializer.
... in the following example, the
length of the array is three.
...And 4 more matches
Text formatting - JavaScript
the
length of a string is the number of elements in it.
...you can also use the string.
length property with a string literal.
...for example: const firststring = '2 + 2'; // creates a string literal value const secondstring = new string('2 + 2'); // creates a string object eval(firststring); // returns the number 4 eval(secondstring); // returns the string "2 + 2" a string object has one property,
length, that indicates the number of utf-16 code units in the string.
...And 4 more matches
Array.prototype.copyWithin() - JavaScript
the copywithin() method shallow copies part of an array to another location in the same array and returns it without modifying its
length.
... if target is at or greater than arr.
length, nothing will be copied.
... if target is positioned after start, the copied sequence will be trimmed to fit arr.
length.
...And 4 more matches
String.prototype.charAt() - JavaScript
syntax let character = str.charat(index) parameters index an integer between 0 and str.
length - 1.
...the index of the first character is 0, and the index of the last character—in a string called stringname—is stringname.
length - 1.
... 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 foun...
...And 4 more matches
String - JavaScript
some of the most-used operations on strings are to check their
length, to build and concatenate them using the + and += string operators, checking for the existence or location of substrings with the indexof() method, or extracting substrings with the substring() method.
... instance properties string.prototype.
length reflects the
length of the string.
... string.prototype.endswith(searchstring [,
length]) determines whether a string ends with the characters of the string searchstring.
...And 4 more matches
SVG Presentation Attributes - SVG: Scalable Vector Graphics
value: auto|baseline|super|sub|<percentage>|<
length>|inherit; animatable: yes clip deprecated it defines what portion of an element is visible.
... value: auto|<
length>|inherit; animatable: yes letter-spacing it controls spacing between text characters.
... value: normal|<
length>|inherit; animatable: yes lighting-color it defines the color of the light source for filter primitives elements <fediffuselighting> and <fespecularlighting>.
...And 4 more matches
kerning - SVG: Scalable Vector Graphics
the kerning attribute indicates whether the spacing between glyphs should be adjusted based on kerning tables that are included in the relevant font (i.e., enable auto-kerning) or instead disable auto-kerning and set the spacing between them to a specific
length (typically, zero).
...t but it has effect only on the following four elements: <altglyph>, <textpath>, <text>, <tref>, and <tspan> html, body, svg { height: 100%; font: 36px verdana, helvetica, arial, sans-serif; } <svg viewbox="0 0 150 125" xmlns="http://www.w3.org/2000/svg"> <text x="10" y="30" kerning="auto">auto</text> <text x="10" y="70" kerning="0">number</text> <text x="10" y="110" kerning="20px">
length</text> </svg> usage notes value auto | <
length> default value auto animatable yes auto this value indicates that the spacing between glyphs is adjusted based on kerning tables that are included in the font that will be used.
... <
length> if a
length is provided, then auto-kerning is disabled.
...And 4 more matches
<text> - SVG: Scalable Vector Graphics
value type: <
length>|<percentage> ; default value: 0; animatable: yes y the y coordinate of the starting point of the text baseline.
... value type: <
length>|<percentage> ; default value: 0; animatable: yes dx shifts the text position horizontally from a previous text element.
... value type: <
length>|<percentage> ; default value: none; animatable: yes dy shifts the text position vertically from a previous text element.
...And 4 more matches
<tspan> - SVG: Scalable Vector Graphics
value type: <
length>|<percentage> ; default value: none; animatable: yes y the y coordinate of the starting point of the text baseline.
... value type: <
length>|<percentage> ; default value: none; animatable: yes dx shifts the text position horizontally from a previous text element.
... value type: <
length>|<percentage> ; default value: none; animatable: yes dy shifts the text position vertically from a previous text element.
...And 4 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
firefox 22 omni.jar archive file became omni.ja since http://blog.ffextensionguru.com/2011/11/16/omni-jar-to-become-omni-ja/ [root@localhost firefox]# unzip -l /usr/lib/firefox/browser/omni.ja | grep defaults/pr warning [/usr/lib/firefox/browser/omni.ja]: 3598815 extra bytes at beginning or within zipfile (attempting to process anyway) error [/usr/lib/firefox/browser/omni.ja]: reported
length of central directory is -3598815 bytes too long (atari stzip zipfile?
...to fix, add the following: start_pos += search_key.
length; //start start_pos +=1; //end to function getldapvalue() in autoconfig/preffcalls.js.
...rks: // 2) setup multiple ldap servers for fail-over var ldap_values; var ldap_servers = new array('ldap2.int-evry.fr', 'ldap1.int-evry.fr', 'openldap.int-evry.fr' ); // shuffle function to randomize the server array // setup the shuffle method for an array array.prototype.shuffle = function(times) { var i,j,t,l=this.
length; while(times--) { with(math) { i = floor(random()*l); j = floor(random()*l); } t = this[i]; this[i] = this[j]; this[j] = t; } return this; } // mix up the ldap servers so we don't hit the same one each time ldap_servers.shuffle(10); ....
...And 3 more matches
Multiprocess on Windows
something typelibs do not include in their metadata, is idl annotations, such as
length_is and size_is.
...without the support for
length_is and size_is annotations, the interceptor cannot tell the difference between a scalar outparam and an array outparam.
... for those interfaces that do contain
length_is or size_is annotations, we need to use another api declared in mozilla/mscom/registration.h: registerarraydata().
...And 3 more matches
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
*infile = null; certcertificate *cert = null; secitem data; unsigned char ptext[modblocksize]; unsigned char encbuf[modblocksize]; unsigned int ptextlen; int index; unsigned int nwritten; unsigned int pad[1]; secitem paditem; unsigned int padding
length = 0; seckeypublickey *pubkey = null; /* if the intermediate encrypted file already exists, delete it*/ if (pr_access(encryptedfilename, pr_access_exists) == pr_success) { pr_delete(encryptedfilename); } /* read certificate from header file */ rv = readfromheaderfile(headerfilename, certenc, &data, pr_true); if (rv != secsuccess) { ...
...create_file | pr_rdwr | pr_append, 00660); if (!headerfile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing.\n", headerfilename); rv = secfailure; goto cleanup; } /* read input file */ while ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { if (ptextlen != modblocksize) { padding
length = modblocksize - ptextlen; for ( index=0; index < padding
length; index++) { ptext[ptextlen+index] = (unsigned char)padding
length; } ptextlen = modblocksize; } rv = pk11_pubencryptraw(pubkey, encbuf, ptext, ptextlen, null); nwritten = pr_write(encfile, encbuf, ptextlen); } /* write the padding to header...
... file */ pad[0] = padding
length; paditem.type = sibuffer; paditem.data = (unsigned char *)pad; paditem.len = sizeof(pad[0]); writetoheaderfile(paditem.data, paditem.len, pad, headerfile); cleanup: if (headerfile) { pr_close(headerfile); } if (encfile) { pr_close(encfile); } if (infile) { pr_close(infile); } if (pubkey) { seckey_destroypublickey(pubkey); } if (cert) { cert_destroycertificate(cert); } return rv; } /* * finds the private key from db and signs the contents * of infilename and writes to signaturefilename */ secstatus findkeyandsign(pk11slotinfo *slot, certcertdbhandle* certhandle, secupwdata *pwdata...
...And 3 more matches
Bytecode Descriptions
format: jof_elem, jof_typeset, jof_ic
length operands: (uint32_t nameindex) stack: obj ⇒ obj.
length push the value of obj.
length.
... nameindex must be the index of the atom "
length".
... array literals newarray operands: (uint32_t
length) stack: ⇒ array create and push a new array object with the given
length, preallocating enough memory to hold that many elements.
...And 3 more matches
JSAPI reference
z js_newdependentstring js_getemptystringvalue js_getemptystring added in spidermonkey 1.8.5 js_concatstrings js_comparestrings js_stringequalsascii added in spidermonkey 1.8.5 js_flatstringequalsascii added in spidermonkey 1.8.5 js_stringhaslatin1chars added in spidermonkey 38 js_getstringcharat added in spidermonkey 38 js_getflatstringcharat added in spidermonkey 38 js_getstring
length js_encodestring added in spidermonkey 1.8 js_encodestringtoutf8 added in spidermonkey 24 js_encodestringtobuffer added in spidermonkey 1.8.5 js_getstringencoding
length added in spidermonkey 1.8.5 js_getlatin1flatstringchars added in spidermonkey 38 js_gettwobyteflatstringchars added in spidermonkey 38 js_getlatin1stringcharsand
length added in spidermonkey 38 js_gettwobytestringcharsandlen...
...gth added in spidermonkey 38 js::getdeflatedutf8string
length added in spidermonkey 38 js::deflatestringtoutf8buffer added in spidermonkey 38 js_fileescapedstring added in spidermonkey 1.8.5 js_putescapedstring added in spidermonkey 1.8.5 js_putescapedflatstring added in spidermonkey 1.8.5 js_forget_string_flatness added in spidermonkey 1.8.5 js_stringisflat added in spidermonkey 38 js_assert_string_is_flat added in spidermonkey 1.8.5 js_flattenstring added in spidermonkey 1.8.5 typedef jschar obsolete since jsapi 35 js_newstring obsolete since jsapi 1.8.5 js_newgrowablestring obsolete since jsapi 27 js_getstringbytes obsolete since jsapi 1.8.5 js_getstringbytesz obsolete since jsapi 1.8.5 js_getstringchars obsolete since jsapi 1.8.5 js_getstringcharsz obsolete since jsap...
...i 33 js_getstringcharsand
length added in jsapi 1.8.5 obsolete since jsapi 33 js_getstringcharsz added in spidermonkey 1.8.5 obsolete since jsapi 33 js_getstringcharszand
length added in spidermonkey 1.8.5 obsolete since jsapi 33 js_getflatstringchars obsolete since jsapi 33 js_makestringimmutable obsolete since javascript 1.8.5 js_encodecharacters obsolete since jsapi 19 js_cstringsareutf8 obsolete since jsapi 19 js_setcstringsareutf8 obsolete since jsapi 19 interning strings tells the spidermonkey engine to reuse existing string objects when possible.
...And 3 more matches
Secure Development Guidelines
newchars = (jschar *) js_malloc(cx, (new
length + 1) * sizeof(jschar)); ...
... for (i = 0, ni = 0; i <
length; i++) { if ((ch = chars[i]) < 128 && is_ok(ch, mask)) { newchars[ni++] = ch; ...
...a/b : 0; } writing secure code: memory management string handling c-style strings are byte arrays that end with a \0 byte some string handling functions won’t perform any kind of
length checking, so don’t use them ensure your string is always \0 terminated!
...And 3 more matches
XPCOM array guide
void notifyobservers(nsiarray* aarray) { pruint32
length; aarray->get
length(&
length); for (pruint32 i=0; i<
length; ++i) { nscomptr<nsimyobserver> element; aarray->queryelementat(i, ns_get_iid(nsielement), getter_addrefs(element)); element->observe(); } } a simpler option is to use the helper do_queryelementat which is typesafe.
... void notifyobservers(nsiarray* aarray) { pruint32
length; aarray->get
length(&
length); for (pruint32 i=0; i<
length; ++i) { nscomptr<nsimyobserver> element = do_queryelementat(aarray, i); element->observe(); } } passing as a parameter since nsiarray is an xpcom object, it should be passed as a pointer.
... when the array can or should be modified, then use nsimutablearray: // array is read-only because it uses nsiarray void printsize(nsiarray* elements) { pruint32 count; elements->get
length(&count); printf("there are %d elements.\n", count); } // using nsimutablearray, so callee may modify void tweakarray(nsimutablearray* elements) { elements->removeelementat(0); elements->appendelement(newelement, pr_false); } while it is usually possible to call queryinterface on an nsiarray to get access to the nsimutablearray interface, this is against convention and it should be avoided.
...And 3 more matches
nsIMutableArray
index the position in the array: if the position is lower than the current
length of the array, the elements at that position and onwards are bumped one position up.
... if the position is equal to the current
length of the array, the new element is appended.
... an index lower than 0 or higher than the current
length of the array is invalid and will be ignored.
...And 3 more matches
URLs - Plugins
to post a file, set the flag file to true, the buffer buf to the path name string for a file, and len to the
length of the path string.
...to post data from a memory buffer, set the flag file to false, the buffer buf to the data to post, and len to the
length of the buffer.
... char* ppostdata = "content-type:\tapplication/x-www-form-urlencoded\ncontent-
length:\t17\n\nname=aaashun@gmail.com\n"; uint32 npostdatalen = (uint32)strlen(ppostdata); npn_posturl(npinstance, "http://www.baidu.com","_blank", npostdatalen, ppostdata, false); uploading files to an ftp server plug-ins can use npn_posturl or npn_posturlnotify to upload files to a remote server using ftp.
...And 3 more matches
CSSStyleSheet.insertRule() - Web APIs
index optional a positive integer less than or equal to stylesheet.cssrules.
length, representing the newly inserted rule's position in cssstylesheet.cssrules.
... if index > cssrulelist.
length, the method aborts with an indexsizeerror.
...], ['background-color', 'green', true] // 'true' for !important rules ], ['.myclass', ['background-color', 'yellow'] ] ]); */ function addstylesheetrules (rules) { var styleel = document.createelement('style'); // append <style> element to <head> document.head.appendchild(styleel); // grab style element's sheet var stylesheet = styleel.sheet; for (var i = 0; i < rules.
length; i++) { var j = 1, rule = rules[i], selector = rule[0], propstr = ''; // if the second argument of a rule is an array of arrays, correct our variables.
...And 3 more matches
Using the Resource Timing API - Web APIs
an application can use the timing metrics to determine, for example, the
length of time it takes to fetch a specific resource such as an xmlhttprequest, <svg>, image, script, etc.).
...resource timing properties an application developer can use the property values to calculate the
length of time a phase takes and that information can help diagnose performance issues.
... 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 + "] - " + resources[i].name); // redirect time var t = resources[i].redirectend - resources[i].redirectstart; console.log("...
...And 3 more matches
SVGPathElement - Web APIs
target="_top"><rect x="-99" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-29" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgpathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: in svg 2 the getpathsegat
length() and createsvgpathseg* methods were removed and the path
length property and the gettotal
length() and getpointat
length() methods were moved to svggeometryelement.
... svgpathelement.path
length an svganimatednumber corresponding to the path
length attribute of the given <path> element.
... svgpathelement.gettotal
length() returns a float representing the computed value for the total
length of the path using the browser's distance-along-a-path algorithm, as a distance in the current user coordinate system.
...And 3 more matches
SVGRectElement - Web APIs
svgrectelement.x read only returns an svganimated
length corresponding to the x attribute of the given <rect> element.
... svgrectelement.y read only returns an svganimated
length corresponding to the y attribute of the given <rect> element.
... svgrectelement.width read only returns an svganimated
length corresponding to the width attribute of the given <rect> element.
...And 3 more matches
SubtleCrypto.deriveBits() - Web APIs
it takes as its arguments the base key, the derivation algorithm to use, and the
length of the bit string to derive.
... syntax const result = crypto.subtle.derivebits( algorithm, basekey,
length ); parameters algorithm is an object defining the derivation algorithm to use.
...
length is a number representing the number of bits to derive.
...And 3 more matches
Touch events - Web APIs
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(); console.log("touchstart:" + i + "."); } } this calls event.preventdefault() to keep...
... function handlemove(evt) { evt.preventdefault(); var el = document.getelementbyid("canvas"); var ctx = el.getcontext("2d"); var touches = evt.changedtouches; for (var i = 0; i < touches.
length; i++) { var color = colorfortouch(touches[i]); var idx = ongoingtouchindexbyid(touches[i].identifier); if (idx >= 0) { console.log("continuing touch "+idx); ctx.beginpath(); console.log("ctx.moveto(" + ongoingtouches[idx].pagex + ", " + ongoingtouches[idx].pagey + ");"); ctx.moveto(ongoingtouches[idx].pagex, ongoingtouches[idx].pagey); console.log("ctx.l...
... function handleend(evt) { evt.preventdefault(); log("touchend"); var el = document.getelementbyid("canvas"); var ctx = el.getcontext("2d"); var touches = evt.changedtouches; for (var i = 0; i < touches.
length; i++) { var color = colorfortouch(touches[i]); var idx = ongoingtouchindexbyid(touches[i].identifier); if (idx >= 0) { ctx.linewidth = 4; ctx.fillstyle = color; ctx.beginpath(); ctx.moveto(ongoingtouches[idx].pagex, ongoingtouches[idx].pagey); ctx.lineto(touches[i].pagex, touches[i].pagey); ctx.fillrect(touches[i].pagex - 4, touches[i].pagey - 4, 8...
...And 3 more matches
Using Web Workers - Web APIs
*/ this.sendquery = function() { if (arguments.
length < 1) { throw new typeerror('queryableworker.sendquery takes at least one argument'); return; } worker.postmessage({ 'querymethod': arguments[0], 'queryarguments': array.prototype.slice.call(arguments, 1) }); } we finish queryableworker with the onmessage method.
... first we need to have the methods to handle the two simple operations: var queryablefunctions = { getdifference: function(a, b) { reply('printstuff', a - b); }, waitsometime: function() { settimeout(function() { reply('doalert', 3, 'seconds'); }, 3000); } } function reply() { if (arguments.
length < 1) { throw new typeerror('reply - takes at least one argument'); return; } postmessage({ querymethodlistener: arguments[0], querymethodarguments: array.prototype.slice.call(arguments, 1) }); } /* this method is called when main page calls queryworker's postmessage method directly*/ function defaultreply(message) { // do something } and the onme...
... */ this.sendquery = function() { if (arguments.
length < 1) { throw new typeerror('queryableworker.sendquery takes at least one argument'); return; } worker.postmessage({ 'querymethod': arguments[0], 'querymethodarguments': array.prototype.slice.call(arguments, 1) }); } worker.onmessage = function(event) { if (event.data instanceof object && event.data.haso...
...And 3 more matches
border-bottom-left-radius - CSS: Cascading Style Sheets
0%; /* same as above: 20% of horizontal(width) and vertical(height) */ border-bottom-left-radius: 20% 20%; /* 20% of horizontal(width) and 10% of vertical(height) */ border-bottom-left-radius: 20% 10%; /* the corner is an ellipse */ /* border-bottom-left-radius: horizontal vertical */ border-bottom-left-radius: 0.5em 1em; border-bottom-left-radius: inherit; with one value: the value is a <
length> or a <percentage> denoting the radius of the circle to use for the border in that corner.
... with two values: the first value is a <
length> or a <percentage> denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.
... the second value is a <
length> or a <percentage> denoting the vertical semi-major axis of the ellipse to use for the border in that corner.
...And 3 more matches
border-bottom-right-radius - CSS: Cascading Style Sheets
der-bottom-right-radius: 20% 20%; /* same as above */ /* 20% of horizontal(width) and vertical(height) */ border-bottom-right-radius: 20% 10%; /* 20% of horizontal(width) and 10% of vertical(height) */ /*the corner is an ellipse */ /* border-bottom-right-radius: horizontal vertical */ border-bottom-right-radius: 0.5em 1em; border-bottom-right-radius: inherit; with one value: the value is a <
length> or a <percentage> denoting the radius of the circle to use for the border in that corner.
... with two values: the first value is a <
length> or a <percentage> denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.
... the second value is a <
length> or a <percentage> denoting the vertical semi-major axis of the ellipse to use for the border in that corner.
...And 3 more matches
border-top-left-radius - CSS: Cascading Style Sheets
syntax /* the corner is a circle */ /* border-top-left-radius: radius */ border-top-left-radius: 3px; /* the corner is an ellipse */ /* border-top-left-radius: horizontal vertical */ border-top-left-radius: 0.5em 1em; border-top-left-radius: inherit; with one value: the value is a <
length> or a <percentage> denoting the radius of the circle to use for the border in that corner.
... with two values: the first value is a <
length> or a <percentage> denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.
... the second value is a <
length> or a <percentage> denoting the vertical semi-major axis of the ellipse to use for the border in that corner.
...And 3 more matches
border-top-right-radius - CSS: Cascading Style Sheets
syntax /* the corner is a circle */ /* border-top-right-radius: radius */ border-top-right-radius: 3px; /* the corner is an ellipse */ /* border-top-right-radius: horizontal vertical */ border-top-right-radius: 0.5em 1em; border-top-right-radius: inherit; with one value: the value is a <
length> or a <percentage> denoting the radius of the circle to use for the border in that corner.
... with two values: the first value is a <
length> or a <percentage> denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.
... the second value is a <
length> or a <percentage> denoting the vertical semi-major axis of the ellipse to use for the border in that corner.
...And 3 more matches
line-height - CSS: Cascading Style Sheets
syntax /* keyword value */ line-height: normal; /* unitless values: use this number multiplied by the element's font size */ line-height: 3.5; /* <
length> values */ line-height: 3em; /* <percentage> values */ line-height: 34%; /* global values */ line-height: inherit; line-height: initial; line-height: unset; the line-height property is specified as any one of the following: a <number> a <
length> a <percentage> the keyword normal.
... <
length> the specified <
length> is used in the calculation of the line box height.
...it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the font size of the element itselfcomputed valuefor percentage and
length values, the absolute
length, otherwise as specifiedanimation typeeither number or
length formal syntax normal | <number> | <
length> | <percentage> examples basic example /* all rules below have the same resultant line height */ div { line-height: 1.2; font-size: 10pt; } /* number/unitless */ div { line-height: 1.2em; font-size: 10pt; } /*
length */ div { line-height: 120%; font-size:...
...And 3 more matches
mask - CSS: Cascading Style Sheets
ting area minus size of mask layer image (see the text for background-position)computed valueas each of the properties of the shorthand:mask-image: as specified, but with <url> values made absolutemask-mode: as specifiedmask-repeat: consists of two keywords, one per dimensionmask-position: consists of two keywords representing the origin and two offsets from that origin, each given as an absolute
length (if given a <
length>), otherwise as a percentage.mask-clip: as specifiedmask-origin: as specifiedmask-size: as specified, but with relative
lengths converted into absolute
lengthsmask-composite: as specifiedanimation typeas each of the properties of the shorthand:mask-image: discretemask-mode: discretemask-repeat: discretemask-position: repeatable list of simple list of
length, percentage, or cal...
...cmask-clip: discretemask-origin: discretemask-size: repeatable list of simple list of
length, percentage, or calcmask-composite: discretecreates stacking contextyes formal syntax <mask-layer>#where <mask-layer> = <mask-reference> | <position> [ / <bg-size> ]?
... | <repeat-style> | <geometry-box> | [ <geometry-box> | no-clip ] | <compositing-operator> | <masking-mode>where <mask-reference> = none | <image> | <mask-source><position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
...And 3 more matches
max-block-size - CSS: Cascading Style Sheets
the other dimension's maximum
length is specified using the max-inline-size property.
... this is useful because the max-width is always used for horizontal sizes and max-height is always used for vertical sizes, and if you need to set
lengths based on the size of your text content, you need to be able to do so with the writing direction in mind.
... syntax /* <
length> values */ max-block-size: 300px; max-block-size: 25em; /* <percentage> values */ max-block-size: 75%; /* keyword values */ max-block-size: auto; max-block-size: max-content; max-block-size: min-content; max-block-size: fit-content(20em); /* global values */ max-block-size: inherit; max-block-size: initial; max-block-size: unset; values the max-block-size property's value can be any value t...
...And 3 more matches
perspective-origin - CSS: Cascading Style Sheets
it can have one of the following values: <
length-percentage> indicating the position as an absolute
length value or relative to the width of the element.
... left, a keyword being a shortcut for the 0
length value.
...it can have one of the following values: <
length-percentage> indicating the position as an absolute
length value or relative to the height of the element.
...And 3 more matches
repeating-radial-gradient() - CSS: Cascading Style Sheets
<color-stop> a color-stop's <color> value, followed by an optional stop position (either a <percentage> or a <
length> along the gradient's axis).
... a percentage of 0%, or a
length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray.
... formal syntax repeating-radial-gradient( [[ circle || <
length> ] [at <position>]?
...And 3 more matches
text-shadow - CSS: Cascading Style Sheets
each shadow is specified as two or three <
length> values, followed optionally by a <color> value.
... the first two <
length> values are the <offset-x> and <offset-y> values.
... the third, optional, <
length> value is the <blur-radius>.
...And 3 more matches
translate - CSS: Cascading Style Sheets
syntax /* keyword values */ translate: none; /* single values */ translate: 100px; translate: 50%; /* two values */ translate: 100px 200px; translate: 50% 105px; /* three values */ translate: 50% 105px 5rem; values single <
length-percentage> value a <
length> or <percentage> that specifies a 2d translation, with the same translation along both the x and y axes.
... two <
length-percentage> values two <
length> or <percentage> that specify the x and y axis translation values (respectively) of a 2d translation.
... three values two <
length-percentage> and single <
length> values that specify the x, y, and z axis translation values (respectively) of a 3d translation.
...And 3 more matches
JavaScript modules - JavaScript
reportarea() — writes a square's area to a specific report list, given its
length.
... reportperimeter() — writes a square's perimeter to a specific report list, given its
length.
... the easiest way to use it is to place it in front of any items you want exported out of the module, for example: export const name = 'square'; export function draw(ctx,
length, x, y, color) { ctx.fillstyle = color; ctx.fillrect(x, y,
length,
length); return {
length:
length, x: x, y: y, color: color }; } you can export functions, var, let, const, and — as we'll see later — classes.
...And 3 more matches
Array() constructor - JavaScript
syntax [element0, element1, ..., elementn] new array(element0, element1[, ...[, elementn]]) new array(array
length) parameters elementn a javascript array is initialized with the given elements, except in the case where a single argument is passed to the array constructor and that argument is a number (see the array
length parameter below).
... array
length if the only argument passed to the array constructor is an integer between 0 and 232-1 (inclusive), this returns a new javascript array with its
length property set to that number (note: this implies an array of array
length empty slots, not slots with actual undefined values).
... examples array literal notation arrays can be created using the literal notation: let fruits = ['apple', 'banana']; console.log(fruits.
length); // 2 console.log(fruits[0]); // "apple" array constructor with a single parameter arrays can be created using a constructor with a single number parameter.
...And 3 more matches
Array.prototype.fill() - JavaScript
the fill() method changes all elements in an array to a static value, from a start index (default 0) to an end index (default array.
length).
... end optional end index, default arr.
length.
... description if start is negative, it is treated as array.
length + start.
...And 3 more matches
BigInt64Array() constructor - JavaScript
syntax new bigint64array(); new bigint64array(
length); new bigint64array(typedarray); new bigint64array(object); new bigint64array(buffer [, byteoffset [,
length]]); parameters
length when called with a
length argument, an internal array buffer is created in memory, of size
length multiplied by bytes_per_element bytes, containing zeros.
...the
length of the new typed array will be same as the
length of the typedarray argument.
... buffer, byteoffset,
length when called with a buffer, and optionally a byteoffset and a
length argument, a new typed array view is created that views the specified arraybuffer.
...And 3 more matches
BigUint64Array() constructor - JavaScript
syntax new biguint64array(); new biguint64array(
length); new biguint64array(typedarray); new biguint64array(object); new biguint64array(buffer [, byteoffset [,
length]]); parameters
length when called with a
length argument, an internal array buffer is created in memory, of size
length multiplied by bytes_per_element bytes, containing zeros.
...the
length of the new typed array will be same as the
length of the typedarray argument.
... buffer, byteoffset,
length when called with a buffer, and optionally a byteoffset and a
length argument, a new typed array view is created that views the specified arraybuffer.
...And 3 more matches
Float32Array() constructor - JavaScript
syntax new float32array(); // new in es2017 new float32array(
length); new float32array(typedarray); new float32array(object); new float32array(buffer [, byteoffset [,
length]]); parameters
length when called with a
length argument, an internal array buffer is created in memory, of size
length multiplied by bytes_per_element bytes, containing zeros.
...the
length of the new typed array will be same as the
length of the typedarray argument.
... buffer, byteoffset,
length when called with a buffer, and optionally a byteoffset and a
length argument, a new typed array view is created that views the specified arraybuffer.
...And 3 more matches
Float64Array() constructor - JavaScript
syntax new float64array(); // new in es2017 new float64array(
length); new float64array(typedarray); new float64array(object); new float64array(buffer [, byteoffset [,
length]]); parameters
length when called with a
length argument, an internal array buffer is created in memory, of size
length multiplied by bytes_per_element bytes, containing zeros.
...the
length of the new typed array will be same as the
length of the typedarray argument.
... buffer, byteoffset,
length when called with a buffer, and optionally a byteoffset and a
length argument, a new typed array view is created that views the specified arraybuffer.
...And 3 more matches
Int16Array() constructor - JavaScript
syntax new int16array(); // new in es2017 new int16array(
length); new int16array(typedarray); new int16array(object); new int16array(buffer [, byteoffset [,
length]]); parameters
length when called with a
length argument, an internal array buffer is created in memory, of size
length multiplied by bytes_per_element bytes, containing zeros.
...the
length of the new typed array will be same as the
length of the typedarray argument.
... buffer, byteoffset,
length when called with a buffer, and optionally a byteoffset and a
length argument, a new typed array view is created that views the specified arraybuffer.
...And 3 more matches
Int32Array() constructor - JavaScript
syntax new int32array(); // new in es2017 new int32array(
length); new int32array(typedarray); new int32array(object); new int32array(buffer [, byteoffset [,
length]]); parameters
length when called with a
length argument, an internal array buffer is created in memory, of size
length multiplied by bytes_per_element bytes, containing zeros.
...the
length of the new typed array will be same as the
length of the typedarray argument.
... buffer, byteoffset,
length when called with a buffer, and optionally a byteoffset and a
length argument, a new typed array view is created that views the specified arraybuffer.
...And 3 more matches
Int8Array() constructor - JavaScript
syntax new int8array(); // new in es2017 new int8array(
length); new int8array(typedarray); new int8array(object); new int8array(buffer [, byteoffset [,
length]]); parameters
length when called with a
length argument, an internal array buffer is created in memory, of size
length multiplied by bytes_per_element bytes, containing zeros.
...the
length of the new typed array will be same as the
length of the typedarray argument.
... buffer, byteoffset,
length when called with a buffer, and optionally a byteoffset and a
length argument, a new typed array view is created that views the specified arraybuffer.
...And 3 more matches
String.prototype.padStart() - JavaScript
the padstart() method pads the current string with another string (multiple times, if needed) until the resulting string reaches the given
length.
... syntax str.padstart(target
length [, padstring]) parameters target
length the
length of the resulting string once the current str has been padded.
... if the value is less than str.
length, then str is returned as-is.
...And 3 more matches
Uint16Array() constructor - JavaScript
syntax new uint16array(); // new in es2017 new uint16array(
length); new uint16array(typedarray); new uint16array(object); new uint16array(buffer [, byteoffset [,
length]]); parameters
length when called with a
length argument, an internal array buffer is created in memory, of size
length multiplied by bytes_per_element bytes, containing zeros.
...the
length of the new typed array will be same as the
length of the typedarray argument.
... buffer, byteoffset,
length when called with a buffer, and optionally a byteoffset and a
length argument, a new typed array view is created that views the specified arraybuffer.
...And 3 more matches
Uint32Array() constructor - JavaScript
syntax new uint32array(); // new in es2017 new uint32array(
length); new uint32array(typedarray); new uint32array(object); new uint32array(buffer [, byteoffset [,
length]]); parameters
length when called with a
length argument, an internal array buffer is created in memory, of size
length multiplied by bytes_per_element bytes, containing zeros.
...the
length of the new typed array will be same as the
length of the typedarray argument.
... buffer, byteoffset,
length when called with a buffer, and optionally a byteoffset and a
length argument, a new typed array view is created that views the specified arraybuffer.
...And 3 more matches
Uint8Array() constructor - JavaScript
syntax new uint8array(); // new in es2017 new uint8array(
length); new uint8array(typedarray); new uint8array(object); new uint8array(buffer [, byteoffset [,
length]]); parameters
length when called with a
length argument, an internal array buffer is created in memory, of size
length multiplied by bytes_per_element bytes, containing zeros.
...the
length of the new typed array will be same as the
length of the typedarray argument.
... buffer, byteoffset,
length when called with a buffer, and optionally a byteoffset and a
length argument, a new typed array view is created that views the specified arraybuffer.
...And 3 more matches
Uint8ClampedArray() constructor - JavaScript
syntax new uint8clampedarray(); // new in es2017 new uint8clampedarray(
length); new uint8clampedarray(typedarray); new uint8clampedarray(object); new uint8clampedarray(buffer [, byteoffset [,
length]]); parameters
length when called with a
length argument, an internal array buffer is created in memory, of size
length multiplied by bytes_per_element bytes, containing zeros.
...the
length of the new typed array will be same as the
length of the typedarray argument.
... buffer, byteoffset,
length when called with a buffer, and optionally a byteoffset and a
length argument, a new typed array view is created that views the specified arraybuffer.
...And 3 more matches
WebAssembly.Table - JavaScript
instance properties table.prototype.
length returns the
length of the table, i.e.
...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
JavaScript typed arrays - JavaScript
arraybuffer the arraybuffer is a data type that is used to represent a generic, fixed-
length binary data buffer.
... examples using views with buffers first of all, we will need to create a buffer, here with a fixed
length of 16-bytes: let buffer = new arraybuffer(16); at this point, we have a chunk of memory whose bytes are all pre-initialized to 0.
...we can confirm that it is indeed 16 bytes long, and that's about it: if (buffer.byte
length === 16) { console.log("yes, it's 16 bytes."); } else { console.log("oh no, it's the wrong size!"); } before we can really work with this buffer, we need to create a view.
...And 3 more matches
MathML attribute reference - MathML
see
length.
...see
lengths for possible values.
...
length <msline> unimplemented linebreak <mo>, <mspace> unimplemented linebreakmultchar <mo>, <mspace> unimplemented linebreakstyle <mo>, <mspace> unimplemented lineleading <mo>, <mspace> linethickness <mfrac> the thickness of the horizontal fraction line.
...And 3 more matches
<mpadded> - MathML
possible values: any
length or an increment/decrement (a
length prefixed with "+" or "-") .
...possible values: any
length or an increment/decrement (a
length prefixed with "+" or "-") .
...possible values: any
length or an increment/decrement (a
length prefixed with "+" or "-") .
...And 3 more matches
stroke-linecap - SVG: Scalable Vector Graphics
on a zero
length subpath, the path will not be rendered at all.
... example html,body,svg { height:100% } <svg viewbox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "butt" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="butt" /> <!-- effect of the "butt" value on a zero
length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="butt" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> </svg> round the round value indicates that at the end of each subpath the stroke will be extended by a half circle with a diameter equal to the stroke width.
... on a zero
length subpath, the stroke consists of a full circle centered at the subpath's point.
...And 3 more matches
<radialGradient> - SVG: Scalable Vector Graphics
value type: <
length> ; default value: 50%; animatable: yes cy this attribute defines the y coordinate of the end circle of the radial gradient.
... value type: <
length> ; default value: 50%; animatable: yes fr this attribute defines the radius of the start circle of the radial gradient.
... value type: <
length> ; default value: 50%; animatable: yes fx this attribute defines the x coordinate of the start circle of the radial gradient.
...And 3 more matches
<rect> - SVG: Scalable Vector Graphics
value type: <
length>|<percentage> ; default value: 0; animatable: yes y the y coordinate of the rect.
... value type: <
length>|<percentage> ; default value: 0; animatable: yes width the width of the rect.
... value type: auto|<
length>|<percentage> ; default value: auto; animatable: yes height the height of the rect.
...And 3 more matches
<symbol> - SVG: Scalable Vector Graphics
value type: <
length>|<percentage> ; default value: auto; animatable: yes preserveaspectratio this attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio.
... value type: <
length>|<percentage>|left|center|right ; default value: 0; animatable: yes refy this attribute determines the y coordinate of the reference point of the symbol.
... value type: <
length>|<percentage>|top|center|bottom ; default value: 0; animatable: yes viewbox this attribute defines the bound of the svg viewport for the current symbol.
...And 3 more matches
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
general change notes
length attribute and indexed property for list interfaces implementation status unknown <script> element in content model of all elements implementation status unknown initialize(), appenditem(), replaceitem(), and insertitembefore() on list objects making a copy of any list item being inserted that is already in another list implementation status unknown crossorigin attribute for <image> and <script> elements not implemented yet (...
... svgelement.tabindex implemented (bug 778654) document.activeelement implementation status unknown globaleventhandlers on svgelement implementation 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 svggra...
...phicselement.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 path
length attribute and gettotal
length() and getpointat
length() 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 he...
...And 3 more matches
Miscellaneous - Archive of obsolete content
var focusedcontrol; window.addeventlistener("load", function(e) { onwindowload(e); }, false); function onwindowload() { gbrowser.addeventlistener("load", onpageload, true); } function onpageload() { pagedoc = document.commanddispatcher.focusedwindow.document; var inputlist = pagedoc.getelementsbytagname('input'); for (var i=1; i<inputlist.
length; i++) { inputlist.item(i).
...ntlistener("blur", function(e) {onblurinput(e);}, false); } } function onfocusinput(focusevent) { focusedcontrol = focusevent.originaltarget; } function onblurinput(blurevent) { focusedcontrol = null; } or var element = document.commanddispatcher.focusedelement; inserting text at the cursor function inserttext(element, snippet) { var selectionend = element.selectionstart + snippet.
length; var currentvalue = element.value; var beforetext = currentvalue.substring(0, element.selectionstart); var aftertext = currentvalue.substring(element.selectionend, currentvalue.
length); element.value = beforetext + snippet + aftertext; element.focus(); //put the cursor after the inserted text element.setselectionrange(selectionend, selectionend); } inserttext(document.getelement...
...ame), is: var fcbundle = components.classes["@mozilla.org/intl/stringbundle;1"] .getservice(components.interfaces.nsistringbundleservice) .createbundle("chrome://myext/locale/myext.properties"); function getstr(msg, args){ //get localised message if (args){ args = array.prototype.slice.call(arguments, 1); return fcbundle.formatstringfromname(msg,args,args.
length); } else { return fcbundle.getstringfromname(msg); } } /* usage */ alert(getstr("invalid.url", "http://bad/url/", "3")); //for message with parameters alert(getstr("invalid.url")); //for message without parameters getting postdata of a webpage first, you need to get the browser you want, and its historysession.
...And 2 more matches
Introducing the Audio API extension - Archive of obsolete content
this event has the following attributes: mozchannels: number of channels mozsamplerate: sample rate per second mozframebuffer
length: number of samples collected in all channels this information is needed later to decode the audio data stream.
...lement: <!doctype html> <html> <head> <title>javascript metadata example</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; framebuffer
length = audio.mozframebuffer
length; } 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 mozframebuffer
length) gets filled with those samples.
...<head> <title>javascript visualization example</title> </head> <body> <audio id="audio-element" src="revolve.ogg" controls="true" style="width: 512px;"> </audio> <pre id="raw">hello</pre> <script> function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebuffer
length = audio.mozframebuffer
length; } 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-elem...
...And 2 more matches
Index - Archive of obsolete content
184 max
length xul attributes, xul reference no summary!
... 748 max
length xul properties, xul reference no summary!
... 858 text
length xul properties, xul reference no summary!
...And 2 more matches
XML Assignments - Archive of obsolete content
for instance, you might want to display not the name of a person, but the
length of their name.
... xpath provides syntax to retrieve this using the built-in string-
length method.
...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.
...And 2 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
attributes accesskey, autocompletepopup, autocompletesearch, autocompletesearchparam, completedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputtooltiptext, label, max
length, maxrows, minresultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignor...
...eblurwhilesearching, inputfield, label, max
length, maxrows, minresultsforpopup, open, popup, popupopen, searchcount, searchparam, selectionend, selectionstart, showcommentcolumn, showimagecolumn,size, tabindex, tabscrolling, text
length, 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.
... max
length type: integer the maximum number of characters that the textbox allows to be entered.
...And 2 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
attributes accesskey, alwaysopenpopup, autocompletesearch, autocompletesearchparam, autofill, autofillaftermatch, autofill, completedefaultindex, crop, disableautocomplete, disableautocomplete, disabled, disablehistory, enablehistory, focused, forcecomplete, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, ignoreblurwhilesearching, inputtooltiptext, label, max
length, maxrows, minresultsforpopup, minresultsforpopup, nomatch, onchange, onerrorcommand, oninput, onsearchcomplete, ontextcommand, ontextentered, ontextrevert, ontextreverted, open, readonly, searchsessions, showcommentcolumn, showcommentcolumn, showpopup, size, tabindex, tabscrolling, tabscrolling, timeout, type, useraction, value properties accessible, alwaysopenpopup, autofill, aut...
...ofillaftermatch, completedefaultindex, crop, disableautocomplete, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, issearching, iswaiting, label, max
length, maxrows, minresultsforpopup, nomatch, open, popup, popupopen, resultspopup, searchcount, searchparam, searchsessions, selectionend, selectionstart, sessioncount, showcommentcolumn, showpopup, size, tabindex, tabscrolling, text
length, 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 ...
... max
length type: integer the maximum number of characters that the textbox allows to be entered.
...And 2 more matches
Tree Box Objects - Archive of obsolete content
this isn't too hard to calculate manually anyway since the tree box object also provides a getpage
length() function which returns the number of rows in a page.
... in the scrolling example above, getpage
length() would return four.
... note that in firefox 1.0 and mozilla 1.7 and earlier, the getpage
length() function is called getpagecount() instead.
...And 2 more matches
XBL Example - Archive of obsolete content
<method name="setpage"> <parameter name="newidx"/> <body> <![cdata[ var thedeck=document.getanonymousnodes(this)[0].childnodes[0]; var totalpages=this.childnodes.
length; if (newidx<0) return 0; if (newidx>=totalpages) return totalpages; thedeck.setattribute("selectedindex",newidx); document.getanonymousnodes(this)[0].childnodes[1].childnodes[1] .setattribute("value",(newidx+1)+" of "+totalpages); return newidx; ]]> </body> </method> this function is called setpage and takes one parameter newidx.
... var totalpages=this.childnodes.
length; get the number of children that the bound box has.
... <constructor> var totalpages=this.childnodes.
length; document.getanonymousnodes(this)[0].childnodes[1].childnodes[1] .setattribute("value",(this.page+1)+" of "+totalpages); </constructor> additional features we can add some additional features as well.
...And 2 more matches
Processing XML with E4X - Archive of obsolete content
nux</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 .
...operator accesses all children no matter how deeply nested: alert(person..*.
length()); // 11 the
length() method here returns 11 because both elements and text nodes are included in the resulting xmllist.
...continuing the above example, we can access an xmllist of the <lang> elements in the page as follows: var langs = languages.lang; xmllist provides a
length() method which can be used to find the number of contained elements: alert(languages.lang.
length()); note that unlike javascript arrays
length is a method, not a property, and must be called using
length().
...And 2 more matches
Implementing controls using the Gamepad API - Game development
update() is executed on every frame inside the game loop, to 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) { pr...
...essed.push(gamepadapi.buttons[b]); } } } // loop through axes and push their values to the array var axes = []; if(c.axes) { for(var a=0,x=c.axes.
length; a<x; a++) { axes.push(c.axes[a].tofixed(2)); } } // assign received values gamepadapi.axesstatus = axes; gamepadapi.buttonsstatus = pressed; // return buttons for debugging purposes return pressed; }, on every frame, update() saves buttons pressed during the previous frame to the buttonscache array and takes fresh ones from the gamepadapi.controller object.
... buttonpressed: function(button, hold) { var newpress = false; // loop through pressed buttons for(var i=0,s=gamepadapi.buttonsstatus.
length; i<s; i++) { // if we found the button we're looking for...
...And 2 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
57 css pixel css, css pixel, glossary, height,
length, pixel, size, unit, width the css pixel—denoted in css with the suffix px—is a unit of
length which roughly corresponds to the width or height of a single dot that can be comfortably seen by the human eye without strain, but is otherwise as small as possible.
... by definition, this is the physical size of a single pixel at a pixel density of 96 dpi, located an arm's
length away from the viewer's eyes.
...headers like content-
length, content-language, content-encoding are entities headers.
...And 2 more matches
Advanced styling effects - Learn web development
ritical level.</p> </article> now the css: 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)); } .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); } this gives us the following result: you'll see that we've got four items in the box-shadow property value: the first
length value is the horizontal offset — the distance to the right the shadow is offset from the original box (or left, if the value is negative).
... the second
length value is the vertical offset — the distance downwards that the shadow is offset from the original box (or upwards, if the value is negative).
... the third
length value is the blur radius — the amount of blurring applied to the shadow.
...And 2 more matches
Fundamental text and font styling - Learn web development
but it was a rare occasion such as this that he did.</p> font size in our previous module's css values and units article, we reviewed
length and size units.
...this takes up to four values, as shown in the example below: text-shadow: 4px 4px 5px red; the four properties are as follows: the horizontal offset of the shadow from the original text — this can take most available css
length and size units, but you'll most commonly use px; positive values move the shadow right, and negative values left.
...this can take most available css
length and size units.
...And 2 more matches
HTML text fundamentals - Learn web development
ydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.
length); textarea.value = front + text + back; caretpos = caretpos + text.
length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not t...
...ydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.
length); textarea.value = front + text + back; caretpos = caretpos + text.
length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not t...
...ydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.
length); textarea.value = front + text + back; caretpos = caretpos + text.
length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not t...
...And 2 more matches
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
first of all, replace this line: <strong>0</strong> todos left with this, which populates the incomplete number with the
length of the incomplete array: <strong>{{this.todos.incomplete.
length}}</strong> todos left next, replace this: <button type="button" class="clear-completed"> with this: <button type="button" class="clear-completed" {{on 'click' this.todos.clearcompleted}}> so now when the button is clicked, the clearcompleted() action we added earlier is run.
...in ember, you can conditionally render parts of the template using conditional content; a simple block example looks something like this: {{#if this.thingistrue}} content for the block form of "if" {{/if}} so let's try replacing this part of footer.hbs: <strong>{{this.todos.incomplete.
length}}</strong> todos left with the following: <strong>{{this.todos.incomplete.
length}}</strong> {{#if this.todos.incomplete.
length === 1}} todo {{else}} todos {{/if}} left this will give us an error, however — in ember, these simple if statements can currently only test for a truthy/falsy value, not a more complex expression such as a comparison.
... to fix this, we'll have to add a getter to todo-data.js to return the result of this.incomplete.
length === 1, and then call that in our template.
...And 2 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
r moreactions.svelte component like this: <script> import { createeventdispatcher } from 'svelte' const dispatch = createeventdispatcher() export let todos let completed = true const checkall = () => { dispatch('checkall', completed) completed = !completed } const removecompleted = () => dispatch('removecompleted') $: completedtodos = todos.filter(t => t.completed).
length </script> <div class="btn-group"> <button type="button" class="btn btn__primary" disabled={todos.
length === 0} on:click={checkall}>{completed ?
... add the following contents to it: <script> export let todos $: totaltodos = todos.
length $: completedtodos = todos.filter(todo => todo.completed).
length </script> <h2 id="list-heading">{completedtodos} out of {totaltodos} items completed</h2> import the file at the beginning of todos.svelte, adding the following import statement below the others: import todosstatus from './todosstatus.svelte' replace the <h2> status heading inside todos.svelte with a call to the tod...
...lines, and also remove the reference to totaltodos when we calculare newtodoid and use todos.
length, instead.
...And 2 more matches
OS.File for the main thread
if (pos <= view.byte
length) { // note: should this be pos >= view.byte
length ?
... file.close(); }, function onerror(reason) { file.close(); throw reason; }); return promise; } or a variant using task.js (or at least the subset already present on mozilla-central): let writestream = function writestream(data, outfile, chunksize) { return task.spawn(function() { let view = new uint8array(data); let pos = 0; while (pos < view.byte
length) { pos += yield outfile.write(view.subarray(pos, chunksize)); } outfile.close(); }).then( null, function onfailure(reason) { outfile.close(); throw reason; } ); } example: save canvas to disk this exmaple uses image to load an image from a path (note: if your path is a file on disk you must use local file; this is accomplished with os.path.tofileuri, w...
...if unspecified, write up to source.byte
length bytes.
...And 2 more matches
sample2
derfilename, const char *encryptedfilename, const char *infilename) { secstatus rv; prfiledesc *headerfile = null; prfiledesc *encfile = null; prfiledesc *infile = null; certcertificate *cert = null; secitem data; unsigned char ptext[modblocksize]; unsigned char encbuf[modblocksize]; unsigned int ptextlen; int index; unsigned int nwritten; unsigned int pad[1]; secitem paditem; unsigned int padding
length = 0; seckeypublickey *pubkey = null; /* if the intermediate encrypted file already exists, delete it*/ if (pr_access(encryptedfilename, pr_access_exists) == pr_success) { pr_delete(encryptedfilename); } /* read certificate from header file */ rv = readfromheaderfile(headerfilename, certenc, &data, pr_true); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not read certificate from header file...
...goto cleanup; } /* open the header file to write padding */ headerfile = pr_open(headerfilename, pr_create_file | pr_rdwr | pr_append, 00660); if (!headerfile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing.\n", headerfilename); rv = secfailure; goto cleanup; } /* read input file */ while ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { if (ptextlen != modblocksize) { padding
length = modblocksize - ptextlen; for ( index=0; index < padding
length; index++) { ptext[ptextlen+index] = (unsigned char)padding
length; } ptextlen = modblocksize; } rv = pk11_pubencryptraw(pubkey, encbuf, ptext, ptextlen, null); nwritten = pr_write(encfile, encbuf, ptextlen); } /* write the padding to header file */ pad[0] = padding
length; paditem.type = sibuffer; paditem.data = (unsigned char *)pad; p...
...*/ secstatus findkeyanddecrypt(pk11slotinfo *slot, secupwdata *pwdata, const char *headerfilename, const char *encryptedfilename, const char *outfilename) { secstatus rv; prfiledesc *encfile = null; prfiledesc *outfile = null; seckeyprivatekey *pvtkey = null; unsigned int infile
length = 0; unsigned int padding
length = 0; unsigned int count = 0; unsigned int temp = 0; unsigned char ctext[modblocksize]; unsigned char decbuf[modblocksize]; unsigned int ctextlen; unsigned int decbuflen; secitem paditem; secitem data; secitem signature; certcertificate *cert = null; /* read certificate from header file */ rv = readfromheaderfile(headerfilename, certenc, &data, pr_true); if (rv != s...
...And 2 more matches
sslerr.html
ssl_error_rx_record_too_long -12263 "ssl received a record that exceeded the maximum permissible
length." this generally indicates that the remote peer system has a flawed implementation of ssl, and is violating the ssl specification.
... ssl_error_tx_record_too_long -12262 "ssl attempted to send a record that exceeded the maximum permissible
length." this error should never occur.
... sec_error_output_len -8189 security library: output
length error.
...And 2 more matches
JS::AutoVectorRooter
syntax js::autovectorrooter(jscontext* cx); methods method description size_t
length() const returns the
length of the array.
... bool empty() const determines if the array is empty (
length is zero).
... bool append(const t *ptr, size_t len) appends a sequence of t specified with a pointer ptr and
length len to the array.
...And 2 more matches
JS::Evaluate
syntax // added in spidermonkey 45 bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, const char16_t *chars, size_t
length, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, const char *bytes, size_t
length, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, const char *filename, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, js::autoobje...
...ctvector &scopechain, const readonlycompileoptions &options, const char16_t *chars, size_t
length, js::mutablehandlevalue rval); // added in spidermonkey 17 bool js::evaluate(jscontext *cx, js::autoobjectvector &scopechain, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); // obsolete since jsapi 39 bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char16_t *chars, size_t
length, js::mutablehandlevalue rval); bool js::evalu...
...ate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char *bytes, size_t
length, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char *filename, js::mutablehandlevalue rval); name type description cx jscontext * the context in which to run the script.
...And 2 more matches
JS_EncodeCharacters
srclen size_t the
length of the source string, in 16-bit values.
...on entry, if dst is non-null, *dstlenp must be the
length of the destination string in 16-bit units.
... on success, *dstlenp receives the
length of the converted string, in bytes.
...And 2 more matches
XPCOM Stream Guide
primitive input streams type native class contract id interface how to bind to a data source generic nsstorageinputstream n/a nsiinputstream, nsiseekablestream storagestream.newinputstream(); 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.
... output streams output streams are usually scriptable: you can call .write(chars, chars.
length) as you wish.
...eam = components.classes["@mozilla.org/storagestream;1"] .createinstance(components.interfaces.nsistoragestream) .getoutputstream(); var instream = components.classes["@mozilla.org/io/string-input-stream;1"] .createinstance(components.interfaces.nsistringinputstream); var data = "hello world"; instream.setdata(data, data.
length); while (instream.available()) { outstream.writefrom(instream, instream.available()); } note this is an inefficient example: the only important part is how to feed the output stream.
...And 2 more matches
Index
indexes are zero-based, such that the last element in the array is stored at the index
length-1.
... 1038 nsiurlparser interfaces, interfaces:scriptable, needscontent the string to parse in the methods may be given as a null terminated string, in which case the
length argument should be -1.
... 1051 nsiuploadchannel2 interfaces, interfaces:scriptable, xpcom, xpcom interface reference sets a stream to be uploaded by this channel with the specified content-type and content-
length header values.
...And 2 more matches
IAccessible2
1.0 66 introduced gecko 1.9 inherits from: iaccessible last changed in gecko 1.9 (firefox 3) method overview [propget] hresult attributes([out] bstr attributes ); [propget] hresult extendedrole([out] bstr extendedrole ); [propget] hresult extendedstates([in] long maxextendedstates, [out, size_is(,maxextendedstates),
length_is(, nextendedstates)] bstr extendedstates, [out] long nextendedstates ); [propget] hresult groupposition([out] long grouplevel, [out] long similaritemsingroup, [out] long positioningroup ); [propget] hresult indexinparent([out] long indexinparent ); [propget] hresult locale([out] ia2locale locale ); [propget] hresult localizedextendedrole([out] bstr localizedextendedrole ); [propget] h...
...result localizedextendedstates([in] long maxlocalizedextendedstates, [out, size_is(,maxlocalizedextendedstates),
length_is(, nlocalizedextendedstates)] bstr localizedextendedstates, [out] long nlocalizedextendedstates ); [propget] hresult nextendedstates([out] long nextendedstates ); [propget] hresult nrelations([out] long nrelations ); [propget] hresult relation([in] long relationindex, [out] iaccessiblerelation relation ); [propget] 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 coordinatetype, [in] long x, [in] long y ); [propget] hresult s...
...[propget] hresult extendedstates( [in] long maxextendedstates, [out, size_is(,maxextendedstates),
length_is(, nextendedstates)] bstr extendedstates, [out] long nextendedstates ); parameters maxextendedstates this parameter is ignored.
...And 2 more matches
imgIEncoder
1.0 66 introduced gecko 1.8 inherits from: nsiasyncinputstream last changed in gecko 1.9 (firefox 3) method overview void addimageframe( [array, size_is(
length), const] in pruint8 data, in unsigned long
length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 frameformat, in astring frameoptions); void encodeclipboardimage(in nsiclipboardimage aclipboardimage, out nsifile aimagefile); obsolete since gecko 1.9 void endimageencode(); void initfromdata([array, size_is(
length), const] in pruint8 data, in unsigned long
length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 inputformat, in astring outputoptions); void...
... methods addimageframe() void addimageframe( [array, size_is(
length), const] in pruint8 data, in unsigned long
length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 frameformat, in astring frameoptions ); parameters data list of bytes in the format specified by inputformat.
...
length missing description width width in pixels.
...And 2 more matches
nsIAccessibleText
the virtual character after the last character of the represented text, that is the one at position
length is a special case.
...the valid range is 0..
length.
...getrangeextents() the virtual character after the last character of the represented text, that is the one at position
length is a special case.
...And 2 more matches
nsIJSON
jsobject decodefromstream(in nsiinputstream stream, in long content
length); astring encode(in jsobject value); obsolete since gecko 7.0 astring encodefromjsval(in jsvaljsval value, in jscontext cx); native code only!
... jsobject decodefromstream( in nsiinputstream stream, in long content
length ); parameters stream the nsiinputstream from which to read the json string.
... content
length the
length of the json string to read.
...And 2 more matches
nsIPluginHost
void newpluginnativewindow( out nspluginnativewindowptr apluginnativewindow ); parameters apluginnativewindow native code only!parsepostbuffertofixheaders this method parses post buffer to find out case insensitive "content-
length" string and cr or lf some where after that, then it assumes there is http headers in the input buffer and continue to search for end of headers (crlfcrlf or lflf).
...if "content-
length" string and end of headers is found it substitutes single lf with crlf in the headers, so the end of headers always will be crlfcrlf (single cr in headers, if any, remain untouched) else it puts "content-
length: "+size_of_data+crlfcrlf at the beginning of the output buffer and memcpy data to the output buffer.
... ainpostdatalen the
length ainpostdata.
...And 2 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 th...
... wstring formatstringfromid( in long aid, [array, size_is(
length)] in wstring params, in unsigned long
length ); parameters aid the id of the string to retrieve.
...
length the
length of the parameter list.
...And 2 more matches
Working with ArrayBuffers
var casted = ctypes.cast(pixelbuffer.address(), ctypes.uint8_t.array(myimgdata.data.
length).ptr).contents; // myimgdat.data.
length is imgwidth * imgheight * 4 because per pixel there is r, g, b, a numbers casted.tostring(); // "ctypes.uint8_t.array(640000)([45, 66, 135, 255, 99, 86, 55, 255, ..........
... method 2: manually handled another strategy is to handle it manually, as illustrated by the following code example: var casted = ctypes.cast(pixelbuffer.address(), ctypes.uint8_t.array(myimgdata.data.
length).ptr).contents; // myimgdat.data.
length is imgwidth * imgheight *4 because per pixel there is r, g, b, a numbers /** method a **/ for (var nindex = 0; nindex < casted.
length; nindex = nindex + 4) { // casted.
length is same as myimgdat.data.
length var r = casted[nindex]; var g = casted[nindex + 1]; var b = casted[nindex + 2]; var a = casted[nindex + 3]; myimgdat.data[nindex] ...
...= r; myimgdat.data[nindex + 1] = g; myimgdat.data[nindex + 2] = b; myimgdat.data[nindex + 3] = a; } /***** or do the below which uses the .set method *****/ /** method b **/ var normalarr = []; for (var nindex = 0; nindex < cast.
length; nindex = nindex + 4) { // casted.
length is same as myimgdat.data.
length var r = casted[nindex]; var g = casted[nindex + 1]; var b = casted[nindex + 2]; var a = casted[nindex + 3]; normalarr.push(r); normalarr.push(g); normalarr.push(b); normalarr.push(a); } myimgdat.data.set(normalarr); the preceding example, however, does not take advantage of method 1, but instead manually goes through the array and sets the imagedata array.
...And 2 more matches
AbstractRange - Web APIs
this value must be less than the
length of the endcontainer node.
...this value must be less than the
length of the node indicated in startcontainer.
...in order to set a range endpoint within the text of an element, be sure to find the text node inside the element: let startelem = document.queryselector("p"); let endelem = startelem.queryselector("span"); let range = document.createrange(); range.setstart(startelem, 0); range.setend(endelem, endelem.childnodes[0].
length/2); let contents = range.clonecontents(); document.body.appendchild(contents); this example creates a new range, rng, and sets its starting point to the third child node of the first element whose class is elementclass.
...And 2 more matches
Using the CSS Painting API - Web APIs
when we get our list of argument values, we ask specifically for a <
length> unit.
... static get inputarguments() { return ['*', '<
length>']; } in this case, we specifically requested the <
length> attribute.
... let's say we add a second argument with how many pixels wide we want the stroke to be: li { background-image: paint(hollowhighlights, stroke, 10px); } when we get our list of argument values, we can ask specifically for a <
length> unit.
...And 2 more matches
Using Fetch - Web APIs
const formdata = new formdata(); const photos = document.queryselector('input[type="file"][multiple]'); formdata.append('title', 'my vegas vacation'); for (let i = 0; i < photos.files.
length; i++) { formdata.append('photos', photos.files[i]); } fetch('https://example.com/posts', { method: 'post', body: formdata, }) .then(response => response.json()) .then(result => { console.log('success:', result); }) .catch(error => { console.error('error:', error); }); processing a text file line by line the chunks that are read from a response are not broken neatly at line boundarie...
...utf8decoder.decode(chunk) : ''); startindex = re.lastindex = 0; continue; } yield chunk.substring(startindex, result.index); startindex = re.lastindex; } if (startindex < chunk.
length) { // last line didn't end in a newline char yield chunk.substr(startindex); } } async function run() { for await (let line of maketextfilelineiterator(urloffile)) { processline(line); } } run(); checking that the fetch was successful a fetch() promise will reject with a typeerror when a network error is encountered or cors is misconfigured on the server-side, although this...
...a headers object is a simple multi-map of names to values: const content = 'hello world'; const myheaders = new headers(); myheaders.append('content-type', 'text/plain'); myheaders.append('content-
length', content.
length.tostring()); myheaders.append('x-custom-header', 'processthisimmediately'); the same can be achieved by passing an array of arrays or an object literal to the constructor: const myheaders = new headers({ 'content-type': 'text/plain', 'content-
length': content.
length.tostring(), 'x-custom-header': 'processthisimmediately' }); the contents can be queried and retrieved: ...
...And 2 more matches
Using Performance Timeline - Web APIs
performance.mark not supported"); return; } // create some performance entries via the mark() and measure() methods performance.mark("begin"); do_work(50000); performance.mark("end"); do_work(50000); performance.measure("measure1", "begin", "end"); // use getentries() to iterate all entries var p = performance.getentries(); for (var i=0; i < p.
length; i++) { log("all entry[" + i + "]"); print_perf_entry(p[i]); } // use getentries(name, entrytype) to get specific entries p = performance.getentries({name : "measure1", entrytype: "measure"}); for (var i=0; i < p.
length; i++) { log("begin and measure [" + i + "]"); print_perf_entry(p[i]); } // use getentriesbytype() to get all "mark" entries p = performance.getentr...
...iesbytype("mark"); for (var i=0; i < p.
length; i++) { log ("mark only [" + i + "]"); print_perf_entry(p[i]); } // use getentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (var i=0; i < p.
length; i++) { log ("begin and mark [" + i + "]"); print_perf_entry(p[i]); } } performanceentry interface the performanceentry interface encapsulates a single performance entry i.e.
... function print_performanceentry(ev) { var properties = ["name", "entrytype", "starttime", "duration"]; // create a few performance entries performance.mark("start"); do_work(50000); performance.mark("stop"); performance.measure("measure-1"); var p = performance.getentries(); for (var i=0; i < p.
length; i++) { log("perfentry[" + i + "]"); for (var j=0; j < properties.
length; j++) { // check each property in window.performance var supported = properties[j] in p[i]; if (supported) { var pe = p[i]; log("...
...And 2 more matches
SVGMarkerElement - Web APIs
interface overview also implement none methods void setorienttoangle(in svgangle angle) void setorienttoauto() properties svganimated
length refx svganimated
length refy svganimatedenumeration markerunits svganimated
length markerwidth svganimated
length markerheight svganimatedenumeration orienttype svganimatedangle orientangle constants svg_marker_orient_unknown = 0 ...
... name type description refx svganimated
length corresponds to attribute refx on the given marker element.
... refy svganimated
length corresponds to attribute refy on the given marker element.
...And 2 more matches
SVGRadialGradientElement - Web APIs
svgradialgradientelement.cx read only an svganimated
length corresponding to the cx attribute of the given <radialgradient> element.
... svgradialgradientelement.cx read only an svganimated
length corresponding to the cy attribute of the given <radialgradient> element.
... svgradialgradientelement.r read only an svganimated
length corresponding to the r attribute of the given <radialgradient> element.
...And 2 more matches
SubtleCrypto.importKey() - Web APIs
/* convert a string into an arraybuffer from https://developers.google.com/web/updates/2012/06/how-to-convert-arraybuffer-to-and-from-string */ function str2ab(str) { const buf = new arraybuffer(str.
length); const bufview = new uint8array(buf); for (let i = 0, strlen = str.
length; i < strlen; i++) { bufview[i] = str.charcodeat(i); } return buf; } const pemencodedkey = `-----begin private key----- miievqibadanbgkqhkig9w0baqefaascbkcwggsjageaaoibaqdd0tpv/du2vftjvxj1t/gxtk39snbvroaeb/jkzxae+xa0h+3lhzaqiqnmfacibsgifzuvegb+7tqxwqpolofr/r7mvgwcsk98jyrvtved8zmzyyitsy7m2hcasqafikyoouv5vzyre87/...
...*/ function importprivatekey(pem) { // fetch the part of the pem string between header and footer const pemheader = "-----begin private key-----"; const pemfooter = "-----end private key-----"; const pemcontents = pem.substring(pemheader.
length, pem.
length - pemfooter.
length); // base64 decode the string to get the binary data const binaryderstring = window.atob(pemcontents); // convert from a binary string to an arraybuffer const binaryder = str2ab(binaryderstring); return window.crypto.subtle.importkey( "pkcs8", binaryder, { name: "rsa-pss", // consider using a 4096-bit key for systems that require l...
...ong-term security modulus
length: 2048, publicexponent: new uint8array([1, 0, 1]), hash: "sha-256", }, true, ["sign"] ); } subjectpublickeyinfo import this example imports an rsa public encryption key from a pem-encoded subjectpublickeyinfo object.
...And 2 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
let sweep
length = 2; function playsweep() { let osc = audioctx.createoscillator(); osc.setperiodicwave(wave); osc.frequency.value = 440; let sweepenv = audioctx.creategain(); sweepenv.gain.cancelscheduledvalues(audioctx.currenttime); sweepenv.gain.setvalueattime(0, audioctx.currenttime); // set our attack sweepenv.gain.linearramptovalueattime(1, audioctx.currenttime + attacktime)...
...; // set our release sweepenv.gain.linearramptovalueattime(0, audioctx.currenttime + sweep
length - releasetime); osc.connect(sweepenv).connect(audioctx.destination); osc.start(); osc.stop(audioctx.currenttime + sweep
length); } note: we'll talk about the property baseaudiocontext.currenttime later, so don't worry if you're unsure of it for now.
...we can use the baseaudiocontext.samplerate property for this: const buffersize = audioctx.samplerate * noise
length; 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 2 more matches
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.byte
length; i++) { // do something with each byte in the array } } }; oreq.send(null); you can also read a binary file as a blob by setting the string "blob" to the responsetype property.
...the valid range for x is from 0 to filestream.
length-1.
... var myarray = new arraybuffer(512); var longint8view = new uint8array(myarray); // generate some data for (var i=0; i< longint8view.
length; i++) { longint8view[i] = i % 256; } var xhr = new xmlhttprequest; xhr.open("post", url, false); xhr.send(myarray); this is building a 512-byte array of 8-bit integers and sending it; you can use any binary data you'd like, of course.
...And 2 more matches
-webkit-box-reflect - CSS: Cascading Style Sheets
<
length> indicates the size of the reflection.
...<
length>?
...]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <
length> | <
length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
...And 2 more matches
background-position-x - CSS: Cascading Style Sheets
syntax /* keyword values */ background-position-x: left; background-position-x: center; background-position-x: right; /* <percentage> values */ background-position-x: 25%; /* <
length> values */ background-position-x: 0px; background-position-x: 1cm; background-position-x: 8em; /* side-relative values */ background-position-x: right 3px; background-position-x: left 25%; /* multiple values */ background-position-x: 0px, center; /* global values */ background-position-x: inherit; background-position-x: initial; background-position-x: unset; the background-position-x propert...
... <
length> the offset of the given background image's left vertical edge from the background position layer's left vertical edge.
... formal definition initial valueleftapplies toall elementsinheritednopercentagesrefer to width of background positioning area minus height of background imagecomputed valuea list, each item consisting of: an offset given as a combination of an absolute
length and a percentage, plus an origin keywordanimation typediscrete formal syntax [ center | [ [ left | right | x-start | x-end ]?
...And 2 more matches
background-position-y - CSS: Cascading Style Sheets
syntax /* keyword values */ background-position-y: top; background-position-y: center; background-position-y: bottom; /* <percentage> values */ background-position-y: 25%; /* <
length> values */ background-position-y: 0px; background-position-y: 1cm; background-position-y: 8em; /* side-relative values */ background-position-y: bottom 3px; background-position-y: bottom 10%; /* multiple values */ background-position-y: 0px, center; /* global values */ background-position-y: inherit; background-position-y: initial; background-position-y: unset; the background-position-y prop...
... <
length> the offset of the given background image's horizontal edge from the corresponding background position layer's top horizontal edge.
... formal definition initial valuetopapplies toall elementsinheritednopercentagesrefer to height of background positioning area minus height of background imagecomputed valuea list, each item consisting of: an offset given as a combination of an absolute
length and a percentage, plus an origin keywordanimation typediscrete formal syntax [ center | [ [ top | bottom | y-start | y-end ]?
...And 2 more matches
border-spacing - CSS: Cascading Style Sheets
syntax /* <
length> */ border-spacing: 2px; /* horizontal <
length> | vertical <
length> */ border-spacing: 1cm 2em; /* global values */ border-spacing: inherit; border-spacing: initial; border-spacing: unset; the border-spacing property may be specified as either one or two values.
... when one <
length> value is specified, it defines both the horizontal and vertical spacings between cells.
... when two <
length> values are specified, the first value defines the horizontal spacing between cells (i.e., the space between cells in adjacent columns), and the second value defines the vertical spacing between cells (i.e., the space between cells in adjacent rows).
...And 2 more matches
border-width - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-bottom-width border-left-width border-right-width border-top-width syntax /* keyword values */ border-width: thin; border-width: medium; border-width: thick; /* <
length> values */ border-width: 4px; border-width: 1.2rem; /* vertical | horizontal */ border-width: 2px 1.5em; /* top | horizontal | bottom */ border-width: 1px 2em 1.5cm; /* top | right | bottom | left */ border-width: 1px 2em 0 4rem; /* global keywords */ border-width: inherit; border-width: initial; border-width: unset; the border-width property may be specified using one, two, three, or four ...
... values <line-width> defines the width of the border, either as an explicit nonnegative <
length> or a keyword.
...it also applies to ::first-letter.inheritednocomputed valueas each of the properties of the shorthand:border-bottom-width: the absolute
length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute
length or 0 if border-left-style is none or hiddenborder-right-width: the absolute
length or 0 if border-right-style is none or hiddenborder-top-width: the absolute
length or 0 if border-top-style is none or hiddenanimation typeas each of the properties of the shorthand:border-bottom-width: a
lengthborder-left-width: a l...
...And 2 more matches
calc() - CSS: Cascading Style Sheets
it can be used anywhere a <
length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.
... the operands in the expression may be any <
length> syntax value.
...for instance, calc(50% -8px) will be parsed as a percentage followed by a negative
length — an invalid expression — while calc(50% - 8px) is a percentage followed by a subtraction operator and a
length.
...And 2 more matches
font-size - CSS: Cascading Style Sheets
changing the font size also updates the sizes of the font size-relative <
length> units, such as em, ex, and so forth.
... syntax /* <absolute-size> values */ font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; font-size: xxx-large; /* <relative-size> values */ font-size: smaller; font-size: larger; /* <
length> values */ font-size: 12px; font-size: 0.8em; /* <percentage> values */ font-size: 80%; /* global values */ font-size: inherit; font-size: initial; font-size: unset; the font-size property is specified in one of the following ways: as one of the absolute-size or relative-size keywords as a <
length> or a <percentage>, relative to the parent element's font size values xx-small, x-small...
... <
length> a positive <
length> value.
...And 2 more matches
grid-template-columns - CSS: Cascading Style Sheets
<
length> a non-negative
length, giving the width of the column.
... fit-content( [ <
length> | <percentage> ] ) represents the formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e.
... formal definition initial valuenoneapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, but with relative
lengths converted into absolute
lengthsanimation typesimple list of
length, percentage, or calc, provided the only differences are in the values of the
length, percentage, or calc components in the list formal syntax none | <track-list> | <auto-track-list> | subgrid <line-name-list>?where <track-list> = [ <line-names>?
...And 2 more matches
grid-template-rows - CSS: Cascading Style Sheets
<
length> is a non-negative
length.
... fit-content( [ <
length> | <percentage> ] ) represents the formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e.
... formal definition initial valuenoneapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, but with relative
lengths converted into absolute
lengthsanimation typesimple list of
length, percentage, or calc, provided the only differences are in the values of the
length, percentage, or calc components in the list formal syntax none | <track-list> | <auto-track-list> | subgrid <line-name-list>?where <track-list> = [ <line-names>?
...And 2 more matches
linear-gradient() - CSS: Cascading Style Sheets
syntax /* a gradient tilted 45 degrees, starting blue and finishing red */ linear-gradient(45deg, blue, red); /* a gradient going from the bottom right to the top left corner, starting blue and finishing red */ linear-gradient(to left top, blue, red); /* color stop: a gradient going from the bottom to top, starting blue, turning green at 40% of its
length, and finishing red */ linear-gradient(0deg, blue, green 40%, red); /* color hint: a gradient going from the left to right, starting red, getting to the midpoint color 10% of the way across the
length of the gradient, taking the rest of the 90% of the
length to change to blue */ linear-gradient(.25turn, red, 10%, blue); /* multi-position color stop: a gradient tilted 45 degrees, w...
... <linear-color-stop> a color-stop's <color> value, followed by one or two optional stop positions, (each being either a <percentage> or a <
length> along the gradient's axis).
...the
length defines at which point between two color stops the gradient color should reach the midpoint of the color transition.
...And 2 more matches
text-indent - CSS: Cascading Style Sheets
the text-indent css property sets the
length of empty space (indentation) that is put before lines of text in a block.
... syntax /* <
length> values */ text-indent: 3mm; text-indent: 40px; /* <percentage> value relative to the containing block width */ text-indent: 15%; /* keyword values */ text-indent: 5em each-line; text-indent: 5em hanging; text-indent: 5em hanging each-line; /* global values */ text-indent: inherit; text-indent: initial; text-indent: unset; values <
length> indentation is specified as an absolute <
length>.
...see <
length> values for possible units.
...And 2 more matches
vertical-align - CSS: Cascading Style Sheets
syntax /* keyword values */ vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: text-top; vertical-align: text-bottom; vertical-align: middle; vertical-align: top; vertical-align: bottom; /* <
length> values */ vertical-align: 10em; vertical-align: 4px; /* <percentage> values */ vertical-align: 20%; /* global values */ vertical-align: inherit; vertical-align: initial; vertical-align: unset; the vertical-align property is specified as one of the values listed below.
... <
length> aligns the baseline of the element to the given
length above the baseline of its parent.
... values for table cells baseline (and sub, super, text-top, text-bottom, <
length>, and <percentage>) aligns the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.
...And 2 more matches
Media buffering, seeking, and time ranges - Developer guides
a timeranges object consists of the following properties:
length: the number of time ranges in the object.
... ------------------------------------------------------ |=============| |===========| | ------------------------------------------------------ 0 5 15 19 21 for this audio instance, the associated timeranges object would have the following available properties: myaudio.buffered.
length; // returns 2 myaudio.buffered.start(0); // returns 0 myaudio.buffered.end(0); // returns 5 myaudio.buffered.start(1); // 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="30...
...ntbyid('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('seeked', function() { for (i = 0; i < myaudio.buffered.
length; i++) { var startx = myaudio.buffered.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 abou...
...And 2 more matches
HTML attribute reference - HTML: Hypertext Markup Language
max
length <input>, <textarea> defines the maximum number of characters allowed in the element.
... min
length <input>, <textarea> defines the minimum number of characters allowed in the element.
...for example, to set an <input> element's max
length to 42 using the content attribute, you have to call setattribute("max
length", "42") on that element.
...And 2 more matches
Configuring servers for Ogg media - HTTP
in addition, gecko uses byte-range requests to seek to the end of the media (assuming you serve the content-
length header) in order to determine the duration of the media.
... the ogg format doesn't encapsulate the duration of media, so for the progress bar on the video controls to display the duration of the video, gecko needs to determine the
length of the media using other means.
... as an inferior alternative, gecko can estimate the video
length based on the content-
length.
...And 2 more matches
HTTP Messages - HTTP
entity headers, like content-
length which apply to the body of the request.
... bodies can be broadly divided into two categories: single-resource bodies, consisting of one single file, defined by the two headers: content-type and content-
length.
... entity headers, like content-
length, apply to the body of the response.
...And 2 more matches
A typical HTTP session - HTTP
as there is no content-
length provided in an http header, this data block is presented empty, marking the end of the headers, allowing the server to process the request the moment it receives this empty line.
... for example, sending the result of a form: post /contact_form.php http/1.1 host: developer.mozilla.org content-
length: 64 content-type: application/x-www-form-urlencoded name=joe%20user&request=send%20me%20one%20of%20your%20catalogue request methods http defines a set of request methods indicating the desired action to be performed upon a resource.
... example responses successful web page response: http/1.1 200 ok content-type: text/html; charset=utf-8 content-
length: 55743 connection: keep-alive cache-control: s-maxage=300, public, max-age=0 content-language: en-us date: thu, 06 dec 2018 17:37:18 gmt etag: "2e77ad1dc6ab0b53a2996dfd4653c1c3" server: meinheld/0.6.1 strict-transport-security: max-age=63072000 x-content-type-options: nosniff x-frame-options: deny x-xss-protection: 1; mode=block vary: accept-encoding,cookie age: 7 <!doctype html> <html lang="en...
...And 2 more matches
Arrow function expressions - JavaScript
shorter functions var elements = [ 'hydrogen', 'helium', 'lithium', 'beryllium' ]; // this statement returns the array: [8, 6, 7, 9] elements.map(function(element) { return element.
length; }); // the regular function above can be written as the arrow function below elements.map((element) => { return element.
length; }); // [8, 6, 7, 9] // when there is only one parameter, we can remove the surrounding parentheses elements.map(element => { 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.
... however, note that in // this example we are not assigning `
length` value to the made up property.
...And 2 more matches
The arguments object - JavaScript
note: “array-like” means that arguments has a
length property and properties indexed from zero, but it doesn't have array's built-in methods like foreach() or map().
...it is similar, but lacks all array properties except
length.
...this example function accepts any number of string arguments and returns the longest one: function longeststring() { var longest = ''; for (var i=0; i < arguments.
length; i++) { if (arguments[i].
length > longest.
length) { longest = arguments[i]; } } return longest; } you can use arguments.
length to count how many arguments the function was called with.
...And 2 more matches
DataView() constructor - JavaScript
syntax new dataview(buffer [, byteoffset [, byte
length]]) parameters buffer an existing arraybuffer or sharedarraybuffer to use as the storage backing the new dataview object.
... byte
length optional the number of elements in the byte array.
... if unspecified, the view's
length will match the buffer's
length.
...And 2 more matches
Function.prototype.apply() - JavaScript
in practice, this means it's going to have a
length property, and integer ("index") properties in the range (0..
length - 1).
... for example, you could use a nodelist, or a custom object like { '
length': 2, '0': 'eat', '1': 'bananas' }.
...simple loop based algorithm max = -infinity, min = +infinity; for (let i = 0; i < numbers.
length; i++) { if (numbers[i] > max) { max = numbers[i]; } if (numbers[i] < min) { min = numbers[i]; } } but beware: by using apply this way, you run the risk of exceeding the javascript engine's argument
length limit.
...And 2 more matches
String.prototype.normalize() - JavaScript
and since the number of code points in each version is different, they even have different
lengths.
... let string1 = '\u00f1'; // ñ let string2 = '\u006e\u0303'; // ñ console.log(string1 === string2); // false console.log(string1.
length); // 1 console.log(string2.
length); // 2 the normalize() method helps solve this problem by converting a string into a normalized form common for all sequences of code points that represent the same characters.
...in the example below we normalize two representations of the character "ñ": let string1 = '\u00f1'; // ñ let string2 = '\u006e\u0303'; // ñ string1 = string1.normalize('nfd'); string2 = string2.normalize('nfd'); console.log(string1 === string2); // true console.log(string1.
length); // 2 console.log(string2.
length); // 2 composed and decomposed forms note that the
length of the normalized form under "nfd" is 2.
...And 2 more matches
String.prototype.padEnd() - JavaScript
the padend() method pads the current string with a given string (repeated, if needed) so that the resulting string reaches a given
length.
... syntax str.padend(target
length [, padstring]) parameters target
length the
length of the resulting string once the current str has been padded.
... if the value is lower than str.
length, the current string will be returned as-is.
...And 2 more matches
String.prototype.slice() - JavaScript
if negative, it is treated as str.
length + beginindex.
... (for example, if beginindex is -3 it is treated as str.
length - 3.) if beginindex is greater than or equal to str.
length, slice() returns an empty string.
...if negative, it is treated as str.
length + endindex.
...And 2 more matches
TypedArray.prototype.fill() - JavaScript
syntax typedarray.fill(value[, start = 0[, end = this.
length]]) parameters value value to fill the typed array with.
...defaults to this.
length.
...the start and end arguments are optional with default values of 0 and the
length of the this object.
...And 2 more matches
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).
... the
length property of the from() method is 1.
...array.from() sets each value as it receives them from the iterator, then sets its
length at the end.
...And 2 more matches
<mo> - MathML
lspace the amount of space before the operator (see
length for values and units).
...see
length for possible values.
...allowed values are: infinity an arbitrary
length minsize if stretchy is true, this attribute specifies the minimum size of the operator.
...And 2 more matches
transform-origin - SVG: Scalable Vector Graphics
usage notes values [ <
length-percentage> | left | center | right | top | bottom ] | [ [ <
length-percentage> | left | center | right ] && [ <
length-percentage> | top | center | bottom ] ] <
length>?where <
length-percentage> = <
length> | <percentage> default value 50%, 50% animatable yes the transform-origin property may be specified using one, two, or three values, where each value represents an offset.
... one-value syntax: the value must be a <
length>, a <percentage>, or one of the keywords left, center, right, top, and bottom.
... two-value syntax: one value must be a <
length>, a <percentage>, or one of the keywords left, center, and right.
...And 2 more matches
word-spacing - SVG: Scalable Vector Graphics
if a <
length> is provided without a unit identifier (e.g.
... an unqualified number such as 128), the browser processes the <
length> as a width value in the current user coordinate system.
... if a <
length> is provided with one of the unit identifiers (e.g.
...And 2 more matches
<line> - SVG: Scalable Vector Graphics
value type: <
length>|<percentage>|<number> ; default value: 0; animatable: yes x2 defines the x-axis coordinate of the line ending point.
... value type: <
length>|<percentage>|<number> ; default value: 0; animatable: yes y1 defines the y-axis coordinate of the line starting point.
... value type: <
length>|<percentage>|<number> ; default value: 0; animatable: yes y2 defines the y-axis coordinate of the line ending point.
...And 2 more matches
Forms related code snippets - Archive of obsolete content
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 nid = ainstances.
length, oth; this.target = otarget; 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 + "-dec...
...le.position = "absolute"; otable.style.left = otarget.offsetleft + "px"; otable.style.top = (otarget.offsettop + otarget.offsetheight) + "px"; otarget.parentnode.insertbefore(otable, otarget); }; ainstances.push(this); } datepicker.prototype.writedays = function () { const nendblanks = (this.current.getday() + bzeroismonday * 6) % 7, nend = amonth
lengths[this.current.getmonth()] + nendblanks, ntotal = nend + ((7 - nend % 7) % 7); var otd, otr; if (this.otbody) { this.container.removechild(this.otbody); } this.otbody = document.createelement("tbody"); for (var nday, oday, niter = 0; niter < ntotal; niter++) { if (niter % 7 === 0) { otr = document.createelement("tr"); this.otbody.appendchild(o...
...instances[this.id.replace(rbgnandend, "")]; othiscal.target.value = (this.innerhtml / 100).tofixed(2).substr(-2) + "\/" + (othiscal.current.getmonth() + 1) + "\/" + othiscal.current.getfullyear(); othiscal.container.parentnode.removechild(othiscal.container); return false; } function buildcalendars () { const afields = document.getelementsbyclassname(sdpclass), nlen = afields.
length; for (var nitem = 0; nitem < nlen; new datepicker(afields[nitem++])); } const /* customizable by user */ sprefs = "zdp"; sdpclass = "date-picker", smonthsnames = ["jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"], sdays = ["m", "t", "w", "t", "f", "s", "s"], bzeroismonday = true, /* internal usage */ ainstances = [], ...
... amonth
lengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], rbgnnan = /^\d+/, rbgnandend = /^\d+|\d+\d+$/g, rmonth = /\-month\-/, rdecrease = /\-decr\-/; var /* customizable by user */ nzindex = 1000; window.addeventlistener ?
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().
... use .set
length() instead: nsstring mystring = somestring; - mystring.truncate(4); + mystring.set
length(4); the frozen string api doesn't support the iterator or const_iterator classes, but you can use pointers the same way: nsstring mystring = somestring; - nsstring::const_iterator begin, end;- mystring.beginreading(begin); mystring.endreading(end); + const prunichar *begin, *end;+ mystring.beginreading(&begin, &end); the frozen string api uses comparator functions instead of a virtual comparator class.
...the equalsignorecase method does not take a
length parameters.
...(see xpcom:arrays.) nscomptr<nsisupportsarray> array; - rv = ns_newisupportsarray(getter_addrefs(array)); + array = do_createinstance(ns_supportsarray_contractid); - nscomptr<nsiinputstream> rawstream;- rv = ns_newbyteinputstream(getter_addrefs(rawstream),- (const char*)data,
length); + nscomptr<nsistringinputstream> rawstream =+ do_createinstance(ns_stringinputstream_contractid, &rv);+ ns_ensure_success(rv, rv);++ rv = rawstream->setdata((const char*)data,
length); ns_ensure_success(rv, rv); nsistringinputstream is not frozen (and thus, not available in the gecko sdk as currently published).
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
listing 4: get active browser window netscape.security.privilegemanager .enableprivilege('universalxpconnect'); var windowmediator = components .classes['@mozilla.org/appshell/window-mediator;1'] .getservice(components.interfaces.nsiwindowmediator); var browser = windowmediator.getmostrecentwindow('navigator:browser'); alert(browser.gbrowser.mtabs.
length); get overview of all windows with a certain type use the nsiwindowmediator.getenumerator() method to get an overview of all windows that have a certain type.
...mozilla.org/network/file-output-stream;1'] .createinstance(components.interfaces.nsifileoutputstream); filestream.init(file, 2, 0x200, false); var binarystream = components.classes['@mozilla.org/binaryoutputstream;1'] .createinstance(components.interfaces.nsibinaryoutputstream); binarystream.setoutputstream(filestream); binarystream.writebytearray(array , array.
length); binarystream.close(); filestream.close(); text file i/o text files are read the same way streams are.
...et = 'euc-jp'; var filestream = components .classes['@mozilla.org/network/file-output-stream;1'] .createinstance(components.interfaces.nsifileoutputstream); filestream.init(file, 2, 0x200, false); var converterstream = components .classes['@mozilla.org/intl/converter-output-stream;1'] .createinstance(components.interfaces.nsiconverteroutputstream); converterstream.init(filestream, charset, string.
length, components.interfaces.nsiconverterinputstream.default_replacement_character); converterstream.writestring(string); converterstream.close(); filestream.close(); character encoding conversion firefox's internal representation of all text is in unicode.
...ines/sd', referrer); listing 22: loading a page with data transmitted via the post method var content = encodeuricomponent('password=foobar'); var referrer = null; var postdata = components.classes['@mozilla.org/io/string-input-stream;1'] .createinstance(components.interfaces.nsistringinputstream); content = 'content-type: application/x-www-form-urlencoded\n'+ 'content-
length: '+content.
length+'\n\n'+ content; postdata.setdata(content, content.
length); var flags = components.interfaces.nsiwebnavigation.load_flags_none; browser.loaduriwithflags('http://piro.sakura.ne.jp/', flags, referrer, null, postdata); « previousnext » ...
Tabbed browser - Archive of obsolete content
.interfaces.nsiwindowmediator); var browserenumerator = wm.getenumerator("navigator:browser"); // check each browser instance for our url var found = false; while (!found && browserenumerator.hasmoreelements()) { var browserwin = browserenumerator.getnext(); var tabbrowser = browserwin.gbrowser; // check each tab of this browser instance var numtabs = tabbrowser.browsers.
length; for (var index = 0; index < numtabs; index++) { var currentbrowser = tabbrowser.getbrowseratindex(index); if (url == currentbrowser.currenturi.spec) { // the url is already opened.
... function openandreuseonetabperattribute(attrname, url) { var wm = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); for (var found = false, index = 0, tabbrowser = wm.getenumerator('navigator:browser').getnext().gbrowser; index < tabbrowser.tabcontainer.childnodes.
length && !found; index++) { // get the next tab var currenttab = tabbrowser.tabcontainer.childnodes[index]; // does this tab contain our custom attribute?
... finally, use gbrowser.browsers.
length to get the number of browsers and gbrowser.getbrowseratindex() to get a <browser/> element.
... for example: var num = gbrowser.browsers.
length; for (var i = 0; i < num; i++) { var b = gbrowser.getbrowseratindex(i); try { dump(b.currenturi.spec); // dump urls of all open tabs to console } catch(e) { components.utils.reporterror(e); } } to learn what methods are available for <browser/> and <tabbrowser/> elements, use dom inspector or look in browser.xml for corresponding xbl bindings (or just look at the current reference pages on browser and tabbrowser.
Visualizing an audio spectrum - Archive of obsolete content
trum 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, framebuffer
length, fft; function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebuffer
length = audio.mozframebuffer
length; fft = new fft(framebuffer
length / channels, rate); } function audioavailable(event) { var fb = event.framebuffer, t = event.time, /* unused, but it's the...
...re */ signal = new float32array(fb.
length / channels), magnitude; for (var i = 0, fbl = framebuffer
length / 2; i < fbl; i++ ) { // assuming interlaced stereo channels, // need to split and merge into a stero-mix mono signal signal[i] = (fb[2*i] + fb[2*i+1]) / 2; } fft.forward(signal); // clear the canvas 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(...
...); } }; fft.prototype.forward = function(buffer) { var buffersize = this.buffersize, costable = this.costable, sintable = this.sintable, reversetable = this.reversetable, real = this.real, imag = this.imag, spectrum = this.spectrum; if ( buffersize !== buffer.
length ) { throw "supplied buffer is not the same size as defined fft.
... fft size: " + buffersize + " buffer size: " + buffer.
length; } for ( var i = 0; i < buffersize; i++ ) { real[i] = buffer[reversetable[i]]; imag[i] = 0; } var halfsize = 1, phaseshiftstepreal, phaseshiftstepimag, currentphaseshiftreal, currentphaseshiftimag, off, tr, ti, tmpreal, i; while ( halfsize < buffersize ) { phaseshiftstepreal = costable[halfsize]; phaseshiftstepimag = sintable[halfsize]; currentphaseshiftreal = 1.0; currentphaseshiftimag = 0.0; for ( var fftstep = 0; fftstep < halfsize; fftstep++ ) { i = fftstep; while ( i < buffersize ) { ...
Reading from Files - Archive of obsolete content
usually this string have a
length equal to the number of characters that were requested.
... in this next example, the read32 method is used to read a 32-bit
length from the file.
... then, this
length is used to determine how many additional bytes of data to read.
... var
length = stream.read32(); var data = stream.readstring(
length); all values are read in big endian form, which means that integers are stored in the file with their higher bits first.
Progress Meters - Archive of obsolete content
you typically see it when downloading files or when performing a
lengthy operation.
... determinate progress meters are used when you know the
length of time that an operation will take.
... indeterminate progress meters are used when you do not know the
length of time of an operation.
...if this is set to undetermined, the progress meter is indeterminate where you do not know the
length of time.
SSL and TLS - Archive of obsolete content
the recommended rsa key-
length is 2048 bits.
...ecc creates cryptographically-stronger keys with shorter key
lengths than rsa, which makes it faster and more efficient to implement.
... ecc has several advantages over rsa, since it is faster and requires shorter key
lengths for stronger keys.
... bits of security rsa key
length ecc key
length table 1: comparison of rsa and ecc cipher strength 80 1024 160-223 112 2048 224-255 128 3072 256-383 192 7860 384-511 256 15360 512+ the information in this table is from the national institute of standards and technology (nist).
-ms-scroll-snap-points-x - Archive of obsolete content
initial valuesnapinterval(0px, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values note: a <
length-percentage> is a value that can be either a <
length> or a <percentaqe>.
... snapinterval( <
length-percentage>, <
length-percentage> ) specifies a starting snap-point followed by the interval between all snap-points.
... snaplist( <
length-percentage># ) specifies the position of individual snap-points as a comma-separated list of values, each of which represents a zoom factor.
... formal syntax snapinterval( <
length-percentage>, <
length-percentage> ) | snaplist( <
length-percentage># )where <
length-percentage> = <
length> | <percentage> examples this example demonstrates both types of values for the -ms-scroll-snap-points-x property.
-ms-scroll-snap-points-y - Archive of obsolete content
initial valuesnapinterval(0px, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values note: a <
length-percentage> is a value that can be either a <
length> or a <percentaqe>.
... snapinterval( <
length-percentage>, <
length-percentage> ) specifies a starting snap-point followed by the interval between all snap-points.
... snaplist( <
length-percentage># ) specifies the position of individual snap-points as a comma-separated list of values, each of which represents a zoom factor.
... formal syntax snapinterval( <
length-percentage>, <
length-percentage> ) | snaplist( <
length-percentage># )where <
length-percentage> = <
length> | <percentage> examples this example demonstrates both types of values for the -ms-scroll-snap-points-y property.
LiveConnect Overview - Archive of obsolete content
these java methods are available in javascript as methods of the javaobject, and you can call them as follows: mystring.
length(); // returns 11 static members can be called directly on the javaclass object.
...for example, the following code creates the javaarray x with ten elements of type int: var x = java.lang.reflect.array.newinstance(java.lang.integer, 10); like the javascript array object, javaarray has a
length property which returns the number of elements in the array.
... unlike array.
length, javaarray.
length is a read-only property, because the number of elements in a java array are fixed at the time of creation.
... java arrays are converted to a javascript pseudo-array object; this object behaves just like a javascript array object: you can access it with the syntax arrayname[index] (where index is an integer), and determine its
length with arrayname.
length.
Desktop gamepad controls - Game development
to update the state of the gamepad's currently 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, we'll consider the gamepadbuttonpressedhandler() function: function gamepadbuttonpressedhandler(button) { var press = false; for(var i=0; i<buttonspressed.
length; i++) { if(buttonspressed[i] == button) { press = true; } } return press; } the function takes a button as a parameter; in the loop it checks if the given button's number is among the currently pressed buttons available in the buttonspressed array.
...sconnect function removes the information from the object: disconnect: function(event) { delete gamepadapi.controller; gamepadapi.active = false; }, the update() function is executed in the update loop of the game on every frame, so it contains the latest information on the pressed buttons: update: function() { gamepadapi.buttons.cache = []; for(var k=0; k<gamepadapi.buttons.status.
length; k++) { gamepadapi.buttons.cache[k] = gamepadapi.buttons.status[k]; } gamepadapi.buttons.status = []; var c = gamepadapi.controller || {}; 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.layout[b]); } } } var axes = []; if(c.axes) { for(var a=0,x=c.axes.leng...
... the button.pressed() function detects the actual button presses: pressed: function(button, hold) { var newpress = false; for(var i=0,s=gamepadapi.buttons.status.
length; i<s; i++) { if(gamepadapi.buttons.status[i] == button) { newpress = true; if(!hold) { for(var j=0,p=gamepadapi.buttons.cache.
length; j<p; j++) { if(gamepadapi.buttons.cache[j] == button) { newpress = false; } } } } } return newpress; }, it loops through pressed buttons and if the button we're looking for is pressed, t...
CSS pixel - MDN Web Docs Glossary: Definitions of Web-related terms
the css pixel—denoted in css with the suffix px—is a unit of
length which roughly corresponds to the width or height of a single dot that can be comfortably seen by the human eye without strain, but is otherwise as small as possible.
... by definition, this is the physical size of a single pixel at a pixel density of 96 dpi, located an arm's
length away from the viewer's eyes.
... that definition, of course, leaves a lot of wiggle room, as the terms "be comfortably seen" and "an arm's
length away" are imprecise, varying from person to person.
... learn more technical reference css values and units module, section 5.2: absolute
lengths learn about it css
length explained on the mdn hacks blog ...
XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
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...
... null, xpathresult.ordered_node_snapshot_type, null ); var a = []; for(var k = 0; k < xpathresult.snapshot
length; k++) { a[k] = xpathresult.snapshotitem(k); } responsenodes = a; } else { // otherwise, the response must be a single well-formed document response responsenodes = [response.documentelement]; // put in array so can ...
...be treated the same way as the above } // prepend any node(s) (as xml) then remove xinclude for (j=0; j < responsenodes.
length ; j++) { xincludeparent.insertbefore(responsenodes[j], xinclude); } xincludeparent.removechild(xinclude); } else if (responsetype === 'responsetext') { if (encname) { var encodingtype = response.match(pattern); if (encodingtype) { encodingtype = encodingtype[2]; } ...
...} // replace xinclude in doc with response now (as plain text or xml) } } } catch (e) { // use xi:fallback if xinclude retrieval above failed var xifallbackchildren = xifallback.childnodes; // prepend any node(s) then remove xinclude for (j=0; j < xifallbackchildren.
length ; j++) { xincludeparent.insertbefore(xifallbackchildren[j], xinclude); } xincludeparent.removechild(xinclude); } } } return docu; } ...
Grids - Learn web development
you can use any
length unit, or percentages to create these column tracks.
...ng: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> .container { display: grid; grid-template-columns: 200px 200px 200px; } flexible grids with the fr unit in addition to creating grids using
lengths and percentages, we can use the fr unit to flexibly size grid rows and columns.
...you can mix fr units and fixed
length tracks — in such a case the space needed for the fixed tracks is taken away before the space is distributed to the other tracks.
... .container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; } these gaps can be any
length unit or a percentage, but not an fr unit.
Third-party APIs - Learn web development
function displayresults(json) { while (section.firstchild) { section.removechild(section.firstchild); } const articles = json.response.docs; if(articles.
length === 10) { nav.style.display = 'block'; } else { nav.style.display = 'none'; } if(articles.
length === 0) { const para = document.createelement('p'); para.textcontent = 'no results returned.' section.appendchild(para); } else { for(var i = 0; i < articles.
length; i++) { const article = document.createelement('article'); const heading = document.createele...
...ument.createelement('p'); const para2 = document.createelement('p'); const clearfix = document.createelement('div'); let current = articles[i]; console.log(current); link.href = current.web_url; link.textcontent = current.headline.main; para1.textcontent = current.snippet; para2.textcontent = 'keywords: '; for(let j = 0; j < current.keywords.
length; j++) { const span = document.createelement('span'); span.textcontent += current.keywords[j].value + ' '; para2.appendchild(span); } if(current.multimedia.
length > 0) { img.src = 'http://www.nytimes.com/' + current.multimedia[0].url; img.alt = current.headline.main; } clearfix.setattribute('class','clearfix'); article.append...
...most of these operations are fairly obvious, but a few are worth calling out: we used a for loop (for(var j = 0; j < current.keywords.
length; j++) { ...
... we used an if() block (if(current.multimedia.
length > 0) { ...
What is JavaScript? - Learn web development
interesting — add the following code just below the "// javascript goes here" line: document.addeventlistener("domcontentloaded", function() { function createparagraph() { let para = document.createelement('p'); para.textcontent = 'you clicked the button!'; document.body.appendchild(para); } const buttons = document.queryselectorall('button'); for(let i = 0; i < buttons.
length ; i++) { buttons[i].addeventlistener('click', createparagraph); } }); save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.
... replace your current <script> element with the following: <script src="script.js" defer></script> inside script.js, add the following script: function createparagraph() { let para = document.createelement('p'); para.textcontent = 'you clicked the button!'; document.body.appendchild(para); } const buttons = document.queryselectorall('button'); for(let i = 0; i < buttons.
length ; i++) { buttons[i].addeventlistener('click', createparagraph); } save and refresh your browser, and you should see the same thing!
...the code we used above to serve this purpose looks like this: const buttons = document.queryselectorall('button'); for(let i = 0; i < buttons.
length ; i++) { buttons[i].addeventlistener('click', createparagraph); } this might be a bit longer than the onclick attribute, but it will work for all buttons — no matter how many are on the page, nor how many are added or removed.
...*/ const buttons = document.queryselectorall('button'); for (let i = 0; i < buttons.
length ; i++) { buttons[i].addeventlistener('click', createparagraph); } note: in general more comments are usually better than less, but you should be careful if you find yourself adding lots of comments to explain what variables are (your variable names perhaps should be more intuitive), or to explain very simple operations (maybe your code is overcomplicated).
Object building practice - Learn web development
the following will do this job — add it to the bottom of your code now: let balls = []; while (balls.
length < 25) { let size = random(10,20); let ball = new ball( // ball position always drawn at least one ball width // away from the edge of the canvas, to avoid drawing errors random(0 + size,width - size), random(0 + size,height - size), random(-7,7), random(-7,7), 'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')', size ); balls.push(ball)...
...you can try varying the number in balls.
length < 25 to get more or fewer balls on screen.
... add the following to the bottom of your code now: function loop() { ctx.fillstyle = 'rgba(0, 0, 0, 0.25)'; ctx.fillrect(0, 0, width, height); for (let i = 0; i < balls.
length; i++) { balls[i].draw(); balls[i].update(); } requestanimationframe(loop); } all programs that animate things generally involve an animation loop, which serves to update the information in the program and then render the resulting view on each frame of the animation; this is the basis for most games and other such programs.
... ball.prototype.collisiondetect = function() { for (let j = 0; j < balls.
length; j++) { if (!(this === balls[j])) { const dx = this.x - balls[j].x; const dy = this.y - balls[j].y; const distance = math.sqrt(dx * dx + dy * dy); if (distance < this.size + balls[j].size) { balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')'; } } } } this method is a little complex, so don't ...
Test your skills: Object-oriented JavaScript - Learn web development
we want you to: add a new method to the shape class's prototype, calcperimeter(), which calculates its perimeter (the
length of the shape's outer edge) and logs the result to the console.
...give it a name of square and a side
length of 5.
... create a new instance of shape called triangle, with a name of triangle and a side
length of 3.
...when invoking the constructor, you should therefore just need to provide the side
length property.
Client-Server Overview - Learn web development
the head also tells us how big it is (content-
length: 41823).
... http/1.1 200 ok server: apache x-backend-server: developer1.webapp.scl3.mozilla.com vary: accept,cookie, accept-encoding content-type: text/html; charset=utf-8 date: wed, 07 sep 2016 00:11:31 gmt keep-alive: timeout=5, max=999 connection: keep-alive x-frame-options: deny allow: get x-cache-info: caching content-
length: 41823 <!doctype html> <html lang="en-us" dir="ltr" class="redesign no-js" data-ffo-opensanslight=false data-ffo-opensans=false > <head prefix="og: http://ogp.me/ns#"> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <script>(function(d) { d.classname = d.classname.replace(/\bno-js/, ''); })(document.documentelement);</script> ...
... post https://developer.mozilla.org/profiles/hamishwillee/edit http/1.1 host: developer.mozilla.org connection: keep-alive content-
length: 432 pragma: no-cache cache-control: no-cache origin: https://developer.mozilla.org upgrade-insecure-requests: 1 user-agent: mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/52.0.2743.116 safari/537.36 content-type: application/x-www-form-urlencoded accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 referer: https://developer.mozil...
...tp/1.1 302 found server: apache x-backend-server: developer3.webapp.scl3.mozilla.com vary: cookie vary: accept-encoding content-type: text/html; charset=utf-8 date: wed, 07 sep 2016 00:38:13 gmt location: https://developer.mozilla.org/profiles/hamishwillee keep-alive: timeout=5, max=1000 connection: keep-alive x-frame-options: deny x-cache-info: not cacheable; request wasn't a get or head content-
length: 0 note: the http responses and requests shown in these examples were captured using the fiddler application, but you can get similar information using web sniffers (e.g.
React interactivity: Events and state - Learn web development
we can fix this by counting the
length of tasklist and changing the text of our heading accordingly.
... add this inside your app() definition, before the return statement: const headingtext = `${tasklist.
length} tasks remaining`; hrm.
...update the code you just added as follows: const tasksnoun = tasklist.
length !== 1 ?
... 'tasks' : 'task'; const headingtext = `${tasklist.
length} ${tasksnoun} remaining`; now you can replace the list heading's text content with the headingtext variable.
How to implement a custom autocomplete search component
ber} the index of the default item that should be entered if * none is selected */ get defaultindex() { return this._defaultindex; }, /** * @return {string} description of the cause of a search failure */ get errordescription() { return this._errordescription; }, /** * @return {number} the number of matches */ get matchcount() { return this._results.
length; }, /** * @return {string} the value of the result at the given index */ getvalueat: function(index) { return this._results[index]; }, /** * @return {string} the comment of the result at the given index */ getcommentat: function(index) { if (this._comments) return this._comments[index]; else return ''; }, /** * @return {string} the style h...
... return this._searchresult; }, /** * index of the default item that should be entered if none is selected */ get defaultindex() { return this._defaultindex; }, /** * a string describing the cause of a search failure */ get errordescription() { return this._errordescription; }, /** * the number of matches */ get matchcount() { return this._results.
length; }, /** * get the value of the result at the given index */ getvalueat: function(index) { return this._results[index]; }, /** * get the comment of the result at the given index */ getcommentat: function(index) { return this._comments[index]; }, /** * get the style hint for the result at the given index */ getstyleat: function(index) { if (!this._...
...any values that match the search string // are moved into temporary arrays and passed to the autocompleteresult if (searchparam.
length > 0) { var nativejson = components.classes["@mozilla.org/dom/json;1"].createinstance(ci.nsijson); var searchresults = nativejson.decode(searchparam); // these 2 lines above are for thunderbird < v7 // since thunderbird 3, they can be replaced more efficiently by the following line: // var searchresults = json.parse(searchparam); var results = []; var com...
...ments = []; for (i=0; i<searchresults.
length; i++) { if (searchresults[i].value.indexof(searchstring) == 0) { results.push(searchresults[i].value); if (searchresults[i].comment) comments.push(searchresults[i].comment); else comments.push(null); } } var newresult = new simpleautocompleteresult(searchstring, ci.nsiautocompleteresult.result_success, 0, "", results, comments); listener.onsearchresult(this, newresult); } }, /* * stop an asynchronous search that is in progress */ stopsearch: function() { }, queryinterface: function(aiid) { if (!aiid.equals(ci.nsiautocompletesearch) && !aiid.equals(ci.nsisupports)) throw components.results.ns_error_no_interface; return thi...
Log.jsm
class overview appender();
length: 1 keys of prototype: append(); doappend(); level: 0 basicformatter();
length: 1 keys of prototype: format(); boundedfileappender();
length: 2 keys of prototype: doappend(); reset()...
...; consoleappender();
length: 1 keys of prototype: doappend(); dumpappender();
length: 1 keys of prototype: doappend(); fileappender();
length: 2 keys of prototype: doappend(); reset(); formatter();
length: 0 keys of prototype: format(); logmessage();
length: 4 keys of prototype: leveldesc logger();
length: 2 keys of prototype: 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 prototype: format(); method overview enumerateinter...
...faces();
length: 0 enumerateproperties();
length: 2 member fields variable type description level object contains the following fields: field name value all 0 config 30 debug 20 desc { 0: "all", 10: "trace", 20: "debug", 30: "config", 40: "info", 50: "warn", 60: "error", 70: "fatal" } error 30 fatal 70 info 40 numbers { "all": 0, "trace": 10, "debug": 20, "config": 30, "info": 40, "warn": 50, "error": 60, "fatal": 70 } trace 10 warn 50 ...
PRHostEnt
syntax #include <prnetdb.h> typedef struct prhostent { char *h_name; char **h_aliases; #if defined(_win32) print16 h_addrtype; print16 h_
length; #else print32 h_addrtype; print32 h_
length; #endif char **h_addr_list; } prhostent; fields the structure has the following fields: h_name pointer to the official name of host.
... h_
length length of internal representation of the address in bytes.
... all of the addresses in the list are of the same type and therefore of the same
length.
... note winsock.h defines h_addrtype and h_
length as a 16-bit field, whereas other platforms treat it as a 32-bit field.
PKCS #11 Module Specs
minpwlen minimum password
length in bytes.
... passwordrequired zero
length passwords are not acceptable (valid only if there is a keydb).
... minpwlen minimum password
length for this token.
... passwordrequired zero
length passwords are not acceptable (valid only if there is a keydb).
NSS functions
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_getbestkey
length 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_get...
...efaultflags 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_getkey
length mxr 3.2 and later pk11_getkeystrength mxr 3.2 and later pk11_getmechanism mxr 3.2 and later pk11_getminimumpwd
length mxr 3.4 and later pk11_getmodinfo mxr 3.6 and later pk11_getmodule mxr 3.3 and later pk11_getmoduleid mxr ...
..._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 der_timetogeneralizedtimearena mxr 3.11.7 and later der_utcdaytoascii mxr 3.2 and later ...
...2 and later sec_asn1encodersetstreaming mxr 3.2 and later sec_asn1encodersettakefrombuf mxr 3.2 and later sec_asn1encoderstart mxr 3.2 and later sec_asn1encoderupdate mxr 3.2 and later sec_asn1encodeunsignedinteger mxr 3.11.1 and later sec_asn1
lengthlength mxr 3.2 and later sec_dupcrl mxr 3.9 and later sec_getsignaturealgorithmoidtag mxr 3.10 and later sec_getregisteredhttpclient mxr 3.12 and later sec_pkcs5getcryptoalgorithm mxr 3.2 and later sec_pkcs5getkey
length mxr 3.2 and later ...
JS::Compile
syntax // added in spidermonkey 45 bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, const char *bytes, size_t
length, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, const char16_t *chars, size_t
length, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, file *file, js::mutablehandlescript script); bool js::compile(jscontext *cx, cons...
... js::mutablehandlescript script); // obsolete since jsapi 39 bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char *bytes, size_t
length, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char16_t *chars, size_t
length, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, file *file, js::mutablehandlescript script); bool...
...
length size_t the
length of chars or bytes, in characters.
...
length indicates the size of the text version of the script in characters.
JS::CompileFunction
syntax bool js::compilefunction(jscontext *cx, js::autoobjectvector &scopechain, const js::readonlycompileoptions &options, const char *name, unsigned nargs, const char *const *argnames, const char16_t *chars, size_t
length, js::mutablehandlefunction fun); bool js::compilefunction(jscontext *cx, js::autoobjectvector &scopechain, const js::readonlycompileoptions &options, const char *name, unsigned nargs, const char *const *argnames, js::sourcebufferholder &srcbuf, js::mutablehandlefunction fun); bool js::compilefunction(jscontext *cx, js::autoobjectvector &s...
...copechain, const js::readonlycompileoptions &options, const char *name, unsigned nargs, const char *const *argnames, const char *bytes, size_t
length, js::mutablehandlefunction fun); name type description cx jscontext * the context in which to compile the function.
...
length size_t the
length, in characters, of body.
...
length is the
length of the source code in characters.
JS::SourceBufferHolder
constructor enum ownership { noownership, giveownership }; js::sourcebufferholder(const char16_t *data, size_t data
length, ownership ownership); name type description data const char16_t * source buffer containing the script to compile.
... data
length size_t the
length of data, in characters.
...this not only groups the buffer and
length values, it also provides a way to optionally pass ownership of the buffer to the js engine without copying.
... example size_t
length = 512; char16_t* chars = static_cast<char16_t*>(js_malloc(sizeof(char16_t) *
length)); js::sourcebufferholder srcbuf(chars,
length, js::sourcebufferholder::giveownership); js::compile(cx, obj, options, srcbuf); see also mxr id search for js::sourcebufferholder js::compile js::compilefunction js::evaluate bug 987556 ...
JS_CompileScript
syntax // added in spidermonkey 45 bool js_compilescript(jscontext *cx, const char *ascii, size_t
length, const js::compileoptions &options, js::mutablehandlescript script); bool js_compileucscript(jscontext *cx, const char16_t *chars, size_t
length, const js::compileoptions &options, js::mutablehandlescript script); // obsolete since jsapi 39 bool js_compilescript(jscontext *cx, js::handleobject obj, const char *ascii, size_t
length, const js::compileoptions &options, js::mutablehandlescript script); bool js_compileucscript(jscontext *cx, js::handleobject obj, const char16_t *c...
...hars, size_t
length, const js::compileoptions &options, js::mutablehandlescript script); name type description cx jscontext * pointer to a js context from which to derive runtime information.
...
length size_t the
length, in characters, of source.
...
length indicates the size of the text version of the script in characters.
JS_CompileScriptForPrincipals
syntax jsscript * js_compilescriptforprincipals(jscontext *cx, jsobject *obj, jsprincipals *principals, const char *src, size_t
length, const char *filename, unsigned int lineno); jsscript * js_compileucscriptforprincipals(jscontext *cx, jsobject *obj, jsprincipals *principals, const jschar *src, size_t
length, const char *filename, unsigned int lineno); jsobject * js_compilescriptforprincipalsversion(jscontext *cx, jsobject *obj, jsprincipals *principals, const char *src, size_t
length, const char *filename, unsigned int lineno, jsversio...
...n version); // obsoleted since jsapi 19 jsobject * js_compileucscriptforprincipalsversion(jscontext *cx, jsobject *obj, jsprincipals *principals, const jschar *src, size_t
length, const char *filename, unsigned int lineno, jsversion version); // obsoleted since jsapi 19 name type description cx jscontext * the context in which to compile the script.
...
length size_t the
length of src, in characters.
...
length indicates the
length of the script, in characters.
JS_EvaluateScriptForPrincipals
syntax jsbool js_evaluatescriptforprincipals(jscontext *cx, jsobject *obj, jsprincipals *principals, const char *src, unsigned int
length, const char *filename, unsigned int lineno, jsval *rval); jsbool js_evaluatescriptucforprincipals(jscontext *cx, jsobject *obj, jsprincipals *principals, const jschar *src, unsigned int
length, const char *filename, unsigned int lineno, jsval *rval); jsbool js_evaluatescriptforprincipalsversion(jscontext *cx, jsobject *obj, jsprincipals *principals, const char *bytes, unsigned int
length, const c...
...har *filename, unsigned int lineno, jsval *rval, jsversion version); jsbool js_evaluateucscriptforprincipalsversion(jscontext *cx, jsobject *obj, jsprincipals *principals, const jschar *chars, unsigned int
length, const char *filename, unsigned int lineno, jsval *rval, jsversion version); name type description cx jscontext * the context in which to run the script.
...
length unsigned int the
length of src, in characters.
...
length is the
length of the script, in characters.
JS_GetInternedStringChars
syntax const jschar * js_getinternedstringchars(jsstring *str); const jschar * js_getinternedstringcharsand
length(jsstring *str, size_t *
length); name type description str jsstring * the interned string.
...
length size_t * out parameter.
... receives the
length of the string.
...js_getinternedstringcharsand
length returns a pointer to the interned string and stores the
length of it to *
length.
JS_NewUCString
syntax jsstring * js_newucstring(jscontext *cx, char16_t *chars, size_t
length); jsstring * js_newstring(jscontext *cx, char *buf, size_t
length); // obsolete since jsapi 1.8.5 name type description cx jscontext * the context in which to create the new string.
...
length size_t number of characters in the text string.
... description js_newstring creates and returns a new string, using the memory starting at buf and ending at buf +
length as the character storage.
...see also js_convertvalue js_getemptystringvalue js_getstringbytes js_getstringchars js_getstring
length js_internstring js_internucstring js_internucstringn js_newstringcopyn js_newstringcopyz js_newucstringcopyn js_newucstringcopyz js_valuetostring bug 618262 - removed js_newstring ...
IAccessibleTable
[propget] hresult rowextentat([in] long row, [in] long column, [out] long nrowsspanned ); [propget] hresult rowheader([out] iaccessibletable accessibletable, [out] long startingcolumnindex ); [propget] hresult rowindex([in] long cellindex, [out] long rowindex ); hresult selectcolumn([in] long column ); [propget] hresult selectedchildren([in] long maxchildren, [out, size_is(,maxchildren),
length_is(, nchildren)] long children, [out] long nchildren ); [propget] hresult selectedcolumns([in] long maxcolumns, [out, size_is(,maxcolumns),
length_is(, ncolumns)] long columns, [out] long ncolumns ); [propget] hresult selectedrows([in] long maxrows, [out, size_is(,maxrows),
length_is(, nrows)] long rows, [out] long nrows ); hresult selectrow([in] long row ); [propget] hresult summary([out...
...[propget] hresult selectedchildren( [in] long maxchildren, [out, size_is(,maxchildren),
length_is(, nchildren)] long children, [out] long nchildren ); parameters maxchildren this parameter is ignored.
...[propget] hresult selectedcolumns( [in] long maxcolumns, [out, size_is(,maxcolumns),
length_is(, ncolumns)] long columns, [out] long ncolumns ); parameters maxcolumns this parameter is ignored.
...[propget] hresult selectedrows( [in] long maxrows, [out, size_is(,maxrows),
length_is(, nrows)] long rows, [out] long nrows ); parameters maxrows this parameter is ignored.
nsIAnnotationService
adatalen
length of binary data.
... adatalen
length of binary data.
... adatalen
length of binary data.
... adatalen
length of binary data.
nsIContentSniffer
method overview acstring getmimetypefromcontent(in nsirequest arequest, [const,array,size_is(a
length)] in octet adata, in unsigned long a
length); methods getmimetypefromcontent() given a chunk of data, determines a mime type.
...acstring getmimetypefromcontent( in nsirequest arequest, [const,array,size_is(a
length)] in octet adata, in unsigned long a
length ); parameters arequest the request where this data came from.
... a
length length of the data.
..."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, a
length); if (str.substring(0, 5) == "%pdf-") return "application/pdf"; // we detected a pdf file } catch (e) { // try to get information from arequest } ...
nsIDOMProgressEvent
method overview void initprogressevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in boolean
lengthcomputablearg, in unsigned long long loadedarg, in unsigned long long totalarg); deprecated since gecko 22.0 attributes attribute type description
lengthcomputable boolean specifies whether or not the total size of the transfer is known.
... void initprogressevent( in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in boolean
lengthcomputablearg, in unsigned long long loadedarg, in unsigned long long totalarg ); parameters typearg the type of event.
...
lengthcomputablearg if the size of the data to be transferred is known, this should be true.
...if
lengthcomputable is false, this must be zero.
nsILoginManager
javascript callers can simply use the array's
length property and supply a dummy argument for this parameter.
...javascript callers can simply use the array's
length property and supply a dummy argument for this parameter.
...javascript callers can simply use the array's
length property and supply a dummy argument for this parameter.
... example this method can be called from javascript like this: var logins = myloginmgr.searchlogins({}, matchdata); var numlogins = logins.
length; setloginsavingenabled() enables or disables storing logins for a specified host.
nsIMIMEInputStream
it also allows automatic creation of the content-
length header.
...to create an instance, use: var mimeinputstream = components.classes["@mozilla.org/network/mime-input-stream;1"] .createinstance(components.interfaces.nsimimeinputstream); method overview void addheader(in string name, in string value); void setdata(in nsiinputstream stream); attributes attribute type description addcontent
length boolean when true a "content-
length" header is automatically added to the stream.
... the value of the content-
length is automatically calculated using the available() method on the data stream.
... example var postdata = components.classes["@mozilla.org/network/mime-input-stream;1"] .createinstance(components.interfaces.nsimimeinputstream); postdata.addheader("content-type", "application/x-www-form-urlencoded"); postdata.addcontent
length = true; postdata.setdata(stringstream); ...
nsIMsgFolder
msgwindow msgwindow); void alertfilterchanged(in nsimsgwindow msgwindow); void throwalertmsg(in string msgname, in nsimsgwindow msgwindow); astring getstringwithfoldernamefrombundle(in string msgname); void notifycompactcompleted(); long comparesortkeys(in nsimsgfolder msgfolder); [noscript] void getsortkey(out octet_ptr key, out unsigned long
length); boolean callfilterplugins(in nsimsgwindow amsgwindow); acstring getstringproperty(in string propertyname); void setstringproperty(in string propertyname, in acstring propertyvalue); boolean isancestorof(in nsimsgfolder folder); boolean containschildnamed(in astring name); nsimsgfolder getchildnamed(in astring aname); nsimsgfolder fi...
... void notifyitemremoved(in nsisupports item); void notifyfolderevent(in nsiatom event); void listdescendents(in nsisupportsarray descendents); void shutdown(in boolean shutdownchildren); void setinvfeditsearchscope(in boolean asearchthisfolder, in boolean asetonsubfolders); void copydatatooutputstreamforappend(in nsiinputstream aistream, in long a
length, in nsioutputstream outputstream); void copydatadone(); void setjunkscoreformessages(in nsisupportsarray amessages, in acstring ajunkscore); void applyretentionsettings(); boolean fetchmsgpreviewtext([array, size_is (anumkeys)] in nsmsgkey akeystofetch, in unsigned long anumkeys, in boolean alocalonly, in nsiurllistener aurllistener); void addkeywordst...
... msgname, in nsimsgwindow msgwindow); getstringwithfoldernamefrombundle() astring getstringwithfoldernamefrombundle(in string msgname); notifycompactcompleted() void notifycompactcompleted(); comparesortkeys() long comparesortkeys(in nsimsgfolder msgfolder); getsortkey() [noscript] void getsortkey(out octet_ptr key, out unsigned long
length); callfilterplugins() boolean callfilterplugins(in nsimsgwindow amsgwindow); getstringproperty() acstring getstringproperty(in string propertyname); setstringproperty() void setstringproperty(in string propertyname, in acstring propertyvalue); isancestorof() determines if this folder is an ancestor of the supplied folder.
...escendents(in nsisupportsarray descendents); shutdown() void shutdown(in boolean shutdownchildren); setinvfeditsearchscope() void setinvfeditsearchscope(in boolean asearchthisfolder, in boolean asetonsubfolders); copydatatooutputstreamforappend() void copydatatooutputstreamforappend(in nsiinputstream aistream, in long a
length, in nsioutputstream outputstream); copydatadone() void copydatadone(); setjunkscoreformessages() void setjunkscoreformessages(in nsisupportsarray amessages, in acstring ajunkscore); applyretentionsettings() void applyretentionsettings(); fetchmsgpreviewtext() get the beginning of the message bodies for the passed i...
nsIUploadChannel
inherits from: nsisupports last changed in gecko 1.7 method overview void setuploadstream(in nsiinputstream astream, in acstring acontenttype, in long acontent
length); attributes attribute type description uploadstream nsiinputstream get the stream (to be) uploaded by this channel.
... history here is that we need to support both streams that already have headers (for example, content-type and content-
length) information prepended to the stream (by plugins) as well as clients (composer, uploading application) that want to upload data streams without any knowledge of protocol specifications.
...void setuploadstream( in nsiinputstream astream, in acstring acontenttype, in long acontent
length ); parameters astream the stream to be uploaded by this channel.
...acontent
length a value of -1 indicates that the
length of the stream should be determined by calling the stream's available method.
Declaring types
his you can either set the type of next to ctypes.voidptr_t, or to be more accurate, use the define technique: var struct = ctypes.structtype('struct'); struct.define([{ next: struct.ptr }]); arrays to declare a new array type, you use the ctypes.arraytype() method.when declaring a new array type, you provide a ctype indicating the type of each element in the array as well as an optional array
length.
... declaring an array type with unspecified
length to declare a new array type without specifying a
length, you simply pass in the ctype specifying the element type when calling ctypes.arraytype().
...filearray is a new type representing an array of unspecified
length, in which each entry is a pointer to a file record.
... declaring an array type with a specific
length declaring an array type that specifies the array
length is as simple as adding a
length when calling ctypes.arraytype(), like this: const filearray = new ctypes.arraytype(file, 20); this declares filearray as an array type that can hold 20 elements.
CData
note: this is never ctypes.void_t or an array type with an unspecified
length.
... here is a method to read "malformed", it attempts to do readstring on it, if it errors then it tries to read it in another way, so this is an alternative to readstringreplacemalformed, 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.tostri...
...ratchpad/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 pos 77 still 0, if casted to jschar we see chineese characters in all spots expect spaces even null terminator is a chineese character console.info('ptrasarr.
length:', ptrasarr.
length); //console.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 pas...
...s
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); fromcharcode.push(string.fromcharcode(thisunsignedcharcode)); } console.info('charcode:', charcode); console.info('fromcharcode:', fromcharcode); var char16_val = fromcharcode.join(''); console.info('char16_val:', char16_val); return char16_val; } if (!jschar) { try { var ...
UInt64
arithmetic operations const uint64 = ctypes.uint64; const int64 = ctypes.int64; function ensureuint64(aarr) { // makes elements in aarr a uint64 if it can be made, else throws for (var i=0; i<aarr.
length; i++) { var ccon = aarr[i].constructor.name; if (ccon != 'uint64') { if (['string', 'number'].indexof(ccon) > -1) { aarr[i] = uint64(aarr[i]); } else { throw new error('invalid type at position ' + i + ' it must be a numeric string, a number, or a uint64.
... type is "' + ccon + '"'); } } } } function uint64_add(...uint64) { ensureuint64(uint64); var hi = uint64.hi(uint64[0]); var lo = uint64.lo(uint64[0]);; for (var i=1; i<uint64.
length; i++) { hi += uint64.hi(uint64[i]); lo += uint64.lo(uint64[i]); if (lo > 0x100000000) { hi += 1; } hi = hi >>> 0; lo = lo >>> 0; } return uint64.join(hi, lo); } function uint64_sub(a, b) { var valarr = [a, b]; ensureuint64(valarr); a = valarr[0]; b = valarr[1]; var hi = uint64.hi(a) - uint64.hi(b); var lo = uint64.lo(a) - uint64.lo(b); if (lo < 0) { hi -= 1;...
...13) | c1) >>> 0; return uint64.join(ch, cl); } function uint64_or(...uint64) { // bitwise or // if there are logical or and bitwise or, bitwise or may be named `bor` or `bitor`, but i don't think there could be logical or, so i think just `or` is the right name ensureuint64(uint64); var hi = 0; var lo = 0; for (var i=0; i<uint64.
length; i++) { hi |= uint64.hi(uint64[i]); lo |= uint64.lo(uint64[i]); } return uint64.join(hi >>> 0, lo >>> 0); } function uint64_and(...uint64) { // bitwise and could be applied to more than 2 operands, not sure if it's useful tho ensureuint64(uint64); var hi = uint64.hi(uint64[0]); var lo = uint64.lo(uint64[0]); ...
... for (var i=1; i<uint64.
length; i++) { hi &= uint64.hi(uint64[i]); lo &= uint64.lo(uint64[i]); } return uint64.join(hi >>> 0, lo >>> 0); } see also ctypes int64 ...
Streams - Plugins
the len parameter specifies the
length, in bytes, of buf, the buffer of data (delivered by the stream).
...the len parameter specifies the
length, in bytes, of data written to the stream.
... npstream* stream; char* mydata = "<html><head><title>this is a message from my plug-in!</title></head><body><p><strong>this is a message from my plug-in!</strong></p></body>/html>"; int32 my
length = strlen(mydata) + 1; /* create the stream.
...*/ err = npn_write(instance, stream, my
length, mydata); /* delete the stream.
Debugger.Memory - Firefox Developer Tools
you can control the limit on the log’s size by setting dbg.memory.maxallocationslog
length.
... maxallocationslog
length the maximum number of allocation sites to accumulate in the allocations log at a time.
... allocationslogoverflowed returns true if there have been more than [maxallocationslog
length][#max-alloc-log] allocations since the last time [drainallocationslog][#drain-alloc-log] was called and some data has been lost.
...however, the memory consumed by the string itself is a small constant independent of its size, since it is simply a reference to the larger string, a start position, and a
length.
AnalyserNode.getFloatFrequencyData() - Web APIs
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.
... example const audioctx = new audiocontext(); const analyser = audioctx.createanalyser(); // float32array should be the same
length as the frequencybincount const mydataarray = new float32array(analyser.frequencybincount); // fill the float32array with data returned from getfloatfrequencydata() analyser.getfloatfrequencydata(mydataarray); drawing a spectrum the following example shows basic usage of an audiocontext to connect a mediaelementaudiosourcenode to an analysernode.
...microphone input const audioele = new audio(); audioele.src = 'my-audio.mp3';//insert file name here audioele.autoplay = true; audioele.preload = 'auto'; const audiosourcenode = audioctx.createmediaelementsource(audioele); //create analyser node const analysernode = audioctx.createanalyser(); analysernode.fftsize = 256; const buffer
length = analysernode.frequencybincount; const dataarray = new float32array(buffer
length); //set up audio node network audiosourcenode.connect(analysernode); analysernode.connect(audioctx.destination); //create 2d canvas const canvas = document.createelement('canvas'); canvas.style.position = 'absolute'; canvas.style.top = 0; canvas.style.left = 0; canvas.width = window.innerwidth; canvas.height = win...
...text('2d'); canvasctx.clearrect(0, 0, canvas.width, canvas.height); function draw() { //schedule next redraw requestanimationframe(draw); //get spectrum data analysernode.getfloatfrequencydata(dataarray); //draw black background canvasctx.fillstyle = 'rgb(0, 0, 0)'; canvasctx.fillrect(0, 0, canvas.width, canvas.height); //draw spectrum const barwidth = (canvas.width / buffer
length) * 2.5; let posx = 0; for (let i = 0; i < buffer
length; i++) { const barheight = (dataarray[i] + 140) * 2; canvasctx.fillstyle = 'rgb(' + math.floor(barheight + 100) + ', 50, 50)'; canvasctx.fillrect(posx, canvas.height - barheight / 2, barwidth, barheight / 2); posx += barwidth + 1; } }; draw(); </script> </body> specifications specification status comm...
BaseAudioContext.createBuffer() - Web APIs
syntax var buffer = baseaudiocontext.createbuffer(numofchannels,
length, samplerate); parameters note: for an in-depth explanation of how audio buffers work, and what these parameters mean, read audio buffers: frames, samples and channels from our basic concepts guide.
...
length an integer representing the size of the buffer in sample-frames (where each sample-frame is the size of a sample in bytes multiplied by numofchannels).
... to determine the
length to use for a specific number of seconds of audio, use numseconds * samplerate.
...buffer = 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.
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.
... <!doctype html> <html> <head> </head> <body> <!--multiple is set to allow multiple files to be selected--> <input id="myfiles" multiple type="file"> </body> <script> var pullfiles=function(){ // love the query selector var fileinput = document.queryselector("#myfiles"); var files = fileinput.files; // cache files.
length var fl = files.
length; var i = 0; while ( i < fl) { // localize file var in the loop var file = files[i]; alert(file.name); i++; } } // set the input element onchange to call pullfiles document.queryselector("#myfiles").onchange=pullfiles; //a.t </script> </html> specifications specification status comment file apithe definition of 'filelist' in that specification.
... yeschrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yes
lengthchrome full support yesedge full support 12firefox full support yesie ?
Using the Frame Timing API - Web APIs
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_observer_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.
... var observe_all = new performanceobserver(function(list) { var perfentries = list.getentries(); for (var i=0; i < perfentries.
length; i++) { switch (perfentries[i].entrytype) { case "frame": process_frame(perfentries[i]); break; case "mark": process_mark(perfentries[i]); break; case "measure": process_measure(perfentries[i]); break; case "resource": process_resource(perfentries[i]); break; default: console.log("unexpected performance entry type: " + perfentries[i].entrytype); } } ...
... var threshold = 1500; var observe_frame = new performanceobserver(function(list) { var perfentries = list.getentriesbytype("frame"); for (var i=0; i < perfentries.
length; i++) { if (perfentries[i].duration > threshold) { console.log("warning: frame '" + threshold + "' exceeded!"); } } }); observe_frame.observe({entrytypes: ['frame']}); the tools will save you!
HTMLMediaElement - Web APIs
if the media is of indefinite
length (such as streamed live media, a webrtc call's media, or similar), the value is +infinity.
... htmlmediaelement.mozframebuffer
length is a unsigned long that indicates the number of samples that will be returned in the framebuffer of each mozaudioavailable event.
... the mozframebuffer
length property can be set to a new value for lower latency, larger amounts of data, etc.
...the best time to set a new
length is after the loadedmetadata event fires, when the audio info is known, but before the audio has started or mozaudioavailable events have begun firing.
Timing element visibility with the Intersection Observer API - Web APIs
function handlerefreshinterval() { let redrawlist = []; visibleads.foreach(function(adbox) { let previoustime = adbox.dataset.totalviewtime; updateadtimer(adbox); if (previoustime != adbox.dataset.totalviewtime) { redrawlist.push(adbox); } }); if (redrawlist.
length) { window.requestanimationframe(function(time) { redrawlist.foreach(function(adbox) { drawadtimer(adbox); }); }); } } the array redrawlist will be used to keep a list of all the ads which need to be redrawn during this refresh cycle, since it may not be exactly the same as the elapsed time due to system activity or because you've set the interval to something other ...
...this avoids the risk of
lengthy layout work being done when you update the ad, which could happen if you first delete the old element then insert a new one.
...ssic literature online free!" }, { bgcolor: "lightgrey", title: "3.14 shades of gray: a novel", body: "love really does make the world go round..." }, { bgcolor: "#fee", title: "flexbox florist", body: "when life's layout gets complicated, send flowers." } ]; let adbox, title, body, timerelem; let ad = ads[math.floor(math.random()*ads.
length)]; if (replacebox) { adobserver.unobserve(replacebox); adbox = replacebox; title = replacebox.queryselector(".title"); body = replacebox.queryselector(".body"); timerelem = replacebox.queryselector(".timer"); } else { adbox = document.createelement("div"); adbox.classname = "ad"; title = document.createelement("h2"); body = document.createelement("p"); ...
... a random ad is selected by computing math.floor(math.random() * ads.
length); the result is a value between 0 and one less than the number of ads.
Microdata DOM API - Web APIs
var cat = document.getitems('http://example.org/animals#cat')[0]; var colors = cat.properties['http://example.com/color'].getvalues(); var result; if (colors.
length == 0) { result = 'color unknown.'; } else if (colors.
length == 1) { result = 'color: ' + colors[0]; } else { result = 'colors:'; for (var i = 0; i < colors.
length; i += 1) result += ' ' + colors[i]; } it's also possible to get a list of all the property names using the object's names idl attribute.
... var outer = document.createelement('ul'); var items = document.getitems(); for (var item = 0; item < items.
length; item += 1) { var itemli = document.createelement('li'); var inner = document.createelement('ul'); for (var name = 0; name < items[item].properties.names.
length; name += 1) { var propli = document.createelement('li'); propli.appendchild(document.createtextnode(items[item].properties.names[name])); inner.appendchild(propli); } itemli.appendchild(inner); outer.appendchild(itemli); } document.body.appendchild(outer); if faced with the following from an earlier example: <section itemscope itemtype="http://example.o...
... interface description language interface htmlpropertiescollection : htmlcollection { // inherits
length and item() getter propertynodelist?
...
length returns the number of elements in the collection.
NodeList - Web APIs
for example, node.childnodes is live: const parent = document.getelementbyid('parent'); let child_nodes = parent.childnodes; console.log(child_nodes.
length); // let's assume "2" parent.appendchild(document.createelement('div')); console.log(child_nodes.
length); // outputs "3" static nodelists in other cases, the nodelist is static, where any changes in the dom does not affect the content of the collection.
... it's good to keep this distinction in mind when you choose how to iterate over the items in the nodelist, and whether you should cache the list's
length.
... properties nodelist.
length the number of nodes in the nodelist.
... example it's possible to loop over the items in a nodelist using a for loop: for (let i = 0; i < mynodelist.
length; i++) { let item = mynodelist[i]; } don't use for...in to enumerate the items in nodelists, since they will also enumerate its
length and item properties and cause errors if your script assumes it only has to deal with element objects.
OfflineAudioContext.OfflineAudioContext() - Web APIs
syntax var offlineaudioctx = new offlineaudiocontext(numberofchannels,
length, samplerate); var offlineaudioctx = new offlineaudiocontext(options); parameters you can specify the parameters for the offlineaudiocontext() constructor as either the same set of parameters as are inputs into the audiocontext.createbuffer() method, or by passing those parameters in an options object.
...
length an integer specifying the size of the buffer to create for the audio context, in sample-frames, where one sample-frame is a unit that can contain a single sample of audio data for every channel in the audio data.
... for example, a 5-second buffer with a samplerate of 48000hz would have a
length of 5 * 48000 = 240000 sample-frames.
... example const offlinectx = new offlineaudiocontext({ numberofchannels: 2,
length: 44100 * 40, samplerate: 44100, }); const source = offlinectx.createbuffersource(); // etc...
PluginArray - Web APIs
the pluginarray is not a javascript array, but has the
length property and supports accessing individual items using bracket notation (plugins[2]), as well as via item(index) and nameditem("name") methods.
... properties pluginarray.
lengthread only the number of plugins in the array.
... var plugins
length = navigator.plugins.
length; document.body.innerhtml = plugins
length + " 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 < plugins
length; i++) { let newrow = table.insertrow(); newrow.insertcell().textcontent = navigator.plugins[i].name; ...
... var plugins
length = navigator.plugins.
length; document.write( plugins
length.tostring() + " plugin(s)<br>" + "name | filename | description<br>" ); for(var i = 0; i < plugins
length; i++) { document.write( navigator.plugins[i].name + " | " + navigator.plugins[i].filename + " | " + navigator.plugins[i].description + " | " + navigator.plugins[i].version + "<br>" ); } specifications specification status comment html living ...
SVGAngle - Web APIs
exceptions on setting: a domexception with code no_modification_allowed_err is raised when the
length corresponds to a read-only attribute, or when the object itself is read-only.
... exceptions on setting: a domexception with code no_modification_allowed_err is raised when the
length corresponds to a read-only attribute, or when the object itself is read-only.
... a domexception with code no_modification_allowed_err is raised when the
length corresponds to a read-only attribute, or when the object itself is read-only.
... a domexception with code no_modification_allowed_err is raised when the
length corresponds to a read only attribute or when the object itself is read only.
SVGEllipseElement - Web APIs
svgellipseelement.cx read only this property returns a svganimated
length reflecting the cx attribute of the given <ellipse> element.
... svgellipseelement.cy read only this property returns a svganimated
length reflecting the cy attribute of the given <ellipse> element.
... svgellipseelement.rx read only this property returns a svganimated
length reflecting the rx attribute of the given <ellipse> element.
... svgellipseelement.ry read only this property returns a svganimated
length reflecting the ry attribute of the given <ellipse> element.
SVGFilterElement - Web APIs
svgfilterelement.x read only an svganimated
length that corresponds to the x attribute on the given <filter> element.
... svgfilterelement.y read only an svganimated
length that corresponds to the y attribute of the given <filter> element.
... svgfilterelement.width read only an svganimated
length that corresponds to the width attribute of the given <filter> element.
... svgfilterelement.height read only an svganimated
length that corresponds to the height attribute of the given <filter> element.
SVGFilterPrimitiveStandardAttributes - Web APIs
f7f8" 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 svgfilterprimitivestandardattributes.x read only an svganimated
length corresponding to the x attribute of the given element.
... svgfilterprimitivestandardattributes.y read only an svganimated
length corresponding to the y attribute of the given element.
... svgfilterprimitivestandardattributes.width read only an svganimated
length corresponding to the width attribute of the given element.
... svgfilterprimitivestandardattributes.height read only an svganimated
length corresponding to the height attribute of the given element.
SVGForeignObjectElement - Web APIs
svgforeignobjectelement.x read only an svganimated
length corresponding to the x attribute of the given <foreignobject> element.
... svgforeignobjectelement.y read only an svganimated
length corresponding to the x attribute of the given <foreignobject> element.
... svgforeignobjectelement.width read only an svganimated
length corresponding to the width attribute of the given <foreignobject> element.
... svgforeignobjectelement.height read only an svganimated
length corresponding to the height attribute of the given <foreignobject> element.
SVGGeometryElement - Web APIs
ometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: the path
length property and the gettotal
length() and getpointat
length() methods were originally part of the svgpathelement interface.
... svggeometryelement.path
length read only this property reflects the path
length attribute.
... svggeometryelement.gettotal
length() returns the user agent's computed value for the total
length of the path in user units.
... svggeometryelement.getpointat
length() returns the point at a given distance along the path.
SVGImageElement - Web APIs
svgimageelement.height read only an svganimated
length corresponding to the height attribute of the given <image> element.
... svgimageelement.width read only an svganimated
length corresponding to the width attribute of the given <image> element.
... svgimageelement.x read only an svganimated
length corresponding to the x attribute of the given <image> element.
... svgimageelement.y read only an svganimated
length corresponding to the y attribute of the given <image> element.
SVGLineElement - Web APIs
svglineelement.x1 read only returns an svganimated
length that corresponds to attribute x1 on the given <line> element.
... svglineelement.y1 read only returns an svganimated
length that corresponds to attribute y1 on the given <line> element.
... svglineelement.x2 read only returns an svganimated
length that corresponds to attribute x2 on the given <line> element.
... svglineelement.y2 read only returns an svganimated
length that corresponds to attribute y2 on the given <line> element.
SVGLinearGradientElement - Web APIs
svglineargradientelement.x1 read only an svganimated
length corresponding to the x1 attribute of the given <lineargradient> element.
... svglineargradientelement.y1 read only an svganimated
length corresponding to the y1 attribute of the given <lineargradient> element.
... svglineargradientelement.x2 read only an svganimated
length corresponding to the x2 attribute of the given <lineargradient> element.
... svglineargradientelement.y2 read only an svganimated
length corresponding to the y2 attribute of the given <lineargradient> element.
SVGMaskElement - Web APIs
svgmaskelement.x read only an svganimated
length corresponding to the x attribute of the given <mask> element.
... svgmaskelement.y read only an svganimated
length corresponding to the y attribute of the given <mask> element.
... svgmaskelement.width read only an svganimated
length corresponding to the width attribute of the given <mask> element.
... svgmaskelement.height read only an svganimated
length corresponding to the height attribute of the given <mask> element.
SVGTextPositioningElement - Web APIs
svgtextpositioningelement.x read only returns an svganimated
lengthlist reflecting the x attribute of the given element.
... svgtextpositioningelement.y read only returns an svganimated
lengthlist reflecting the y attribute of the given element.
... svgtextpositioningelement.dx read only returns an svganimated
lengthlist reflecting the dx attribute of the given element.
... svgtextpositioningelement.dy read only returns an svganimated
lengthlist reflecting the dy attribute of the given element.
SVGUseElement - Web APIs
svguseelement.x read only an svganimated
length corresponding to the x attribute of the given element.
... svguseelement.y read only an svganimated
length corresponding to the y attribute of the given element.
... svguseelement.width read only an svganimated
length corresponding to the width attribute of the given element.
... svguseelement.height read only an svganimated
length corresponding to the height attribute of the given element.
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.
... const saltbuffer = bytestoarraybuffer(saltbytes); // 3 derive the key from key material and salt return window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: saltbuffer, "iterations": 100000, "hash": "sha-256" }, keymaterial, { "name": "aes-kw", "
length": 256}, true, [ "wrapkey", "unwrapkey" ] ); } /* unwrap an aes secret key from an arraybuffer containing the raw bytes.
...*/ 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.
... const saltbuffer = bytestoarraybuffer(saltbytes); // 3 derive the key from key material and salt return window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: saltbuffer, "iterations": 100000, "hash": "sha-256" }, keymaterial, { "name": "aes-gcm", "
length": 256}, true, [ "wrapkey", "unwrapkey" ] ); } /* unwrap an rsa-pss private signing key from an arraybuffer containing the raw bytes.
TouchList.item() - Web APIs
the index is a number in the range of 0 to one less than the
length of the touchlist.
...returns null if the index is not less than the
length of the list.
... example this code example illustrates the use of the touchlist interface's item method and the
length property.
... target = document.getelementbyid("target"); target.addeventlistener('touchstart', function(ev) { // if this touchstart event started on element target, // set touch to the first item in the targettouches list; // otherwise set touch to the first item in the touches list var touch; if (ev.targettouches.
length >= 1) touch = ev.targettouches.item(0); else touch = ev.touches.item(0); }, false); specifications specification status comment touch events – level 2 draft non-stable version.
WebGL2RenderingContext.getBufferSubData() - Web APIs
syntax void gl.getbuffersubdata(target, srcbyteoffset, arraybufferview dstdata, optional dstoffset, optional
length); parameters target a glenum specifying the binding point (target).
...
length optional a gluint defaulting to 0.
... exceptions an invalid_value error is generated if: offset + returneddata.byte
length would extend beyond the end of the buffer returneddata is null offset is less than zero.
... 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.
WebGLRenderingContext.vertexAttribPointer() - Web APIs
must be a multiple of the byte
length of type.
...in addition, we need to include the stride, which is the total byte
length of all attributes for one vertex.
...we use an imaginary data structure where the attributes of each vertex are stored interleaved with a
length of 20 bytes per vertex: position: we need to store the x, y and z coordinates.
... //load geometry with fetch() and response.json() const response = await fetch('assets/geometry.json'); const vertices = await response.json(); //create array buffer const buffer = new arraybuffer(20 * vertices.
length); //fill array buffer const dv = new dataview(buffer); for (let i = 0; i < vertices.
length; i++) { dv.setfloat32(20 * i, vertices[i].position[0], true); dv.setfloat32(20 * i + 4, vertices[i].position[1], true); dv.setfloat32(20 * i + 8, vertices[i].position[2], true); dv.setint8(20 * i + 12, vertices[i].normal[0] * 0x7f); dv.setint8(20 * i + 13, vertices[i].normal[1] * 0x7f); dv.setin...
Signaling and video calling - Web APIs
function sendtooneuser(target, msgstring) { var isunique = true; var i; for (i=0; i<connectionarray.
length; i++) { if (connectionarray[i].username === target) { 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.target && msg.target !== undefined && msg.target.
length !== 0) { sendtooneuser(msg.target, 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 target property.
...our handler for "removetrack" is: function handleremovetrackevent(event) { var stream = document.getelementbyid("received_video").srcobject; var tracklist = stream.gettracks(); if (tracklist.
length == 0) { closevideocall(); } } this code fetches the incoming video mediastream from the "received_video" <video> element's srcobject attribute, then calls the stream's gettracks() method to get an array of the stream's tracks.
... if the array's
length is zero, meaning there are no tracks left in the stream, we end the call by calling closevideocall().
Writing a WebSocket server in Java - Web APIs
byte[] response = ("http/1.1 101 switching protocols\r\n" + "connection: upgrade\r\n" + "upgrade: websocket\r\n" + "sec-websocket-accept: " + base64.getencoder().encodetostring(messagedigest.getinstance("sha-1").digest((match.group(1) + "258eafa5-e914-47da-95ca-c5ab0dc85b11").getbytes("utf-8"))) + "\r\n\r\n").getbytes("utf-8"); out.write(response, 0, response.
length); decoding messages after a successful handshake, client can send messages to the server, but now these are encoded.
...full list of opcodes - 134: if the second byte minus 128 is between 0 and 125, this is the
length of the message.
... if it is 126, the following 2 bytes (16-bit unsigned integer), if 127, the following 8 bytes (64-bit unsigned integer, the most significant bit must be 0) are the
length.
... decoding algorithm decoded byte = encoded byte xor (position of encoded byte bitwise and 0x3)th byte of key example in java: byte[] decoded = new byte[6]; byte[] encoded = new byte[] { (byte) 198, (byte) 131, (byte) 130, (byte) 182, (byte) 194, (byte) 135 }; byte[] key = new byte[] { (byte) 167, (byte) 225, (byte) 225, (byte) 210 }; for (int i = 0; i < encoded.
length; i++) { decoded[i] = (byte) (encoded[i] ^ key[i & 0x3]); } } } finally { s.close(); } } finally { server.close(); } } } related writing websocket servers ...
height - CSS: Cascading Style Sheets
by providing one viewport
length value will set both, the minimum height and the maximum height, to the value provided.
... <
length> a non-negative absolute or relative
length.
... <percentage> a percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical
lengths respectively.
...if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none.computed valueas each of the properties of the shorthand:min-height: the percentage as specified or the absolute
lengthmax-height: the percentage as specified or the absolute
length or none formal syntax <viewport-
length>{1,2}where <viewport-
length> = auto | <
length-percentage>where <
length-percentage> = <
length> | <percentage> examples setting minimum and maximum height @viewport { height: 500px; } specifications specification status comment css device adaptationthe definition...
max-height - CSS: Cascading Style Sheets
syntax /* keyword value */ max-height: auto; /* <
length> values */ max-height: 400px; max-height: 50em; max-height: 20cm; /* <percentage> value */ max-height: 75%; values auto the used value is calculated from the other css descriptors' values.
... <
length> a non-negative absolute or relative
length.
... <percentage> a percentage value relative to the height of the initial viewport at zoom factor 1.0 for vertical
lengths.
... formal definition related at-rule@viewportinitial valueautopercentagesrefer to the height of the initial viewportcomputed valueif specified as a
length, the corresponding absolute
length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-
length>where <viewport-
length> = auto | <
length-percentage>where <
length-percentage> = <
length> | <percentage> examples setting viewport max height in pixels @viewport { max-height: 600px; } specifications specification status comment css device adaptationthe definition of '"max-height" descriptor' in that specification.
max-width - CSS: Cascading Style Sheets
syntax /* keyword value */ max-width: auto; /* <
length> values */ max-width: 600px; max-width: 80em; max-width: 15cm; /* <percentage> value */ max-width: 75%; values auto the used value is calculated from the other css descriptors' values.
... <
length> a non-negative absolute or relative
length.
... <percentage> a percentage value relative to the width of the initial viewport at zoom factor 1.0 for horizontal
lengths.
... formal definition related at-rule@viewportinitial valueautopercentagesrefer to the width of the initial viewportcomputed valueif specified as a
length, the corresponding absolute
length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-
length>where <viewport-
length> = auto | <
length-percentage>where <
length-percentage> = <
length> | <percentage> examples setting viewport max width in pixels @viewport { max-width: 600px; } specifications specification status comment css device adaptationthe definition of '"max-width" descriptor' in that specification.
min-height - CSS: Cascading Style Sheets
syntax /* keyword value */ min-height: auto; /* <
length> values */ min-height: 120px; min-height: 20em; min-height: 10cm; /* <percentage> value */ min-height: 25%; values auto the used value is calculated from the other css descriptors' values.
... <
length> a non-negative absolute or relative
length.
... <percentage> a percentage value relative to the height of the initial viewport at zoom factor 1.0 for vertical
lengths.
... formal definition related at-rule@viewportinitial valueautopercentagesrefer to the height of the initial viewportcomputed valueif specified as a
length, the corresponding absolute
length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-
length>where <viewport-
length> = auto | <
length-percentage>where <
length-percentage> = <
length> | <percentage> examples setting viewport min height in pixels @viewport { min-height: 200px; } specifications specification status comment css device adaptationthe definition of '"min-height" descriptor' in that specification.
min-width - CSS: Cascading Style Sheets
syntax /* keyword value */ min-width: auto; /* <
length> values */ min-width: 320px; min-width: 40em; min-width: 5cm; /* <percentage> value */ min-width: 25%; values auto the used value is calculated from the other css descriptors' values.
... <
length> a non-negative absolute or relative
length.
... <percentage> a percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical
lengths respectively.
... formal definition related at-rule@viewportinitial valueautopercentagesrefer to the width of the initial viewportcomputed valueif specified as a
length, the corresponding absolute
length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-
length>where <viewport-
length> = auto | <
length-percentage>where <
length-percentage> = <
length> | <percentage> examples setting viewport min width in pixels @viewport { min-width: 200px; } specifications specification status comment css device adaptationthe definition of '"min-width" descriptor' in that specification.
width - CSS: Cascading Style Sheets
by providing one viewport
length value, that value will determine both the min-width and the max-width to the value provided.
... <
length> a non-negative absolute or relative
length.
... <percentage> a percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical
lengths respectively.
...ormal definition related at-rule@viewportinitial valueas each of the properties of the shorthand:min-width: automax-width: nonepercentagesas each of the properties of the shorthand:min-width: refer to the width of the containing blockmax-width: refer to the width of the containing blockcomputed valueas each of the properties of the shorthand:min-width: the percentage as specified or the absolute
lengthmax-width: the percentage as specified or the absolute
length or none formal syntax <viewport-
length>{1,2}where <viewport-
length> = auto | <
length-percentage>where <
length-percentage> = <
length> | <percentage> examples setting minimum and maximum width @viewport { width: 500px; } specifications specification status comment css device adaptationthe definition of...
Border-radius generator - CSS: Cascading Style Sheets
].push(callback); } var unsubscribe = function unsubscribe(topic, callback) { subscribers[topic].indexof(callback); subscribers[topic].splice(index, 1); } var notify = function notify() { for (var i in subscribers[this.topic]) { subscribers[this.topic][i](this.value); } } var init = function init() { var elem = document.queryselectorall('.ui-input-slider'); var size = elem.
length; for (var i = 0; i < size; i++) new inputslider(elem[i]); } return { init : init, setmax : setmax, setmin : setmin, setunit : setunit, getnode : getnode, setvalue : setvalue, subscribe : subscribe, unsubscribe : unsubscribe } })(); /** * ui-buttonmanager */ var buttonmanager = (function checkboxmanager() { var subscribers = []; var buttons = []; var checkbox = f...
...or); } } 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 notify() { for (var i = 0; i < subscribers[this.topic].
length; i++) subscribers[this.topic][i](this.checkbox.checked); } var init = function init() { var elem = document.queryselectorall('.ui-checkbox'); var size = elem.
length; for (var i = 0; i < size; i++) new checkbox(elem[i]); } return { init : init, setvalue : setvalue, subscribe : subscribe, unsubscribe : unsubscribe } })(); window.addeventlistener("load", function() { b...
...eviewuiheight = function updatepreviewuiheight() { var p = subject.parentelement.clientheight; var v = preview_ui.clientheight; console.log(p, v, (p - v ) / 2); preview_ui.style.top = (p - v) / 2 + "px" ; } var updateoutput = function updateoutput(corner, radius) { var values = radius.split(" "); borders1[corner] = values[0]; borders2[corner] = values[0]; if (values.
length === 2) borders2[corner] = values[1]; var border_1_value = borders1.join(" "); var border_2_value = borders2.join(" "); var border_radius = 'border-radius: ' + border_1_value; if (border_2_value !== border_1_value) border_radius += ' / ' + border_2_value; border_radius += ';'; output.textcontent = border_radius; } var init = function init() { preview = getelemb...
...yid("preview"); subject = getelembyid("subject"); output = getelembyid("output"); preview_ui = getelembyid("radius-ui-sliders"); var elem = document.queryselectorall('.radius-container'); var size = elem.
length; for (var i = 0; i < size; i++) radius_containers[i] = new radiuscontainer(elem[i]); inputslidermanager.subscribe("width", updateuiwidth); inputslidermanager.subscribe("height", updateuiheight); inputslidermanager.setvalue("width", subject.clientwidth); inputslidermanager.setvalue("height", subject.clientheight); } return { init : init, updateoutput : updateoutput } })(); /** * init tool */ var init = function init() { buttonmanager.init(); inputslidermanager.init(); previewmousetracking.init("preview"); tool.init(); } ...
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
how is this worked out for items that don’t have a width or a height applied using an absolute
length unit?
... there is a concept in css of min-content and max-content — these keywords are defined in the css intrinsic and extrinsic sizing specification, and can be used in place of a
length unit.
...let's consider the case of three flex items of differing content
lengths and the following flex rules applied to them: flex: 1 1 auto; in this case the flex-basis value is auto and the items don’t have a width set, and so are auto-sized.
... is flex-basis a
length unit, but not zero?
Basic Shapes - CSS: Cascading Style Sheets
this argument can be a
length or percentage but can also be one of the keywords closest-side or farthest-side.
... the keyword closest-side uses the
length from the center of the shape to the closest side of the reference box.
... the keyword farthest-side uses the
length from the center of the shape to the farthest side of the reference box.
... our circle therefore accepts one radius value, which may be a
length, a percentage or the closest-side or farthest side keyword then optionally the keyword at followed by a position value.
Viewport concepts - CSS: Cascading Style Sheets
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 css pixels, including padding (but not borders, margins, or vertical scrollbars, if present).
...the values returned for the outerwidth and outerheight depend on the browser: firefox reports the new value in css pixels, but chrome returns the
length in the default pixel size.
...in css, we also have
length units based on the viewport size.
... if you use viewport
length units in your css within the iframe document, 1vh will be 1% of the height of the iframe, and 1vw will be 1% of the width of the document.
border-end-end-radius - CSS: Cascading Style Sheets
/* <
length> values */ /* with one value the corner will be a circle */ border-end-end-radius: 10px; border-end-end-radius: 1em; /* with two values the corner will be an ellipse */ border-end-end-radius: 1em 2em; /* global values */ border-end-end-radius: inherit; border-end-end-radius: initial; border-end-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-right-radius property.
... syntax values <
length-percentage> denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse.
... as absolute
length it can be expressed in any unit allowed by the css <
length> data type.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <
length>s or <percentage>sanimation typea
length, percentage or calc(); formal syntax <
length-percentage>{1,2}where <
length-percentage> = <
length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css content div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-end-radius: 10px; } .exampletext { wr...
border-end-start-radius - CSS: Cascading Style Sheets
/* <
length> values */ /* with one value the corner will be a circle */ border-end-start-radius: 10px; border-end-start-radius: 1em; /* with two values the corner will be an ellipse */ border-end-start-radius: 1em 2em; /* global values */ border-end-start-radius: inherit; border-end-start-radius: initial; border-end-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-right-radius property.
... syntax values <
length-percentage> denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse.
... as absolute
length it can be expressed in any unit allowed by the css <
length> data type.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <
length>s or <percentage>sanimation typea
length, percentage or calc(); formal syntax <
length-percentage>{1,2}where <
length-percentage> = <
length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-start-radius: 10px; } .exampletext { writing-...
border-image-outset - CSS: Cascading Style Sheets
syntax /* <
length> value */ border-image-outset: 1rem; /* <number> value */ border-image-outset: 1.5; /* vertical | horizontal */ border-image-outset: 1 1.2; /* top | horizontal | bottom */ border-image-outset: 30px 2 45px; /* top | right | bottom | left */ border-image-outset: 7px 12px 14px 5px; /* global values */ border-image-outset: inherit; border-image-outset: initial; border-image-outset: unset; the ...
...each value is a <
length> or <number>.
... values <
length> the size of the border-image outset as a dimension — a number with a unit.
...it also applies to ::first-letter.inheritednocomputed valueas specified, but with relative
lengths converted into absolute
lengthsanimation typeby computed value type formal syntax [ <
length> | <number> ]{1,4} examples outsetting a border image html <div id="outset">this element has an outset border image!</div> css #outset { width: 10rem; background: #cef; border: 1.4rem solid; border-image: radial-gradient(#ff2, #55f) 40; border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1r...
border-inline-end - CSS: Cascading Style Sheets
umborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from one browser to anotherapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute
length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute
length or 0 if border-left-style is none or hiddenborder-right-width: the absolute
length or 0 if border-right-style is none or hiddenborder-top-width: the absolute
length or 0 if border-top-style is none or hiddenborder-style: as each of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style:...
... as specifiedborder-right-style: as specifiedborder-top-style: as specifiedborder-inline-end-color: computed coloranimation typeas each of the properties of the shorthand:border-inline-end-color: a colorborder-inline-end-style: discreteborder-inline-end-width: a
length values the border-inline-end is specified with one or more of the following, in any order: <'border-width'> the width of the border.
...umborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from one browser to anotherapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute
length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute
length or 0 if border-left-style is none or hiddenborder-right-width: the absolute
length or 0 if border-right-style is none or hiddenborder-top-width: the absolute
length or 0 if border-top-style is none or hiddenborder-style: as each of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style:...
... as specifiedborder-right-style: as specifiedborder-top-style: as specifiedborder-inline-end-color: computed coloranimation typeas each of the properties of the shorthand:border-inline-end-color: a colorborder-inline-end-style: discreteborder-inline-end-width: a
length formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-start-end-radius - CSS: Cascading Style Sheets
/* <
length> values */ /* with one value the corner will be a circle */ border-start-end-radius: 10px; border-start-end-radius: 1em; /* with two values the corner will be an ellipse */ border-start-end-radius: 1em 2em; /* global values */ border-start-end-radius: inherit; border-start-end-radius: initial; border-start-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-left-radius property.
... syntax values <
length-percentage> denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse.
... as absolute
length it can be expressed in any unit allowed by the css <
length> data type.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <
length>s or <percentage>sanimation typea
length, percentage or calc(); formal syntax <
length-percentage>{1,2}where <
length-percentage> = <
length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-end-radius: 10px; } .exampletext { writing-...
border-start-start-radius - CSS: Cascading Style Sheets
/* <
length> values */ /* with one value the corner will be a circle */ border-start-start-radius: 10px; border-start-start-radius: 1em; /* with two values the corner will be an ellipse */ border-start-start-radius: 1em 2em; /* global values */ border-start-start-radius: inherit; border-start-start-radius: initial; border-start-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-left-radius property.
... syntax values <
length-percentage> denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse.
... as absolute
length it can be expressed in any unit allowed by the css <
length> data type.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <
length>s or <percentage>sanimation typea
length, percentage or calc(); formal syntax <
length-percentage>{1,2}where <
length-percentage> = <
length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-start-radius: 10px; } .exampletext { writin...
clip-path - CSS: Cascading Style Sheets
der-boxcomputed valueas specified, but with <url> values made absoluteanimation typeyes, as specified for <basic-shape>, otherwise no formal syntax <clip-source> | [ <basic-shape> | <geometry-box> ] | nonewhere <clip-source> = <url><basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <inset()> = inset( <
length-percentage>{1,4} [ round <'border-radius'> ]?
..., [ <
length-percentage> <
length-percentage> ]# )<path()> = path( [ <fill-rule>, ]?
... <string> )<shape-box> = <box> | margin-boxwhere <
length-percentage> = <
length> | <percentage><shape-radius> = <
length-percentage> | closest-side | farthest-side<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
... | [ [ left | right ] <
length-percentage> ] && [ [ top | bottom ] <
length-percentage> ] ]<fill-rule> = nonzero | evenodd<box> = border-box | padding-box | content-box examples comparison of html and svg <svg class="defs"> <defs> <clippath id="mypath" clippathunits="objectboundingbox"> <path d="m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z" /> </clippath> </defs> </svg> <div class="grid"> <div class="col"> <div class="note">clip-path: none</div> <div class="row"> <div class="cell"> <span>html</span> <div class="container"> <p class="none"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container ...
column-gap (grid-column-gap) - CSS: Cascading Style Sheets
syntax /* keyword value */ column-gap: normal; /* <
length> values */ column-gap: 3px; column-gap: 2.5em; /* <percentage> value */ column-gap: 3%; /* global values */ column-gap: inherit; column-gap: initial; column-gap: unset; the column-gap property is specified as one of the values listed below.
... <
length> the size of the gap between columns, defined as a <
length>.
... the <
length> property's value must be non-negative.
... formal definition initial valuenormalapplies tomulti-column elements, flex containers, grid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, with <
length>s made absolute, and normal computing to zero except on multi-column elementsanimation typea
length, percentage or calc(); formal syntax normal | <
length-percentage>where <
length-percentage> = <
length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; height: 100px; column-gap: 20px; } #flexbox > div { border: 1px solid green; background-co...
column-width - CSS: Cascading Style Sheets
especially in the presence of the column-count property (which has precedence), you must specify all related
length values to achieve an exact column width.
... syntax /* keyword value */ column-width: auto; /* <
length> values */ column-width: 60px; column-width: 15.5em; column-width: 3.3vw; /* global values */ column-width: inherit; column-width: initial; column-width: unset; the column-width property is specified as one of the values listed below.
... values <
length> indicates the optimal column width.
... formal definition initial valueautoapplies toblock containers except table wrapper boxesinheritednocomputed valuethe absolute
length, zero or largeranimation typea
length formal syntax <
length> | auto examples setting column width in pixels html <p class="content-box"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
gap (grid-gap) - CSS: Cascading Style Sheets
syntax /* one <
length> value */ gap: 20px; gap: 1em; gap: 3vmin; gap: 0.5cm; /* one <percentage> value */ gap: 16%; gap: 100%; /* two <
length> values */ gap: 20px 10px; gap: 1em 0.5em; gap: 3vmin 2vmax; gap: 0.5cm 2mm; /* one or two <percentage> values */ gap: 16% 100%; gap: 21px 82%; /* calc() values */ gap: calc(10% + 20px); gap: calc(20px + 10%) calc(10% - 5px); /* global values */ gap: inherit; gap: initial; ...
... <'row-gap'> and <'column-gap'> are each specified as a <
length> or a <percentage>.
... values <
length> is the width of the gutter separating the grid lines.
... formal definition initial valueas each of the properties of the shorthand:row-gap: normalcolumn-gap: normalapplies tomulti-column elements, flex containers, grid containersinheritednocomputed valueas each of the properties of the shorthand:row-gap: as specified, with <
length>s made absolute, and normal computing to zero except on multi-column elementscolumn-gap: as specified, with <
length>s made absolute, and normal computing to zero except on multi-column elementsanimation typeas each of the properties of the shorthand:row-gap: a
length, percentage or calc();column-gap: a
length, percentage or calc(); formal syntax <'row-gap'> <'column-gap'>?
height - CSS: Cascading Style Sheets
syntax /* keyword value */ height: auto; /* <
length> values */ height: 120px; height: 10em; /* <percentage> value */ height: 75%; /* global values */ height: inherit; height: initial; height: unset; values <
length> defines the height as an absolute value.
... fit-content(<
length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e.
...a percentage height on the root element is relative to the initial containing block.computed valuea percentage or auto or the absolute
lengthanimation typea
length, percentage or calc(); formal syntax auto | <
length> | <percentage> | min-content | max-content | fit-content(<
length-percentage>)where <
length-percentage> = <
length> | <percentage> examples setting height using pixels and percentages html <div id="taller">i'm 50 pixels tall.</div> <div id="shorter">i'm 25 pixels tall.</div> <div id="parent"> <div id="child"> i'm...
... recommendation adds support for the <
length> values and precises on which element it applies to.
margin - CSS: Cascading Style Sheets
each value is a <
length>, a <percentage>, or the keyword auto.
... values <
length> the size of the margin as a fixed value.
... formal syntax [ <
length> | <percentage> | auto ]{1,4} examples simple example html <div class="center">this element is centered.</div> <div class="outside">this element is positioned outside of its container.</div> css .center { margin: auto; background: lime; width: 66%; } .outside { margin: 3rem 0 0 -3rem; background: cyan; width: 66%; } more examples margin: 5%; /* all sides: 5% margin */ margin: 10px; /* all sides: 10px margin */ margin: 1.6em 20px; /* top and bottom: 1.6em margin */ ...
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valueas each of the properties of the shorthand:margin-bottom: the percentage as specified or the absolute
lengthmargin-left: the percentage as specified or the absolute
lengthmargin-right: the percentage as specified or the absolute
lengthmargin-top: the percentage as specified or the absolute
lengthanimation typea
length ...
mask-border-outset - CSS: Cascading Style Sheets
syntax /* <
length> value */ mask-border-outset: 1rem; /* <number> value */ mask-border-outset: 1.5; /* vertical | horizontal */ mask-border-outset: 1 1.2; /* top | horizontal | bottom */ mask-border-outset: 30px 2 45px; /* top | right | bottom | left */ mask-border-outset: 7px 12px 14px 5px; /* global values */ mask-border-outset: inherit; mask-border-outset: initial; mask-border-outset: unset; the mask-border-outset property may be specified as one, two, three, or four values.
... each value is a <
length> or <number>.
... values <
length> the size of the mask border outset as a dimension.
... formal definition initial value0applies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with relative
lengths converted into absolute
lengthsanimation typediscrete formal syntax [ <
length> | <number> ]{1,4} examples basic usage this property doesn't appear to be supported anywhere yet.
mask-size - CSS: Cascading Style Sheets
each value can be a <
length>, a <percentage>, or auto.
... values <
length> a <
length> value scales the mask image to the specified
length in the corresponding dimension.
... negative
lengths are not allowed.
... formal definition initial valueautoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with relative
lengths converted into absolute
lengthsanimation typerepeatable list of simple list of
length, percentage, or calc formal syntax <bg-size>#where <bg-size> = [ <
length-percentage> | auto ]{1,2} | cover | containwhere <
length-percentage> = <
length> | <percentage> examples setting mask size as a percentage css #masked { width: 200px; height: 200px; background: blue linear-gradient(red, blue); ...
max() - CSS: Cascading Style Sheets
the max() function can be used anywhere a <
length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.
... the expressions can be math expressions (using arithmetic operators), literal values, or other expressions, such as attr(), that evaluate to a valid argument type (like <
length>), or nested min() and max() functions.
...the operands in the expression may be any <
length> syntax value.
...a suggestion is to use the min() function nested within a max() that has as its second value a relative
length unit that is always large enough to read.
offset-path - CSS: Cascading Style Sheets
] ) | <path()> | <url> | [ <basic-shape> | <geometry-box> ]where <size> = closest-side | farthest-side | closest-corner | farthest-corner | <
length> | <
length-percentage>{2}<path()> = path( [ <fill-rule>, ]?
... <string> )<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <
length-percentage> = <
length> | <percentage><fill-rule> = nonzero | evenodd<inset()> = inset( <
length-percentage>{1,4} [ round <'border-radius'> ]?
..., [ <
length-percentage> <
length-percentage> ]# )<shape-box> = <box> | margin-boxwhere <shape-radius> = <
length-percentage> | closest-side | farthest-side<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
... | [ [ left | right ] <
length-percentage> ] && [ [ top | bottom ] <
length-percentage> ] ]<box> = border-box | padding-box | content-box examples animating an element with offset-path the offset-path properties in the css code sample defines a motion path that is identical to the <path> element in the svg.
offset-position - CSS: Cascading Style Sheets
syntax /* keyword values */ offset-position: auto; offset-position: top; offset-position: bottom; offset-position: left; offset-position: right; offset-position: center; /* <percentage> values */ offset-position: 25% 75%; /* <
length> values */ offset-position: 0 0; offset-position: 1cm 2cm; offset-position: 10ch 8em; /* edge offsets values */ offset-position: bottom 10px right 20px; offset-position: right 3em bottom 10px; offset-position: bottom 10px right; offset-position: top right 10px; /* global values */ offset-position: inherit; offset-position: initial; offset-position: unset; values auto the initial position is the position of the box specified by the position property.
...if three or four values are used, the
length-percentage values are offsets for the preceding keyword value(s).
... formal definition initial valueautoapplies totransformable elementsinheritednopercentagesrefertosizeofcontainingblockcomputed valuefor <
length> the absolute value, otherwise a percentageanimation typea position formal syntax auto | <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
... | [ [ left | right ] <
length-percentage> ] && [ [ top | bottom ] <
length-percentage> ] ]where <
length-percentage> = <
length> | <percentage> examples setting initial offset position <div id="motion-demo"></div> #motion-demo { offset-path: path('m20,20 c20,100 200,0 200,100'); offset-position: left top; animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; background: cyan; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } specifications specification status comment motion path module level 1the definition of 'offset-position' in that specification.
<position> - CSS: Cascading Style Sheets
if specified, an offset can be either a relative <percentage> value or an absolute <
length> value.
.../ value keyword /* a value for horizontal position, keyword for vertical position */ value value /* a value for each direction (horizontal then vertical) */ /* 4-value syntax */ keyword value keyword value /* each value is an offset from the keyword that preceeds it */ formal syntax [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <
length> | <percentage> ] [ top | center | bottom | <
length> | <percentage> ]?
... | [ [ left | right ] [ <
length> | <percentage> ] ] && [ [ top | bottom ] [ <
length> | <percentage> ] ] ] note: the background-position property also accepts a three-value syntax.
... recommendation allows combination of a keyword with a <
length> or <percentage> value.
<shape> - CSS: Cascading Style Sheets
rect() rect(top, right, bottom, left) values top is a <
length> representing the offset for the top of the rectangle relative to the top border of the element's box.
... right is a <
length> representing the offset for the right of the rectangle relative to the left border of the element's box.
... bottom is a <
length> representing the offset for the bottom of the rectangle relative to the top border of the element's box.
... left is a <
length> representing the offset for the left of the rectangle relative to the left border of the element's box.
transform - CSS: Cascading Style Sheets
find out more: mdn understanding wcag, guideline 2.3 explanations understanding success criterion 2.3.3 | w3c understanding wcag 2.1 formal definition initial valuenoneapplies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valueas specified, but with relative
lengths converted into absolute
lengthsanimation typea transformcreates stacking contextyes formal syntax none | <transform-list>where <transform-list> = <transform-function>+where <transform-function> = <matrix()> | <translate()> | <translatex()> | <translatey()> | <scale()> | <scalex()> | <scaley()> | <rotate()> | <skew()> | <skewx()> | <skewy()> | <matrix3d()> | <translate3d()> | <translatez()> | <...
...scale3d()> | <scalez()> | <rotate3d()> | <rotatex()> | <rotatey()> | <rotatez()> | <perspective()>where <matrix()> = matrix( <number>#{6} )<translate()> = translate( <
length-percentage> , <
length-percentage>?
... )<translatex()> = translatex( <
length-percentage> )<translatey()> = translatey( <
length-percentage> )<scale()> = scale( <number> , <number>?
...)<skewx()> = skewx( [ <angle> | <zero> ] )<skewy()> = skewy( [ <angle> | <zero> ] )<matrix3d()> = matrix3d( <number>#{16} )<translate3d()> = translate3d( <
length-percentage> , <
length-percentage> , <
length> )<translatez()> = translatez( <
length> )<scale3d()> = scale3d( <number> , <number> , <number> )<scalez()> = scalez( <number> )<rotate3d()> = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )<rotatex()> = rotatex( [ <angle> | <zero> ] )<rotatey()> = rotatey( [ <angle> | <zero> ] )<rotatez()> = rotatez( [ <angle> | <zero> ] )<perspective()> = perspective( <
length> )where <
length-percentage> = <
length> | <percenta...
transition-timing-function - CSS: Cascading Style Sheets
the step timing functions divides the input time into a specified number of intervals that are equal in
length.
... steps( n, <jumpterm>) displays the transition along n stops along the transition, displaying each stop for equal
lengths of time.
...lid red; color: white; transition-property: all; transition-duration: 7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration: 2s; } function updatetransition() { var els = document.queryselectorall(".parent > div[class]"); for(var c = els.
length, i = 0; i < c; i++) { els[i].classlist.toggle("box1"); } } var intervalid = window.setinterval(updatetransition, 10000); .ease { transition-timing-function: ease; } .easein { transition-timing-function: ease-in; } .easeout { transition-timing-function: ease-out; } .easeinout { transition-timing-function: ease-in-out; } .linear { transition-timing-function: linear; } .cb ...
...solid red; color: white; transition-property: all; transition-duration:7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration:2s; } function updatetransition() { var els = document.queryselectorall(".parent > div[class]"); for(var c = els.
length, i = 0; i < c; i++) { els[i].classlist.toggle("box1"); } } var intervalid = window.setinterval(updatetransition, 10000); .jump-start { transition-timing-function: steps(5, jump-start); } .jump-end { transition-timing-function: steps(5, jump-end); } .jump-none { transition-timing-function: steps(5, jump-none); } .jump-both { transition-timing-function: steps(5, jump-both); }...
word-spacing - CSS: Cascading Style Sheets
the word-spacing css property sets the
length of space between words and between tags.
... syntax /* keyword value */ word-spacing: normal; /* <
length> values */ word-spacing: 3px; word-spacing: 0.3em; /* <percentage> values */ word-spacing: 50%; word-spacing: 200%; /* global values */ word-spacing: inherit; word-spacing: initial; word-spacing: unset; values normal the normal inter-word spacing, as defined by the current font and/or the browser.
... <
length> specifies extra spacing in addition to the intrinsic inter-word spacing defined by the font.
...it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the width of the affected glyphcomputed valuean optimum, minimum, and maximum value, each consisting of either an absolute
length, a percentage, or the keyword normalanimation typea
length formal syntax normal | <
length-percentage>where <
length-percentage> = <
length> | <percentage> specifications specification status comment css text module level 3the definition of 'word-spacing' in that specification.
Adding captions and subtitles to HTML5 video - Developer guides
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.
...eo's texttracks, reading their properties and building the menu up from there: var subtitlesmenu; if (video.texttracks) { var df = document.createdocumentfragment(); var subtitlesmenu = df.appendchild(document.createelement('ul')); subtitlesmenu.classname = 'subtitles-menu'; subtitlesmenu.appendchild(createmenuitem('subtitles-off', '', 'off')); for (var i = 0; i < video.texttracks.
length; i++) { subtitlesmenu.appendchild(createmenuitem('subtitles-' + video.texttracks[i].language, video.texttracks[i].language, video.texttracks[i].label)); } videocontainer.appendchild(subtitlesmenu); } this code creates a documentfragment, which is used to hold an unordered list containing our subtitles menu.
...he creation of each list item and button is done by the createmenuitem() function, which is defined as follows: var subtitlemenubuttons = []; var createmenuitem = function(id, lang, label) { var listitem = document.createelement('li'); var button = listitem.appendchild(document.createelement('button')); button.setattribute('id', id); button.classname = 'subtitles-button'; if (lang.
length > 0) button.setattribute('lang', lang); button.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'); }); // f...
...ind 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.texttracks[i].mode = 'hidden'; } } subtitlesmenu.style.display = 'none'; }); subtitlemenubuttons.push(button); return listitem; } this function builds the required <li> and <button> elements, and returns them so they can be added to the subtitles menu list.
HTML documentation index - HTML: Hypertext Markup Language
41 html attribute: max
length attribute, attributes, constraint validation the max
length attribute defines the maximum number of characters (as utf-16 code units) the user can enter into an <input> or <textarea>.
... 43 html attribute: min
length attribute, input, reference, min
length, textarea the min
length attribute defines the minimum number of characters (as utf-16 code units) the user can enter into an <input> or <textarea>.
...if no min
length is specified, or an invalid value is specified, the input has no minimum
length.
... this value must be less than or equal to the value of max
length, otherwise the value will never be valid, as it is impossible to meet both criteria.
Closures - JavaScript
e" 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() { showhelp(item.help); } } } setuphelp(); try running the code in jsfiddle.
...howhelp(help) { document.getelementbyid('help').innerhtml = help; } function makehelpcallback(help) { return function() { showhelp(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 = makehelpcallback(item.help); } } setuphelp(); run the code using this jsfiddle link.
... one other way to write the above using anonymous closures is: 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++) { (function() { var item = helptext[i]; document.getelementbyid(item.id).onfocus = function() { showhelp(item.help); } })(); // immediate event listener attachment with the current value of item (preserved until iteration).
...to use more closures, you can use the let keyword introduced in es2015 : 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 (let i = 0; i < helptext.
length; i++) { let item = helptext[i]; document.getelementbyid(item.id).onfocus = function() { showhelp(item.help); } } } setuphelp(); this example uses let instead of var, so every closure binds the block-scoped variable, meaning that no additional closures are required.
Array.prototype.reduce() - JavaScript
to
length(?
... get(o, "
length")).
... var len = o.
length >>> 0; // steps 3, 4, 5, 6, 7 var k = 0; var value; if (arguments.
length >= 2) { value = arguments[1]; } else { while (k < len && !(k in o)) { k++; } // 3.
... reduce if (!array.prototype.mapusingreduce) { array.prototype.mapusingreduce = function(callback, thisarg) { return this.reduce(function(mappedarray, currentvalue, index, array) { mappedarray[index] = callback.call(thisarg, currentvalue, index, array) return mappedarray }, []) } } [1, 2, , 3].mapusingreduce( (currentvalue, index, array) => currentvalue + index + array.
length ) // [5, 7, , 10] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.reduce()' in that specification.
Array.prototype.filter() - JavaScript
((typeof func === 'function' || typeof func === 'function') && this) ) throw new typeerror(); var len = this.
length >>> 0, res = new array(len), // preallocate array t = this, c = 0, i = -1; var kvalue; if (thisarg === undefined){ while (++i !== len){ // checks to see if the key was set if (i in this){ kvalue = t[i]; // in case t is changed in callback if (func(t[i], i, t)){ res[c++] = kvalue; } } } } ...
... else{ while (++i !== len){ // checks to see if the key was set if (i in this){ kvalue = t[i]; if (func.call(thisarg, t[i], i, t)){ res[c++] = kvalue; } } } } res.
length = c; // shrink down array to proper size return res; }; } examples filtering out all small values the following example uses filter() to create a filtered array that has all elements with values less than 10 removed.
... // modifying each words let words = ['spray', 'limit', 'exuberant', 'destruction','elite', 'present'] const modifiedwords = words.filter( (word, index, arr) => { arr[index+1] +=' extra' return word.
length < 6 }) console.log(modifiedwords) // notice there are three words below
length 6, but since they've been modified one is returned // ["spray"] // appending new words words = ['spray', 'limit', 'exuberant', 'destruction','elite', 'present'] const appendedwords = words.filter( (word, index, arr) => { arr.push('new') return word.
length < 6 }) console.log(appendedwords) // only three fits the ...
...condition even though the `words` itself now has a lot more words with character
length less than 6 // ["spray" ,"limit" ,"elite"] // deleting words words = ['spray', 'limit', 'exuberant', 'destruction', 'elite', 'present'] const deletewords = words.filter( (word, index, arr) => { arr.pop() return word.
length < 6 }) console.log(deletewords) // notice 'elite' is not even obtained as its been popped off `words` before filter can even get there // ["spray" ,"limit"] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.filter' in that specification.
Array.prototype.findIndex() - JavaScript
if callback never returns a truthy value (or the array's
length is 0), findindex() returns -1.
...to
length(?
... get(o, "
length")).
... var len = o.
length >>> 0; // 3.
Array.prototype.includes() - JavaScript
the first element to be searched is found at fromindex for positive values of fromindex, or at arr.
length + fromindex for negative values of fromindex (using the absolute value of fromindex as the number of elements from the end of the array at which to start the search).
... examples [1, 2, 3].includes(2) // true [1, 2, 3].includes(4) // false [1, 2, 3].includes(3, 3) // false [1, 2, 3].includes(3, -1) // true [1, 2, nan].includes(nan) // true fromindex is greater than or equal to the array
length if fromindex is greater than or equal to the
length of the array, false is returned.
...if the computed index is less or equal than -1 * arr.
length, the entire array will be searched.
... // array
length is 3 // fromindex is -100 // computed index is 3 + (-100) = -97 let arr = ['a', 'b', 'c'] arr.includes('a', -100) // true arr.includes('b', -100) // true arr.includes('c', -100) // true arr.includes('a', -2) // false includes() used as a generic method includes() method is intentionally generic.
Array.prototype.indexOf() - JavaScript
if the index is greater than or equal to the array's
length, -1 is returned, which means the array will not be searched.
...if (!array.prototype.indexof) array.prototype.indexof = (function(object, max, min) { "use strict" return function indexof(member, fromindex) { if (this === null || this === undefined) throw typeerror("array.prototype.indexof called on null or undefined") var that = object(this), len = that.
length >>> 0, i = min(fromindex | 0, len) if (i < 0) i = max(0, len + i) else if (i >= len) return -1 if (member === void 0) { // undefined for (; i !== len; ++i) if (that[i] === void 0 && i in that) return i } else if (member !== member) { // nan return -1 // since nan !== nan, it will never be found.
...let lenvalue be the result of calling the get // internal method of o with the argument "
length".
... var len = o.
length >>> 0; // 4.
Array.prototype.pop() - JavaScript
this method changes the
length of the array.
...objects which do not contain a
length property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner.
... var myfish = ['angel', 'clown', 'mandarin', 'sturgeon']; var popped = myfish.pop(); console.log(myfish); // ['angel', 'clown', 'mandarin' ] console.log(popped); // 'sturgeon' using apply( ) or call ( ) on array-like objects the following code creates the myfish array-like object containing four elements and a
length parameter, then removes its last element and decrements the
length parameter.
... var myfish = {0:'angel', 1:'clown', 2:'mandarin', 3:'sturgeon',
length: 4}; var popped = array.prototype.pop.call(myfish); //same syntax for using apply( ) console.log(myfish); // {0:'angel', 1:'clown', 2:'mandarin',
length: 3} console.log(popped); // 'sturgeon' specifications specification ecmascript (ecma-262)the definition of 'array.prototype.pop' in that specification.
Array.prototype.splice() - JavaScript
if greater than the
length of the array, start will be set to the
length of the array.
...(in this case, the origin -1, meaning -n is the index of the nth last element, and is therefore equivalent to the index of array.
length - n.) if array.
length + start is less than 0, it will begin from index 0.
... if deletecount is omitted, or if its value is equal to or larger than array.
length - start (that is, if it is equal to or greater than the number of elements left in the array, starting at start), then all the elements from start to the end of the array will be deleted.
... description if the specified number of elements to insert differs from the number of elements being removed, the array's
length will be changed.
Array.prototype.unshift() - JavaScript
the unshift() method adds one or more elements to the beginning of an array and returns the new
length of the array.
... return value the new
length property of the object upon which the method was called.
...objects which do not contain a
length property—reflecting the last in a series of consecutive, zero-based numerical properties—may not behave in any meaningful manner.
... see example: let arr = [4, 5, 6] arr.unshift(1, 2, 3) console.log(arr); // [1, 2, 3, 4, 5, 6] arr = [4, 5, 6] // resetting the array arr.unshift(1) arr.unshift(2) arr.unshift(3) console.log(arr) // [3, 2, 1, 4, 5, 6] examples using unshift let arr = [1, 2] arr.unshift(0) // result of the call is 3, which is the new array
length // arr is [0, 1, 2] arr.unshift(-2, -1) // the new array
length is 5 // arr is [-2, -1, 0, 1, 2] arr.unshift([-4, -3]) // the new array
length is 6 // arr is [[-4, -3], -2, -1, 0, 1, 2] arr.unshift([-7, -6], [-5]) // the new array
length is 8 // arr is [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ] specifications specification ecmascript (ecma-262)the defin...
RegExpInstance.lastIndex - JavaScript
the following rules apply: if lastindex is greater than the
length of the string, test() and exec() fail, then lastindex is set to 0.
... if lastindex is equal to or less than the
length of the string and if the regular expression matches the empty string, then the regular expression matches input starting from lastindex.
... if lastindex is equal to the
length of the string and if the regular expression does not match the empty string, then the regular expression mismatches input, and lastindex is reset to 0.
...in this case, the empty string because lastindex was 2 (and still is 2) and hi has
length 2.
String.prototype.endsWith() - JavaScript
syntax str.endswith(searchstring[,
length]) parameters searchstring the characters to be searched for at the end of str.
...
length optional if provided, it is used as the
length of str.
... defaults to str.
length.
...however, you can polyfill string.prototype.endswith() with the following snippet: if (!string.prototype.endswith) { string.prototype.endswith = function(search, this_len) { if (this_len === undefined || this_len > this.
length) { this_len = this.
length; } return this.substring(this_len - search.
length, this_len) === search; }; } examples using endswith() let str = 'to be, or not to be, that is the question.' console.log(str.endswith('question.')) // true console.log(str.endswith('to be')) // false console.log(str.endswith('to be', 19)) // true specifications specification ecmas...
String.prototype.substring() - JavaScript
any argument value that is less than 0 or greater than stringname.
length is treated as if it were 0 and stringname.
length, respectively.
... console.log(anystring.substring(0, 1)) console.log(anystring.substring(1, 0)) // displays 'mozill' console.log(anystring.substring(0, 6)) // displays 'lla' console.log(anystring.substring(4)) console.log(anystring.substring(4, 7)) console.log(anystring.substring(7, 4)) // displays 'mozilla' console.log(anystring.substring(0, 7)) console.log(anystring.substring(0, 10)) using substring() with
length property the following example uses the substring() method and
length property to extract the last characters of a particular string.
... // displays 'illa' the last 4 characters let anystring = 'mozilla' let anystring4 = anystring.substring(anystring.
length - 4) console.log(anystring4) // displays 'zilla' the last 5 characters let anystring = 'mozilla' let anystring5 = anystring.substring(anystring.
length - 5) console.log(anystring5) the difference between substring() and substr() there's a subtle difference between the substring() and substr() methods, so you should be careful not to get them confused.
... // replaces olds with news in the string fulls function replacestring(olds, news, fulls) { for (let i = 0; i < fulls.
length; ++i) { if (fulls.substring(i, i + olds.
length) == olds) { fulls = fulls.substring(0, i) + news + fulls.substring(i + olds.
length, fulls.
length) } } return fulls } replacestring('world', 'web', 'brave new world') note that this can result in an infinite loop if olds is itself a substring of news — for example, if you attempted to replace 'world' with 'otherworld' here.
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.
... so after instantiation, the table still has
length 2, but the elements now contain callable exported webassembly functions which we can call from js.
... 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.
dx - SVG: Scalable Vector Graphics
value list of <
length> default value none animatable yes fedropshadow for <fedropshadow>, dx defines the x offset of the droped shadow.
... value list of <
length> default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="0" x2="100%" y1="25%" y2="25%" /> <line x1="0" x2="100%" y1="50%" y2="50%" /> <line x1="0" x2="100%" y1="75%" y2="75%" /> <line x1="10%" x2="10%" y1=...
... value list of <
length> default value none animatable yes tspan for <tspan>, if it contains a single value, dx defines a shift along the x-axis for all alternate glyph.
... value list of <
length> default value none animatable yes specifications specification status comment filter effects module level 1the definition of 'dx' in that specification.
dy - SVG: Scalable Vector Graphics
value list of <
length> default value none animatable yes fedropshadow for <fedropshadow>, dy defines the y offset of the dropped shadow.
... value list of <
length> default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 150 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal lines --> <line x1="0" x2="100%" y1="30" y2="30" /> <line x1="0" x2="100%" y1="40" y2="40" /> <line x1="0" x2="100%" y1="50" y2="50" /> <line x1="0" x2="100%" y1="60" y2="60" /> <!-- vertical lines -...
... value list of <
length> default value none animatable yes tspan for <tspan>, if it contains a single value, dy defines a shift along the y-axis for all alternate glyph.
... value list of <
length> default value none animatable yes specifications specification status comment filter effects module level 1the definition of 'dy' in that specification.
<ellipse> - SVG: Scalable Vector Graphics
value type: <
length>|<percentage> ; default value: 0; animatable: yes cy the y position of the ellipse.
... value type: <
length>|<percentage> ; default value: 0; animatable: yes rx the radius of the ellipse on the x axis.
... value type: auto|<
length>|<percentage> ; default value: auto; animatable: yes ry the radius of the ellipse on the y axis.
... value type: auto|<
length>|<percentage> ; default value: auto; animatable: yes path
length this attribute lets specify the total
length for the path, in user units.
<foreignObject> - SVG: Scalable Vector Graphics
value type: <
length>|<percentage> ; default value: auto; animatable: yes width the width of the foreignobject.
... value type: <
length>|<percentage> ; default value: auto; animatable: yes x the x coordinate of the foreignobject.
... value type: <
length>|<percentage> ; default value: 0; animatable: yes y the y coordinate of the foreignobject.
... value type: <
length>|<percentage> ; default value: 0; animatable: yes note: starting with svg2, x, y, width, and height are geometry properties, meaning those attributes can also be used as css properties for that element.
<linearGradient> - SVG: Scalable Vector Graphics
value type: <
length> ; default value: 0%; animatable: yes x2 this attribute defines the x coordinate of the ending point of the vector gradient along which the linear gradient is drawn.
... value type: <
length> ; default value: 100%; animatable: yes xlink:href an <iri> reference to another <lineargradient> element that will be used as a template.
... value type: <
length> ; default value: 0%; animatable: yes y2 this attribute defines the y coordinate of the ending point of the vector gradient along which the linear gradient is drawn.
... value type: <
length> ; default value: 0%; animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetransform>,...
<pattern> - SVG: Scalable Vector Graphics
value type: <
length>|<percentage>; default value: 0; animatable: yes href this attribute reference a template pattern that provides default values for the <pattern> attributes.
... value type: <
length>|<percentage> ; default value: 0; animatable: yes x this attribute determines the x coordinate shift of the pattern tile.
... value type: <
length>|<percentage> ; default value: 0; animatable: yes xlink:href deprecated since svg 2 this attribute reference a template pattern that provides default values for the <pattern> attributes.
... value type: <
length>|<percentage> ; default value: 0; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linej...
<svg> - SVG: Scalable Vector Graphics
(not the height of its coordinate system.) value type: <
length>|<percentage> ; default value: auto; animatable: yes preserveaspectratio how the svg fragment must be deformed if it is displayed with a different aspect ratio.
...(not the width of its coordinate system.) value type: <
length>|<percentage> ; default value: auto; animatable: yes x the displayed x coordinate of the svg container.
... value type: <
length>|<percentage> ; default value: 0; animatable: yes y the displayed y coordinate of the svg container.
... value type: <
length>|<percentage> ; default value: 0; animatable: yes note: starting with svg2, x, y, width, and height are geometry properties, meaning these attributes can also be used as css properties.
Understanding WebAssembly text format - WebAssembly
this means all we need to do to pass a string to javascript is to pass out the offset of the string in linear memory along with some way to indicate the
length.
... while there are many different ways to encode a string’s
length in the string itself (for example, c strings); for simplicity here we just pass both offset and
length as parameters: (import "console" "log" (func $log (param i32) (param i32))) on the javascript side, we can use the textdecoder api to easily decode our bytes into a javascript string.
... (we specify utf8 here, but many other encodings are supported.) function consolelogstring(offset,
length) { var bytes = new uint8array(memory.buffer, offset,
length); var string = new textdecoder('utf8').decode(bytes); console.log(string); } the last missing piece of the puzzle is where consolelogstring gets access to the webassembly memory.
... our final wasm module looks like this: (module (import "console" "log" (func $log (param i32 i32))) (import "js" "mem" (memory 1)) (data (i32.const 0) "hi") (func (export "writehi") i32.const 0 ;; pass offset 0 to log i32.const 2 ;; pass
length 2 to log call $log)) note: above, note the double semi-colon syntax (;;) for allowing comments in webassembly files.
context-menu - Archive of obsolete content
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.
...'self.on("context", function (node) {' + ' var pagehasimgs = !!document.queryselector("img");' + ' return pagehasimgs;' + '});' + 'self.on("click", function (node, data) {' + ' var imgs = document.queryselectorall("img");' + ' var imgsrcs = [];' + ' for (var i = 0 ; i < imgs.
length; i++)' + ' imgsrcs.push(imgs[i].src);' + ' self.postmessage(imgsrcs);' + '});', onmessage: function (imgsrcs) { openimageeditor(imgsrcs); } }); show a "search with" menu when the user right-clicks an anchor that searches google or wikipedia with the text contained in the anchor: var cm = require("sdk/context-menu"); var googleitem =...
... uuidstr = uuid.number.substring(1,37); cm.item({ data: uuidstr+"this is a tooltip", label: "just a tigger, will never show up", contentscript: 'self.on("context", function(){self.postmessage(); return false;})', onmessage: function(){ var cmitems = getmostrecentbrowserwindow().document.queryselectorall(".addon-context-menu-item[value^='"+ uuidstr +"']"); for(var i=0; i < cmitems.
length; i++) cmitems[i].tooltiptext = cmitems[i].value.substring(36); } }); globals constructors item(options) creates a labeled menu item that can perform an action when clicked.
Rosetta - Archive of obsolete content
"); if (!odicts.hasownproperty(smimetype)) { alert("rosetta.translatescript() \u2013 unknown mime-type \"" + smimetype + "\": script ignored."); return; } var ocompiled = document.createelement("script"); oscript.parentnode.insertbefore(obaton, oscript); oscript.parentnode.removechild(oscript); for (var aattrs = oscript.attributes, nattr = 0; nattr < aattrs.
length; nattr++) { ocompiled.setattribute(aattrs[nattr].name, aattrs[nattr].value); } ocompiled.type = "text\/ecmascript"; if (oxhr200) { ocompiled.src = "data:text\/javascript," + encodeuricomponent(odicts[smimetype](oxhr200.responsetext)); } ocompiled.text = oxhr200 ?
...getsource(oscript) : createscript(oscript); } } function parsedocument () { for ( var ascripts = document.getelementsbytagname("script"), nidx = 0; nidx < ascripts.
length; parsescript(ascripts[nidx++]) ); } var odicts = {}, rignoremimes = /^\s*(?:text\/javascript|text\/ecmascript)\s*$/; this.translatescript = parsescript; this.translateall = parsedocument; this.appendcompiler = function (vmimetypes, fcompiler) { if (arguments.
length < 2) { throw new typeerror("rosetta.appendcompiler() \u2013 not enough arguments"); } ...
... if (typeof fcompiler !== "function") { throw new typeerror("rosetta.appendcompiler() \u2013 second argument must be a function"); } if (!array.isarray(vmimetypes)) { odicts[(vmimetypes).tostring()] = fcompiler; return true; } for (var nidx = 0; nidx < vmimetypes.
length; nidx++) { odicts[(vmimetypes[nidx]).tostring()] = fcompiler; } return true; }; })(); now, imagine you need a compiler for scripts written in c (mime type: text/x-c).
CSS3 - Archive of obsolete content
adds: definition for new font-relative
length units: rem and ch .
... definition for viewport-relative
length units: vw, vh, vmax, and vmin .
... precision about the real size of the absolute
length units, which are not really absolute, but defined in relation with the reference pixel .
Creating a Web based tone generator - Archive of obsolete content
if(tail) { written = audio.mozwriteaudio(tail); currentwriteposition += written; if(written < tail.
length) { // not all the data was written, saving the tail...
... written = audio.mozwriteaudio(sounddata); if(written < sounddata.
length) { // not all the data was written, saving the tail.
... var frequency = 0, currentsoundsample; var samplerate = 44100; function requestsounddata(sounddata) { if (!frequency) { return; // no sound selected } var k = 2* math.pi * frequency / samplerate; for (var i=0, size=sounddata.
length; i<size; i++) { sounddata[i] = math.sin(k * currentsoundsample++); } } var audiodestination = new audiodatadestination(samplerate, requestsounddata); function start() { currentsoundsample = 0; frequency = parsefloat(document.getelementbyid("freq").value); } function stop() { frequency = 0; } </script> </body> </h...
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
the best way to only process element nodes is to iterate over all child nodes and only process those with a nodetype of 1: html: <div id="foo"> <span>test</span> </div> javascript: var mydiv = document.getelementbyid("foo"); var mychildren = mydiv.childnodes; for (var i = 0; i < mychildren.
length; i++) { if (mychildren[i].nodetype == 1){ // element node }; }; generate and manipulate content mozilla supports the legacy methods for adding content into the dom dynamically, such as document.write, document.open and document.close.
... xml: <?xml version="1.0"?> <myxmldoc xmlns:myns="http://myfoo.com"> <myns:foo>bar</myns:foo> </myxmldoc> javascript: var myxmldoc = getxmldocument().documentelement; alert(myxmldoc.childnodes.
length); the first line of javascript loads the xml document and accesses the root element (myxmldoc) by retrieving the documentelement.
... xml: <?xml version="1.0"?> <myxmldoc xmlns:myns="http://myfoo.com"> <myns:foo>bar</myns:foo> </myxmldoc> javascript: var myxmldoc = getxmldocument().documentelement; var mychildren = myxmldoc.childnodes; for (var run = 0; run < mychildren.
length; run++){ if ( (mychildren[run].nodetype != 3) && mychildren[run].nodetype != 8) ){ // not a text or comment node }; }; see whitespace in the dom for more detailed discussion and a possible solution.
File object - Archive of obsolete content
instance properties file.
length the
length of the file in bytes, or the number of entries in the directory.
... note: calculating the
length of the directory is very expensive.
... file.size the
length of the file in bytes; undefined(?) for directories and pipelines.
Building accessible custom components in XUL - Archive of obsolete content
.focus(); } } function spreadsheet_left(current) { var next = find_cell_left(current); if (next) { next.focus(); } } function spreadsheet_right(current) { var next = find_cell_right(current); if (next) { next.focus(); } } function get_index_within_parent(current) { var arsiblings = current.parentnode.childnodes; for (var i = 0; i < arsiblings.
length; i++) { if (arsiblings[i] == current) { return i; } } return -1; } function find_cell_up(current) { var row = get_index_within_parent(current); var arsiblings = current.parentnode.childnodes; return row == 0 ?
... null : arsiblings[row - 1]; } function find_cell_down(current) { var row = get_index_within_parent(current); var arsiblings = current.parentnode.childnodes; return row == arsiblings.
length - 1 ?
...null : columns[column - 1].childnodes[row]; } function find_cell_right(current) { var row = get_index_within_parent(current); var column = get_index_within_parent(current.parentnode); var columns = current.parentnode.parentnode.childnodes; return column == columns.
length - 1 ?
Sorting and filtering a custom tree view - Archive of obsolete content
each(function(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.issort...
..."ascending" : "descending"); tree.setattribute("sortresource", columnname); tree.view = new treeview(table); //set the appropriate attributes to show to indicator var cols = tree.getelementsbytagname("treecol"); for (var i = 0; i < cols.
length; i++) { cols[i].removeattribute("sortdirection"); } document.getelementbyid(columnname).setattribute("sortdirection", order == 1 ?
...unction gettopvisiblerow() { return tree.treeboxobject.getfirstvisiblerow(); } function settopvisiblerow(topvisiblerow) { return tree.treeboxobject.scrolltorow(topvisiblerow); } function inputfilter(event) { //do this now rather than doing it at every comparison var value = prepareforcomparison(event.target.value); setfilter(value); document.getelementbyid("clearfilter").disabled = value.
length == 0; } function clearfilter() { document.getelementbyid("clearfilter").disabled = true; var filterelement = document.getelementbyid("filter"); filterelement.focus(); filterelement.value = ""; setfilter(""); } function setfilter(text) { filtertext = text; loadtable(); } ...
Multiple Rules - Archive of obsolete content
tically startswithmatch if a value starts with a specific string endswithmatch if a value ends with a specific string containsmatch if a value contains a substringto highlight results that contain a search term here is an example using the 'contains' operator: <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"> <assign var="?letters" expr="string-
length(@name) - 1"/> </query> <rule> <where subject="?name" rel="contains" value=" "/> <action> <label uri="?" value="?name has two names for a total
length of ?letters"/> </action> </rule> </template> </vbox> this example contains only one rule with a condition which checks for names that contain a space character, which has the effect of selecting only those pe...
...note the assign element in the example above, used to calculate the '?letters' variable from the
length of the name, minus one for the space character.
... <rule> <where subject="?name" rel="contains" value=" "/> <where subject="?letters" rel="less" value="15"/> <action> <label uri="?" value="?name has two names for a total
length of ?letters"/> </action> </rule> negating a condition you can reverse a where clause by using the negate attribute.
progressmeter - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a meter which can be used to display the progress of a
lengthy operation.
...this is used when the
length of time to complete an operation is not known beforehand.
...for instance, if no maximum value has been set, setting the value to "0" shows an empty bar, "100" shows a bar at full
length and "25" shows the first quarter of the bar.
application/http-index-format specification - Archive of obsolete content
there is no line
length limit.
... content-
length base 10 digits representing the size of the file in bytes.
...100: 300: ftp://test.netscape.com/u/montulli 100: 200: filename content-
length content-type file-type last-modified 201: foo.txt 512 text/plain file tue,%2015%20nov%201994%2008:12:31%20gmt 201: bar.html 9683 text/html file tue,%2025%20oct%201994%2008:12:31%20gmt 201: foobar 0 application/http-index-format directory tue,%2025%20oct%201994%2008:12:31%20gmt original document information author(s): christian biesinger last updated date: may 10, 2004 copy...
NPN_PostURL - Archive of obsolete content
len
length of the buffer buf.
... to post to a temporary file, set the flag file to true, the buffer buf to the path name string for a file, and len to the
length of the path string.
... to post data from a memory buffer, set the flag file to false, the buffer buf to the data to post, and len to the
length of buffer.
NPN_Write - Archive of obsolete content
len
length in bytes of the data specified by buf.
...npstream* stream; char* mydata = "<html><b>this is a message from my plug-in!</b></html>"; int32 my
length = strlen(mydata) + 1; /* create the stream.
...*/ err = npn_write(instance, stream, my
length, mydata); /* delete the stream.
-ms-hyphenate-limit-zone - Archive of obsolete content
<
length> a floating-point number, followed by a relative units designator, that indicates the width of the hyphenation zone.
... for more information about supported
length units, see css basic data types.
... formal syntax <percentage> | <
length> specifications not part of any specification.
-ms-wrap-margin - Archive of obsolete content
initial value0applies toexclusion elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values <
length> the margin size, a non-negative value.
... formal syntax <
length> specifications not part of any specification.
...this property can be set to any supported
length value.
E4X for templating - Archive of obsolete content
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 xmllist() constructor (<></>) may be useful to still be able to use an expression closure (i.e., without needing return statements and braces): {_if(elems.
length(), function () <> <markup/> <markup/> </>)} note that, while it is convenient to store such e4x in separate file templates (to be eval()d at a later time, taking into account security considerations, such as escaping with the above), e4x content using such functions can also be easily serialized inline (and then perhaps converted to the dom) as needed: var list = <>{_if(elems.
length(), function () <> <markup/> <markup/> </>)}</>.toxml...
..., h, lev) { var k, ret=<></>, it = 1; lev = lev || 0; if (typeof min === 'number') { if (typeof max !== 'number') { lev = h; h = arr; arr = max; max = min; min = 1; } } 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) ...
Accessing XML children - Archive of obsolete content
var element = <foo> <bar baz="1">red</bar> <bar baz="2">blue</bar> </foo>; var list = element.bar; list.
length(); // returns 2 list[0]; // the first bar element list[1]; // the second bar element notice further that this list is "live" in the sense that changes made to the list are reflected back in the element that the list originally came from.
...var a = <foo> some text <bar>not text</bar> more text </foo>; var list = a.text(); list.
length(); // returns 2 list[0]; // returns " some text " list[1]; // returns " more text " you can similarly access comment nodes: xml.ignorecomments = false; var a = <foo> some <!-- abc --> text </foo>; var comments = a.comments(); alert(comments[0]); // returns <!-- abc --> the * selector will return all child nodes in an xml list.
... var a = <foo> <bar/> <baz/> </foo>; var list = a.*; list.
length(); // returns 2 element attributes many xml elements have attributes with particular values assigned to them.
IDL - MDN Web Docs Glossary: Definitions of Web-related terms
for example, to set an <input> element's max
length to 42 using the content attribute, you have to call setattribute("max
length", "42") on that element.
... idl attributes are not always strings; for example, input.max
length is a number (a signed long).
... when using idl attributes, you read or set values of the desired type, so input.max
length is always going to return a number and when you set input.max
length ,it wants a number.
Beginner's guide to media queries - Learn web development
perhaps the line
lengths become far too long, or a boxed out sidebar gets squashed and hard to read.
... from this point, start to drag the responsive design mode view wider until you can see that the line
lengths are becoming quite long, and we have space for the navigation to display in a horizontal line.
...we'll use ems, as this will mean that if the user has increased their text size, the breakpoint will happen at a similar line-
length but wider viewport, than someone with a smaller text size.
Responsive design - Learn web development
if the user had a larger or smaller screen than the designer expected, results ranged from unwanted scrollbars to overly long line
lengths, and poor use of space.
...the liquid site resulted in a squashed design on smaller screens (as seen below) and unreadably long line
lengths on larger ones.
...for example, if the line
lengths become unreadably long as the screen size increases, or a box becomes squashed with two words on each line as it narrows.
Test your skills: Form validation - Learn web development
give the "user name" field a required
length of between 5 and 20 characters, the "phone number" field a maximum
length of 15 characters, and the "comment" field a maximum
length of 200 characters.
... remove the
length validation from the phone number field if it is present, and set it so that it accepts 10 digits — either 10 digits in a row, or a pattern of three digits, three digits, then four digits, separated by either spaces, dashes, or dots.
... make the input mandatory to fill in, and give it a minimum
length of 10 characters.
Advanced text formatting - Learn web development
function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.
length); textarea.value = front + text + back; caretpos = caretpos + text.
length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not t...
...function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.
length); textarea.value = front + text + back; caretpos = caretpos + text.
length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not t...
...function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.
length); textarea.value = front + text + back; caretpos = caretpos + text.
length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not t...
Getting started with HTML - Learn web development
ydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.
length); textarea.value = front + text + back; caretpos = caretpos + text.
length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not t...
...ydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.
length); textarea.value = front + text + back; caretpos = caretpos + text.
length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not t...
...ydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.
length); textarea.value = front + text + back; caretpos = caretpos + text.
length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not t...
Index - Learn web development
86 useful string methods article, beginner, codingscripting, javascript, learn, case, indexof, l10n:priority,
length, lower, replace, split, upper now that we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the
length of a text string, joining and splitting strings, substituting one character in a string for another, and more.
... 102 learn to style html using css beginner, css, codingscripting, debugging, landing, style, topic,
length, specificity cascading stylesheets — or css — is the first technology you should start learning after html.
... 114 css values and units beginner, css, function, image, learn, number, position, color,
length, percentage, units, values this has been a quick run through of the most common types of values and units you might encounter.
Video and Audio APIs - Learn web development
e / 60); let seconds = math.floor(media.currenttime - minutes * 60); let minutevalue; let secondvalue; if (minutes < 10) { minutevalue = '0' + minutes; } else { minutevalue = minutes; } if (seconds < 10) { secondvalue = '0' + seconds; } else { secondvalue = seconds; } let mediatime = minutevalue + ':' + secondvalue; timer.textcontent = mediatime; let bar
length = timerwrapper.clientwidth * (media.currenttime/media.duration); timerbar.style.width = bar
length + 'px'; } this is a fairly long function, so let's go through it step by step: first of all, we work out the number of minutes and seconds in the htmlmediaelement.currenttime value.
... the
length we should set the inner <div> to is worked out by first working out the width of the outer <div> (any element's clientwidth property will contain its
length), and then multiplying it by the htmlmediaelement.currenttime divided by the total htmlmediaelement.duration of the media.
... we set the width of the inner <div> to equal the calculated bar
length, plus "px", so it will be set to that number of pixels.
A first splash into JavaScript - Learn web development
guesssubmit.disabled = true; resetbutton = document.createelement('button'); resetbutton.textcontent = 'start new game'; document.body.append(resetbutton); resetbutton.addeventlistener('click', resetgame); } function resetgame() { guesscount = 1; const resetparas = document.queryselectorall('.resultparas p'); for(let i = 0 ; i < resetparas.
length ; i++) { resetparas[i].textcontent = ''; } resetbutton.parentnode.removechild(resetbutton); guessfield.disabled = false; guesssubmit.disabled = false; guessfield.value = ''; guessfield.focus(); lastresult.style.backgroundcolor = 'white'; randomnumber = math.floor(math.random() * 100) + 1; } </script> </body> </html> have a go at pl...
...add the following code, again to the bottom of your javascript: function resetgame() { guesscount = 1; const resetparas = document.queryselectorall('.resultparas p'); for (let i = 0 ; i < resetparas.
length ; i++) { resetparas[i].textcontent = ''; } resetbutton.parentnode.removechild(resetbutton); guessfield.disabled = false; guesssubmit.disabled = false; guessfield.value = ''; guessfield.focus(); lastresult.style.backgroundcolor = 'white'; randomnumber = math.floor(math.random() * 100) + 1; } this rather long block of code completely resets everything to how it was at the s...
... now let's look at the loop in our number guessing game — the following can be found inside the resetgame() function: const resetparas = document.queryselectorall('.resultparas p'); for (let i = 0 ; i < resetparas.
length ; i++) { resetparas[i].textcontent = ''; } this code creates a variable containing a list of all the paragraphs inside <div class="resultparas"> using the queryselectorall() method, then it loops through each one, removing the text content of each.
Dynamic behavior in Svelte: working with variables and props - Learn web development
create a <script> section at the top of src/components/todos.svelte and give it some content, as follows: <script> let todos = [ { id: 1, name: 'create a svelte starter app', completed: true }, { id: 2, name: 'create your first component', completed: true }, { id: 3, name: 'complete the rest of the tutorial', completed: false } ] let totaltodos = todos.
length let completedtodos = todos.filter(todo => todo.completed).
length </script> now let's do something with that information.
...in the following code they are assigned a value when the component is instantiated and the script is executed, but after that, their values are not modified: let totaltodos = todos.
length let completedtodos = todos.filter(todo => todo.completed).
length we could recalculate them after toggling and removing todos, but there's an easier way to do it.
... update your totaltodos and completedtodos variable definitions inside src/components/todos.svelte to look like so: $: totaltodos = todos.
length $: completedtodos = todos.filter(todo => todo.completed).
length if you check your app now, you'll see that the heading's numbers are updated when todos are completed or deleted.
Accessibility/LiveRegionDevGuide
the event.any_data field holds the entire text string while event.detail1 is the start index while event.detail2 is the text string
length.
...when atomic is set to "false", the start index and end index/run
length are used as given.
...in this case the start index is 0 and the end index/run
length is the
length of the text - 1.
Creating Sandboxed HTTP Connections
ener(callbackfunc); gchannel.notificationcallbacks = listener; gchannel.asyncopen(listener, null); function streamlistener(acallbackfunc) { this.mcallbackfunc = acallbackfunc; } streamlistener.prototype = { mdata: "", // nsistreamlistener onstartrequest: function (arequest, acontext) { this.mdata = ""; }, ondataavailable: function (arequest, acontext, astream, asourceoffset, a
length) { var scriptableinputstream = components.classes["@mozilla.org/scriptableinputstream;1"] .createinstance(components.interfaces.nsiscriptableinputstream); scriptableinputstream.init(astream); this.mdata += scriptableinputstream.read(a
length); }, onstoprequest: function (arequest, acontext, astatus) { if (components.issuccesscode(astatus)) { // request was...
...the first argument is the post data as a string, while the second argument is the
length of that data.
... var inputstream = components.classes["@mozilla.org/io/string-input-stream;1"] .createinstance(components.interfaces.nsistringinputstream); inputstream.setdata(postdata, postdata.
length); next, the nsichannel is qied to an nsiuploadchannel.
NSS Sample Code sample6
*/ 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.
... since we're using aes in this example, we're specifying * one of the valid keysizes (16, 24, 32) */ key = pk11_tokenkeygen(slot, ciphermech, 0, 32 /*keysize*/, &keyiditem, pr_true, 0); if (key == null) { fprintf(stderr, "pk11_tokenkeygen failed (err %d)\n", pr_geterror()); pk11_freeslot(slot); return; } fprintf(stderr, "key
length of generated key is %d\n", pk11_getkey
length(key)); fprintf(stderr, "mechanism of key is %d (asked for %d)\n", pk11_getmechanism(key), ciphermech); pk11_freesymkey(key); key = pk11_findfixedkey(slot, ciphermech, &keyiditem, 0); if (key == null) { fprintf(stderr, "pk11_findfixedkey failed (err %d)\n", pr_geterror()); pk11_freeslot(slot); ret...
...urn; } fprintf(stderr, "found key!\n"); fprintf(stderr, "key
length of generated key is %d\n", pk11_getkey
length(key)); fprintf(stderr, "mechanism of key is %d (asked for %d)\n", pk11_getmechanism(key), ciphermech); pk11_freesymkey(key); pk11_freeslot(slot); } char *passwdcb(pk11slotinfo *info, prbool retry, void *arg) { if (!retry) return pl_strdup("test"); else return null; } ...
JIT Optimization Outcomes
for example, if the array has sparse indexes, or has indexes that overflow the array's
length, the optimization strategy may fail.
... icoptstub_genericsuccess icgetpropstub_readslot icgetpropstub_callgetter icgetpropstub_array
length icgetpropstub_unboxedread icgetpropstub_unboxedreadexpando icgetpropstub_unboxedarray
length icgetpropstub_typedarray
length icgetpropstub_domproxyshadowed icgetpropstub_domproxyunshadowed icgetpropstub_genericproxy icgetpropstub_arguments
length icsetpropstub_slot icsetpropstub_genericproxy icsetpropstub_domproxyshadowed icsetpropstub_domproxyunshadowed icsetpropstub_callsetter icsetp...
... cantinlinegeneric cantinlineclassconstructor cantinlineexceededdepth cantinlineexceededtotalbytecode
length cantinlinebigcaller cantinlinebigcallee cantinlinebigcalleeinlinedbytecode
length cantinlinenothot cantinlinenotindispatch cantinlinenativebadtype cantinlinenotarget unable to inline function call.
JS::CallArgs
methods inherited from js::callargsbase method description unsigned
length() const returns the number of arguments..
... if (args.
length() == 0 || !args[0].isnumber()) { args.rval().setint32(0); return true; } // access to the callee must occur before accessing/setting // the return value.
... handlevalue thisv = rec.thisv(); args.rval().set(js::numbervalue(args.
length() * args[0].tonumber())); // callee() and calleev() will now assert.
JS::CompileOffThread
syntax bool js::cancompileoffthread(jscontext *cx, const js::readonlycompileoptions &options, size_t
length); bool js::compileoffthread(jscontext *cx, const js::readonlycompileoptions &options, const char16_t *chars, size_t
length, js::offthreadcompilecallback callback, void *callbackdata); jsscript * js::finishoffthreadscript(jscontext *maybecx, jsruntime *rt, void *token); typedef void (*js::offthreadcompilecallback)(void *token, void *callbackdata); name type description cx / maybe jscontext * pointer to a js context from which to derive runtime information.
...
length size_t the
length of chars or bytes, in characters.
...
length indicates the size of the text version of the script in characters.
JS::DeflateStringToUTF8Buffer
the caller must either ensure dst has enough space to encode the entire string, or pass the
length of the buffer as dstlenp.
...this can be less than the
length of the string, if the buffer is exhausted before the string is fully encoded.
... examples char16_t uchars[] = { 0xd83e, 0xdd8a, 0 }; js::rootedstring str(cx, js_newucstringcopyn(cx, uchars, 2)); if (!str) return false; js::rooted<jsflatstring*> flatstr(cx, js_flattenstring(cx, str)); if (!flatstr) return false; size_t
length = js::getdeflatedutf8string
length(flatstr); char* buffer = static_cast<char*>(js_malloc(cx,
length + 1)); if (!buffer) return false; js::deflatestringtoutf8buffer(flatstr, mozilla::rangedptr<char>(buffer,
length)); buffer[
length] = '\0'; printf("utf8: [%s]\n", buffer); js_free(cx, buffer); see also js::getdeflatedutf8string
length bug 1034627 bug 1271014 -- added dstlenp and numcharsp ...
JS::HandleValueArray
:handlevaluearray(const js::callargs& args); js::handlevaluearray::frommarkedlocation(size_t len, const js::value *elements); js::handlevaluearray::subarray(const js::handlevaluearray& values, size_t startindex, size_t len); js::handlevaluearray::empty(); name type description value js::rootedvalue & an element of newly created 1-
length array.
... len size_t (frommarkedlocation only)
length of elements array or (subarray only)
length of sub array of values.
... methods method description size_t
length() const returns the
length of the array.
JS_CompileFunction
syntax jsfunction * js_compilefunction(jscontext *cx, jsobject *obj, const char *name, unsigned int nargs, const char **argnames, const char *body, size_t
length, const char *filename, unsigned int lineno); jsfunction * js_compileucfunction(jscontext *cx, jsobject *obj, const char *name, unsigned int nargs, const char **argnames, const jschar *body, size_t
length, const char *filename, unsigned int lineno); name type description cx jscontext * the context in which to compile the function.
...
length size_t the
length, in characters, of body.
...
length is the
length of the source code in characters.
JS_CompileFunctionForPrincipals
syntax jsfunction * js_compilefunctionforprincipals(jscontext *cx, jsobject *obj, jsprincipals *principals, const char *name, unsigned int nargs, const char **argnames, const char *body, size_t
length, const char *filename, unsigned int lineno); jsfunction * js_compileucfunctionforprincipals(jscontext *cx, jsobject *obj, jsprincipals *principals, const char *name, unsigned int nargs, const char **argnames, const jschar *body, size_t
length, const char *filename, unsigned int lineno); name type description cx jscontext * the context in which to compi...
...
length size_t the
length, in characters, of body.
...
length is the
length of the string in characters.
JS_EvaluateScript
syntax jsbool js_evaluatescript(jscontext *cx, jsobject *obj, const char *src, unsigned int
length, const char *filename, unsigned int lineno, jsval *rval); jsbool js_evaluateucscript(jscontext *cx, jsobject *obj, const jschar *src, unsigned int
length, const char *filename, unsigned int lineno, jsval *rval); name type description cx jscontext * the context in which to run the script.
...
length unsigned int the
length of src, in characters.
...
length indicates the size of the text version of the script in characters.
JS_IsIdentifier
syntax bool js_isidentifier(jscontext *cx, js::handlestring str, bool *isidentifier); bool js_isidentifier(const char16_t *chars, size_t
length); // added in spidermonkey 38 name type description cx jscontext * pointer to a js context from which to derive runtime information.
...
length size_t the
length of chars.
... js_isidentifier which takes chars and
length is infallible, so just returns whether the chars are an identifier.
JS_NewDependentString
syntax jsstring * js_newdependentstring(jscontext *cx, js::handlestring str, size_t start, size_t
length); name type description cx jscontext * the context in which to create the new string.
...
length size_t
length of the substring, in characters.
...the new string contains the same characters as if it were created with the javascript method str.substr(start,
length).
SpiderMonkey 1.8.5
applications must use js_getstringcharsand
length or js_encodestring/js_free and check for errors.
...js_forget_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_getinternedstringcharsand
length js_getownpropertydescriptor js_getpropertyattrsgetterandsetterbyid js_getpropertybyid js_getpropertybyiddefault js_getpropertydefault js_getpropertydescriptorbyid js_getruntimesecuritycallbacks js_getsecuritycallbacks js_getstringcharsand
length js_getstringcharsz js_getstringcharszand
length js_getstringencoding
length js_haspropertybyid js_initctypesclass js_internjsstring js_iscon...
...additionally, js_newstring, js_getstringbytes, and js_getstringchars were removed, replaced by fallible interfaces like js_getstringcharszand
length and js_encodestringtobuffer (not an exhaustive list).
Using XPCOM Components
component in javascript // xpconnect to cookiemanager // get the cookie manager component in javascript var cmgr = components.classes["@mozilla.org/cookiemanager;1"] .getservice(); cmgr = cmgr.queryinterface(components.interfaces.nsicookiemanager); // called as part of a largerdeleteallcookies() function function finalizecookiedeletions() { for (var c=0; c<deletedcookies.
length; c++) { cmgr.remove(deletedcookies[c].host, deletedcookies[c].name, deletedcookies[c].path); } deletedcookies.
length = 0; } connecting to components from the interface the mozilla user interface uses javascript that has been given access to xpcom components in the application core with a technology called xpconnect.
...lt rv = ns_getservicemanager(getter_addrefs(servman)); if (ns_failed(rv)) return -1; nscomptr<nsicookiemanager> cookiemanager; rv = servman->getservicebycontractid("@mozilla.org/cookiemanager", ns_get_iid(nsicookiemanager), getter_addrefs(cookiemanager)); if (ns_failed(rv)) return -1; pruint32 len; deletedcookies->get
length(&len); for (int c=0; c<len; c++) cookiemanager->remove(deletedcookies[c].host, deletedcookies[c].name, deletedcookies[c].path, pr_false); xxx: in the original document, there were only the first three parameters to the |remove| call.
...*/ } function finalizecookiedeletions() { for (var c=0; c<deletedcookies.
length; c++) { cmgr.remove(deletedcookies[c].host, deletedcookies[c].name, deletedcookies[c].path, false); } deletedcookies.
length = 0; } xxx: in the original document, there were only the first three parameters to the |remove| call.
Observer Notifications
topic data description idle the
length of time the user has been idle, in milliseconds.
... idle-daily the
length of time the user has been idle, in milliseconds.
... back the
length of time the user has been idle, in milliseconds.
Append
void append( const char_type* adata, size_type adata
length = pr_uint32_max ); parameters adata [in] a raw character array to append to this string.
... adata
length [in] the
length of adata, measured in storage units.
... remarks if insufficient memory is available to perform the assignment, then the string's internal buffer will point to a static empty (zero-
length) buffer.
Assign
void assign( const char_type* adata, size_type adata
length = pr_uint32_max ); parameters adata [in] a raw character array to copy into this string.
... adata
length [in] the
length of adata, measured in storage units.
... remarks if insufficient memory is available to perform the assignment, then the string's internal buffer will point to a static empty (zero-
length) buffer.
Insert
void insert( const char_type* adata, index_type aposition, size_type adata
length = pr_uint32_max ); parameters adata [in] a raw character array to append to this string.
...adata
length [in] the
length of adata, measured in storage units.
... remarks if insufficient memory is available to perform the assignment, then the string's internal buffer will point to a static empty (zero-
length) buffer.
nsACString
length the
length function returns the number of storage units in the string's internal buffer (not including the null-terminator if present).
...thus, the
length of the data contained in the nsacstring should be determined by calling the nsacstring::
length() method.
... see also nsacstring::
length() ns_cstringgetdata nsembedcstring ...
Append
void append( const char_type* adata, size_type adata
length = pr_uint32_max ); parameters adata [in] a raw character array to append to this string.
... adata
length [in] the
length of adata, measured in storage units.
... remarks if insufficient memory is available to perform the assignment, then the string's internal buffer will point to a static empty (zero-
length) buffer.
Assign
void assign( const char_type* adata, size_type adata
length = pr_uint32_max ); parameters adata [in] a raw character array to copy into this string.
... adata
length [in] the
length of adata, measured in storage units.
... remarks if insufficient memory is available to perform the assignment, then the string's internal buffer will point to a static empty (zero-
length) buffer.
Insert
void insert( const char_type* adata, index_type aposition, size_type adata
length = pr_uint32_max ); parameters adata [in] a raw character array to append to this string.
...adata
length [in] the
length of adata, measured in storage units.
... remarks if insufficient memory is available to perform the assignment, then the string's internal buffer will point to a static empty (zero-
length) buffer.
nsAString
length the
length function returns the number of storage units in the string's internal buffer (not including the null-terminator if present).
...thus, the
length of the data contained in the nsastring should be determined by calling the nsastring::
length method.
...see also nsastring::
length, endreading, ns_stringgetdata, nsembedstring ...
nsEmbedCString
explicit nsembedcstring( const char_type* adata, size_type adata
length = pr_uint32_max ); parameters adata [in] a raw character array to copy into this string.
... adata
length [in] the
length of adata, measured in storage units.
... remarks the default constructor sets the string's internal buffer to point to a static empty (zero-
length) buffer.
nsEmbedString
explicit nsembedstring( const char_type* adata, size_type adata
length = pr_uint32_max ); parameters adata [in] a raw character array to copy into this string.
... adata
length [in] the
length of adata, measured in storage units.
... remarks the default constructor sets the string's internal buffer to point to a static empty (zero-
length) buffer.
mozIStorageAggregateFunction
var standarddeviationfunc = { _numbers: [], onstep: function(aarguments) { this._numbers.push(aarguments.getint32(0)); }, onfinal: function() { let total = 0; let i
length = 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 = []; return math.sqrt(total / i
length); } }; // now, register our...
...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[i] - mean; data[i] = value * value; } total = 0; for (pruint32 i = 0; i < data.
length(); i++) total += data[i]; nscomptr<nsiwritablevariant> result = do_createinsta...
...nce("@mozilla.org/variant;1"); ns_ensure_true(result, ns_error_out_of_memory); rv = result->setasdouble(sqrt(double(total) / double(data.
length()))); ns_ensure_success(rv, rv); ns_addref(*_result = result); return ns_ok; } private: nstarray<print32> mnumbers; }; // now, register our function with the database connection.
mozITXTToHTMLConv
1.1) inherits from nsistreamconverter implemented by @mozilla.org/txttohtmlconv;1 as a service: var ios = components.classes["@mozilla.org/txttohtmlconv;1"] .getservice(components.interfaces.mozitxttohtmlconv); method overview unsigned long citeleveltxt(in wstring line, out unsigned long loglinestart) void findurlinplaintext(in wstring text, in long a
length, in long apos, out long astartpos, out long aendpos) wstring scanhtml(in wstring text, in unsigned long whattodo) wstring scantxt(in wstring text, in unsigned long whattodo) constants conversion control attributes these bits allow you to control the conversion of text into html.
... void findurlinplaintext( in wstring text, in long a
length, in long apos, out long astartpos, out long aendpos ); parameters text the string to scan for the presence of a url.
... a
length the
length of the buffer to scan.
nsIAccessibleTable
void getselectedcellindices( out unsigned long cellsarraysize, [retval, array, size_is(cellsarraysize)] out long cellsarray ); parameters cellsarraysize
length of array.
... void getselectedcolumnindices( out unsigned long columnsarraysize, [retval, array, size_is(columnsarraysize)] out long columnsarray ); parameters columnsarraysize
length of array.
... void getselectedrowindices( out unsigned long rowsarraysize, [retval, array, size_is(rowsarraysize)] out long rowsarray ); parameters rowsarraysize
length of array.
nsIArray
indexes are zero-based, such that the last element in the array is stored at the index
length-1.
...method overview nsisimpleenumerator enumerate(); unsigned long indexof(in unsigned long startindex, in nsisupports element); void queryelementat(in unsigned long index, in nsiidref uuid, [iid_is(uuid), retval] out nsqiresult result); attributes attribute type description
length unsigned long the number of elements in the array.
... exceptions thrown ns_error_illegal_value when index >
length-1.
nsIBrowserHistory
in long long alastvisited); obsolete since gecko 15.0 void markpageasfollowedlink(in nsiuri auri); obsolete since gecko 22.0 void markpageastyped(in nsiuri auri); obsolete since gecko 22.0 void registeropenpage(in nsiuri auri); obsolete since gecko 9.0 void removeallpages(); void removepage(in nsiuri auri); void removepages([array, size_is(a
length)] in nsiuri auris, in unsigned long a
length, in boolean adobatchnotify); void removepagesbytimeframe(in long long abegintime, in long long aendtime); void removepagesfromhost(in autf8string ahost, in boolean aentiredomain); void removevisitsbytimeframe(in long long abegintime, in long long aendtime); void unregisteropenpage(in nsiuri auri); obsolete since g...
... void removepages( [array, size_is(a
length)] in nsiuri auris, in unsigned long a
length, in boolean adobatchnotify /* parameter removed in gecko 9.0 */ ); parameters auris an array of page uris to be removed from history.
... a
length the number of pages listed in the auris array.
nsIChannel
content
length int64_t the
length of the data associated with the channel if available.
... a value of -1 indicates that the content
length is unknown.
...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.
nsIClipboard
rits 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(a
length)] in string aflavorlist, in unsigned long a
length, 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 typical co...
... boolean hasdatamatchingflavors( [array, size_is(a
length)] in string aflavorlist, in unsigned long a
length, in long awhichclipboard ); parameters aflavorlist an array of ascii strings.
... a
length the
length of the aflavorlist.
nsIContentViewManager
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 a
length, [retval, array, size_is(a
length)] out nsicontentview aresult); attributes attribute type description rootcontentview nsicontentview the root content view.
... void getcontentviewsin( in float axpx, in float aypx, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, out unsigned long a
length, optional [retval, array, size_is(a
length)] out nsicontentview aresult ); parameters axpx the x coordinate of the anchor point of the rectangle, in css pixels.
... a
length optional if specified, on return this parameter indicates the number of nsicontentview objects returned in the aresult array.
nsIHapticFeedback
.getservice(components.interfaces.nsihapticfeedback); once you have the service, you can initiate haptic feedback (that is, cause the device to vibrate, if it's supported) by calling performsimpleaction(): hapticfeedback.performsimpleaction(components.interfaces.nsihapticfeedback.longpress); method overview void performsimpleaction(in long islongpress); constants press
length constants constant value description shortpress 0 specify as the action type to perform a short vibration.
... void performsimpleaction( in long islongpress ); parameters islongpress the press
length; this will determine how long the vibration should last.
... see press
length constants for permitted values.
nsIMsgDBHdr
len the
length of the returned collation key.
... len the
length of the returned collation key.
... len the
length of the returned collation key.
nsIPrefLocalizedString
inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void setdatawith
length(in unsigned long
length, [size_is(
length)] in wstring data); wstring tostring(); attributes attribute type description data wstring provides access to string data stored in this property.
... methods setdatawith
length() used to set the contents of this object.
... void setdatawith
length( in unsigned long
length, [size_is(
length)] in wstring data ); parameters
length the
length of the string.
nsIRandomGenerator
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void generaterandombytes(in unsigned long a
length, [retval, array, size_is(a
length)] out octet abuffer); methods generaterandombytes() generates the specified amount of random bytes.
... void generaterandombytes( in unsigned long a
length, [retval, array, size_is(a
length)] out octet abuffer ); parameters a
length the
length of the data to generate.
... abuffer a buffer that contains random bytes of size a
length.
nsITaggingService
ser/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 atags); attributes attribute type description alltags nsivariant retrieves all tags used to tag uris in the data-base (sorted by name).
...nsivariant gettagsforuri( in nsiuri auri, [optional] out unsigned long
length, [retval, array, size_is(
length)] out wstring atags ); parameters auri the uri for which to return the tags.
...
length optional on return, contains the number of tags returned in atags.
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 getpage
length(); void ensurerowisvisible(in long index); void ensurecellisvisible(in long row, in nsitreecolumn col); void scrolltorow(in long index); void scrollbylines(in long numlines); void scrollbypages(in long numpages); void scrolltocell(in long row, in nsitreecolumn col); void scrolltocolumn(in nsitreecolumn col); void scrolltohori...
... long getlastvisiblerow(); getpage
length() gets the number of possible visible rows.
... long getpage
length(); ensurerowisvisible() ensures that a row at a given index is visible.
nsIUploadChannel2
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 void explicitsetuploadstream(in nsiinputstream astream, in acstring acontenttype, in long long acontent
length, in acstring amethod, in boolean astreamhasheaders); methods explicitsetuploadstream() sets a stream to be uploaded by this channel with the specified content-type and content-
length header values.
... void explicitsetuploadstream( in nsiinputstream astream, in acstring acontenttype, in long long acontent
length, in acstring amethod, in boolean astreamhasheaders ); parameters astream the stream to be uploaded by this channel.
...acontent
length a value of -1 indicates that the
length of the stream should be determined by calling the stream's available method.
NS_CStringContainerInit2
#include "nsstringapi.h" nsresult ns_cstringcontainerinit2( nscstringcontainer& acontainer, const char* adata = nsnull, pruint32 adata
length = pr_uint32_max, pruint32 aflags = 0 ); parameters acontainer [in] the nscstringcontainer instance to initialize.
... adata
length [in] an optional parameter that specifies the
length of the array pointed to by adata.
... pass pr_uint32_max to indicate that adata's
length may be determined by scanning the string for a terminating null.
NS_CStringCutData
#include "nsstringapi.h" nsresult ns_cstringcutdata( nsacstring& astring, pruint32 acutstart, pruint32 acut
length ); parameters astring [in] a nsacstring instance to be modified.
...acut
length [in] the
length of the section to remove, measured in storage units.
... pass pr_uint32_max to specify the
length from acutstart to the end of the string.
NS_CStringSetDataRange
#include "nsstringapi.h" nsresult ns_cstringsetdatarange( nsacstring& astring, pruint32 acutstart, pruint32 acut
length, const char* adata, pruint32 adata
length = pr_uint32_max ); parameters astring [in] a nsacstring instance to modify.
... acut
length [in] the
length of the section to replace, measured in storage units.
... adata
length [in] the
length of adata, measured in storage units.
NS_StringCutData
#include "nsstringapi.h" nsresult ns_stringcutdata( nsastring& astring, pruint32 acutstart, pruint32 acut
length ); parameters astring [in] a nsastring instance to be modified.
... acut
length [in] the
length of the section to remove, measured in storage units.
... pass pr_uint32_max to specify the
length from acutstart to the end of the string.
NS_StringSetDataRange
#include "nsstringapi.h" nsresult ns_stringsetdatarange( nsastring& astring, pruint32 acutstart, pruint32 acut
length, const prunichar* adata, pruint32 adata
length = pr_uint32_max ); parameters astring [in] a nsastring instance to modify.
...acut
length [in] the
length of the section to replace, measured in storage units.
...adata
length [in] the
length of adata, measured in storage units.
Type conversion
e' 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 target 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 ...
...e source converted value ctypes.char.array(n) js string (only if utf8 representation fits to the array) null-terminated utf8 string ctypes.signed_char.array(n) ctypes.unsigned_char.array(n) ctypes.char16_t.array(n) js string (only if fits to the array) null-terminated utf16 string any array types js array (only if array
length is same) convert each element implicitly any array types any arraybuffer object (only if array
length is same in bytes) copy data ctypes.int8_t.array(n) int8array (only if array
length is same in bytes) ctypes.uint8_t.array(n) uint8array (only if array
length is same in bytes) uintclamped8array (only if array
length is same in byt...
...es) ctypes.int16_t.array(n) int16array (only if array
length is same in bytes) ctypes.uint16_t.array(n) uint16array (only if array
length is same in bytes) ctypes.int32_t.array(n) int32array (only if array
length is same in bytes) ctypes.uint32_t.array(n) uint32array (only if array
length is same in bytes) ctypes.float32_t.array(n) float32array (only if array
length is same in bytes) ctypes.float64_t.array(n) float64array (only if array
length is same in bytes) var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.int16_t.array(5) } ])(); mystruct.v = [1, 2, 3, 4, 5]; console.log(mystruct.v.tostring()); // 'ctypes.int16_t.array(5)([0, 0, 0, 0, 0])' mystruct.v = int16array([1, 2, 3...
Using js-ctypes
note: this example will not work on 64bit os x, see below for core foundation for 64bit os x /* build a str255 ("pascal style") string from the passed-in string */ function makestr(str) { return string.fromcharcode(str.
length) + str; } components.utils.import("resource://gre/modules/ctypes.jsm"); var carbon = ctypes.open("/system/library/frameworks/carbon.framework/carbon"); stdalert = carbon.declare("standardalert", /* function name */ ctypes.default_abi, /* abi type */ ctypes.int16_t, /* return type */ ctypes.int16_t, ...
... ctypes.int16_t); /* item hit */ var hit = 0; var msgerr = makestr("carbon says..."); var msgexp = makestr("we just called the standardalert carbon function from javascript!"); var err = stdalert(1, msgerr, msgexp, 0, hit); carbon.close(); the makestr() function is a utility routine that takes as input a standard javascript string and returns a carbon-style "pascal" string, which is a
length byte followed by the characters of the string itself.
...fstringcreatewithcharacters = libcf.declare('cfstringcreatewithcharacters', ctypes.default_abi, cfstringref, // return cfallocatorref, // alloc unichar.ptr, // *chars cfindex // numchars ); // helper functions function makecfstr(jsstr) { // js str is just a string // returns a cfstr that must be released with cfrelease when done return cfstringcreatewithcharacters(null, jsstr, jsstr.
length); } // main var mycfstrs = { head: makecfstr('core foundation says...'), body: makecfstr('we just called the equivalent of the "standardalert carbon function" for 64bit osx from javascript!') }; var rez = cfusernotificationdisplaynotice(0, kcfusernotificationcautionalertlevel, null, null, null, mycfstrs.head, mycfstrs.body, null); console.info('rez:', rez, rez.tostring(), uneval(rez)); // cfu...
AesCtrParams - Web APIs
the rightmost
length bits of this block are used for the counter, and the rest is used for the nonce.
... for example, if
length is set to 64, then the first half of counter is the nonce and the second half is used for the counter.
...
length a number — the number of bits in the counter block that are used for the actual counter.
AesGcmParams - Web APIs
the bit
length of additionaldata must be ≤ 264-1.
... tag
length optional a number.
... tag
length is optional and defaults to 128 if it is not specified.
AnalyserNode.frequencyBinCount - Web APIs
syntax var array
length = 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 buffer
length = analyser.frequencybincount; console.log(buffer
length); var dataarray = new uint8array(buffer
length); 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 / buffer
length) * 2.5 - 1; var bar...
...height; var x = 0; for(var i = 0; i < buffer
length; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',50,50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight/2); x += barwidth; } }; draw(); specifications specification status comment web audio apithe definition of 'frequencybincount' in that specification.
AnalyserNode.getByteFrequencyData() - Web APIs
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 buffer
length = analyser.frequencybincount; console.log(buffer
length); var dataarray = new uint8array(buffer
length); 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 / buffer
length) * 2.5; var barheig...
...ht; var x = 0; for(var i = 0; i < buffer
length; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',50,50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight/2); x += barwidth + 1; } }; draw(); parameters array the uint8array that the frequency domain data will be copied to.
AnalyserNode.getByteTimeDomainData() - Web APIs
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 buffer
length = analyser.fftsize; const dataarray = new uint8array(buffer
length); 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; canvasct...
...x.strokestyle = 'rgb(0, 0, 0)'; const slicewidth = width * 1.0 / buffer
length; let x = 0; canvasctx.beginpath(); for(var i = 0; i < buffer
length; 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
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 buffer
length = analyser.fftsize; console.log(buffer
length); var dataarray = new float32array(buffer
length); 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 / buffer
length; var x = 0; for(var i = 0; i < buffer
length; i++) { var v = dataarray[i] * 200.0; var y = height/2 + v; if(i === 0) { canvasctx.moveto(x, y); } else { canvasctx.lineto(x, y); } x += slicewidth; } canvasctx.lineto(canvas.width, canvas.height/2); canvasctx.stroke(); }; draw(); parameters array the float32array that the time domain data will be copied to.
AudioWorkletProcessor.process - Web APIs
the number of inputs and thus the
length of that array is fixed at the construction of the node (see audioworkletnodeoptions).
... class whitenoiseprocessor extends audioworkletprocessor { process (inputs, outputs, parameters) { // take the first output const output = outputs[0] // fill each channel with random values multiplied by gain output.foreach(channel => { for (let i = 0; i < channel.
length; i++) { // generate random value for each sample // math.random range is [0; 1); we need [-1; 1] // this won't include exact 1 but is fine for now for simplicity channel[i] = (math.random() * 2 - 1) * // the array can contain 1 or 128 values // depending on if the automation is present // and if the automation rate is k-rate or a-rate ...
... (parameters['customgain'].
length > 1 ?
DOMTokenList.item() - Web APIs
it returns null if the number is greater than or equal to the
length of the list.
...we then retrieve the last item in the list using item(tokenlist.
length - 1), and write it into the <span>'s node.textcontent.
... first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let item = classes.item(classes.
length-1); span.textcontent = item; the output looks like this: specifications specification status comment domthe definition of 'item()' in that specification.
DataTransferItemList.remove() - Web APIs
if the index is less than zero or greater than one less than the
length of the list, the list will not be changed.
...paragraph ...</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 target node data[i].getasstring(function (s){ ev.target.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){ cons...
...drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; for (var i = 0; i < datalist.
length; i++) { datalist.remove(i); } // 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 elem...
Document.getElementsByTagNameNS() - Web APIs
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>getelementsbytagnamens example</title> <script type="text/javascript"> function getallparaelems() { var allparas = document.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "p"); var num = allparas.
length; alert("there are " + num + " <p> elements in this document"); } function div1paraelems() { var div1 = document.getelementbyid("div1") var div1paras = div1.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "p"); var num = div1paras.
length; alert("there are " + num + " <p> elements in div1 element"); } function div2paraelems() { var div2 = document.getelementbyi...
...d("div2") var div2paras = div2.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "p"); var num = div2paras.
length; alert("there are " + num + " <p> elements in div2 element"); } </script> </head> <body style="border: solid green 3px"> <p>some outer text</p> <p>some outer text</p> <div id="div1" style="border: solid blue 3px"> <p>some div1 text</p> <p>some div1 text</p> <p>some div1 text</p> <div id="div2" style="border: solid red 3px"> <p>some div2 text</p> <p>some div2 text</p> </div> </div> <p>some outer text</p> <p>some outer text</p> <button onclick="getallparaelems();"> show all p elements in document</button><br /> <button onclick="div1paraelems();"> show all p elements in div1 element</button><br /> <button onclick="div2paraelem...
...ferent api), such as this wrapper class.) function getelementsbytagnamenswrapper (ns, elname, doc, context) { if (!doc) { doc = document; } if (!context) { context = doc; } var result = doc.evaluate('//*[local-name()="'+elname+'" and namespace-uri() = "'+ns+'"]', context, null, xpathresult.ordered_node_snapshot_type, null); var a = []; for(var i = 0; i < result.snapshot
length; i++) { a[i] = result.snapshotitem(i); } return a; } specifications specification status comment domthe definition of 'document.getelementsbytagnamens' in that specification.
Document.querySelectorAll() - Web APIs
if the array is empty (that is, its
length property is 0), then no matches were found.
... <div class="outer"> <div class="select"> <div class="inner"> </div> </div> </div> javascript var select = document.queryselector('.select'); var inner = select.queryselectorall('.outer .inner'); inner.
length; // 1, not 0!
... the :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the base element: var select = document.queryselector('.select'); var inner = select.queryselectorall(':scope .outer .inner'); inner.
length; // 0 specifications specification status comment domthe definition of 'parentnode.queryselectorall()' in that specification.
Examples of web and XML development using the DOM - Web APIs
octype 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 + ", style.height=" + arrimages[i].style.height + ", style.width=" + arrimages[i].style.width + "<\/li>"; } strhtml += "<\/ul>"; objoutput.innerhtml = strhtml; } </script> </head> <body onload="init();"> <p>image 1: n...
... var ss = document.stylesheets; for(var i = 0; i < ss.
length; i++) { for(var j = 0; j < ss[i].cssrules.
length; j++) { dump( ss[i].cssrules[j].selectortext + "\n" ); } } for a document with a single stylesheet in which the following three rules are defined: body { background-color: darkblue; } p { font-face: arial; font-size: 10pt; margin-left: .125in; } #lumpy { display: none; } this script outputs the following: body p #lumpy example 5: eve...
... { function addcell(row, text) { var cell = row.insertcell(-1); cell.appendchild(document.createtextnode(text)); } var e = e || window.event; document.getelementbyid('eventtype').innerhtml = e.type; var table = document.createelement('table'); var thead = table.createthead(); var row = thead.insertrow(-1); var lablelist = ['#', 'property', 'value']; var len = lablelist.
length; for (var i=0; i<len; i++) { addcell(row, lablelist[i]); } var tbody = document.createelement('tbody'); table.appendchild(tbody); for (var p in e) { row = tbody.insertrow(-1); row.classname = (row.rowindex % 2)?
Element.querySelectorAll() - Web APIs
if the array is empty (that is, its
length property is 0), then no matches were found.
... <div class="outer"> <div class="select"> <div class="inner"> </div> </div> </div> javascript var select = document.queryselector('.select'); var inner = select.queryselectorall('.outer .inner'); inner.
length; // 1, not 0!
... the :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the base element: var select = document.queryselector('.select'); var inner = select.queryselectorall(':scope .outer .inner'); inner.
length; // 0 specifications specification status comment domthe definition of 'parentnode.queryselectorall()' in that specification.
EventTarget.addEventListener() - Web APIs
var e=new event(); e.srcelement=window; wrapper2(e); } } else { this.attachevent("on"+type,wrapper); eventlisteners.push({object:this,type:type,listener:listener,wrapper:wrapper}); } }; var removeeventlistener=function(type,listener /*, usecapture (will be ignored) */) { var counter=0; while (counter<eventlisteners.
length) { var eventlistener=eventlisteners[counter]; if (eventlistener.object==this && eventlistener.type==type && eventlistener.listener==listener) { if (type=="domcontentloaded") { this.detachevent("onreadystatechange",eventlistener.wrapper); } else { this.detachevent("on"+type,eventlistener.wrapper); } eventlisteners.spli...
... memory issues const els = document.getelementsbytagname('*'); // case 1 for(let i=0 ; i < els.
length; i++){ els[i].addeventlistener("click", function(e){/*do something*/}, false); } // case 2 function processevent(e){ /* do something */ } for(let i=0 ; i < els.
length; i++){ els[i].addeventlistener("click", processevent, false); } in the first case above, a new (anonymous) handler function is created with each iteration of the loop.
... // for illustration only: note "mistake" of [j] for [i] thus causing desired events to all attach to same element // case 3 for(let i=0, j=0 ; i<els.
length ; i++){ /* do lots of stuff with j */ els[j].addeventlistener("click", processevent = function(e){/*do something*/}, false); } // case 4 for(let i=0, j=0 ; i<els.
length ; i++){ /* do lots of stuff with j */ function processevent(e){/*do something*/}; els[j].addeventlistener("click", processevent, false); } improving scrolling performance with passive listeners according to the specif...
HTMLFormElement.elements - Web APIs
independently, you can obtain just the number of form controls using the
length 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.
... 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 ...
HTMLFormElement - Web APIs
htmlformelement.
lengthread only a long reflecting the number of controls in the form.
... elements that are considered form controls 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.
...info</button> <button type="button" onclick="setforminfo(this.form);">set</button> <button type="reset">reset</button> </p> <textarea id="form-info" rows="15" cols="20"></textarea> </form> <script> function getforminfo(){ // get a reference to the form via its name var f = document.forms["forma"]; // the form properties we're interested in var properties = [ 'elements', '
length', 'name', 'charset', 'action', 'acceptcharset', 'action', 'enctype', 'method', 'target' ]; // iterate over the properties, turning them into a string that we can display to the user var info = properties.map(function(property) { return property + ": " + f[property] }).join("\n"); // set the form's <textarea> to display the form's properties document.forms["forma"].elements['form-...
HTMLInputElement.mozSetFileNameArray() - Web APIs
syntax inputelement.mozsetfilenamearray(afilenames, a
length); parameters afilenames is the array of file names to apply to the element.
... a
length is the number of file names in the array.
... example var filearray = {"/foo/bar.txt", "/foo/foosball.txt"}; inputelement.mozsetfilenamearray(filearray, filearray.
length); ...
HmacImportParams - Web APIs
length optional a number representing the
length in bits of the key.
... if this is omitted the
length of the key is equal to the
length of the digest generated by the digest function you have chosen.
... unless you have a good reason to use a different
length, omit this property and use the default.
HmacKeyGenParams - Web APIs
length optional a number — the
length in bits of the key.
... if this is omitted the
length of the key is equal to the
length of the digest generated by the digest function you have chosen.
... unless you have a good reason to use a different
length, omit this property and use the default.
ImageData() - Web APIs
errors thrown indexsizeerror thrown if array is specified, but its
length is not a multiple of (4 * width) or (4 * width * height).
... html <canvas id="canvas"></canvas> javascript the array (arr) has a
length of 40000: it consists of 10,000 pixels, each of which is defined by 4 values.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const arr = new uint8clampedarray(40000); // iterate through every pixel for (let i = 0; i < arr.
length; i += 4) { arr[i + 0] = 0; // r value arr[i + 1] = 190; // g value arr[i + 2] = 0; // b value arr[i + 3] = 255; // a value } // initialize a new imagedata object let imagedata = new imagedata(arr, 200); // draw image data to the canvas ctx.putimagedata(imagedata, 20, 20); result specification specification status comment html living standardthe definition of 'imagedata()' in that specification.
Recording a media element - Web APIs
the last, recordingtimems, is set to 5000 milliseconds (5 seconds); this specifies the
length of the videos we'll record.
... starting media recording the startrecording() function handles starting the recording process: function startrecording(stream,
lengthinms) { let recorder = new mediarecorder(stream); let data = []; recorder.ondataavailable = event => data.push(event.data); recorder.start(); log(recorder.state + " for " + (
lengthinms/1000) + " seconds..."); let stopped = new promise((resolve, reject) => { recorder.onstop = resolve; recorder.onerror = event => reject(event.name); }); let recorded = wait(
lengthinms).then...
...( () => recorder.state == "recording" && recorder.stop() ); return promise.all([ stopped, recorded ]) .then(() => data); } startrecording() takes two input parameters: a mediastream to record from and the
length in milliseconds of the recording to make.
Pinch zoom gestures - Web APIs
log("pointermove", ev); ev.target.style.border = "dashed"; // find this event in the cache and update its record with this event for (var i = 0; i < evcache.
length; i++) { if (ev.pointerid == evcache[i].pointerid) { evcache[i] = ev; break; } } // if two pointers are down, check for pinch gestures if (evcache.
length == 2) { // calculate the distance between the two pointers var curdiff = math.abs(evcache[0].clientx - evcache[1].clientx); if (prevdiff > 0) { if (curdiff > prevdiff) { // the distance between the two poi...
... function pointerup_handler(ev) { log(ev.type, ev); // remove this pointer from the cache and reset the target's // background and border remove_event(ev); ev.target.style.background = "white"; ev.target.style.border = "1px solid black"; // if the number of pointers down is less than two then reset diff tracker if (evcache.
length < 2) { prevdiff = -1; } } application ui the application uses a <div> element for the touch area and provides buttons to enable logging and to clear the log.
... function remove_event(ev) { // remove this event from the target's cache for (var i = 0; i < evcache.
length; i++) { if (evcache[i].pointerid == ev.pointerid) { evcache.splice(i, 1); break; } } } event logging these functions are used to send event activity to the application's window (to support debugging and learning about the event flow).
ResizeObserverEntry.borderBoxSize - Web APIs
each object in the array contains two properties: blocksize the
length of the observed element's border box in the block dimension.
... inlinesize the
length of the observed element's border box in the inline dimension.
... examples const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.borderboxsize && entry.borderboxsize.
length > 0) { entry.target.style.borderradius = math.min(100, (entry.borderboxsize[0].inlinesize/10) + (entry.borderboxsize[0].blocksize/10)) + 'px'; } else { entry.target.style.borderradius = math.min(100, (entry.contentrect.width/10) + (entry.contentrect.height/10)) + 'px'; }...
RsaPssParams - Web APIs
salt
length a long integer representing the
length of the random salt to use, in bytes.
... rfc 3447 says that "typical salt
lengths" are either 0 or the
length of the output of the digest algorithm that was selected when this key was generated.
... the maximum size of salt
length is given by: math.ceil((keysizeinbits - 1)/8) - digestsizeinbytes - 2 so for a key
length of 2048 bits and a digest output size of 32 bytes, the maximum size would be 222.
SVGTransformList - Web APIs
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() properties readonly unsigned long numberofitems readonly unsigned long
length normative document svg 1.1 (2nd edition) properties name type description numberofitems unsigned long the number of items in the list.
...
length unsigned long the number of items in the list.
... yeschrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yes
length non-standardchrome full support yesedge full support ≤79firefox full support 9ie ?
SubtleCrypto.deriveKey() - Web APIs
notsupported raised when trying to use an algorithm that is either unknown or isn't suitable for derivation, or if the algorithm requested for the derived key doesn't define a key
length.
... /* derive an aes key, given: - our ecdh private key - their ecdh public key */ function derivesecretkey(privatekey, publickey) { return window.crypto.subtle.derivekey( { name: "ecdh", public: publickey }, privatekey, { name: "aes-gcm",
length: 256 }, false, ["encrypt", "decrypt"] ); } async function agreesharedsecretkey() { // generate 2 ecdh key pairs: one for alice and one for bob // in more normal usage, they would generate their key pairs // separately and exchange public keys securely let aliceskeypair = await window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, f...
...ortkey( "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 specification status comment web cryptography apithe definition of 'subtlecrypto.derivekey()' in that specification.
SubtleCrypto.digest() - Web APIs
a digest is a short fixed-
length value derived from some variable-
length input.
... examples basic example this example encodes a message, then calculates its sha-256 digest and logs the digest
length: const text = 'an obscure body in the s-k system, your majesty.
... the inhabitants refer to it as the planet earth.'; async function digestmessage(message) { const encoder = new textencoder(); const data = encoder.encode(message); const hash = await crypto.subtle.digest('sha-256', data); return hash; } const digestbuffer = await digestmessage(text); console.log(digestbuffer.byte
length); converting a digest to a hex string the digest is returned as an arraybuffer, but for comparison and display digests are often represented as hex strings.
SubtleCrypto.exportKey() - Web APIs
*/ window.crypto.subtle.generatekey( { name: "aes-gcm",
length: 256, }, true, ["encrypt", "decrypt"] ).then((key) => { const exportbutton = document.queryselector(".raw"); exportbutton.addeventlistener("click", () => { exportcryptokey(key); }); }); pkcs #8 export this example exports an rsa private signing key as a pkcs #8 object.
...*/ window.crypto.subtle.generatekey( { name: "rsa-pss", // consider using a 4096-bit key for systems that require long-term security modulus
length: 2048, publicexponent: new uint8array([1, 0, 1]), hash: "sha-256", }, true, ["sign", "verify"] ).then((keypair) => { const exportbutton = document.queryselector(".pkcs8"); exportbutton.addeventlistener("click", () => { exportcryptokey(keypair.privatekey); }); }); subjectpublickeyinfo export this example exports an rsa public encryption key as a pem-encoded subjectpublic...
...*/ window.crypto.subtle.generatekey( { name: "rsa-oaep", // consider using a 4096-bit key for systems that require long-term security modulus
length: 2048, publicexponent: new uint8array([1, 0, 1]), hash: "sha-256", }, true, ["encrypt", "decrypt"] ).then((keypair) => { const exportbutton = document.queryselector(".spki"); exportbutton.addeventlistener("click", () => { exportcryptokey(keypair.publickey); }); }); json web key import this code exports an ecdsa private signing key as a json web key object.
TextEncoder - Web APIs
if (typeof textencoder === "undefined") { textencoder=function textencoder(){}; textencoder.prototype.encode = function encode(str) { "use strict"; var len = str.
length, respos = -1; // the uint8array's
length must be at least 3x the
length of the string because an invalid utf-16 // takes up the equivelent space of 3 utf-8 characters to encode it properly.
... however, array's // have an auto expanding
length and 1.5x should be just the right balance for most uses.
... resarr[respos += 1] = (0xe/*0b1110*/<<4) | (point>>>12); resarr[respos += 1] = (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/); resarr[respos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); } } if (typeof uint8array !== "undefined") return resarr.subarray(0, respos + 1); // else // ie 6-9 resarr.
length = respos + 1; // trim off extra weight return resarr; }; textencoder.prototype.tostring = function(){return "[object textencoder]"}; try { // object.defineproperty only works on dom prototypes in ie8 object.defineproperty(textencoder.prototype,"encoding",{ get:function(){if(textencoder.prototype.isprototypeof(this)) return"utf-8"; ...
Using Touch Events - Web APIs
thus, if the user activated the touch surface with one finger, the list would contain one item, and if the user touched the surface with three fingers, the list
length would be three.
... // touchstart handler function process_touchstart(ev) { // use the event's data to call out to the appropriate gesture handlers switch (ev.touches.
length) { case 1: handle_one_touch(ev); break; case 2: handle_two_touches(ev); break; case 3: handle_three_touches(ev); break; default: gesture_not_supported(ev); break; } } access the attributes of a touch point.
... // create touchstart handler someelement.addeventlistener('touchstart', function(ev) { // iterate through the touch points that were activated // for this element and process each event 'target' for (var i=0; i < ev.targettouches.
length; i++) { process_target(ev.targettouches[i].target); } }, false); prevent the browser from processing emulated mouse events.
ValidityState - Web APIs
toolong read only a boolean that is true if the value exceeds the specified max
length for htmlinputelement or htmltextareaelement objects, or false if its
length is less than or equal to the maximum
length.
... note: this property is never true in gecko, because elements' values are prevented from being longer than max
length.
... tooshort read only a boolean that is true if the value fails to meet the specified min
length for htmlinputelement or htmltextareaelement objects, or false if its
length is greater than or equal to the minimum
length.
WebGLRenderingContext.bufferData() - Web APIs
srcdata, usage); void gl.bufferdata(target, arraybufferview srcdata, usage); // webgl2: void gl.bufferdata(target, arraybufferview srcdata, usage, srcoffset,
length); parameters target a glenum specifying the binding point (target).
...
length optional a gluint defaulting to 0.
... var dataarray = new float32array([1, 2, 3, 4]); var sizeinbytes = dataarray.
length * dataarray.bytes_per_element; specifications specification status comment webgl 1.0the definition of 'bufferdata' in that specification.
WebGL constants - Web APIs
returns a
length-2 array with the lo value at 0, and hight at 1.
... depth_range 0x0b70 passed to getparameter to return a
length-2 array of floats giving the current depth range.
... constant name value description read_buffer 0x0c02 unpack_row_
length 0x0cf2 unpack_skip_rows 0x0cf3 unpack_skip_pixels 0x0cf4 pack_row_
length 0x0d02 pack_skip_rows 0x0d03 pack_skip_pixels 0x0d04 texture_binding_3d 0x806a unpack_skip_images 0x806d unpack_image_height 0x806e max_3d_texture_size 0x8073 ...
Basic concepts behind Web Audio API - Web APIs
audio buffers: frames, samples and channels an audiobuffer takes as its parameters a number of channels (1 for mono, 2 for stereo, etc), a
length, meaning the number of sample frames inside the buffer, and a sample rate, which is the number of sample frames played per second.
...the
length property will be 44100.
...the
length property will still be 44100 since it's equal to the number of frames.
Using the Web Storage API - Web APIs
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.
... // firefox e.code === 1014 || // test name field too, because code might not be present // everything except firefox e.name === 'quotaexceedederror' || // firefox e.name === 'ns_error_dom_quota_reached') && // acknowledge quotaexceedederror only if there's something already stored (storage && storage.
length !== 0); } } and here is how you would use it: if (storageavailable('localstorage')) { // yippee!
... note: you could also use storage.
length to test whether the storage object is empty or not.
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
see the following example: myarray = ['zero', 'one', 'two']; myarray.mymethod = function (sproperty) { alert(arguments.
length > 0 ?
... new feature test: myarray = ['zero', 'one', 'two']; myarray.mymethod = function (sproperty) { alert(arguments.
length > 0 ?
... example using bind(): myarray = ['zero', 'one', 'two']; myboundmethod = (function (sproperty) { console.log(arguments.
length > 0 ?
Worker.prototype.postMessage() - Web APIs
r, msg:', msg); switch (msg.data.atopic) { case 'do_sendmainarrbuff': sendmainarrbuff(msg.data.abuf) break; default: throw 'no atopic on incoming message to chromeworker'; } } myworker.addeventlistener('message', handlemessagefromworker); // ok lets create the buffer and send it var arrbuf = new arraybuffer(8); console.info('arrbuf.byte
length pre transfer:', arrbuf.byte
length); myworker.postmessage( { atopic: 'do_sendworkerarrbuff', abuf: arrbuf // the array buffer that we passed to the transferrable section 3 lines below }, [ arrbuf // the array buffer we created 9 lines above ] ); console.info('arrbuf.byte
length post transfer:', arrbuf.byte
length); worker code self.onmessage = function (m...
...sg) { switch (msg.data.atopic) { case 'do_sendworkerarrbuff': sendworkerarrbuff(msg.data.abuf) break; default: throw 'no atopic on incoming message to chromeworker'; } } function sendworkerarrbuff(abuf) { console.info('from worker, pre send back abuf.byte
length:', abuf.byte
length); self.postmessage({atopic:'do_sendmainarrbuff', abuf:abuf}, [abuf]); console.info('from worker, post send back abuf.byte
length:', abuf.byte
length); } output logged arrbuf.byte
length pre transfer: 8 bootstrap.js:40 arrbuf.byte
length post transfer: 0 bootstrap.js:42 from worker, pre send back abuf.byte
length: 8 myworker.js:5:2 incoming message from worker, msg: ...
...} bootstrap.js:20 got back buf in main thread, abuf.byte
length: 8 bootstrap.js:12 from worker, post send back abuf.byte
length: 0 myworker.js:7:2 byte
length goes to 0 as it is transferred.
Web APIs
batterymanager beforeinstallpromptevent beforeunloadevent biquadfilternode blob blobbuilder blobevent bluetooth bluetoothadvertisingdata bluetoothcharacteristicproperties bluetoothdevice bluetoothremotegattcharacteristic bluetoothremotegattdescriptor bluetoothremotegattserver bluetoothremotegattservice body broadcastchannel budgetservice budgetstate buffersource byte
lengthqueuingstrategy bytestring c cdatasection css cssconditionrule csscounterstylerule cssgroupingrule cssimagevalue csskeyframerule csskeyframesrule csskeywordvalue cssmathproduct cssmathsum cssmathvalue cssmediarule cssnamespacerule cssnumericvalue cssomstring csspagerule csspositionvalue cssprimitivevalue csspseudoelement cssrule cssrulelist cssstyledeclaration cssstylerule...
...ion resizeobserver resizeobserverentry response rsahashedimportparams rsahashedkeygenparams rsaoaepparams rsapssparams s svgaelement svgaltglyphdefelement svgaltglyphelement svgaltglyphitemelement svgangle svganimatecolorelement svganimateelement svganimatemotionelement svganimatetransformelement svganimatedangle svganimatedboolean svganimatedenumeration svganimatedinteger svganimated
length svganimated
lengthlist svganimatednumber svganimatednumberlist svganimatedpoints svganimatedpreserveaspectratio svganimatedrect svganimatedstring svganimatedtransformlist svganimationelement svgcircleelement svgclippathelement svgcolorprofileelement svgcomponenttransferfunctionelement svgcursorelement svgdefselement svgdescelement svgelement svgellipseelement svgevent svgexternalresourcesrequire...
...vgfetileelement svgfeturbulenceelement svgfilterelement svgfilterprimitivestandardattributes svgfontelement svgfontfaceelement svgfontfaceformatelement svgfontfacenameelement svgfontfacesrcelement svgfontfaceurielement svgforeignobjectelement svggelement svggeometryelement svgglyphelement svgglyphrefelement svggradientelement svggraphicselement svghkernelement svgimageelement svg
length svg
lengthlist svglineelement svglineargradientelement svgmpathelement svgmaskelement svgmatrix svgmeshelement svgmetadataelement svgmissingglyphelement svgnumber svgnumberlist svgpathelement svgpatternelement svgpoint svgpolygonelement svgpolylineelement svgpreserveaspectratio svgradialgradientelement svgrect svgrectelement svgrenderingintent svgsvgelement svgscriptelement svgsetelement s...
Web Accessibility: Understanding Colors and Luminance - Accessibility
when it comes to color on a monitor, saturated colors are of a particular wave
length.
... according to wikipedia's page on "shades of red", the color "carmine" is a saturated red in which, in its pigment form, mostly contains the red light with wave
lengths longer than 600nm; the article makes the special note that "carmine" is close to the extreme spectrum.
... this places it far beyond standard gamuts (both rgb and cmyk), and its given rgb value is a poor approximation only." saturated red flashing: in addition to a red environment affecting the cognitive function of those with traumatic brain injury, color in the red spectrum wave
length requires special attention and tests.
-moz-outline-radius-bottomleft - CSS: Cascading Style Sheets
syntax the value of -moz-outline-radius-bottomleft is either a css <
length> or a percentage of the corresponding dimensions of the border box.
... values <
length> the radius of the circle defining the curvature of the bottom and left edges of the element, specified as a css <
length>.
... formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea
length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <
length> | <percentage> examples rounding a outline since this is a firefox-only property, this example will not display the desired effect if you are viewing this in a browser other than firefox.
-moz-outline-radius-bottomright - CSS: Cascading Style Sheets
syntax the value of -moz-outline-radius-bottomright is either a css <
length> or a percentage of the corresponding dimensions of the border box.
... values <
length> the radius of the circle defining the curvature of the bottom and right edges of the element, specified as a css <
length>.
... formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea
length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <
length> | <percentage> examples html <p>look at this paragraph's bottom-right corner.</p> css p { margin: 5px; border: solid cyan; outline: dotted red; -moz-outline-radius-bottomright: 2em; } result the example above will not display the desired effect if you are viewing this in a browser other than firefox.
-moz-outline-radius-topleft - CSS: Cascading Style Sheets
syntax the value of -moz-outline-radius-topleft is either a css <
length> or a percentage of the corresponding dimensions of the border box.
... values <
length> the radius of the circle defining the curvature of the top and left edges of the element, specified as a css <
length>.
... formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea
length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <
length> | <percentage> examples the example below will not display the desired effect if you are viewing this in a browser other than firefox.
-moz-outline-radius-topright - CSS: Cascading Style Sheets
syntax the value of -moz-outline-radius-topright is either a css <
length> or a percentage of the corresponding dimensions of the border box.
... values <
length> the radius of the circle defining the curvature of the top and right edges of the element, specified as a css <
length>.
... formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea
length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <
length> | <percentage> examples html <p>look at this paragraph's top-right corner.</p> css p { margin: 5px; border: solid cyan; outline: dotted red; -moz-outline-radius-topright: 2em; } result the example above will not display the desired effect if you are viewing this in a browser other than firefox.
-webkit-mask-box-image - CSS: Cascading Style Sheets
initial value: none applies to: all elements inherited: no media: visual computed value: as specified syntax -webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>] where: <mask-box-image> <uri> | <gradient> | none <top> <right> <bottom> <left> <
length> | <percentage> <x-repeat> <y-repeat> repeat | stretch | round | space values <uri> the location of the image resource to be used as a mask image.
... <
length> the size of the mask image's offset.
... see <
length> for possible units.
-webkit-mask-position-x - CSS: Cascading Style Sheets
/* keyword values */ -webkit-mask-position-x: left; -webkit-mask-position-x: center; -webkit-mask-position-x: right; /* <percentage> values */ -webkit-mask-position-x: 100%; -webkit-mask-position-x: -50%; /* <
length> values */ -webkit-mask-position-x: 50px; -webkit-mask-position-x: -1cm; /* multiple values values */ -webkit-mask-position-x: 50px, 25%, -3em; /* global values */ -webkit-mask-position-x: inherit; -webkit-mask-position-x: initial; -webkit-mask-position-x: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <
length> the absolute value, otherwise a percentageanimation typediscrete syntax values <
length-...
...percentage> a
length indicating the position of the left edge of the image relative to the box's left padding edge.
... formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <
length> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <
length-percentage> | left | center | right ]#where <
length-percentage> = <
length> | <percentage> examples horizontally positioning a mask image .exampleone { -webkit-mask-image: url(mask.png); -webkit-mask-position-x: right; } .exampletwo { -webkit-mask-image: url(mask.png); -webkit-mask-position-x: 2...
-webkit-mask-position-y - CSS: Cascading Style Sheets
/* keyword values */ -webkit-mask-position-y: top; -webkit-mask-position-y: center; -webkit-mask-position-y: bottom; /* <percentage> values */ -webkit-mask-position-y: 100%; -webkit-mask-position-y: -50%; /* <
length> values */ -webkit-mask-position-y: 50px; -webkit-mask-position-y: -1cm; /* multiple values values */ -webkit-mask-position-y: 50px, 25%, -3em; /* global values */ -webkit-mask-position-y: inherit; -webkit-mask-position-y: initial; -webkit-mask-position-y: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <
length> the absolute value, otherwise a percentageanimation typediscrete syntax values <
length-pe...
...rcentage> a
length indicating the position of the top side of the image relative to the box's top padding edge.
... formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <
length> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <
length-percentage> | top | center | bottom ]#where <
length-percentage> = <
length> | <percentage> examples vertically positioning a mask image .exampleone { -webkit-mask-image: url(mask.png); -webkit-mask-position-y: bottom; } .exampletwo { -webkit-mask-image: url(mask.png); -webkit-mask-position-y: 25...
additive-symbols - CSS: Cascading Style Sheets
]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <
length> | <
length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
... | [ [ left | right ] <
length-percentage> ] && [ [ top | bottom ] <
length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-
length>?<linear-color-hint> = <
length-percentage><
length-percentage> = <
length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-
length> = <
length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples specifying additive symbols html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style additive-symbols-example { system: additive; additive-symbols: v 5, iv 4, i 1; } .list { list-style: additive-symbols-example; } result specifications ...
negative - CSS: Cascading Style Sheets
]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <
length> | <
length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
... | [ [ left | right ] <
length-percentage> ] && [ [ top | bottom ] <
length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-
length>?<linear-color-hint> = <
length-percentage><
length-percentage> = <
length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-
length> = <
length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples rendering negative counters html <ul class="list" start="-3"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style neg { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; negative: "(-" ")"; } .list { list-style: neg; } result specifications ...
prefix - CSS: Cascading Style Sheets
]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <
length> | <
length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
... | [ [ left | right ] <
length-percentage> ] && [ [ top | bottom ] <
length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-
length>?<linear-color-hint> = <
length-percentage><
length-percentage> = <
length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-
length> = <
length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples adding a prefix to a counter html <ul class="index"> <li>the boy who lived</li> <li>the vanishing glass</li> <li>the letters from no one</li> <li>the keeper of the keys</li> <li>diagon alley</li> </ul> css @counter-style chapters { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; prefix: ...
suffix - CSS: Cascading Style Sheets
]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <
length> | <
length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
... | [ [ left | right ] <
length-percentage> ] && [ [ top | bottom ] <
length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-
length>?<linear-color-hint> = <
length-percentage><
length-percentage> = <
length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-
length> = <
length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting a suffix for a counter html <ul class="choices"> <li>one</li> <li>two</li> <li>three</li> <li>none of the above</li> </ul> css @counter-style options { system: fixed; symbols: a b c d; suffix: ") "; } .choices { list-style: options; } result specifications specification status c...
symbols - CSS: Cascading Style Sheets
]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <
length> | <
length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
... | [ [ left | right ] <
length-percentage> ] && [ [ top | bottom ] <
length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-
length>?<linear-color-hint> = <
length-percentage><
length-percentage> = <
length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-
length> = <
length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting counter symbols html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style symbols-example { system: fixed; symbols: a "1" "\24b7" d e; } .list { list-style: symbols-example; } result specifications specification status c...
bleed - CSS: Cascading Style Sheets
syntax /* keyword values */ bleed: auto; /* <
length> values */ bleed: 8pt; bleed: 1cm; values auto computes to 6pt if the value of marks is crop.
... <
length> specifies by how far outward, in each direction, the bleed area extends past the page box.
... formal definition related at-rule@pageinitial valueautocomputed valueas specified formal syntax auto | <
length> examples setting a page bleed of 1cm @page { bleed: 1cm; } specifications specification status comment css paged media module level 3the definition of 'bleed' in that specification.
size - CSS: Cascading Style Sheets
syntax /* keyword values for scalable size */ size: auto; size: portrait; size: landscape; /* <
length> values */ /* 1 value: height = width */ size: 6in; /* 2 values: width then height */ size: 4in 6in; /* keyword values for absolute size */ size: a4; size: b5; size: jis-b4; size: letter; /* mixing size and orientation */ size: a4 portrait; values auto the user agent decides the size of the page.
... <
length> any
length value (see <
length>).
... formal definition related at-rule@pageinitial valueautocomputed valueas specified, but with relative
lengths converted into absolute
lengths formal syntax <
length>{1,2} | auto | [ <page-size> | [ portrait | landscape ] ] examples specifying size and orientation @page { size: 4in 6in landscape; } nesting inside a @media rule @media print { @page { size: 50mm 150mm; } } specifications specification status comment css paged media module level 3the definitio...
Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
negative
lengths are invalid.
... values: see the flex-basis reference (the default is auto) spec: https://drafts.csswg.org/css-flexbox/#flex-basis-property @mixin flex-basis($value: auto) { -webkit-flex-basis: $value; flex-basis: $value; } flexbox "flex" (shorthand) the flex property specifies the components of a flexible
length; flex-grow factor, flex-shrink factor, and the flex-basis.
...this is done after any flexible
lengths and any auto margins have been resolved.
Basic Concepts of grid layout - CSS: Cascading Style Sheets
</div> </div> .wrapper { display: grid; grid-template-columns: 200px 200px 200px; } * {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; } the fr unit tracks can be defined using any
length unit.
... grid also introduces an additional
length unit to help us create flexible grid tracks.
...v> * {box-sizing: border-box;} .wrapper { grid-column-gap: 10px; grid-row-gap: 1em; 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; } any space used by gaps will be accounted for before space is assigned to the flexible
length fr tracks, and gaps act for sizing purposes like a regular grid track, however you cannot place anything into a gap.
background-image - CSS: Cascading Style Sheets
]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <
length> | <
length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
... | [ [ left | right ] <
length-percentage> ] && [ [ top | bottom ] <
length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-
length>?<linear-color-hint> = <
length-percentage><
length-percentage> = <
length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-
length> = <
length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples layering background images note that the star image is partially transparent and is layered over the cat image.
background-size - CSS: Cascading Style Sheets
each value can be a <
length>, a <percentage>, or auto.
... <
length> stretches the image in the corresponding dimension to the specified
length.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrelative to the background positioning areacomputed valueas specified, but with relative
lengths converted into absolute
lengthsanimation typerepeatable list of simple list of
length, percentage, or calc formal syntax <bg-size>#where <bg-size> = [ <
length-percentage> | auto ]{1,2} | cover | containwhere <
length-percentage> = <
length> | <percentage> examples please see scaling background images for examples.
block-size - CSS: Cascading Style Sheets
syntax /* <
length> values */ block-size: 300px; block-size: 25em; /* <percentage> values */ block-size: 75%; /* keyword values */ block-size: max-content; block-size: min-content; block-size: fit-content(20em); block-size: auto; /* global values */ block-size: inherit; block-size: initial; block-size: unset; if the writing mode is vertically oriented, the value of block-size relates to the width of the elemen...
... initial valueautoapplies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as width and heightanimation typea
length, percentage or calc(); syntax values the block-size property takes the same values as the width and height properties.
... formal definition initial valueautoapplies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as width and heightanimation typea
length, percentage or calc(); formal syntax <'width'> examples block size with vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'block-size' in that specification.
border-image-source - CSS: Cascading Style Sheets
]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <
length> | <
length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
... | [ [ left | right ] <
length-percentage> ] && [ [ top | bottom ] <
length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-
length>?<linear-color-hint> = <
length-percentage><
length-percentage> = <
length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-
length> = <
length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples please see border-image for examples.
border-image-width - CSS: Cascading Style Sheets
syntax /* keyword value */ border-image-width: auto; /* <
length> value */ border-image-width: 1rem; /* <percentage> value */ border-image-width: 25%; /* <number> value */ border-image-width: 3; /* vertical | horizontal */ border-image-width: 2em 3em; /* top | horizontal | bottom */ border-image-width: 5% 15% 10%; /* top | right | bottom | left */ border-image-width: 5% 2em 10% auto; /* global values */ border-image-width: inherit; border-image-width: in...
... values <
length-percentage> the width of the border, specified as a <
length> or a <percentage>.
...it also applies to ::first-letter.inheritednopercentagesrefer to the width or height of the border image areacomputed valueas specified, but with relative
lengths converted into absolute
lengthsanimation typeby computed value type formal syntax [ <
length-percentage> | <number> | auto ]{1,4}where <
length-percentage> = <
length> | <percentage> examples tiling a border image this example creates a border image using the following ".png" file, which is 90 by 90 pixels: thus, each circle in the source image is 30 by 30 pixels.
bottom - CSS: Cascading Style Sheets
syntax /* <
length> values */ bottom: 3px; bottom: 2.4em; /* <percentage>s of the height of the containing block */ bottom: 10%; /* keyword value */ bottom: auto; /* global values */ bottom: inherit; bottom: initial; bottom: unset; values <
length> a negative, null, or positive <
length> that represents: for absolutely positioned elements, the distance to the bottom edge of the containing block.
...this computed value is then handled as if it were a <
length>, <percentage>, or the auto keyword.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the height of the containing blockcomputed valueif specified as a
length, the corresponding absolute
length; if specified as a percentage, the specified value; otherwise, autoanimation typea
length, percentage or calc(); formal syntax <
length> | <percentage> | auto examples absolute and fixed positioning this example demonstrates the difference in behavior of the bottom property, when position is absolute versus fixed.
clamp() - CSS: Cascading Style Sheets
the clamp() function can be used anywhere a <
length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.
... the expressions can be math functions (see calc() for more information), literal values, or other expressions, such as attr(), that evaluate to a valid argument type (like <
length>), or nested min() and max() functions.
...the operands in the expression may be any <
length> syntax value.
column-rule-width - CSS: Cascading Style Sheets
syntax /* keyword values */ column-rule-width: thin; column-rule-width: medium; column-rule-width: thick; /* <
length> values */ column-rule-width: 1px; column-rule-width: 2.5em; /* global values */ column-rule-width: inherit; column-rule-width: initial; column-rule-width: unset; the column-rule-width property is specified as a single <'border-width'> value.
...it may be either a <
length> or one of the thin, medium, or thick keywords.
... formal definition initial valuemediumapplies tomulticol elementsinheritednocomputed valuethe absolute
length; 0 if the column-rule-style is none or hiddenanimation typea
length formal syntax <'border-width'> examples setting a thick column rule html <p>this is a bunch of text split into three columns.
conic-gradient() - CSS: Cascading Style Sheets
<position> using the same
length, order and keyterm values as the background-position property, the position defines center of the gradient.
...the
length defines at which point between two color stops the gradient color should reach the midpoint of the color transition.
...unlike linear and radial gradients, whose color-stops are placed by specifying a
length, the color-stops of a conic gradient are specified with an angle.
content - CSS: Cascading Style Sheets
]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <
length> | <
length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
... | [ [ left | right ] <
length-percentage> ] && [ [ top | bottom ] <
length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]?
... ]# , <angular-color-stop><counter-style-name> = <custom-ident>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-
length>?<linear-color-hint> = <
length-percentage><
length-percentage> = <
length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-
length> = <
length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples headings and quotes this example inserts quotation marks around quotes, and adds the word "chapter" before headings.
cross-fade() - CSS: Cascading Style Sheets
]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <
length> | <
length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
... | [ [ left | right ] <
length-percentage> ] && [ [ top | bottom ] <
length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]?
... ]# , <angular-color-stop>where <linear-color-stop> = <color> <color-stop-
length>?<linear-color-hint> = <
length-percentage><
length-percentage> = <
length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-
length> = <
length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples older syntax for cross-fade html <div class="crossfade"></div> css .crossfade { width: 300px; height: 300px; background-image: -webkit-cross-fade( url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'), 75%); background-image: cross-fade( url('https://mdn.mozillademos.org/files/8543/br.
<dimension> - CSS: Cascading Style Sheets
css uses dimensions to specify distances (<
length>), durations (<time>), frequencies (<frequency>), resolutions (<resolution>), and other quantities.
... recommendation defined under numbers and
length css level 1the definition of '<dimension>' in that specification.
... recommendation initial definition under "
length units" ...
font - CSS: Cascading Style Sheets
d:font-size: refer to the parent element's font sizeline-height: refer to the font size of the element itselfcomputed valueas each of the properties of the shorthand:font-style: as specifiedfont-variant: as specifiedfont-weight: the keyword or the numerical value as specified, with bolder and lighter transformed to the real valuefont-stretch: as specifiedfont-size: as specified, but with relative
lengths converted into absolute
lengthsline-height: for percentage and
length values, the absolute
length, otherwise as specifiedfont-family: as specifiedanimation typeas each of the properties of the shorthand:font-style: discretefont-variant: discretefont-weight: a font weightfont-stretch: a font stretchfont-size: a
lengthline-height: either number or
lengthfont-family: discrete formal syntax [ [ <'...
... getcheckedvalue("font_style") + " " + getcheckedvalue("font_variant") + " " + getcheckedvalue("font_weight") + " " + getcheckedvalue("font_size") + getcheckedvalue("line_height") + " " + getcheckedvalue("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.get...
...elementsbytagname("style"); if (old.
length > 1) { old[1].parentelement.removechild(old[1]); } css = document.createelement("style"); css.innerhtml = ".fontshorthand{font: " + cssfragment + "}"; document.body.appendchild(css); } setcss(); specifications specification status comment css fonts module level 3the definition of 'font' in that specification.
grid-auto-columns - CSS: Cascading Style Sheets
syntax /* keyword values */ grid-auto-columns: min-content; grid-auto-columns: max-content; grid-auto-columns: auto; /* <
length> values */ grid-auto-columns: 100px; grid-auto-columns: 20cm; grid-auto-columns: 50vmax; /* <percentage> values */ grid-auto-columns: 10%; grid-auto-columns: 33.3%; /* <flex> values */ grid-auto-columns: 0.5fr; grid-auto-columns: 3fr; /* minmax() values */ grid-auto-columns: minmax(100px, auto); grid-auto-columns: minmax(max-content, 2fr); grid-auto-columns: minmax(20%, 80vmax); /* fit-conten...
...ent max-content auto; grid-auto-columns: 100px 150px 390px; grid-auto-columns: 10% 33.3%; grid-auto-columns: 0.5fr 3fr 1fr; grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); /* global values */ grid-auto-columns: inherit; grid-auto-columns: initial; grid-auto-columns: unset; values <
length> is a non-negative
length.
... formal definition initial valueautoapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valuethe percentage as specified or the absolute
lengthanimation typediscrete formal syntax <track-size>+where <track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <
length> | <percentage> ] )where <track-breadth> = <
length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <
length> | <percentage> | min-content | max-content | autowhere <
length-percentage> = <
length> | <percenta...
grid-auto-rows - CSS: Cascading Style Sheets
syntax /* keyword values */ grid-auto-rows: min-content; grid-auto-rows: max-content; grid-auto-rows: auto; /* <
length> values */ grid-auto-rows: 100px; grid-auto-rows: 20cm; grid-auto-rows: 50vmax; /* <percentage> values */ grid-auto-rows: 10%; grid-auto-rows: 33.3%; /* <flex> values */ grid-auto-rows: 0.5fr; grid-auto-rows: 3fr; /* minmax() values */ grid-auto-rows: minmax(100px, auto); grid-auto-rows: minmax(max-content, 2fr); grid-auto-rows: minmax(20%, 80vmax); /* multiple track-size values */ grid-auto-...
...rows: min-content max-content auto; grid-auto-rows: 100px 150px 390px; grid-auto-rows: 10% 33.3%; grid-auto-rows: 0.5fr 3fr 1fr; grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); /* global values */ grid-auto-rows: inherit; grid-auto-rows: initial; grid-auto-rows: unset; values <
length> is a non-negative
length.
... formal definition initial valueautoapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valuethe percentage as specified or the absolute
lengthanimation typediscrete formal syntax <track-size>+where <track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <
length> | <percentage> ] )where <track-breadth> = <
length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <
length> | <percentage> | min-content | max-content | autowhere <
length-percentage> = <
length> | <percenta...
grid-template - CSS: Cascading Style Sheets
negrid-template-rows: nonegrid-template-areas: noneapplies togrid containersinheritednopercentagesas each of the properties of the shorthand:grid-template-columns: refer to corresponding dimension of the content areagrid-template-rows: refer to corresponding dimension of the content areacomputed valueas each of the properties of the shorthand:grid-template-columns: as specified, but with relative
lengths converted into absolute
lengthsgrid-template-rows: as specified, but with relative
lengths converted into absolute
lengthsgrid-template-areas: as specifiedanimation typediscrete formal syntax none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>?
...]+ [ / <explicit-track-list> ]?where <line-names> = '[' <custom-ident>* ']'<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <
length> | <percentage> ] )<explicit-track-list> = [ <line-names>?
... <track-size> ]+ <line-names>?where <track-breadth> = <
length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <
length> | <percentage> | min-content | max-content | autowhere <
length-percentage> = <
length> | <percentage> examples defining a grid template css #page { display: grid; width: 100%; height: 200px; grid-template: [header-left] "head head" 30px [header-right] [main-left] "nav main" 1fr [main-right] [footer-left] "nav foot" 30px [footer-right] / 120px 1fr; } header { background-color: lime; grid-area: head; } nav { background-color: lightblue; grid-area: nav; } main { background-color: yellow; grid-area: main; } footer { background-color: red; grid-area: foot; } html <se...
left - CSS: Cascading Style Sheets
syntax /* <
length> values */ left: 3px; left: 2.4em; /* <percentage>s of the width of the containing block */ left: 10%; /* keyword value */ left: auto; /* global values */ left: inherit; left: initial; left: unset; values <
length> a negative, null, or positive <
length> that represents: for absolutely positioned elements, the distance to the left edge of the containing block.
...this computed value is then handled as if it were a <
length>, <percentage>, or the auto keyword.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the width of the containing blockcomputed valueif specified as a
length, the corresponding absolute
length; if specified as a percentage, the specified value; otherwise, autoanimation typea
length, percentage or calc(); formal syntax <
length> | <percentage> | auto examples positioning elements html <div id="wrap"> <div id="example_1"> <pre> position: absolute; left: 20px; top: 20px; </pre> <p>the only containing element for this ...
letter-spacing - CSS: Cascading Style Sheets
syntax /* keyword value */ letter-spacing: normal; /* <
length> values */ letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: .3px; /* global values */ letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset; values normal the normal letter spacing for the current font.
... <
length> specifies extra inter-character space in addition to the default space between characters.
...it also applies to ::first-letter and ::first-line.inheritedyescomputed valuean optimum value consisting of either an absolute
length or the keyword normalanimation typea
length formal syntax normal | <
length> examples setting letter spacing html <p class="normal">letter spacing</p> <p class="em-wide">letter spacing</p> <p class="em-wider">letter spacing</p> <p class="em-tight">letter spacing</p> <p class="px-wide">letter spacing</p> css .normal { letter-spacing: normal; } .em-wide { letter-spacing: 0.4em; } .em-wid...
line-height-step - CSS: Cascading Style Sheets
/* point values */ line-height-step: 18pt; syntax the line-height-step property is specified as any one of the following: a <
length>.
... values <
length> the specified <
length> is used in the calculation of the line box height step.
... formal definition initial value0applies toblock containersinheritedyescomputed valueabsolute <
length>animation typediscrete formal syntax <
length> examples setting step unit for line box height in the following example, the height of line box in each paragraph is rounded up to the step unit.
margin-bottom - CSS: Cascading Style Sheets
syntax /* <
length> values */ margin-bottom: 10px; /* an absolute
length */ margin-bottom: 1em; /* relative to the text size */ margin-bottom: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-bottom: auto; /* global values */ margin-bottom: inherit; margin-bottom: initial; margin-bottom: unset; the margin-bottom property is specified as the keyword auto, or a <
length>,...
... values <
length> the size of the margin as a fixed value.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute
lengthanimation typea
length formal syntax <
length> | <percentage> | auto examples setting positive and negative bottom margins html <div class="container"> <div class="box0">box 0</div> <div class="box1">box 1</div> <div class="box2">box one's negative margin pulls me up</div> </div> css css for divs to set margin-bottom and height .box0 { margin-bottom:1em; height:3em; } .box1 { m...
margin-inline - CSS: Cascading Style Sheets
/* <
length> values */ margin-inline: 10px 20px; /* an absolute
length */ margin-inline: 1em 2em; /* relative to the text size */ margin-inline: 5% 2%; /* relative to the nearest block container's width */ margin-inline: 10px; /* sets both start and end values */ /* keyword values */ margin-inline: auto; /* global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset; this property corresponds to the margin-top and margin-bottom, or margin-right, and margin-left properties, depending on the values defined f...
... formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a
length, the corresponding absolute
length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting inline start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; marg...
... initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a
length, the corresponding absolute
length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete ...
margin-left - CSS: Cascading Style Sheets
syntax /* <
length> values */ margin-left: 10px; /* an absolute
length */ margin-left: 1em; /* relative to the text size */ margin-left: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-left: auto; /* global values */ margin-left: inherit; margin-left: initial; margin-left: unset; the margin-left property is specified as the keyword auto, or a <
length>, or a <percentag...
... values <
length> the size of the margin as a fixed value.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute
lengthanimation typea
length formal syntax <
length> | <percentage> | auto examples setting left margin using pixels and percentages .content { margin-left: 5%; } .sidebox { margin-left: 10px; } .logo { margin-left: -5px; } specifications specification status comment css basic box modelthe definition of 'margin-left' in that specification.
margin-right - CSS: Cascading Style Sheets
syntax /* <
length> values */ margin-right: 20px; /* an absolute
length */ margin-right: 1em; /* relative to the text size */ margin-right: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-right: auto; /* global values */ margin-right: inherit; margin-right: initial; margin-right: unset; the margin-right property is specified as the keyword auto, or a <
length>, or a <p...
... values <
length> the size of the margin as a fixed value.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute
lengthanimation typea
length formal syntax <
length> | <percentage> | auto examples setting right margin using pixels and percentages .content { margin-right: 5%; } .sidebox { margin-right: 10px; } .logo { margin-right: -5px; } specifications specification status comment css basic box modelthe definition of 'margin-right' in that specification.
margin-top - CSS: Cascading Style Sheets
syntax /* <
length> values */ margin-top: 10px; /* an absolute
length */ margin-top: 1em; /* relative to the text size */ margin-top: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-top: auto; /* global values */ margin-top: inherit; margin-top: initial; margin-top: unset; the margin-top property is specified as the keyword auto, or a <
length>, or a <percentage>.
... values <
length> the size of the margin as a fixed value.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute
lengthanimation typea
length formal syntax <
length> | <percentage> | auto examples setting positive and negative top margins .content { margin-top: 5%; } .sidebox { margin-top: 10px; } .logo { margin-top: -5px; } #footer { margin-top: 1em; } specifications specification status comment css basic box modelthe definition of 'margin-top' in that specification.
mask-border-source - CSS: Cascading Style Sheets
]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <
length> | <
length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
... | [ [ left | right ] <
length-percentage> ] && [ [ top | bottom ] <
length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-
length>?<linear-color-hint> = <
length-percentage><
length-percentage> = <
length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-
length> = <
length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples basic usage this property doesn't appear to be supported anywhere yet.
mask-border-width - CSS: Cascading Style Sheets
syntax /* keyword value */ mask-border-width: auto; /* <
length> value */ mask-border-width: 1rem; /* <percentage> value */ mask-border-width: 25%; /* <number> value */ mask-border-width: 3; /* vertical | horizontal */ mask-border-width: 2em 3em; /* top | horizontal | bottom */ mask-border-width: 5% 15% 10%; /* top | right | bottom | left */ mask-border-width: 5% 2em 10% auto; /* global values */ mask-border-width: inherit; mask-border-width: initial; mask-border-width: unset; the mask-border-width property may be specified using one, two, three, or four values chosen from the list of values below.
... values <
length-percentage> the width of the mask border, specified as a <
length> or a <percentage>.
... formal definition initial valueautoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrelative to width/height of the mask border image areacomputed valueas specified, but with relative
lengths converted into absolute
lengthsanimation typediscrete formal syntax [ <
length-percentage> | <number> | auto ]{1,4}where <
length-percentage> = <
length> | <percentage> examples basic usage this property doesn't appear to be supported anywhere yet.
mask-image - CSS: Cascading Style Sheets
]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <
length> | <
length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
... | [ [ left | right ] <
length-percentage> ] && [ [ top | bottom ] <
length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-
length>?<linear-color-hint> = <
length-percentage><
length-percentage> = <
length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-
length> = <
length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting a mask image with a url html <div id="masked"></div> css #masked { width: 100px; height: 100px; background-color: #8cffa0; -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); } result specifications s...
max-height - CSS: Cascading Style Sheets
syntax /* <
length> value */ max-height: 3.5em; /* <percentage> value */ max-height: 75%; /* keyword values */ max-height: none; max-height: max-content; max-height: min-content; max-height: fit-content(20em); /* global values */ max-height: inherit; max-height: initial; max-height: unset; values <
length> defines the max-height as an absolute value.
... fit-content(<
length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e.
...if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none.computed valuethe percentage as specified or the absolute
length or noneanimation typea
length, percentage or calc(); formal syntax auto | <
length> | <percentage> | min-content | max-content | fit-content(<
length-percentage>)where <
length-percentage> = <
length> | <percentage> examples setting max-height using percentage and keyword values table { max-height: 75%; } form { max-height: none; } specifications specification status comment ...
max-width - CSS: Cascading Style Sheets
syntax /* <
length> value */ max-width: 3.5em; /* <percentage> value */ max-width: 75%; /* keyword values */ max-width: none; max-width: max-content; max-width: min-content; max-width: fit-content(20em); /* global values */ max-width: inherit; max-width: initial; max-width: unset; values <
length> defines the max-width as an absolute value.
... fit-content(<
length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 formal definition initial valuenoneapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute
length or noneanimation typea
length, percentage or calc(); formal syntax auto | <
length> | <percentage> | min-content | max-content | fit-content(<
length-percentage>)where <
length-percentage> = <
length> | <percentage> examples setting max width in pixels in this example, the "child" will be either 150 pixels wide or the width of the "parent," whichever is smaller.
min-height - CSS: Cascading Style Sheets
syntax /* <
length> value */ min-height: 3.5em; /* <percentage> value */ min-height: 10%; /* keyword values */ min-height: max-content; min-height: min-content; min-height: fit-content(20em); /* global values */ min-height: inherit; min-height: initial; min-height: unset; values <
length> defines the min-height as an absolute value.
... fit-content(<
length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e.
...if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0.computed valuethe percentage as specified or the absolute
lengthanimation typea
length, percentage or calc(); formal syntax auto | <
length> | <percentage> | min-content | max-content | fit-content(<
length-percentage>)where <
length-percentage> = <
length> | <percentage> examples setting min-height table { min-height: 75%; } form { min-height: 0; } specifications specification status comment css box sizing module level 4the de...
min-width - CSS: Cascading Style Sheets
syntax /* <
length> value */ min-width: 3.5em; /* <percentage> value */ min-width: 10%; /* keyword values */ min-width: max-content; min-width: min-content; min-width: fit-content(20em); /* global values */ min-width: inherit; min-width: initial; min-width: unset; values <
length> defines the min-width as an absolute value.
... fit-content(<
length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e.
... formal definition initial valueautoapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute
lengthanimation typea
length, percentage or calc(); formal syntax auto | <
length> | <percentage> | min-content | max-content | fit-content(<
length-percentage>)where <
length-percentage> = <
length> | <percentage> examples setting minimum element width table { min-width: 75%; } form { min-width: 0; } specifications specification status comment css box sizing module level 4the definition of 'min-width' in that specification.
min() - CSS: Cascading Style Sheets
the min() function can be used anywhere a <
length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.
... the expressions can be math expressions (using arithmetic operators), literal values, or other expressions, such as attr(), that evaluate to a valid argument type (like <
length>).
...the operands in the expression may be any <
length> syntax value.
minmax() - CSS: Cascading Style Sheets
each parameter can be a <
length>, a <percentage>, a <flex> value, or one of the keyword values max-content, min-content, or auto.
... values <
length> a non-negative
length.
... formal syntax minmax( [ <
length> | <percentage> | min-content | max-content | auto ] , [ <
length> | <percentage> | <flex> | min-content | max-content | auto ] ) css properties minmax() function can be used within: grid-template-columns grid-template-rows grid-auto-columns grid-auto-rows examples css #container { display: grid; grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px; grid-ga...
offset-anchor - CSS: Cascading Style Sheets
syntax /* keyword values */ offset-anchor: top; offset-anchor: bottom; offset-anchor: left; offset-anchor: right; offset-anchor: center; offset-anchor: auto; /* <percentage> values */ offset-anchor: 25% 75%; /* <
length> values */ offset-anchor: 0 0; offset-anchor: 1cm 2cm; offset-anchor: 10ch 8em; /* edge offsets values */ offset-anchor: bottom 10px right 20px; offset-anchor: right 3em bottom 10px; /* global values */ offset-anchor: inherit; offset-anchor: initial; offset-anchor: unset; values auto offset-anchor is given the same value as the element's transform-origin, unless offset-path is none, in which case it takes its value fr...
... formal definition initial valueautoapplies totransformable elementsinheritednopercentagesrelativetowidthandheightcomputed valuefor <
length> the absolute value, otherwise a percentageanimation typea position formal syntax auto | <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
... | [ [ left | right ] <
length-percentage> ] && [ [ top | bottom ] <
length-percentage> ] ]where <
length-percentage> = <
length> | <percentage> examples setting various offset-anchor values in the following example, we have three <div> elements nested in <section> elements.
offset-distance - CSS: Cascading Style Sheets
syntax /* default value */ offset-distance: 0; /* the middle of the offset-path */ offset-distance: 50%; /* a fixed
length positioned along the path */ offset-distance: 40px; <
length-percentage> a
length that specifies how far the element is along the path (defined with offset-path).
... 100% represents the total
length of the path (when the offset-path is defined as a basic shape or path()).
... formal definition initial value0applies totransformable elementsinheritednopercentagesrefer to the total path
lengthcomputed valuefor <
length> the absolute value, otherwise a percentageanimation typea
length, percentage or calc(); formal syntax <
length-percentage>where <
length-percentage> = <
length> | <percentage> examples using offset-distance in an animation the motion aspect in css motion path typically comes from animating the offset-distance property.
outline-width - CSS: Cascading Style Sheets
syntax /* keyword values */ outline-width: thin; outline-width: medium; outline-width: thick; /* <
length> values */ outline-width: 1px; outline-width: 0.1em; /* global values */ outline-width: inherit; the outline-width property is specified as any one of the values listed below.
... values <
length> the width of the outline specified as a <
length>.
... formal definition initial valuemediumapplies toall elementsinheritednocomputed valuean absolute
length; if the keyword none is specified, the computed value is 0animation typea
length formal syntax <line-width>where <line-width> = <
length> | thin | medium | thick examples setting an element's outline width html <span id="thin">thin</span> <span id="medium">medium</span> <span id="thick">thick</span> <span id="twopixels">2px</span> <span id="oneex">1ex</span> <span id="em">1.2em</span> css ...
padding-bottom - CSS: Cascading Style Sheets
syntax /* <
length> values */ padding-bottom: 0.5em; padding-bottom: 0; padding-bottom: 2cm; /* <percentage> value */ padding-bottom: 10%; /* global values */ padding-bottom: inherit; padding-bottom: initial; padding-bottom: unset; the padding-bottom property is specified as a single value chosen from the list below.
... values <
length> the size of the padding as a fixed value.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute
lengthanimation typea
length formal syntax <
length> | <percentage> examples setting padding bottom with pixels and percentages .content { padding-bottom: 5%; } .sidebox { padding-bottom: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-bottom' in that specification.
padding-left - CSS: Cascading Style Sheets
syntax /* <
length> values */ padding-left: 0.5em; padding-left: 0; padding-left: 2cm; /* <percentage> value */ padding-left: 10%; /* global values */ padding-left: inherit; padding-left: initial; padding-left: unset; the padding-left property is specified as a single value chosen from the list below.
... values <
length> the size of the padding as a fixed value.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute
lengthanimation typea
length formal syntax <
length> | <percentage> examples setting left padding using pixels and percentages .content { padding-left: 5%; } .sidebox { padding-left: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-left' in that specification.
padding-right - CSS: Cascading Style Sheets
syntax /* <
length> values */ padding-right: 0.5em; padding-right: 0; padding-right: 2cm; /* <percentage> value */ padding-right: 10%; /* global values */ padding-right: inherit; padding-right: initial; padding-right: unset; the padding-right property is specified as a single value chosen from the list below.
... values <
length> the size of the padding as a fixed value.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute
lengthanimation typea
length formal syntax <
length> | <percentage> examples setting right padding using pixels and percentages .content { padding-right: 5%; } .sidebox { padding-right: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-right' in that specification.
padding-top - CSS: Cascading Style Sheets
syntax /* <
length> values */ padding-top: 0.5em; padding-top: 0; padding-top: 2cm; /* <percentage> value */ padding-top: 10%; /* global values */ padding-top: inherit; padding-top: initial; padding-top: unset; the padding-top property is specified as a single value chosen from the list below.
... values <
length> the size of the padding as a fixed value.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute
lengthanimation typea
length formal syntax <
length> | <percentage> examples setting top padding using pixels and percentages .content { padding-top: 5%; } .sidebox { padding-top: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-top' in that specification.
padding - CSS: Cascading Style Sheets
each value is a <
length> or a <percentage>.
... values <
length> the size of the padding as a fixed value.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valueas each of the properties of the shorthand:padding-bottom: the percentage as specified or the absolute
lengthpadding-left: the percentage as specified or the absolute
lengthpadding-right: the percentage as specified or the absolute
lengthpadding-top: the percentage as specified or the absolute
lengthanimation typea
length formal syntax [ <
length> | <percentage> ]{1,4} examples setting padding with pixels html <h4>this element has moderate padding.</h4> <h3>the padding is huge in this element!</h3> ...
perspective - CSS: Cascading Style Sheets
syntax /* keyword value */ perspective: none; /* <
length> values */ perspective: 20px; perspective: 3.5em; /* global values */ perspective: inherit; perspective: initial; perspective: unset; values none indicates that no perspective transform is to be applied.
... <
length> a <
length> giving the distance from the user to the z=0 plane.
... formal definition initial valuenoneapplies totransformable elementsinheritednocomputed valuethe absolute
length or noneanimation typea
lengthcreates stacking contextyes formal syntax none | <
length> examples setting perspective this example shows a cube with the perspective set at different positions.
radial-gradient() - CSS: Cascading Style Sheets
<linear-color-stop> a color-stop's <color> value, followed by an one or two optional stop positions (either a <percentage> or a <
length> along the gradient's axis).
... a percentage of 0%, or a
length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray.
...the
length defines at which point between two color stops the gradient color should reach the midpoint of the color transition.
right - CSS: Cascading Style Sheets
syntax /* <
length> values */ right: 3px; right: 2.4em; /* <percentage>s of the width of the containing block */ right: 10%; /* keyword value */ right: auto; /* global values */ right: inherit; right: initial; right: unset; values <
length> a negative, null, or positive <
length> that represents: for absolutely positioned elements, the distance to the right edge of the containing block.
...this computed value is then handled as if it were a <
length>, <percentage>, or the auto keyword.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the width of the containing blockcomputed valueif specified as a
length, the corresponding absolute
length; if specified as a percentage, the specified value; otherwise, autoanimation typea
length, percentage or calc(); formal syntax <
length> | <percentage> | auto examples absolute and relative positioning using right html <div id="relative">relatively positioned</div> <div id="absolute">absolutely positioned</div> css #relative { width: 100px; height: 1...
scroll-snap-points-x - CSS: Cascading Style Sheets
repeat(<
length-percentage>) defines an interval at which snap points are defined, starting from the container's relevant start edge.
... only positive
lengths are allowed.
... formal definition initial valuenoneapplies toscroll containersinheritednopercentagesrelative to same axis of the padding-box of the scroll containercomputed valueas specified, but with relative
lengths converted into absolute
lengthsanimation typediscrete formal syntax none | repeat( <
length-percentage> )where <
length-percentage> = <
length> | <percentage> examples setting horizontal scroll snap points html <div id="container"> <div>1</div> <div>2</div> <div>3</div> </div> css #container { width: 200px; overflow: auto; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line-height: 200px; ...
scroll-snap-points-y - CSS: Cascading Style Sheets
repeat(<
length-percentage>) defines an interval at which snap points are defined, starting from the container's relevant start edge.
... only positive
lengths are allowed.
... formal definition initial valuenoneapplies toscroll containersinheritednopercentagesrelative to same axis of the padding-box of the scroll containercomputed valueas specified, but with relative
lengths converted into absolute
lengthsanimation typediscrete formal syntax none | repeat( <
length-percentage> )where <
length-percentage> = <
length> | <percentage> examples setting vertical scroll snap points html <div id="container"> <div>1</div> <div>2</div> <div>3</div> </div> css #container { height: 200px; width: 220px; overflow-x: hidden; overflow-y: auto; scroll-snap-points-y: repeat(200px); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line...
tab-size - CSS: Cascading Style Sheets
syntax /* <integer> values */ tab-size: 4; tab-size: 0; /* <
length> values */ tab-size: 10px; tab-size: 2em; /* global values */ tab-size: inherit; tab-size: initial; tab-size: unset; values <integer> a multiple of the advance width of the space character (u+0020) to be used as the width of tabs.
... <
length> the width of tabs.
... formal definition initial value8applies toblock containersinheritedyescomputed valuethe specified integer or an absolute
lengthanimation typea
length formal syntax <integer> | <
length> examples expanding by character count pre { tab-size: 4; /* set tab size to 4 characters wide */ } collapse tabs pre { tab-size: 0; /* remove indentation */ } comparing to the default size this example compares a default tab size with a custom tab size.
text-decoration-thickness - CSS: Cascading Style Sheets
syntax /* single keyword */ text-decoration-thickness: auto; text-decoration-thickness: from-font; /*
length */ text-decoration-thickness: 0.1em; text-decoration-thickness: 3px; /* percentage */ text-decoration-thickness: 10%; /* global values */ text-decoration-thickness: inherit; text-decoration-thickness: initial; text-decoration-thickness: unset; values auto the browser chooses an appropriate width for the text decoration line.
... <
length> specifies the thickness of the text decoration line as a <
length>, overriding the font file suggestion or the browser default.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the font size of the element itselfcomputed valueas specifiedanimation typeby computed value type formal syntax auto | from-font | <
length> | <percentage> examples varying thickness html <p class="thin">here's some text with a 1px red underline.</p> <p class="thick">this one has a 5px red underline.</p> <p class="shorthand">this uses the equivalent shorthand.</p> css .thin { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red; text-decoration-thickness: 1px; } .thick { text-deco...
text-underline-offset - CSS: Cascading Style Sheets
syntax /* single keyword */ text-underline-offset: auto; /*
length */ text-underline-offset: 0.1em; text-underline-offset: 3px; /* percentage */ text-underline-offset: 20%; /* global values */ text-underline-offset: inherit; text-underline-offset: initial; text-underline-offset: unset; the text-underline-offset property is specified as a single value from the list below.
... <
length> specifies the offset of underlines as a <
length>, overriding the font file suggestion and the browser default.
...it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the font size of the element itselfcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <
length> | <percentage> examples <p class="oneline">here's some text with an offset wavy red underline!</p> <br> <p class="twolines">this text has lines both above and below it.
top - CSS: Cascading Style Sheets
syntax /* <
length> values */ top: 3px; top: 2.4em; /* <percentage>s of the height of the containing block */ top: 10%; /* keyword value */ top: auto; /* global values */ top: inherit; top: initial; top: unset; values <
length> a negative, null, or positive <
length> that represents: for absolutely positioned elements, the distance to the top edge of the containing block.
...this computed value is then handled as if it were a <
length>, <percentage>, or the auto keyword.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the height of the containing blockcomputed valueif specified as a
length, the corresponding absolute
length; if specified as a percentage, the specified value; otherwise, autoanimation typea
length, percentage or calc(); formal syntax <
length> | <percentage> | auto examples body { background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; } <div>the size of this content is determined by the position of its edges.</div> specifications specification status comment css positioned layout module level 3the definition of 'top' in that specification.
translate() - CSS: Cascading Style Sheets
syntax /* single <
length-percentage> values */ transform: translate(200px); transform: translate(50%); /* double <
length-percentage> values */ transform: translate(100px, 200px); transform: translate(100px, 50%); transform: translate(30%, 200px); transform: translate(30%, 50%); values single <
length-percentage> values this value is a <
length> or <percentage> representing the abscissa (horizontal, x-coordinate) of the translating vector.
... double <
length-percentage> values this value describes two <
length> or <percentage> values representing both the abscissa (x-coordinate) and the ordinate (y-coordinate) of the translating vector.
... 10tx01ty001 10tx01ty001 100tx010ty00100001 [1 0 0 1 tx ty] formal syntax translate(<
length-percentage> , <
length-percentage>?) examples using a single-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translate(10px); /* equal to: translatex(10px) or translate(10px, 0) */ background-color: pink; } result combining y-axis and x-axis translat...
translate3d() - CSS: Cascading Style Sheets
syntax translate3d(tx, ty, tz) values tx is a <
length> or <percentage> representing the abscissa of the translating vector.
... ty is a <
length> or <percentage> representing the ordinate of the translating vector.
... tz is a <
length> representing the z component of the translating vector.
Constraint validation - Developer guides
stepmismatch constraint violation month an integer number of months week an integer number of weeks datetime, datetime-local, time an integer number of seconds range, number an integer min
length text, search, url, tel, email, password; also on the <textarea> element an integer
length the number of characters (code points) must not be less than the value of the attribute, if non-empty.
... tooshort constraint violation max
length text, search, url, tel, email, password; also on the <textarea> element an integer
length the number of characters (code points) must not exceed the value of the attribute.
...<input type="file" id="fs"> this displays: the javascript reads the file selected, uses the file.size() method to get its size, compares it to the (hard coded) limit, and calls the constraint api to inform the browser if there is a violation: function checkfilesize() { var fs = document.getelementbyid("fs"); var files = fs.files; // if there is (at least) one file selected if (files.
length > 0) { if (files[0].size > 75 * 1024) { // check the constraint fs.setcustomvalidity("the selected file must not be larger than 75 kb"); return; } } // no custom constraint violation fs.setcustomvalidity(""); } finally we hook the method with the correct event: window.onload = function () { document.getelementbyid("fs").onchange = checkfilesize; } you can see a ...
Date and time formats used in HTML - HTML: Hypertext Markup Language
see the table in the section days of the month for the month numbers and their corresponding names (and
lengths in days).
... the months of the year and their
lengths in days month number name (english)
length in days 01 january 31 02 february 28 (29 in leap years) 03 march 31 04 april 30 05 may 31 06 june 30 07 july 31 o8 august 31 09 september 30 10 october 31 11 november 30 12 december 31 week strings a week string specifies a week within a particular year.
... note that the normalized form of this date drops the ":00" indicating the number of seconds to be zero, because the seconds are optional when zero, and the normalized string minimizes the
length of the string.
<input type="file"> - HTML: Hypertext Markup Language
the filelist behaves like an array, so you can check its
length property to get the number of selected files.
... check to see if no files were selected, by checking if curfiles.
length is equal to 0.
... function updateimagedisplay() { while(preview.firstchild) { preview.removechild(preview.firstchild); } const curfiles = input.files; if(curfiles.
length === 0) { const para = document.createelement('p'); para.textcontent = 'no files currently selected for upload'; preview.appendchild(para); } else { const list = document.createelement('ol'); preview.appendchild(list); for(const file of curfiles) { const listitem = document.createelement('li'); const para = document.createelement('p'); if(validfiletype(...
<input type="range"> - HTML: Hypertext Markup Language
note: the following input attributes do not apply to the input range: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, max
length, min
length, multiple, pattern, placeholder, readonly, required, size, src, and width.
... password
length for a password manager's generated passwords.
...the specification describes how to add custom points to the range control using the list attribute and a <datalist> element, but does not have any requirements or even recommendations for standardized hash or tick marks along the
length of the control.
Expressions and operators - JavaScript
when you delete an array property, the array
length is not affected and other elements are no re-indexed.
...ing results: typeof true; // returns "boolean" typeof null; // returns "object" for a number or string, the typeof operator returns the following results: typeof 62; // returns "number" typeof 'hello world'; // returns "string" for property values, the typeof operator returns the type of value the property contains: typeof document.lastmodified; // returns "string" typeof window.
length; // returns "number" typeof math.ln2; // returns "number" for methods and functions, the typeof operator returns results as follows: typeof blur; // returns "function" typeof eval; // returns "function" typeof parseint; // returns "function" typeof shape.split; // returns "function" for predefined objects, the typeof operator returns results as follows: ...
... // arrays var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; 0 in trees; // returns true 3 in trees; // returns true 6 in trees; // returns false 'bay' in trees; // returns false (you must specify the index number, // not the value at that index) '
length' in trees; // returns true (
length is an array property) // built-in objects 'pi' in math; // returns true var mystring = new string('coral'); '
length' in mystring; // returns true // custom objects var mycar = { make: 'honda', model: 'accord', year: 1998 }; 'make' in mycar; // returns true 'model' in mycar; // returns true instanceof the instanceof operator returns true if the sp...
Array.prototype.every() - JavaScript
let lenvalue be the result of calling the get internal method // of o with the argument "
length".
... var len = o.
length >>> 0; // 4.
... if (arguments.
length > 1) { t = thisarg; } // 6.
Array.prototype.lastIndexOf() - JavaScript
defaults to the array's
length minus one (arr.
length - 1), i.e.
...if the index is greater than or equal to the
length of the array, the whole array will be searched.
... // production steps of ecma-262, edition 5, 15.4.4.15 // reference: http://es5.github.io/#x15.4.4.15 if (!array.prototype.lastindexof) { array.prototype.lastindexof = function(searchelement /*, fromindex*/) { 'use strict'; if (this === void 0 || this === null) { throw new typeerror(); } var n, k, t = object(this), len = t.
length >>> 0; if (len === 0) { return -1; } n = len - 1; if (arguments.
length > 1) { n = number(arguments[1]); if (n != n) { n = 0; } else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) { n = (n > 0 || -1) * math.floor(math.abs(n)); } } for (k = n >= 0 ?
Array.prototype.map() - JavaScript
let lenvalue be the result of calling the get internal // method of o with the argument "
length".
... var len = o.
length >>> 0; // 4.
... if (arguments.
length > 1) { t = arguments[1]; } // 6.
Array.prototype.reverse() - JavaScript
objects which do not contain a
length property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner.
... const a = [1, 2, 3]; console.log(a); // [1, 2, 3] a.reverse(); console.log(a); // [3, 2, 1] reversing the elements in an array-like object the following example creates an array-like object a, containing three elements and a
length property, then reverses the array-like object.
... const a = {0: 1, 1: 2, 2: 3,
length: 3}; console.log(a); // {0: 1, 1: 2, 2: 3,
length: 3} array.prototype.reverse.call(a); //same syntax for using apply() console.log(a); // {0: 3, 1: 2, 2: 1,
length: 3} specifications specification ecmascript (ecma-262)the definition of 'array.prototype.reverse' in that specification.
Array.prototype.shift() - JavaScript
this method changes the
length of the array.
...if the
length property is 0, undefined is returned.
...objects which do not contain a
length property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner.
ArrayBuffer - JavaScript
the arraybuffer object is used to represent a generic, fixed-
length raw binary data buffer.
... the arraybuffer() constructor creates a new arraybuffer of the given
length in bytes.
... instance properties arraybuffer.prototype.byte
length the read-only size, in bytes, of the arraybuffer.
BigInt64Array - JavaScript
bigint64array.prototype.byte
length returns the
length (in bytes) of the bigint64array from the start of its arraybuffer.
... bigint64array.prototype.
length returns the number of elements hold in the bigint64array.
... examples different ways to create a bigint64array // from a
length var bigint64 = new bigint64array(2); bigint64[0] = 42n; console.log(bigint64[0]); // 42n console.log(bigint64.
length); // 2 console.log(bigint64.bytes_per_element); // 8 // from an array var arr = new bigint64array([21n,31n]); console.log(arr[1]); // 31n // from another typedarray var x = new bigint64array([21n, 31n]); var y = new bigint64array(x); console.log(y[0]); // 21n // from an arraybuf...
BigUint64Array - JavaScript
biguint64array.prototype.byte
length returns the
length (in bytes) of the biguint64array from the start of its arraybuffer.
... biguint64array.prototype.
length returns the number of elements hold in the biguint64array.
... examples different ways to create a biguint64array // from a
length var biguint64 = new biguint64array(2); biguint64[0] = 42n; console.log(biguint64[0]); // 42n console.log(biguint64.
length); // 2 console.log(biguint64.bytes_per_element); // 8 // from an array var arr = new biguint64array([21n,31n]); console.log(arr[1]); // 31n // from another typedarray var x = new biguint64array([21n, 31n]); var y = new biguint64array(x); console.log(y[0]); // 21n // from an...
Float32Array - JavaScript
float32array.prototype.byte
length returns the
length (in bytes) of the float32array from the start of its arraybuffer.
... float32array.prototype.
length returns the number of elements hold in the float32array.
... examples different ways to create a float32array // from a
length var float32 = new float32array(2); float32[0] = 42; console.log(float32[0]); // 42 console.log(float32.
length); // 2 console.log(float32.bytes_per_element); // 4 // from an array var arr = new float32array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new float32array([21, 31]); var y = new float32array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = ...
Float64Array - JavaScript
float64array.prototype.byte
length returns the
length (in bytes) of the float64array from the start of its arraybuffer.
... float64array.prototype.
length returns the number of elements hold in the float64array.
... examples different ways to create a float64array // from a
length var float64 = new float64array(2); float64[0] = 42; console.log(float64[0]); // 42 console.log(float64.
length); // 2 console.log(float64.bytes_per_element); // 8 // from an array var arr = new float64array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new float64array([21, 31]); var y = new float64array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = ...
Function.prototype.bind() - JavaScript
ayprototypeslice = array.prototype.slice; function.prototype.bind = function(otherthis) { if (typeof this !== 'function') { // closest thing possible to the ecmascript 5 // internal iscallable function throw new typeerror('function.prototype.bind - what is trying to be bound is not callable'); } var baseargs= arrayprototypeslice.call(arguments, 1), baseargs
length = baseargs.
length, ftobind = this, fnop = function() {}, fbound = function() { baseargs.
length = baseargs
length; // reset to default base arguments baseargs.push.apply(baseargs, arguments); return ftobind.apply( fnop.prototype.isprototypeof(this) ?
...(proper bound functions have none.) the partial implementation creates bound functions whose
length property does not agree with that mandated by ecma-262: it creates functions with
length of 0.
... a full implementation—depending on the
length of the target function and the number of pre-specified arguments—may return a non-zero
length.
Int16Array - JavaScript
int16array.prototype.byte
length returns the
length (in bytes) of the int16array from the start of its arraybuffer.
... int16array.prototype.
length returns the number of elements hold in the int16array.
... examples different ways to create an int16array // from a
length var int16 = new int16array(2); int16[0] = 42; console.log(int16[0]); // 42 console.log(int16.
length); // 2 console.log(int16.bytes_per_element); // 2 // from an array var arr = new int16array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new int16array([21, 31]); var y = new int16array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(8)...
Int32Array - JavaScript
int32array.prototype.byte
length returns the
length (in bytes) of the int32array from the start of its arraybuffer.
... int32array.prototype.
length returns the number of elements hold in the int32array.
... examples different ways to create an int32array // from a
length var int32 = new int32array(2); int32[0] = 42; console.log(int32[0]); // 42 console.log(int32.
length); // 2 console.log(int32.bytes_per_element); // 4 // from an array var arr = new int32array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new int32array([21, 31]); var y = new int32array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(16...
Int8Array - JavaScript
int8array.prototype.byte
length returns the
length (in bytes) of the int8array from the start of its arraybuffer.
... int8array.prototype.
length returns the number of elements hold in the int8array.
... examples different ways to create an int8array // from a
length var int8 = new int8array(2); int8[0] = 42; console.log(int8[0]); // 42 console.log(int8.
length); // 2 console.log(int8.bytes_per_element); // 1 // from an array var arr = new int8array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new int8array([21, 31]); var y = new int8array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(8); var z =...
Math.hypot() - JavaScript
description calculating the hypotenuse of a right triangle, or the magnitude of a complex number, uses the formula math.sqrt(v1*v1 + v2*v2), where v1 and v2 are the
lengths of the triangle's legs, or the complex number's real and complex components.
... polyfill a naive approach that does not handle overflow/underflow issues: if (!math.hypot) math.hypot = function() { var y = 0, i = arguments.
length, containsinfinity = false; while (i--) { var arg = arguments[i]; if (arg === infinity || arg === -infinity) containsinfinity = true y += arg * arg } return containsinfinity ?
... infinity : math.sqrt(y) } a polyfill that avoids underflows and overflows: if (!math.hypot) math.hypot = function () { var max = 0; var s = 0; var containsinfinity = false; for (var i = 0; i < arguments.
length; ++i) { var arg = math.abs(number(arguments[i])); if (arg === infinity) containsinfinity = true if (arg > max) { s *= (max / arg) * (max / arg); max = arg; } s += arg === 0 && max === 0 ?
SharedArrayBuffer - JavaScript
the sharedarraybuffer object is used to represent a generic, fixed-
length raw binary data buffer, similar to the arraybuffer object, but in a way that they can be used to create views on shared memory.
... instance properties sharedarraybuffer.prototype.byte
length the size, in bytes, of the array.
... examples creating a new sharedarraybuffer var sab = new sharedarraybuffer(1024); slicing the sharedarraybuffer sab.slice(); // sharedarraybuffer { byte
length: 1024 } sab.slice(2); // sharedarraybuffer { byte
length: 1022 } sab.slice(-2); // sharedarraybuffer { byte
length: 2 } sab.slice(0, 1); // sharedarraybuffer { byte
length: 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, ...
String.prototype.charCodeAt() - JavaScript
syntax str.charcodeat(index) parameters index an integer greater than or equal to 0 and less than the
length of the string.
... charcodeat() returns nan if the given index is less than 0, or if it is equal to or greater than the
length of the string.
...ove in the previous iteration return false; // hi = str.charcodeat(idx - 1); // low = code; // return ((hi - 0xd800) * 0x400) + // (low - 0xdc00) + 0x10000; } return code; } fixing charcodeat() to handle non-basic-multilingual-plane characters if their presence earlier in the string is known function knowncharcodeat(str, idx) { str += ''; var code, end = str.
length; var surrogatepairs = /[\ud800-\udbff][\udc00-\udfff]/g; while ((surrogatepairs.exec(str)) != null) { var li = surrogatepairs.lastindex; if (li - 2 < idx) { idx++; } else { break; } } if (idx >= end || idx < 0) { return nan; } code = str.charcodeat(idx); var hi, low; if (0xd800 <= code && code <= 0xdbff) { hi = code; low = str.charco...
String.prototype.indexOf() - JavaScript
for fromindex values lower than 0, or greater than str.
length, the search starts at index 0 and str.
length, respectively.
...with no fromindex value, or any fromindex value lower than the string's
length, the returned value is the same as the fromindex value: 'hello world'.indexof('') // returns 0 'hello world'.indexof('', 0) // returns 0 'hello world'.indexof('', 3) // returns 3 'hello world'.indexof('', 8) // returns 8 however, with any fromindex value equal to or greater than the string's
length, the returned value is the string's
length: 'hello world'.indexof('', 11) // returns 11 'hello w...
...the index of the first character is 0, and the index of the last character of a string called stringname is stringname.
length - 1.
TypedArray.prototype.lastIndexOf() - JavaScript
syntax typedarray.lastindexof(searchelement[, fromindex = typedarray.
length]) parameters searchelement element to locate in the typed array.
...defaults to the typed array's
length, i.e.
...if the index is greater than or equal to the
length of the typed array, the whole typed array will be searched.
Uint16Array - JavaScript
uint16array.prototype.byte
length returns the
length (in bytes) of the uint16array from the start of its arraybuffer.
... uint16array.prototype.
length returns the number of elements hold in the uint16array.
... examples different ways to create a uint16array // from a
length var uint16 = new uint16array(2); uint16[0] = 42; console.log(uint16[0]); // 42 console.log(uint16.
length); // 2 console.log(uint16.bytes_per_element); // 2 // from an array var arr = new uint16array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new uint16array([21, 31]); var y = new uint16array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new array...
Uint32Array - JavaScript
uint32array.prototype.byte
length returns the
length (in bytes) of the uint32array from the start of its arraybuffer.
... uint32array.prototype.
length returns the number of elements hold in the uint32array.
... examples different ways to create a uint32array // from a
length var uint32 = new uint32array(2); uint32[0] = 42; console.log(uint32[0]); // 42 console.log(uint32.
length); // 2 console.log(uint32.bytes_per_element); // 4 // from an array var arr = new uint32array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new uint32array([21, 31]); var y = new uint32array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new array...
Uint8Array - JavaScript
uint8array.prototype.byte
length returns the
length (in bytes) of the uint8array.
... uint8array.prototype.
length returns the number of elements held in the uint8array.
... examples different ways to create a uint8array // from a
length var uint8 = new uint8array(2); uint8[0] = 42; console.log(uint8[0]); // 42 console.log(uint8.
length); // 2 console.log(uint8.bytes_per_element); // 1 // from an array var arr = new uint8array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new uint8array([21, 31]); var y = new uint8array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(8)...
Uint8ClampedArray - JavaScript
uint8clampedarray.prototype.byte
length returns the
length (in bytes) of the uint8clampedarray from the start of its arraybuffer.
... uint8clampedarray.prototype.
length returns the number of elements hold in the uintclamped8array.
... examples different ways to create a uint8clampedarray // from a
length var uintc8 = new uint8clampedarray(2); uintc8[0] = 42; uintc8[1] = 1337; console.log(uintc8[0]); // 42 console.log(uintc8[1]); // 255 (clamped) console.log(uintc8.
length); // 2 console.log(uintc8.bytes_per_element); // 1 // from an array var arr = new uint8clampedarray([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new uint8clampedarray([21, 31]); var y = new uint8clamp...
WebAssembly.Table.prototype.set() - JavaScript
exceptions if index is greater than or equal to table.prototype.
length, a rangeerror is thrown.
...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 inc...
Iteration protocols - JavaScript
using one is likely to result in runtime errors or buggy behavior: let nonwellformediterable = {}; nonwellformediterable[symbol.iterator] = () => 1; [...nonwellformediterable]; // typeerror: [] is not a function iterator examples simple iterator function makeiterator(array) { let nextindex = 0 return { next: function() { return nextindex < array.
length ?
... with a generator function* makesimplegenerator(array) { let nextindex = 0; while (nextindex < array.
length) { yield array[nextindex++]; } } let gen = makesimplegenerator(['yo', 'ya']); console.log(gen.next().value); // 'yo' console.log(gen.next().value); // 'ya' console.log(gen.next().done); // true function* idmaker() { let index = 0; while (true) { yield index++; } } let gen = idmaker() console.log(gen.next().value); // '0' console.log(gen.next().value); // '1' console.log(gen.
... let index = 0; return { next: () => { if (index < this.data.
length) { return {value: this.data[index++], done: false} } else { return {done: true} } } } } } const simple = new simpleclass([1,2,3,4,5]); for (const val of simple) { console.log(val); // '1' '2' '3' '4' '5' } is a generator object an iterator or an iterable?
Trailing commas - JavaScript
syntax , examples trailing commas in literals arrays javascript ignores trailing commas in arrays: var arr = [ 1, 2, 3, ]; arr; // [1, 2, 3] arr.
length; // 3 if more than one trailing comma is used, an elision (or hole) is produced.
... var arr = [1, 2, 3,,,]; arr.
length; // 5 objects starting with ecmascript 5, trailing commas in object literals are legal as well: var object = { foo: "bar", baz: "qwerty", age: 42, }; trailing commas in functions ecmascript 2017 allows trailing commas in function parameter lists.
...trailing commas don't affect the
length property of function declarations or their arguments object.
<mspace> - MathML
depth the desired depth (below the baseline) of the space (see
length for values and units).
... height the desired height (above the baseline) of the space (see
length for values and units).
... width the desired width of the space (see
length for values and units).
Digital audio concepts - Web media technologies
the shorter the wave
length (the closer together the crests of the wave are), the higher the frequency (or pitch) of the sound that's produced.
...however, as the frequency of the audio signal goes up, the wave
length goes up as well.
... eventually, the wave
length approaches then exceeds the distance between the ears, and it becomes difficult or impossible to unambiguously localize the sound.
Progressive web app structure - Progressive web apps (PWAs)
witter:</span> <a href='https://twitter.com/twitter'>@twitter</a></li>\n\ <li><span>website:</span> <a href='http://website/'>website</a></li>\n\ <li><span>github:</span> <a href='https://github'>github</a></li>\n\ <li><span>more:</span> <a href='http://js13kgames.com/entries/slug'>js13kgames.com/entries/slug</a></li>\n\ </ul>\n\ </article>"; var content = ''; for(var i=0; i<games.
length; i++) { 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; }...
...("notifications"); button.addeventlistener('click', function(e) { notification.requestpermission().then(function(result) { if(result === 'granted') { randomnotification(); } }); }); the last block creates notifications that display a randomly-selected item from the games list: 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 will quickly l...
...s13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-64.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa/icons/icon-128.png', '/pwa-examples/js13kpwa/icons/icon-168.png', '/pwa-examples/js13kpwa/icons/icon-192.png', '/pwa-examples/js13kpwa/icons/icon-256.png', '/pwa-examples/js13kpwa/icons/icon-512.png' ]; var gamesimages = []; for(var i=0; i<games.
length; i++) { gamesimages.push('data/img/'+games[i].slug+'.jpg'); } var contenttocache = appshellfiles.concat(gamesimages); the next block installs the service worker, which then actually caches all the files contained in the above list: self.addeventlistener('install', function(e) { console.log('[service worker] install'); e.waituntil( caches.open(cachename).then(function(cache) { co...
Structural overview of progressive web apps - Progressive web apps (PWAs)
href='https://twitter.com/twitter'> @twitter</a></li>\n\ <li><span>website:</span> <a href='http://website/'>website</a></li>\n\ <li><span>github:</span> <a href='https://github'>github</a></li>\n\ <li><span>more:</span> <a href='http://js13kgames.com/entries/slug'> js13kgames.com/entries/slug</a></li>\n\ </ul>\n\ </article>"; var content = ''; for(var i=0; i<games.
length; i++) { 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("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 at here is the se...
...s13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-64.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa/icons/icon-128.png', '/pwa-examples/js13kpwa/icons/icon-168.png', '/pwa-examples/js13kpwa/icons/icon-192.png', '/pwa-examples/js13kpwa/icons/icon-256.png', '/pwa-examples/js13kpwa/icons/icon-512.png' ]; var gamesimages = []; for(var i=0; i<games.
length; i++) { gamesimages.push('data/img/'+games[i].slug+'.jpg'); } var contenttocache = appshellfiles.concat(gamesimages); with the file list prepared, it's time to install the service worker itself.
cx - SVG: Scalable Vector Graphics
value <
length-percentage> default value 0 animatable yes note: starting with svg2 cx, is a geometry property, meaning this attribute can also be used as css property for circles.
... value <
length-percentage> default value 0 animatable yes note: starting with svg2 cx, is a geometry property, meaning this attribute can also be used as css property for ellipses.
... value <
length> default value 50% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient cx="0" id="mygradient000"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cx="50%" id="mygradient050"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cx="100%" id="mygradient100"> <s...
cy - SVG: Scalable Vector Graphics
value <
length> | <percentage> default value 0 animatable yes note: starting with svg2, cy is a geometry property meaning this attribute can also be used as a css property for circles.
... value <
length> | <percentage> default value 0 animatable yes note: starting with svg2, cy is a geometry property meaning this attribute can also be used as a css property for ellipses.
... value <
length> default value 50% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient cy="0" id="mygradient000"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cy="50%" id="mygradient050"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cy="100%" id="mygradient100"> <s...
letter-spacing - SVG: Scalable Vector Graphics
if the attribute value is a unitless number (like 128), the browser processes it as a <
length> in the current user coordinate system.
... if the attribute value has a unit identifier, such as .25em or 1%, then the browser converts the <
length> into its corresponding value in the current user coordinate system.
...ut it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 400 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" letter-spacing="2">bigger letter-spacing</text> <text x="200" y="20" letter-spacing="-0.5">smaller letter-spacing</text> </svg> usage notes value normal | <
length> default value normal animatable yes for a description of the values, please refer to the css letter-spacing property.
primitiveUnits - SVG: Scalable Vector Graphics
the primitiveunits attribute specifies the coordinate system for the various
length values within the filter primitives and for the attributes that define the filter primitive subregion.
... only one element is using this attribute: <filter> usage notes value userspaceonuse | objectboundingbox default value userspaceonuse animatable yes userspaceonuse this value indicates that any
length values within the filter definitions represent values in the current user coordinate system in place at the time when the <filter> element is referenced (i.e., the user coordinate system for the element referencing the <filter> element via a filter attribute).
... objectboundingbox this value indicates that any
length values within the filter definitions represent fractions or percentages of the bounding box on the referencing element.
SVG Attribute reference - SVG: Scalable Vector Graphics
nt-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphref gradienttransform gradientunits h hanging height href hreflang horiz-adv-x horiz-origin-x i id ideographic image-rendering in in2 intercept k k k1 k2 k3 k4 kernelmatrix kernelunit
length kerning keypoints keysplines keytimes l lang
lengthadjust letter-spacing lighting-color limitingconeangle local m marker-end marker-mid marker-start markerheight markerunits markerwidth mask maskcontentunits maskunits mathematical max media method min mode n name numoctaves o offset opacity operator order orient orientation origin overflow overl...
...ine-position overline-thickness p panose-1 paint-order path path
length patterncontentunits patterntransform patternunits ping pointer-events points pointsatx pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r radius referrerpolicy refx refy rel rendering-intent repeatcount repeatdur requiredextensions requiredfeatures restart result rotate rx ry s scale seed shape-rendering slope 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 target targetx targety text-anchor text-decoration text-rendering text
length 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 viewtarget visibility w width widths word-spacing writing-mode x x x-height x1 x2 xchannelselector xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xml:lang xml:space y y y1 y2 ychannelselector z z zoomandpan svg attributes by category generic attributes core attributes id, lang, tabindex, xml...
<circle> - SVG: Scalable Vector Graphics
value type: <
length>|<percentage> ; default value: 0; animatable: yes cy the y-axis coordinate of the center of the circle.
... value type: <
length>|<percentage> ; default value: 0; animatable: yes r the radius of the circle.
... value type: <
length> ; default value: 0; animatable: yes path
length the total
length for the circle's circumference, in user units.
<textPath> - SVG: Scalable Vector Graphics
value type: <url> ; default value: none; animatable: yes
lengthadjust where
length adjustment should be applied to the text: the space between glyphs, or both the space and the glyphs themselves.
... value type: <
length>|<percentage>|<number> ; default value: 0; animatable: yes text
length the width of the space into which the text will render.
... value type: <
length>|<percentage>|<number> ; default value: auto; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-c...
Example - SVG: Scalable Vector Graphics
r widget = document.getelementbyid('cursor'); widget.setattributens(null,'cx',mouse_x); widget.setattributens(null,'cy',mouse_y); } document.onmousemove = onmousemove; // determine (x,y) of the cursor function cursor() { return [mouse_x, mouse_y]; } // determine average (x,y) of the swarm function averagemoteposition() { if( !motes ) return [0,0]; if( motes.
length == 0 ) return [0,0]; var i; var sum_x=0, sum_y=0; for(i=0; i<motes.
length; i++) { sum_x += motes[i].x; sum_y += motes[i].y; } return [sum_x/motes.
length, sum_y/motes.
length]; } // a nicer, integer random function rand(modulo) { return math.round( math.random() * (modulo-1)); } // class mote function mote() { // dimensions of drawing area.
... while( motes.
length < num ) motes.push( new mote() ); // or too many?
... if( num == 0 ) motes = []; else if( motes.
length > num ) motes = motes.slice(0,num-1); // move a random mote if( motes.
length > 0 ) motes[ rand( motes.
length ) ].move(); // and do this again in 1/100 sec settimeout('update()', 10); } ]]> </script> </body> </html> ...
For Further Reading - XSLT: Extensible Stylesheet Language Transformations
kay
length: 992 pages publisher: wrox; 2 edition (may 3, 2001) isbn: 0764543814 michael kay is a member of the w3c xsl working group and the developer of his own open-source xslt processor, saxon.
... http://www.amazon.com/xslt-programme.../dp/0764543814 xslt author: doug tidwell
length: 473 pages publisher: o'reilly media; 1 edition (august 15, 2001) isbn: 0596000537 doug tidwell is a senior developer at ibm and a prominent evangelist for xml technologies generally.
...ray
length: 432 pages publisher: o'reilly media; 2 edition (september 22, 2003) isbn: 0596004206 as the title indicates, this is an overview of xml generally.
Porting the Library Detector - Archive of obsolete content
ldiconhtml(icons[library.name], library.name + "<br>version: " + library.version); }); widgetcontent += htmlcontentpostamble; return widgetcontent; } function updatewidgetview(tab) { var widgetview = widget.getview(tab.window); if (!tab.libraries) { tab.libraries = []; } widgetview.content = buildwidgetviewcontent(tab.libraries); widgetview.width = tab.libraries.
length * icon_width; } main.js will use the tabs module to update the widget's content when necessary (for example, when the user switches between tabs): tabs.on('activate', function(tab) { updatewidgetview(tab); }); tabs.on('ready', function(tab) { tab.libraries = []; }); showing the library detail the xul library detector displayed the detailed information about each library on mouseover in...
...this means we'll need two additional content scripts: one in the widget's context, which listens for icon mouseover events and sends a message to main.js containing the name of the corresponding library: function setlibraryinfo(element) { self.port.emit('setlibraryinfo', element.target.title); } var elements = document.getelementsbytagname('img'); for (var i = 0; i < elements.
length; i++) { elements[i].addeventlistener('mouseover', setlibraryinfo, false); } one in the panel, which updates the panel's content with the library information: self.on("message", function(libraryinfo) { window.document.body.innerhtml = libraryinfo; }); finally main.js relays the library information from the widget to the panel: widget.port.on('setlibraryinfo', function(libraryinfo) { ...
page-mod - Archive of obsolete content
la.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", elements[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.
...h, when clicked, highlights all the div elements in the document loaded into the active tab: require("sdk/ui/button/action").actionbutton({ id: "highlight-divs", label: "highlight divs", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: 'var divs = document.getelementsbytagname("div");' + 'for (var i = 0; i < divs.
length; ++i) {' + 'divs[i].setattribute("style", "border: solid red 1px;");' + '}' }); } }); to run this example you'll also have to have an icon file named "icon-16.png" saved in your add-on's "data" directory.
tabs - Archive of obsolete content
in particular, you can enumerate it: var tabs = require('sdk/tabs'); for (let tab of tabs) console.log(tab.title); you can also access individual tabs by index: var tabs = require('sdk/tabs'); tabs.on('ready', function () { console.log('first: ' + tabs[0].title); console.log('last: ' + tabs[tabs.
length-1].title); }); you can access the currently active tab: var tabs = require('sdk/tabs'); tabs.on('activate', function () { console.log('active: ' + tabs.activetab.url); }); track a single tab given a tab, you can register event listeners to be notified when the tab is closed, activated or deactivated, or when the page hosted by the tab is loaded or retrieved from the "back-forward cache": ...
...var tabs = require("sdk/tabs"); console.log("title of active tab is " + tabs.activetab.title);
length the number of open tabs across all windows.
windows - Archive of obsolete content
var windows = require("sdk/windows"); for (let window of windows.browserwindows) { console.log(window.title); } console.log(windows.browserwindows.
length); the currently active window is given by browserwindows.activewindow: var windows = require("sdk/windows").browserwindows; windows.on('activate', function(window) { console.log("a window was activated."); var activewindowtitle = windows.activewindow.title; console.log("active window title is: " + activewindowtitle); }); events the browserwindows property emits the following events whi...
... var windows = require("sdk/windows").browserwindows; //print how many tabs the current window has console.log("the active window has " + windows.activewindow.tabs.
length + " tabs."); // print the title of all browser windows for (let window of windows) { console.log(window.title); } // close the active window windows.activewindow.close(function() { console.log("the active window was closed"); }); methods activate() makes window active, which will focus that window and bring it to the foreground.
io/file - Archive of obsolete content
this means that: if the file does not exist it is created if the file exists, its
length is truncated to zero it is not possible to open the file in append mode.
... const fileio = require("sdk/io/file"); let path = "/users/work/"; let list = fileio.list(path); for (i = 0; i < list.
length; i++) { let item = fileio.join(path, list[i]); if (fileio.isfile(item)) { console.log(item + " is a file"); } else { console.log(item + " is a directory"); } } parameters path : string the path of the object.
util/list - Archive of obsolete content
list is a base trait and is meant to be part of a composition, since all of its api is private except for the
length property.
... examples: var { list } = require("sdk/util/list"); var mylist = list.compose({ add: function add(item1, item2, /*item3...*/) { array.slice(arguments).foreach(this._add.bind(this)); }, remove: function remove(item1, item2, /*item3...*/) { array.slice(arguments).foreach(this._remove.bind(this)); } }); mylist('foo', 'bar', 'baz').
length == 3; // true new mylist('new', 'keyword').
length == 2; // true mylist.apply(null, [1, 2, 3]).
length == 3; // true let list = mylist(); list.
length == 0; // true list.add(1, 2, 3) == 3; // true properties
length number of elements in this list.
File I/O - Archive of obsolete content
// if you are sure there will never ever be any non-ascii text in data you can // also call fostream.write(data, data.
length) directly var converter = components.classes["@mozilla.org/intl/converter-output-stream;1"].
... createinstance(components.interfaces.nsifileoutputstream); stream.init(afile, 0x04 | 0x08 | 0x20, 0600, 0); // readwrite, create, truncate stream.write(pngbinary, pngbinary.
length); if (stream instanceof components.interfaces.nsisafeoutputstream) { stream.finish(); } else { stream.close(); } more there are more methods and properties on nsifile and nsilocalfile interfaces; please refer to their documentation for more details.
Modules - Archive of obsolete content
// at the end of your code: (assuming neither 'i' nor 'thatobj' is being exported!) for (var i=0; i < exported_symbols.
length; i++) {thatobj[exported_symbols[i]] = eval(exported_symbols[i]);} } or for one-time-only usage of a module: (function (thatobj) { thatobj = thatobj || window; var exported_symbols = [ // put the symbols here ]; // your code here...
... // at the end of your code: (assuming neither 'i' nor 'thatobj' is being exported!) for (var i=0; i < exported_symbols.
length; i++) {thatobj[exported_symbols[i]] = eval(exported_symbols[i]);} })(); // can put an object argument here ...
Post data to window - Archive of obsolete content
createinstance(ci.nsistringinputstream); if ("data" in stringstream) // gecko 1.9 or newer stringstream.data = datastring; else // 1.8 or older stringstream.setdata(datastring, datastring.
length); var postdata = cc["@mozilla.org/network/mime-input-stream;1"].
... createinstance(ci.nsimimeinputstream); postdata.addheader("content-type", "application/x-www-form-urlencoded"); postdata.addcontent
length = true; postdata.setdata(stringstream); // postdata is ready to be used as apostdata argument ...
xml:base support in old browsers - Archive of obsolete content
heck 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 (xmlbase.match(/\/$/) && xlink.match(/\/$/)) { xmlbase = xmlbase.substring(0, xmlbase.
length-2); // strip off last slash to join with xlink path with slash } // alert(xmlbase + '::' + xlink); } var link = xmlbase + xlink; if (!link.match(scheme)) { // if there is no domain, we'll need to use the current domain var loc = window.location; if (link.indexof('/') === 0 ) { // if link is an absolute url, it 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!!!!!
getAttributeNS - Archive of obsolete content
e('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 only character (besides colon) allowed in an xml name which needs escaping) for (var j = 0; j < attrs.
length; j++) { // thisitem's atts // e.g., abc:href, xlink:href while (((result = prefixatt.exec(attrs[j].nodename)) !== null) && thisitem.nodename !== '#document' && thisitem.nodename !== '#document-fragment') { var xmlnsprefix = new regexp('^xmlns:'+result[1]+'$'); // e.g., xmnls:xl, xmlns:xlink // check higher up for xmlns:prefix // che...
...ck the current node and if necessary, check for the next matching local name up in the hierarchy (until reaching the document root) while (thisitem.nodename !== '#document' && thisitem.nodename !== '#document-fragment') { attrs2 = thisitem.attributes; for (var i = 0; i < attrs2.
length; i++) { // search for any prefixed xmlns declaration on thisitem which match prefixes found above with desired local name if (attrs2[i].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 fou...
How to convert an overlay extension to restartless - Archive of obsolete content
// load stylesheets let stylesheetservice= components.classes["@mozilla.org/content/style-sheet-service;1"] .getservice(components.interfaces.nsistylesheetservice); for (let i=0,len=stylesheets.
length;i<len;i++) { let stylesheeturi = services.io.newuri(stylesheets[i], null, null); stylesheetservice.loadandregistersheet(stylesheeturi, stylesheetservice.author_sheet); } ...
... // unload stylesheets let stylesheetservice = components.classes["@mozilla.org/content/style-sheet-service;1"] .getservice(components.interfaces.nsistylesheetservice); for (let i=0,len=stylesheets.
length;i<len;i++) { let stylesheeturi = services.io.newuri(stylesheets[i], null, null); if (stylesheetservice.sheetregistered(stylesheeturi, stylesheetservice.author_sheet)) { stylesheetservice.unregistersheet(stylesheeturi, stylesheetservice.author_sheet); } } ...
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
to set a maximum
length in characters, declare the max
length attribute with a positive integer value.
... <script type="application/javascript"><![cdata[ var nodes = gbrowser.mtabcontainer.childnodes; for (var i = 0; i < nodes.
length; i++) alert(nodes[i].label); ]]></script> listing 18: embedding a script in xul note: although embedding javascript is permitted, it's generally encouraged that you instead place your javascript code in an external file.
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
createinstance(components.interfaces.nsiscriptableunicodeconverter); converter.charset = "utf-8"; var converteddata = converter.convertfromunicode(adata); converteddata += converter.finish(); // write and close stream stream.write(converteddata, converteddata.
length); if (stream instanceof components.interfaces.nsisafeoutputstream) { stream.finish(); } else { stream.close(); } }, createmenu method this event handler is called when the session store submenu opens.
... listing 24: content for createmenu method createmenu: function(event) { var menupopup = event.target; for (var i = menupopup.childnodes.
length - 1; i >= 0; i--) { var node = menupopup.childnodes[i]; if (node.hasattribute("filename")) menupopup.removechild(node); } var fileenum = this._dir.directoryentries; while (fileenum.hasmoreelements()) { var file = fileenum.getnext().queryinterface(components.interfaces.nsifile); var re = new regexp("^session_(\\d+)\.js$"); if (!re.test(file.leafnam...
XPCOM Objects - Archive of obsolete content
the second one will hold the
length of the return array, and the third parameter will hold the array itself.
...also, since js arrays have the
length attribute to get their
length, there's no need for the second parameter to be used, so we just pass it an empty object that we won't use.
Adding preferences to an extension - Archive of obsolete content
is" referring to the right object, so we need to reference // it by its full name var symbol = stockwatcher.tickersymbol; var fullurl = "http://quote.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&e=.csv&s=" + symbol; function inforeceived() { var samplepanel = document.getelementbyid('stockwatcher2'); var output = httprequest.responsetext; if (output.
length) { // remove any whitespace from the end of the string output = output.replace(/\w*$/, ""); // build the tooltip string var fieldarray = output.split(","); samplepanel.label = symbol + ": " + fieldarray[1]; samplepanel.tooltiptext = "chg: " + fieldarray[4] + " | " + "open: " + fieldarray[5] + " | " + "low: " + fielda...
...her 2 options" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="sw2-stock-pane" label="stock settings"> <preferences> <preference id="pref_symbol" name="extensions.stockwatcher2.symbol" type="string"/> </preferences> <hbox align="center"> <label control="symbol" value="stock to watch: "/> <textbox preference="pref_symbol" id="symbol" max
length="4"/> </hbox> </prefpane> </prefwindow> the <preferences> block establishes all the settings we implement as well as their types.
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
the following code snippet shows a simplified version of the logic that happens in the actual sample: // doc is the dom to the document returned articles=doc.getelementsbytagname("article"); for(i=0;i<articles.
length;i++) { // acquiring the data from the dom...
.../ /// calldevedge represents the inner-browsing function here // function calldevedge(loaddata,ele) { var x = new xmlremoterequest(); doc=x.getremotedocument(loaddata); document.getelementbyid("container").innerhtml=""; if(doc!=null) { tagname="article"; // ie fix if(document.all) tagname="nde:"+tagname; articles=doc.getelementsbytagname(tagname); for(i=0;i<articles.
length;i++) { article=articles.item(i); tagname="title"; // ie fix if(document.all) tagname="nde:"+tagname; valuee=article.getelementsbytagname(tagname).item(0).firstchild.nodevalue; tagname="summary"; // ie fix if(document.all) tagname="nde:"+tagname; paraa=article.getelements...
Using XML Data Islands in Mozilla - Archive of obsolete content
ar 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 = "the purchase order contains " + lineitems.
length + " line items.
...{ 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.
Code snippets - Archive of obsolete content
components.utils.import("resource://services-sync/engines.js"); components.utils.import("resource://services-sync/engines/bookmarks.js"); let bme = weave.service.enginemanager.get("bookmarks"); let ids = object.keys(bme._store.getallids()); for each (let id in ids) { let record = bme._store.createrecord(id, "bookmarks"); let len = record.tostring().
length; if (len > 1000) { console.log("id: " + id + ", len = " + len + ", " + record.title); } } print an alphabetically sorted list of members of a collection components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); let ids = json.parse(new resource(weave.service.storageurl + "bookmarks").get()); for each (let id in ids.sort...
...()) { console.log(" " + id); } get a count of the number of members of a collection on the server let collection = "passwords"; components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); json.parse(new resource(weave.service.storageurl + collection).get()).
length; dump the cleartext of each record in a collection to the console.
Simple Storage - Archive of obsolete content
if there are no notes, we'll show a// disabled "(empty)" menuitem.function updatejetpackmenu() { jetpack.menu.set({ label: "notes", menu: new jetpack.menu(notes.
length > 0 ?
...:(jetpack.menu.context.page.beforeshow = function (menu) { menu.reset(); if (jetpack.selection.text) menu.add({ label: "note", command: function () { notes.unshift(jetpack.selection.text); if (notes.
length > 20) notes.pop(); updatejetpackmenu(); } });};// initialize the jetpack menu with the current notes.updatejetpackmenu(); see also settings jep 11 ...
Tabs - Archive of obsolete content
blah(
lengthstringfocusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text
lengththe number of open tabsstring focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded.
... urlurl to be openedstring jetpack.tabs.open("http://www.example.com/"); blah(
lengthstringfocusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text
lengththe number of open tabsstring focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded.
Simple Storage - Archive of obsolete content
function updatejetpackmenu() { jetpack.menu.set({ label: "notes", menu: new jetpack.menu(notes.
length > 0 ?
...:( jetpack.menu.context.page.beforeshow = function (menu) { menu.reset(); if (jetpack.selection.text) menu.add({ label: "note", command: function () { notes.unshift(jetpack.selection.text); if (notes.
length > 20) notes.pop(); updatejetpackmenu(); } }); }; // initialize the jetpack menu with the current notes.
The new nsString class implementation (1999) - Archive of obsolete content
function api to manipulate nsstrimpl offers simple memory allocator api for specialized memory policy shares binary format with bstring coming soon: a new xpcom (nsistring) interface non-templatized; this is a requirement for gecko very efficient buffer manipulation architecture the fundamental data type in the new architecture is struct nsstrimpl, given below: struct nsstrimpl { print32 m
length; void* mbuffer; print32 mcapacity; char mcharsize; char munused; // and now for the nsstrimpl api...
... static void ensurecapacity(nsstrimpl& astring,pruint32 anew
length); static void growcapacity(nsstrimpl& astring,pruint32 anew
length); static void append(nsstrimpl& adest,const nsstrimpl& asource,pruint32 anoffset,print32 acount); static void appendcstring(nsstrimpl& adest,const char* asource,pruint32 anoffset,print32 acount); static void assign(nsstrimpl& adest,const nsstrimpl& asource,pruint32 anoffset,print32 acount); static void assigncstring(nsstrimpl& adest,const char* asource,pruint32 anoffset,print32 acount); // assign a char or a substring into the existing string...
Writing textual data - Archive of obsolete content
var chunk = converter.convertfromunicode(your_string); os.write(chunk, chunk.
length); // repeat as needed for further strings at the end, you need to call finish and write its data to the stream.
... var fin = converter.finish(); if (fin.
length > 0) os.write(fin, fin.
length); os.close(); converting a string into a stream sometimes, it is useful to convert a string into a stream, for example for uploading it using nsiuploadchannel.
ContextMenus - Archive of obsolete content
<script> function showhidedeleteitem() { var deleteitem = document.getelementbyid("delete"); var rows = document.getelementbyid("rows"); deleteitem.hidden = (rows.childnodes.
length == 0); } </script> <menupopup id="inssel-menu" onpopupshowing="showhidedeleteitem()"> <menuitem label="insert"/> <menuitem id="delete" label="delete"/> </menupopup> in this example, the showhidedeleteitem function is called when the popupshowing event is fired.
... deleteitem.disabled = (rows.childnodes.
length == 0); for this example, using the disabled property is more suitable.
Property - Archive of obsolete content
rltab hasuservalue height hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label labelelement lastpermanentchild lastselected left linkedpanel listboxobject locked markupdocumentviewer max maxheight max
length maxrows maxwidth menu menuboxobject menupopup min minheight minresultsforpopup minwidth minute minuteleadingzero mode month monthleadingzero name next nomatch notificationshidden object observes onfirstpage onlastpage open ordinal orient pack pagecount pageid pageincrement pageindex pagestep parentcontainer palette persist pers...
...electedindex selecteditem selecteditems selectedpanel selectedtab selectionend selectionstart selstyle seltype sessioncount sessionhistory showcommentcolumn showpopup size smoothscroll spinbuttons src state statusbar statustext stringbundle strings style subject suppressonselect tabcontainer tabindex tabs tabscrolling tabpanels tag text
length textvalue timeout title toolbarname toolbarset tooltip tooltiptext top treeboxobject type uri useraction value valuenumber view webbrowserefind webnavigation webprogress width wizardpages wraparound year yearleadingzero related dom element properties dom:element.attributes dom:element.baseuri dom:element.childelementcount dom:element.childno...
Rule Compilation - Archive of obsolete content
var
length = vbox.childnodes.
length; this request to return the number of children of the vbox will make the template builder process the query and output content.
... once done, the correct
length can be returned.
Input Controls - Archive of obsolete content
max
length the maximum number of characters that the textbox allows.
... the following example shows some textboxes: example 1 : source view <label control="some-text" value="enter some text"/> <textbox id="some-text"/> <label control="some-password" value="enter a password"/> <textbox id="some-password" type="password" max
length="8"/> multiline textbox the textbox examples above will create text inputs that can only be used for entering one line of text.
Using SOAP in XULRunner 1.9 - Archive of obsolete content
ponsexml); 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.content
length); < 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; } > getr...
...esponse(xhr); > }; > var headers = { > 'method': 'post', > 'content-type': soapclient.contenttype + '; charset="' + > soapclient.charset + '"', > 'content-
length': soapclient.content
length, > 'soapserver': soapclient.soapserver, > 'soapaction': soapreq.action > }; > for (var h in headers) { xhr.setrequestheader(h, headers[h]); } > xhr.send(content); ...
NPByteRange - Archive of obsolete content
syntax typedef struct _npbyterange { int32 offset; /* negative offset = from the end */ uint32
length; struct _npbyterange* next; } npbyterange; fields the data structure has the following fields: offset offset in bytes to the start of the requested range.
...
length number of bytes to fetch from the specified offset.
NPStream - Archive of obsolete content
end offset in bytes of the end of the stream (equivalent to the
length of the stream in bytes).
... can be zero for streams of unknown
length, such as streams returned from older ftp servers or generated "on the fly" by cgi scripts.
NPString - Archive of obsolete content
syntax typedef struct _npstring { const nputf8 *utf8characters; uint32_t utf8
length; } npstring; fields the data structure has the following fields: utf8characters an array of the utf-8 characters comprising the string.
... utf8
length the number of bytes in the utf-8 string (not the number of characters).
What is RSS - Archive of obsolete content
you know you want to.</description> <lastbuilddate>tue, 23 aug 2005 21:02:05 -0800</lastbuilddate> <link>http://katetv.example.com/</link> <item> <title>this is fun</title> <guid>http://katetv.example.com/show/4</guid> <pubdate>tue, 23 aug 2005 21:02:05 -0800</pubdate> <enclosure url="http://katetv.example.com/show/4"
length="1911146" type="application/ogg"/> </item> <item> <title>watch this</title> <guid>http://katetv.example.com/show/3</guid> <pubdate>tue, 16 aug 2005 16:11:57 -0400</pubdate> <enclosure url="http://katetv.example.com/show/3"
length="1387442" type="application/ogg"/> </item> <item> <title>it is me again</titl...
...e> <guid>http://katetv.example.com/show/2</guid> <pubdate>tue, 9 aug 2005 13:12:12 -0400</pubdate> <enclosure url="http://katetv.example.com/show/2"
length="1894877" type="video/mpeg"/> </item> <item> <title>hello</title> <guid>http://katetv.example.com/show/1</guid> <pubdate>tue, 2 aug 2005 18:22:14 -0400</pubdate> <enclosure url="http://katetv.example.com/show/1"
length="17442215" type="application/ogg"/> </item> </channel> </rss> the observant reader may have noticed that the news web site and blogger examples were the same type of rss.
Browser Detection and Cross Browser Support - Archive of obsolete content
elm.style.left = x; elm.style.top = y; } else { // gecko/internet explorer 4+ // w3c dom style states that elm.style.left is a string // containing the
length followed by the unit.
... for rv:1.9.1.3 it returns 1.090103 // function geckogetrv() { if (navigator.product != 'gecko') { return -1; } var rvvalue = 0; var ua = navigator.useragent.tolowercase(); var rvstart = ua.indexof('rv:'); var rvend = ua.indexof(')', rvstart); var rv = ua.substring(rvstart+3, rvend); var rvparts = rv.split('.'); var exp = 1; for (var i = 0; i < rvparts.
length; i++) { var val = parseint(rvparts[i]); rvvalue += val / exp; exp *= 100; } return rvvalue; } // determine if the browser is any gecko // branch >= 1.0.1 or netscape 6.2.x/compuserve 7 // built after august 1, 2002 var rv = geckogetrv(); var found = false; if (rv >= 0) { // gecko browser if (navigator.productsub > '20020801') { if (rv >= 1.0001) { fou...
Browser Feature Detection - Archive of obsolete content
upported': false}, {name: 'visibility', 'supported': false}, {name: 'voicefamily', 'supported': false}, {name: 'volume', 'supported': false}, {name: 'widows', 'supported': false}, {name: 'zindex', 'supported': false} ] }; function supports(object, featureset) { var i; var features = _features[featureset]; var level = 0; if (!features) return level; for (i = 0; i < features.
length; i++) if (typeof(object[features[i].name]) != 'undefined') { features[i].supported = true; ++level; } return math.floor( (100 * level) / features.
length ); } function generatereport(object, featureset, description) { var i; var features = _features[featureset]; document.write('<p><b>' + featureset + ' support for properties/methods in ' + description + ', percentage of names d...
...efined = ' + supports(object, featureset) + '%<\/b><\/p>'); document.write('<table cellspacing="0">'); for (i = 0; i < features.
length; i++) { if (features[i].supported) document.write('<tr><td>' + features[i].name + '<\/td><td>' + features[i].supported + '<\/td><\/tr>'); else document.write('<tr><td>' + features[i].name + '<\/td><td style="background-color:red">' + features[i].supported + '<\/td><\/tr>'); } document.write('<\/table>'); } var oldonerror = window.onerror; // suppress error messages...
-ms-scroll-limit-x-min - Archive of obsolete content
initial value0applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values <
length> the minimum value for the scrollleft property.
... formal syntax <
length> specifications not part of any specification.
-ms-scroll-limit-y-min - Archive of obsolete content
initial value0applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values <
length> the minimum value for the scrolltop property.
... formal syntax <
length> specifications not part of any specification.
The global XML object - Archive of obsolete content
the following example defines the foocount() method, which returns the amount of <foo> elements in the xml: xml.prototype.function::foocount = function foocount() { return this..foo.
length(); }; <foobar><foo/><foo/><foo/></foobar>.foocount() // returns 3 ignorecomments true by default.
...observe: var element = <foo> <!-- my comment --> <bar/> </foo>; element.comments().
length(); // returns 0 element.toxmlstring(); // returns <foo><bar/></foo> xml.ignorecomments = false; element = <foo> <!-- my comment --> <bar/> </foo>; element.comments().
length(); // returns 1 element.toxmlstring(); // returns <foo><!-- my comment --><bar/></foo> ignoreprocessinginstructions true by default.
GetObject - Archive of obsolete content
if pathname is a zero-
length string (""), getobject returns a new object instance of the specified type.
...with a single-instance object, getobject always returns the same instance when called with the zero-
length string ("") syntax, and it causes an error if the pathname argument is omitted.
New in JavaScript 1.3 - Archive of obsolete content
changed functionality in javascript 1.3 changes to date to conform with ecma-262 new constructor date(year, month, day, [,hours [, minutes [, seconds [, milliseconds ]]]]) additional method parameters: setmonth(month[, date]) sethours(hours[, min[, sec[, ms]]]) setminutes(min[, sec[, ms]]) setseconds(sec[, ms]) the
length of an array (property
length) is now an unsigned, 32-bit integer.
...under javascript 1.3, push returns the new
length of the array.
Archived JavaScript Reference - Archive of obsolete content
you can use the more general proxy object instead.arraybuffer.transfer()the static arraybuffer.transfer() method returns a new arraybuffer whose contents have been taken from the oldbuffer's data and then is either truncated or zero-extended by newbyte
length.
... if newbyte
length is undefined, the byte
length of the oldbuffer is used.
JavaArray - Archive of obsolete content
in addition, you can create a javaarray with an arbitrary data type using the newinstance method of the array class: public static object newinstance(class componenttype, int
length) throws negativearraysizeexception description the javaarray object is an instance of a java array that is created in or passed to javascript.
... properties
length: the number of elements in the java array represented by javaarray.
forEach - Archive of obsolete content
feel free to alter the text as english is not my mother tongue and i'm more concerned with the code quality that the english grammar ;-s dotnetcarpenter 30 june 2012 <hr> the compatibility section goes to extraordinary
lengths in providing a foreach implementation.
...i've removed the
lengthy example, while still linking to it and provided a much simpler and leaner implementation.
Displaying a graphic with audio samples - Archive of obsolete content
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, framebuffer
length, fft; function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebuffer
length = audio.mozframebuffer
length; fft = new fft(framebuffer
length / channels, rate); } function audioavailable(event) { var fb = event.framebuffer, t = event.time, /* unused, but ...
...it's there */ signal = new float32array(fb.
length / channels), magnitude; for (var i = 0, fbl = framebuffer
length / 2; i < fbl; i++ ) { // assuming interlaced stereo channels, // need to split and merge into a stero-mix mono signal signal[i] = (fb[2*i] + fb[2*i+1]) / 2; } // clear the canvas before drawing spectrum ctx.fillstyle = "rgb(0,0,0)"; ctx.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); } ...
Efficient animation for web games - Game development
you may have a callback that ends up looking something like this: var starttime = -1; var animation
length = 2000; // animation
length in milliseconds function doanimation(timestamp) { // calculate animation progress var progress = 0; if (starttime < 0) { starttime = timestamp; } else { progress = timestamp - starttime; } // do animation ...
... if (progress < animation
length) { requestanimationframe(doanimation); } } // start animation requestanimationframe(doanimation); you will note that we set starttime to -1 at the beginning, when we could just as easily have set the time using the date() object and avoided the extra code in the animation callback.
Entity header - MDN Web Docs Glossary: Definitions of Web-related terms
headers like content-
length, content-language, content-encoding are entities headers.
... a few request headers after a get request: in the following example, content-
length is an entity header, while host and user-agent are requests headers: post /myform.html http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 content-
length: 128 learn more technical knowledge list of all http headers ...
Request header - MDN Web Docs Glossary: Definitions of Web-related terms
for example, the content-
length appearing in a post request is actually an entity header referring to the size of the body of the request message.
...text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate, br referer: https://developer.mozilla.org/testpage.html connection: keep-alive upgrade-insecure-requests: 1 if-modified-since: mon, 18 jul 2016 02:36:04 gmt if-none-match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a" cache-control: max-age=0 strictly speaking, the content-
length header in this example is not a request header like the others, but an entity header: post /myform.html http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 content-
length: 128 learn more technical knowledge list of all http headers ...
CSS and JavaScript accessibility best practices - Learn web development
s can read them out alongside: <label for="name">enter your name:</label> <input type="text" name="name" id="name"> we only do the validation when the form is submitted — this is so that we don't update the ui too often and potentially confuse screen reader (and possibly other) users: form.onsubmit = validate; function validate(e) { errorlist.innerhtml = ''; for(let i = 0; i < formitems.
length; i++) { const testitem = formitems[i]; if(testitem.input.value === '') { errorfield.style.left = '360px'; createlink(testitem); } } if(errorlist.innerhtml !== '') { e.preventdefault(); } } note: in this example, we are hiding and showing the error message box using absolute positioning rather than another method such as visibility or display, because it doesn'...
... note: some of you will probably be thinking about that fact that html5 forms have built-in validation mechanisms like the required, min/min
length, and max/max
length attributes (see the <input> element reference for more information).
Sizing items in CSS - Learn web development
due to this problem of overflow, fixing the height of elements with
lengths or percentages is something we need to do very carefully on the web.
... using percentages in many ways, percentages act like
length units, and as we discussed in the lesson on values and units, they can often be used interchangeably with
lengths.
How can we design for all types of users? - Learn web development
line width there is a longstanding debate about line
length on the web, but here's the story.
...let's consider this html: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>font size experiment</title> </head> <body> <div class="container"> <h1>this is our main heading <span class="subheading">this is our subheading</span> </h1> <p>[
lengthly text that spans many lines]</p> </div> </body> </html> we have a div with class container.
What is a Domain Name? - Learn web development
a tld's maximum
length is 63 characters, although most are around 2–3.
...a label is a case-insensitive character sequence anywhere from one to sixty-three characters in
length, containing only the letters a through z, digits 0 through 9, and the - character (which may not be the first or last character in the label).
Sending form data - Learn web development
to say it to?</label> <input name="to" id="to" value="mom"> </div> <div> <button>send my greetings</button> </div> </form> when the form is submitted using the post method, you get no data appended to the url, and the http request looks like so, with the data included in the request body instead: post / http/2.0 host: foo.com content-type: application/x-www-form-urlencoded content-
length: 13 say=hi&to=mom the content-
length header indicates the size of the body, and the content-type header indicates the type of resource sent to the server.
...in addition, many servers limit the
length of urls they accept.
Images in HTML - Learn web development
ydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.
length); textarea.value = front + text + back; caretpos = caretpos + text.
length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not t...
...ydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.
length); textarea.value = front + text + back; caretpos = caretpos + text.
length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not t...
Introduction to events - Learn web development
with javascript, you could easily add an event handler function to all the buttons on the page no matter how many there were, using something like this: const buttons = document.queryselectorall('button'); for (let i = 0; i < buttons.
length; i++) { buttons[i].onclick = bgchange; } note that another option here would be to use the foreach() built-in method available on nodelist objects: buttons.foreach(function(button) { button.onclick = bgchange; }); note: separating your programming logic from your content also makes your site more friendly to search engines.
...we then select all of them using document.queryselectorall(), then loop through each one, adding an onclick handler to each that makes it so that a random color is applied to each one when selected: const divs = document.queryselectorall('div'); for (let i = 0; i < divs.
length; i++) { divs[i].onclick = function(e) { e.target.style.backgroundcolor = bgchange(); } } the output is as follows (try clicking around on it — have fun): most event handlers you'll encounter have a standard set of properties and functions (methods) available on the event object; see the event object reference for a full list.
Making decisions in your code — conditionals - Learn web development
function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.
length); textarea.value = front + text + back; caretpos = caretpos + text.
length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not ...
... function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.
length); textarea.value = front + text + back; caretpos = caretpos + text.
length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not ...
Test your skills: Strings - Learn web development
we would like you to: retrieve the
length of the quote, and store it in a variable called quote
length.
... the
length of the hypotenuse of a right-angled triangle, given that the two other side
lengths are the same as the two values we have.
Working with JSON - Learn web development
creating the hero information cards next, add the following function at the bottom of the code, which creates and displays the superhero cards: function showheroes(jsonobj) { const heroes = jsonobj['members']; for (let i = 0; i < heroes.
length; i++) { const myarticle = document.createelement('article'); const myh2 = document.createelement('h2'); const mypara1 = document.createelement('p'); const mypara2 = document.createelement('p'); const mypara3 = document.createelement('p'); const mylist = document.createelement('ul'); myh2.textcontent = heroes[i].name; mypara1.textcontent = 'secret identity: ' + her...
...oes[i].secretidentity; mypara2.textcontent = 'age: ' + heroes[i].age; mypara3.textcontent = 'superpowers:'; const superpowers = heroes[i].powers; for (let j = 0; j < superpowers.
length; j++) { const listitem = document.createelement('li'); listitem.textcontent = superpowers[j]; mylist.appendchild(listitem); } myarticle.appendchild(myh2); myarticle.appendchild(mypara1); myarticle.appendchild(mypara2); myarticle.appendchild(mypara3); myarticle.appendchild(mylist); section.appendchild(myarticle); } } to start with, we store the members property of the javascript object in a new variable.
Server-side web frameworks - Learn web development
#best/models.py from django.db import models class team(models.model): team_name = models.charfield(max_
length=40) team_levels = ( ('u09', 'under 09s'), ('u10', 'under 10s'), ('u11', 'under 11s'), ...
... #list our other teams ) team_level = models.charfield(max_
length=3,choices=team_levels,default='u11') the django model provides a simple query api for searching the database.
Accessibility in React - Learn web development
add it to the top of your app.js file, just below the imports: function useprevious(value) { const ref = useref(); useeffect(() => { ref.current = value; }); return ref.current; } now add the following, above the return statement inside the app() function: const prevtask
length = useprevious(tasks.
length); here we are invoking useprevious() to track the
length of the tasks state, like so: note: since we're now utilizing useprevious() in two files, a good efficiency refactor would be to move the useprevious() function into its own file, export it from that file, and import it where you need it.
... add the following into the body of your app() function, just below your previous additions: useeffect(() => { if (tasks.
length - prevtask
length === -1) { listheadingref.current.focus(); } }, [tasks.
length, prevtask
length]); we only try to focus on our list heading if we have fewer tasks now than we did before.
Using Vue computed properties - Learn web development
while it might be tempting to do something like this: <h2>{{todoitems.filter(item => item.done).
length}} out of {{todoitems.
length}} items completed</h2> it would be recalculated on every render.
... computed: { listsummary() { const numberfinisheditems = this.todoitems.filter(item =>item.done).
length return `${numberfinisheditems} out of ${this.todoitems.
length} items completed` } } now we can add {{listsummary}} directly to our template; we'll add this inside an <h2> element, just above our <ul>.
Handling common JavaScript problems - Learn web development
if you look at the console, you'll see the error message "uncaught typeerror: can't access property "
length", heroes is undefined", and the referenced line number is 49.
... if we look at the source code, the relevant code section is this: function showheroes(jsonobj) { let heroes = jsonobj['members']; for(i = 0; i < heroes.
length; i++) { ...
Eclipse CDT
(if you're thinking of adding tips, please first consider how widely useful they'll be before adding to this already
lengthy page.) for further documentation see the official eclipse user guide and eclipse cdt user guide.
...it also used to be necessary to add the following two lines to your mozconfig to make the compiler output errors all on a single line, but that may not be needed anymore: export cflags="-fmessage-
length=0" export cppflags="-fmessage-
length=0" debugging to create a debug configuration, open the project properties window, and select "run/debug settings" on the left.
Performance
ad load frame scripts on demand bad: // addon.js services.mm.loadframescript("framescript.js", /*delayed:*/ true) // stuff communicating with the framescript // framescript.js function onlyonceinabluemoon() { // we only need this during a total solar eclipse while goat blood rains from the sky sendasyncmessage('my-addon:paragraph-count', {num: content.document.queryselectorall('p').
length}) } addmessagelistener("my-addon:request-from-parent", onlyonceinabluemoon) better: // addon.js function ontoolbarbutton(event) { let tabmm = gbrowser.mcurrentbrowser.frameloader.messagemanager; let button = event.target; let callback = (message) => { tabmm.removemessagelistener("my-addon:paragraph-count", callback) decoratebutton(button, message.data.num) } tabmm.addmessagel...
...istener("my-addon:paragraph-count", callback); tabmm.loadframescript("data:,sendasyncmessage('my-addon:paragraph-count', {num: content.document.queryselectorall('p').
length})", false) } function decoratebutton(button, count) { // do stuff with result } this executes the script only when it is needed and only in one tab and allows it to be garbage-collected immediately after execution.
JavaScript Tips
but prefer haschildnodes() to childnodes.
length > 0.
... similarly prefer document.getelementsbytagname(atag).item(0) != null to document.getelementsbytagname(atag).
length > 0.
Mozilla DOM Hacking Guide
ns_ensure_success(rv, rv); if (!::js_defineucproperty(cx, obj, ::js_getstringchars(str), ::js_getstring
length(str), v, nsnull, nsnull, 0)) { return ns_error_failure; } // this js api call defines the "location" property on the window object, its // value being the xpconnect wrapper for the location object.
... nsdependentstring href(ns_reinterpret_cast(prunichar *, ::js_getstringchars(val)), ::js_getstring
length(val)); // convert the jsstring to a string that can be passed to sethref() rv = location->sethref(href); ns_ensure_success(rv, rv); // after this, we effectively mapped .location to .location.href return wrapnative(cx, obj, location, ns_get_iid(nsidomlocation), vp); // create a wrapper for the location object with vp (the url) as value.
Mozilla Web Developer FAQ
lengths other than zero should be followed by a proper unit without a space between the number and the unit (eg.
...in fact, since the input to the browser can be of arbitrary
length, there is no upper bound for the number of distinct ways of deviating from the standards.
PL_strdup
description to accommodate the terminator, the size of the allocated memory is one greater than the
length of the string being copied.
... a null argument, like a zero-
length argument, results in a pointer to a one-byte block of memory containing the null value.
PL_strlen
returns the
length of a specified string (not including the trailing '\0') syntax pruint32 pl_strlen(const char *str); parameter the function has these parameter: str size in bytes of item to be allocated.
... returns if successful, the function returns
length of the specified string.
PR_MemMap
len
length of the section of the file to be mapped.
...the section of the file starts at offset and has the
length len.
PR_SetErrorText
syntax #include <prerror.h> void pr_seterrortext(printn text
length, const char *text) parameters the function has these parameters: text
length the
length of the text in the text.
...otherwise the text is assumed to be the
length specified and to possibly include null characters (as might occur in a multilingual string).
Cryptography functions
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_getbestkey
length 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_get...
...efaultflags 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_getkey
length mxr 3.2 and later pk11_getkeystrength mxr 3.2 and later pk11_getmechanism mxr 3.2 and later pk11_getminimumpwd
length mxr 3.4 and later pk11_getmodinfo mxr 3.6 and later pk11_getmodule mxr 3.3 and later pk11_getmoduleid mxr ...
NSS 3.48 release notes
nd pkcs#11 bug 1522203 - remove an old pentium pro performance workaround bug 1592557 - fix prng known-answer-test scripts bug 1586176 - encryptupdate should use maxout not block size (cve-2019-11745) bug 1593141 - add `notbefore` or similar "beginning-of-validity-period" parameter to mozilla::pkix::trustdomain::checkrevocation bug 1591363 - fix a pbkdf2 memory leak in nsc_generatekey if key
length > max_key_len (256) bug 1592869 - use arm neon for ctr_xor bug 1566131 - ensure sha-1 fallback disabled in tls 1.2 bug 1577803 - mark pkcs#11 token as friendly if it implements ckp_public_certificates_token bug 1566126 - power ghash vector acceleration bug 1589073 - use of new pr_assert_arg in certdb.c bug 1590495 - fix a crash in pk11_makecertfromhandle bug 1591742 - ensure des iv
length ...
...is valid before usage from pkcs#11 bug 1588567 - enable mozilla::pkix gtests in nss ci bug 1591315 - update nsc_decrypt
length in constant time bug 1562671 - increase nss mp kdf default iteration count, by default for modern key4 storage, optionally for legacy key3.db storage bug 1590972 - use -std=c99 rather than -std=gnu99 bug 1590676 - fix build if arm doesn't support neon bug 1575411 - enable tls extended master secret by default bug 1590970 - ssl_settimefunc has incomplete coverage bug 1590678 - remove -wmaybe-uninitialized warning in tls13esni.c bug 1588244 - nss changes for delegated credential key strength checks bug 1459141 - 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 certda...
NSS 3.55 release notes
bug 1636771 (cve-2020-12403) - explicitly disable multi-part chacha20 (which was not functioning correctly) and more strictly enforce tag
length.
... bug 1067214 - enforce minimum pkcs#1 v1.5 padding
length in rsa_checksignrecover.
NSS API Guidelines
for example, the following should be avoided : sec_setkey(keyforoperation); sec_encrypt(data,
length); instead, a context handle should be created, and the sec_setkey() function, above, made on that handle.
... all encrypt and decrypt functions, which return data inline, should have a consistent signature: secstatus my_functionname(mycontext *context, unsigned char *outbuf, secbufferlen *outlen, secbufferlenmaxout
length, unsigned char *inbuf, secbufferleninlen) encrypt and decrypt like functions which have different properties, additional parameters, callbacks, etc., should insert their additional parameters between the context (first parameter) and the output buffer.
NSS Developer Tutorial
nss coding style formatting line
length should not exceed 80 characters.
... for historical reasons, the buffer
length is unsigned int, as opposed to size_t.
nss tech note7
answer: the version without the initial 00 says : "ps is a string of strong pseudo-random octets [random] [...] long enough that the value of the quantity being crypted is one octet shorter than the rsa modulus" the version with the initial 00 instead says to pad to the same
length as the rsa modulus.
... "the same
length as the rsa modulus with an initial octet of 0" and "one octet shorter without that initial octet" are exactly the same thing because the formatted block is treated as a big-endian big integer by the rsa algorithm.
NSS PKCS11 Functions
minpwlen then minimum password
length for this token.
...passwordrequired - zero
length passwords are not acceptable(valid only if there is a keydb).
Python binding for NSS
21 scm tag pynss_release_0_8_0 source download change log general modifications: secitem's now support indexing and slicing on their data clean up parsing and parameter validation of variable arg functions the following were added: secitem.type secitem.len secitem.data pk11symkey.key_data pk11symkey.key_
length pk11symkey.slot create_context_by_sym_key param_from_iv generate_new_param get_iv_
length get_block_size get_pad_mechanism release 0.7.0 release date 2009-09-18 scm tag source download change log general modifications: add support for symmetric encryption/decryption more sup...
...port for digests (hashes) the following classes added: pk11symkey pk11context the following methods and functions added: get_best_wrap_mechanism get_best_key_
length key_gen derive get_key_
length digest_key clone_context digest_begin digest_op cipher_op finalize digest_final read_hex hash_buf sec_oid_tag_str sec_oid_tag_name sec_oid_tag_from_name key_mechanism_type_name key_mechanism_type_from_name pk11_attribute_type_name pk11_attribute_type_from_name get_best_slot get_internal_key_slot create_context_by_sym_key import_sym_key create_digest_context param_from_iv param_from_algid generate_new_param algtag_to...
FC_Decrypt
usencrypteddatalen [in]
length of the data in bytes.
...pusdatalen [in,out] pointer to location where the
length of recovered data is to be stored.
FC_DecryptDigestUpdate
ulencryptedpartlen [in]
length of encrypted data in bytes.
...pulpartlen [in] pointer to the
length of the recovered part buffer.
FC_DecryptVerifyUpdate
ulencrypteddatalen [in]
length of encrypted data in bytes.
...puldatalen [in] pointer to the
length of the recovered part buffer.
FC_Digest
usdatalen [in]
length of the data in bytes.
...pusdigestlen [in, out] pointer to the maximum size of the output buffer, replaced by the
length of the message digest if the operation is successful.
FC_DigestEncryptUpdate
ulpartlen [in]
length of data in bytes.
...pulencryptedpartlen [in] pointer to the
length of the encrypted part buffer.
FC_GenerateRandom
ulrandomlen [in]
length of the buffer in bytes.
... description fc_generaterandom generates random data of the specified
length.
FC_GetOperationState
poperationstate [out] pointer to a byte array of a
length sufficient for containing the operation state or null.
... puloperationstatelen [out] pointer to ck_ulong which receives the total
length (in bytes) of the operation state.
FC_SetPIN
uloldlen [input] the
length in bytes of the old pin.
...ulnewlen [input] the
length in bytes of the new pin.
FC_Sign
usdatalen [in]
length of the data in bytes.
...pussignaturelen [in, out] pointer to the maximum size of the output buffer, replaced by the
length of the signature if the operation is successful.
FC_SignEncryptUpdate
ulpartlen [in]
length of data in bytes.
...pulencryptedpartlen [in] pointer to the
length of the encrypted part buffer.
FC_SignRecover
pussignaturelen [in, out] pointer to the size of the output buffer, replaced by the
length of the signature if the operation is successful.
...if psignature is null only the
length of the signature is returned in *pussignaturelen.
FC_UnwrapKey
uswrappedkeylen [in]
length of the wrapped key.
...if pwrappedkey is null the
length of the wrapped key is returned in puswrappedkeylen and fc_unwrapkey may be called again with pwrappedkey set to retrieve the wrapped key.
FC_Verify
usdatalen [in]
length of the data in bytes.
...ussignaturelen [in]
length of the signature in bytes.
FC_VerifyRecover
pusdatalen [in, out] pointer to the size of the output buffer, replaced by the
length of the signature if the operation is successful.
...if psignature is null only the
length of the signature is returned in *pussignaturelen.
FC_WrapKey
puswrappedkeylen [in, out] pointer to
length of wrapped key buffer.
...if pwrappedkey is null the
length of the wrapped key is returned in puswrappedkeylen and fc_wrapkey may be called again with pwrappedkey set to retrieve the wrapped key.
NSS tools : pk12util
-m | --key-len key
length specify the desired
length of the symmetric key to be used to encrypt the private key.
... -n | --cert-key-len certkey
length specify the desired
length of the symmetric key to be used to encrypt the certificates and other meta-data.
Utility functions
_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 der_timetogeneralizedtimearena mxr 3.11.7 and later der_utcdaytoascii mxr 3.2 and later ...
...2 and later sec_asn1encodersetstreaming mxr 3.2 and later sec_asn1encodersettakefrombuf mxr 3.2 and later sec_asn1encoderstart mxr 3.2 and later sec_asn1encoderupdate mxr 3.2 and later sec_asn1encodeunsignedinteger mxr 3.11.1 and later sec_asn1
lengthlength mxr 3.2 and later sec_dupcrl mxr 3.9 and later sec_getsignaturealgorithmoidtag mxr 3.10 and later sec_getregisteredhttpclient mxr 3.12 and later sec_pkcs5getcryptoalgorithm mxr 3.2 and later sec_pkcs5getkey
length mxr 3.2 and later ...
NSS_3.12.3_release_notes.html
new korean seed cipher: new macros for seed support: in blapit.h: nss_seed nss_seed_cbc seed_block_size seed_key_
length in pkcs11t.h: ckk_seed ckm_seed_key_gen ckm_seed_ecb ckm_seed_cbc ckm_seed_mac ckm_seed_mac_general ckm_seed_cbc_pad ckm_seed_ecb_encrypt_data ckm_seed_cbc_encrypt_data in secmod.h: public_mech_seed_flag in secmodt.h: secmod_seed_f...
... bug 472749: softoken permits aes keys of any
length to be created bug 473147: pk11mode tests fails on aix when using shareable dbs.
NSS tools : pk12util
-m | --key-len key
length specify the desired
length of the symmetric key to be used to encrypt the private key.
... -n | --cert-key-len certkey
length specify the desired
length of the symmetric key to be used to encrypt the certificates and other meta-data.
Scripting Java
s) { return "f(string)"; } public string f(int i) { return "f(int)"; } public string g(string s, int i) { return "g(string,int)"; } public string g(int i, string s) { return "g(int,string)"; } public static void main(string[] args) { overload o = new overload(); object[] a = new object[] { new integer(3), "hi", overload.class }; for (int i = 0; i != a.
length; ++i) system.out.println(o.f(a[i])); } } when we compile and execute the program, it produces the output f(object) f(object) f(object) however, if we write a similar script var o = new packages.overload(); var a = [ 3, "hi", packages.overload ]; for (var i = 0; i != a.
length; ++i) print(o.f(a[i])); and execute it, we get the output f(int) f(string) f(object) because...
...the most common stumbling block is
length, which is a method of java strings and a dynamic property of javascript strings: js> javastring = new java.lang.string("java") java js> jsstring = "javascript" javascript js> javastring.
length() 4 js> jsstring.
length 10 rhino provides some help in reducing the differences between the two types.
64-bit Compatibility
the following types or typedefs are always 64-bit on 64-bit platforms, and 32-bit on 32-bit platforms: pointers uintptr_t, intptr_t, ptrdiff_t, (probably) size_t jsval jsuword, jsword
length of a string, though the actual
length cannot exceed 30 bits jsuintptr, jsintptr, jsptrdiff, jsuptrdiff, jssize, jsuword, jsword (let's not use these, kthx) the following types are 32-bit on 32-bit platforms.
... i64 qursh i64, i32 i64 qcmov i32, i64, i64 i32 qior i64, i64 i64 qixor i64, i64 i64 qiaddp i64, i64 i64 qeq - quge i64, i64 i32 qcall n/a i64 extending or truncating native integers sometimes it is necessary to reduce a native integer to a 32-bit integer (for example, array or string
lengths in tracemonkey) or extend a 32-bit integer to a native integer.
JSAPI User Guide
larger, non-null-terminated buffers * can be used, if you pass the buffer
length to js_evaluatescript.
...s js_compileucfunctionforprincipals js_evaluatescript js_evaluateucscript js_evaluatescriptforprincipals js_evaluateucscriptforprincipals jschar-based functions work exactly like their char-based namesakes, except that where traditional functions take a char * argument, the unicode versions take a jschar * argument, usually with a separate argument specifying the
length of the string in jschars.
JS::AutoIdArray
size_t
length() const return the
length of the owned array.
... examples { js::autoidarray ids(cx, js_enumerate(cx, obj)); if (!ids) // check the returned value from js_enumerate return false; for (int32_t i = 0, len = ids.
length(); i < len; i++) { somefunc(cx, ids[i]); } /* when leaving this scope, the jsidarray returned by js_enumerate is freed.
JSAutoByteString
size_t
length() const return the
length of the owned string.
...*/ } take ownership of other buffer { char *buff = cx->pod_malloc<char>(
length + 1); if (!buff) return false; memcpy(buff, other_buff,
length + 1) jsautobytestring bytes; bytes.initbytes(buff); /* ...do something with bytes...
JSIdArray
use js_idarray
length and js_idarrayget to access the property, and js_destroyidarray to free, or use js::autoidarray as a local variable.
... see also mxr id search for jsidarray js_idarray
length js_idarrayget jsproperty js_enumerate js_destroyidarray js::autoidarray ...
JSPropertyOp
as of spidermonkey 1.7, the value of a property assignment expression, like (a.
length = x), is the value of *vp after the setter is called.
...this ecmascript incompatibility is observable when assigning to the
length property of an array, for example.
JSString
conceptually, a javascript string is just an array of char16_t characters and a
length.
...to get the
length of a jsstring you can use js_getstring
length.
JS_AliasElement
adding an alias element does not change the element array
length.
...see also js_defineelement js_deleteelement js_getarray
length js_getelement js_isarrayobject js_lookupelement js_newarrayobject js_setarray
length js_setelement bug 576034 ...
JS_BufferIsCompilableUnit
syntax bool js_bufferiscompilableunit(jscontext *cx, js::handle<jsobject*> obj, const char *utf8, size_t
length); name type description cx jscontext * pointer to a js context from which to derive runtime information.
...
length size_t the
length of utf8 in characters.
JS_CompareStrings
if the strings are identical in content and
length, js_comparestrings stores 0 in *result.
...see also mxr id search for js_comparestrings js_convertvalue js_getstringchars js_getstring
length js_valuetostring ...
JS_CompileUCFunctionForPrincipalsVersion
syntax jsfunction * js_compileucfunctionforprincipalsversion(jscontext *cx, jsobject *obj, jsprincipals *principals, const char *name, unsigned int nargs, const char **argnames, const jschar *chars, size_t
length, const char *filename, unsigned int lineno, jsversion version); name type description cx jscontext * the context.
... obj jsobject * principals jsprincipals * name const char * nargs unsigned int argnames const char ** chars const jschar *
length size_t filename const char * lineno unsigned int version jsversion description please provide a description.
JS_EnumerateDiagnosticMemoryRegions
callback syntax typedef bool (* jsenumeratediagnosticmemorycallback)(void *ptr, size_t
length); name type description ptr void * pointer to the allocated memory.
...
length size_t
length of the allocated memory.
JS_ExecuteRegExp
syntax bool js_executeregexp(jscontext *cx, js::handleobject obj, js::handleobject reobj, char16_t *chars, size_t
length, size_t *indexp, bool test, js::mutablehandlevalue rval); bool js_executeregexpnostatics(jscontext *cx, js::handleobject reobj, char16_t *chars, size_t
length, size_t *indexp, bool test, js::mutablehandlevalue rval); name type description cx jscontext * the context.
...
length size_t the
length of bytes or chars, in characters.
JS_GetEmptyString
description the returned empty string has the
length 0.
... see also mxr id search for js_getemptystring js_getstring
length js_getemptystringvalue bug 612150 ...
JS_GetLatin1InternedStringChars
if successful, js_getlatin1stringcharsand
length and js_gettwobytestringcharsand
length return a pointer to the string, otherwise return null.
... see also mxr id search for js_getlatin1internedstringchars mxr id search for js_gettwobyteinternedstringchars js_getlatin1flatstringchars js_gettwobyteflatstringchars js_getlatin1stringcharsand
length js_gettwobytestringcharsand
length bug 1037869 ...
JS_GetStringBytes
instead, you should use js_encodestring, js_getstringencoding
length, js_encodestringtobuffer.
...see also js_encodestring js_encodestringtoutf8 js_getstringencoding
length js_encodestringtobuffer js_comparestrings js_getstring
length js_valuetostring bug 607292 ...
JS_GetStringCharAt
index size_t an integer between 0 and 1-less-than the
length of the string.
... index should not be greater than or equal to the
length of str.
JS_IdArrayGet
ida jsidarray * the jsidarray to get the
length.
... see also mxr id search for js_idarrayget jsidarray js_idarray
length bug 641027 ...
JS_InternString
syntax jsstring * js_internstring(jscontext *cx, const char *s); jsstring * js_internstringn(jscontext *cx, const char *s, size_t
length); jsstring * js_internucstring(jscontext *cx, const char16_t *s); jsstring * js_internucstringn(jscontext *cx, const char16_t *s, size_t
length); name type description cx jscontext * a context.
...
length size_t (only in js_internstringn and js_internucstringn) the
length of s in characters.
JS_NewExternalString
syntax jsstring * js_newexternalstring(jscontext *cx, const char16_t *chars, size_t
length, const jsstringfinalizer *fin); jsstring * js_newexternalstringwithclosure(jscontext *cx, jschar *chars, size_t
length, int type, void *closure); // obsolete since jsapi 13 name type description cx jscontext * the context in which to create the new string.
...
length size_t the number of characters in the array chars.
JS_NewRegExpObject
syntax jsobject * js_newregexpobject(jscontext *cx, js::handleobject obj, const char *bytes, size_t
length, unsigned flags); jsobject * js_newucregexpobject(jscontext *cx, js::handleobject obj, const char16_t *chars, size_t
length, unsigned flags); jsobject * js_newregexpobjectnostatics(jscontext *cx, char *bytes, size_t
length, unsigned flags); jsobject * js_newucregexpobjectnostatics(jscontext *cx, char16_t *chars, size_t
length, unsigned flags); name type description cx jscontext * the context in which to create the new object.
...
length size_t the
length of bytes or chars, in characters.
JS_PutEscapedString
returns the
length of the written output, not including the nul.
...if buffer is null, just returns the
length of the output.
SpiderMonkey 1.8.7
js_forget_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_getinternedstringcharsand
length js_getownpropertydescriptor js_getpropertyattrsgetterandsetterbyid js_getpropertybyid js_getpropertybyiddefault js_getpropertydefault js_getpropertydescriptorbyid js_getruntimesecuritycallbacks js_getsecuritycallbacks js_getstringcharsand
length js_getstringcharsz js_getstringcharszand
length js_getstringencoding
length js_haspropertybyid js_initctypesclass js_internjsstring js_iscon...
...additionally, js_newstring, js_getstringbytes, and js_getstringchars were removed, replaced by fallible interfaces like js_getstringcharszand
length and js_encodestringtobuffer (not an exhaustive list).
SpiderMonkey 38
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_getlatin1stringcharsand
length (bug 1032726) js_getstringcharat (bug 1034627) js_gettwobyteexternalstringchars (bug 1034627) js_gettwobyteflatstringchars (bug 1037869) js_gettwobyteinternedstringchars (bug 1037869) js_gettwobytestringcharsand
length (bug 1032726) js_newplainobject (bug 1125356) js_removefinalizecallback (bug 996785) js_self_hosted_sym_fn (bug 1082672) js_sym_fn (bug 1082672) js_sym_fnspec (bug 1082672...
...(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_getinternedstringcharsand
length (bug 1037869) js_getstringcharsand
length (bug 1037869) js_getstringcharsz (bug 1037869) js_getstringcharszand
length (bug 1037869) js_gettypename (bug 1037718) js_isabouttobefinalized (bug 650161) js_lookupelement (bug 1094176) js_lookupproperty (bug 1094176) js_lookuppropertybyid (bug 1094176) js_lookupucproperty (bug 1094176) js_newpropertyiterator (bug 1081660) js_nextproperty (bug 1...
Feed content access API
sing 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."); ...
...indow var win = window.open("", "feedtest_window"); var doc = win.document.wrappedjsobject; doc.open(); // write the html header and page title doc.write("<html><head><title>feed: " + feed.title.text + "</title></head><body>"); doc.write("<h1>" + feed.title.text + "</h1><p>"); var itemarray = feed.items; var numitems = itemarray.
length; // write the article information if (!numitems) { doc.write("<i>no news is good news!</i>"); } else { var i; var theentry; var theurl; var info; for (i=0; i<numitems; i++) { theentry = itemarray.queryelementat(i, components.interfaces.nsifeedentry); if (theentry) { ...
Places Developer Guide
"] .getservice(ci.nsinavbookmarksservice); var history = cc["@mozilla.org/browser/nav-history-service;1"] .getservice(ci.nsinavhistoryservice); var query = history.getnewquery(); // specify folders to be searched var folders = [bookmarks.toolbarfolder, bookmarks.bookmarksmenufolder, bookmarks.unfiledbookmarksfolder]; query.setfolders(folders, folders.
length); // specify terms to search for, matches against title, url and tags query.searchterms = "firefox"; var options = history.getnewqueryoptions(); options.querytype = options.query_type_bookmarks; var result = history.executequery(query, options); // the root property of a query result is an object representing the folder you specified above.
...c.queryinterface(ci.nsibrowserhistory); var oururi = uri("http://www.mozilla.com"); // remove all visits for a single url from history browserhistory.removepage(oururi); // remove all visits for multiple urls from history var uristodelete = [oururi]; // will call nsinavhistoryobserver.onbeginupdatebatch/onendupdatebatch var donotify = false; browserhistory.removepages(uristodelete, uristodelete.
length, donotify); // remove all visits within a given time period var enddate = date.now() * 1000; // now, in microseconds var startdate = enddate - (7 * 86400 * 1000 * 1000); // one week ago, in microseconds browserhistory.removepagesbytimeframe(startdate, enddate); // remove all pages for a given host var entiredomain = true; // will delete from all hosts from the given domain browserhistory.remove...
BeginReading
the
length of the array is determined by the result of the
length method.
... example code // count the number of times a particular character appears in the string pruint32 countchar(const nsacstring& str, char c) { const char* start = str.beginreading(); const char* end = str.endreading(); pruint32 count = 0; while (start != end) { if (*start++ == c) ++count; } return count; } see also
length, endreading ...
Cut
void cut( index_type acutstart, size_type acut
length ); parameters acutstart [in] the starting index of the section to remove, measured in storage units.
... acut
length [in] the
length of the section to remove, measured in storage units.
BeginReading
the
length of the array is determined by the result of the
length method.
... example code // count the number of times a particular character appears in the string pruint32 countchar(const nsastring& str, prunichar c) { const prunichar* start = str.beginreading(); const prunichar* end = str.endreading(); pruint32 count = 0; while (start != end) { if (*start++ == c) ++count; } return count; } see also
length ...
Cut
void cut( index_type acutstart, index_type acut
length ); parameters acutstart [in] the starting index of the section to remove, measured in storage units.
... acut
length [in] the
length of the section to remove, measured in storage units.
IAccessibleAction
method overview [propget] hresult description([in] long actionindex, [out] bstr description ); hresult doaction([in] long actionindex ); [propget] hresult keybinding([in] long actionindex, [in] long nmaxbindings, [out, size_is(,nmaxbindings),
length_is(, nbindings)] bstr keybindings, [out] long nbindings ); [propget] hresult localizedname([in] long actionindex, [out] bstr localizedname ); hresult nactions([out,retval] long nactions ); [propget] hresult name([in] long actionindex, [out] bstr name ); methods description() returns a description of the specified action of the object.
...[propget] hresult keybinding( [in] long actionindex, [in] long nmaxbindings, [out, size_is(,nmaxbindings),
length_is(, nbindings)] bstr keybindings, [out] long nbindings ); parameters actionindex 0 based index specifying which action's key bindings should be returned.
IAccessibleRelation
n last changed in gecko 1.9 (firefox 3) method overview [propget] hresult localizedrelationtype([out] bstr localizedrelationtype ); [propget] hresult ntargets([out] long ntargets ); [propget] hresult relationtype([out] bstr relationtype ); [propget] hresult target([in] long targetindex, [out] iunknown target ); [propget] hresult targets([in] long maxtargets, [out, size_is(maxtargets),
length_is( ntargets)] iunknown targets, [out] long ntargets ); methods localizedrelationtype() returns a localized version of the relation type.
...[propget] hresult targets( [in] long maxtargets, [out, size_is(maxtargets),
length_is( ntargets)] iunknown targets, [out] long ntargets ); parameters maxtargets maximum size of the array allocated by the client.
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( i...
...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 ); parameters data
length uri type dosilentdownload crlkey reschedulecrlautoupdate() this would reschedule the autoupdate of crls with auto update enable.
nsIConsoleService
if no messages are logged, this function will return a count of 0, but allocating a placeholder word for messages, showing as a 0-
length array when called from the script.
...if no messages are logged, this function will return a count of 0, but allocating a placeholder word for messages, showing as a 0-
length array when called from the script.
nsICryptoHash
alen the
length of the buffer adata.
...converter.charset = "utf-8"; // result is an out parameter, // result.value will contain the array
length var result = {}; // data is an array of bytes var data = converter.converttobytearray(str, result); var ch = components.classes["@mozilla.org/security/hash;1"] .createinstance(components.interfaces.nsicryptohash); ch.init(ch.sha256); ch.update(data, data.
length); var hash = ch.finish(false); // return the two-digit hexadecimal code for a byte function tohexstring(charcode) { ...
nsIMimeConverter
fieldnamelen the
length of the header field including the colon and space (": ").
... encodedwordsize the maximum line
length of the encoded string.
nsIMsgSearchTerm
* @param a
length length of message.
... */ boolean matchbody(in nsimsgsearchscopeterm ascopeterm, in unsigned long long aoffset, in unsigned long a
length, in string acharset, in nsimsgdbhdr amsg, in nsimsgdatabase adb); ...
nsIProfile
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.
...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.
nsIPromptService
acount
length of the aselectlist array parameter.
... var prompts = components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice); var items = ["hello", "welcome", "howdy", "hi", ":)"]; // list items var selected = {}; var result = prompts.select(null, "title", "what greeting do you want?", items.
length, items, selected); // result is true if ok was pressed, false if cancel.
nsIProtocolProxyService
so, calling resolve without this flag may result in locking up the calling thread for a
lengthy period of time.
... afailovertimeout specifies the
length of time (in seconds) to ignore this proxy if this proxy fails.
nsIServerSocket
abacklog the maximum
length to which the queue of pending connections may grow.
... abacklog the maximum
length the queue of pending connections may grow to.
nsIVariant
native code only!getasstringwithsize void getasstringwithsize( out pruint32 size, [size_is(size), retval] out string str ); parameters size the
length of the returned string.
...native code only!getaswstringwithsize void getaswstringwithsize( out pruint32 size, [size_is(size), retval] out wstring str ); parameters size the
length of the returned string.
NS_CStringAppendData
#include "nsstringapi.h" nsresult ns_cstringappenddata( nsacstring& astring, const char* adata, pruint32 adata
length = pr_uint32_max ); parameters astring [in] a nsacstring instance to be modified.
... adata
length [in] the
length of adata, measured in storage units.
NS_CStringGetMutableData
#include "nsstringapi.h" pruint32 ns_cstringgetmutabledata( nsacstring& astring, pruint32 adata
length, char** adata ); parameters astring [in] a nsacstring instance to modify.
... adata
length [in] the number of characters to resize the string's internal buffer to or pr_uint32_max to return the buffer as-is.
NS_CStringInsertData
#include "nsstringapi.h" nsresult ns_cstringinsertdata( nsacstring& astring, pruint32 aoffset, const char* adata, pruint32 adata
length = pr_uint32_max ); parameters astring [in] a nsacstring instance to be modified.
...adata
length [in] the
length of adata, measured in storage units.
NS_CStringSetData
#include "nsstringapi.h" nsresult ns_cstringsetdata( nsacstring& astring, const char* adata, pruint32 adata
length = pr_uint32_max ); parameters astring [in] a nsacstring instance to modify.
... adata
length [in] the
length of adata, measured in storage units.
NS_StringAppendData
#include "nsstringapi.h" nsresult ns_stringappenddata( nsastring& astring, const prunichar* adata, pruint32 adata
length = pr_uint32_max ); parameters astring [in] a nsastring instance to be modified.
... adata
length [in] the
length of adata, measured in storage units.
NS_StringInsertData
#include "nsstringapi.h" nsresult ns_stringinsertdata( nsacstring& astring, pruint32 aoffset, const prunichar* adata, pruint32 adata
length = pr_uint32_max ); parameters astring [in] a nsacstring instance to be modified.
... adata
length [in] the
length of adata, measured in storage units.
NS_StringSetData
#include "nsstringapi.h" nsresult ns_stringsetdata( nsastring& astring, const prunichar* adata, pruint32 adata
length = pr_uint32_max ); parameters astring [in] a nsastring instance to modify.
...adata
length [in] the
length of adata, measured in storage units.
Working with windows in chrome code
sheet href="chrome://global/skin/" type="text/css"?> <window onload="onload();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script><![cdata[ var gstatus, gprogressmeter; var maxprogress = 100; function onload() { gstatus = document.getelementbyid("status"); gprogressmeter = document.getelementbyid("progressmeter"); if("arguments" in window && window.arguments.
length > 0) { maxprogress = window.arguments[0].maxprogress; setprogress(window.arguments[0].progress); setstatus(window.arguments[0].status); } } function setprogress(value) { gprogressmeter.value = 100 * value / maxprogress; } function setstatus(text) { gstatus.value = "status: " + text + "..."; } ]]></script> <label id="status" value="(no status)" /> <hbox> <progressmeter id="...
...here is helper function that will package the data correctly and pass it to the newly opened window: function opendialog(parentwindow, url, windowname, features) { var array = components.classes["@mozilla.org/array;1"] .createinstance(components.interfaces.nsimutablearray); for (var i = 4; i < arguments.
length; i++) { var variant = components.classes["@mozilla.org/variant;1"] .createinstance(components.interfaces.nsiwritablevariant); variant.setfromvariant(arguments[i]); array.appendelement(variant, false); } var watcher = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.inte...
AnalyserNode.fftSize - Web APIs
analyser.fftsize = 2048; var buffer
length = analyser.frequencybincount ; var dataarray = new uint8array(buffer
length); 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); can...
...vasctx.linewidth = 2; canvasctx.strokestyle = 'rgb(0, 0, 0)'; canvasctx.beginpath(); var slicewidth = width * 1.0 / buffer
length; var x = 0; for(var i = 0; i < buffer
length; i++) { var v = dataarray[i] / 128.0; var y = v * height/2; if(i === 0) { canvasctx.moveto(x, y); } else { canvasctx.lineto(x, y); } x += slicewidth; } canvasctx.lineto(canvas.width, canvas.height/2); canvasctx.stroke(); }; draw(); specifications specification status comment web audio apithe definition of 'fftsize' in that specification.
AnalyserNode.maxDecibels - Web APIs
analyser.fftsize = 256; var buffer
length = analyser.frequencybincount; console.log(buffer
length); var dataarray = new uint8array(buffer
length); 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 / buffer
length) * 2.5; var barheig...
...ht; var x = 0; for(var i = 0; i < buffer
length; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',50,50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight/2); x += barwidth + 1; } }; draw(); specifications specification status comment web audio apithe definition of 'maxdecibels' in that specification.
AnalyserNode.minDecibels - Web APIs
analyser.fftsize = 256; var buffer
length = analyser.frequencybincount; console.log(buffer
length); var dataarray = new uint8array(buffer
length); 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 / buffer
length) * 2.5; var barheig...
...ht; var x = 0; for(var i = 0; i < buffer
length; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',50,50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight/2); x += barwidth + 1; } }; draw(); specifications specification status comment web audio apithe definition of 'mindecibels' in that specification.
AnalyserNode.smoothingTimeConstant - Web APIs
analyser.fftsize = 256; var buffer
length = analyser.frequencybincount; console.log(buffer
length); var dataarray = new uint8array(buffer
length); 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 / buffer
length) * 2.5; var barheig...
...ht; var x = 0; for(var i = 0; i < buffer
length; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',50,50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight/2); x += barwidth + 1; } }; draw(); specifications specification status comment web audio apithe definition of 'smoothingtimeconstant' in that specification.
AnalyserNode - Web APIs
analyser.fftsize = 2048; var buffer
length = analyser.frequencybincount; var dataarray = new uint8array(buffer
length); analyser.getbytetimedomaindata(dataarray); // get a canvas defined with id "oscilloscope" var canvas = document.getelementbyid("oscilloscope"); var canvasctx = canvas.getcontext("2d"); // draw an oscilloscope of the current audio source function draw() { requestanimationframe(draw); analyser.getbytetimedomaindata...
...(dataarray); canvasctx.fillstyle = "rgb(200, 200, 200)"; canvasctx.fillrect(0, 0, canvas.width, canvas.height); canvasctx.linewidth = 2; canvasctx.strokestyle = "rgb(0, 0, 0)"; canvasctx.beginpath(); var slicewidth = canvas.width * 1.0 / buffer
length; var x = 0; for (var i = 0; i < buffer
length; i++) { var v = dataarray[i] / 128.0; var y = v * canvas.height / 2; if (i === 0) { canvasctx.moveto(x, y); } else { canvasctx.lineto(x, y); } x += slicewidth; } canvasctx.lineto(canvas.width, canvas.height / 2); canvasctx.stroke(); } draw(); specifications specification status comment web audio apithe definition of 'analysernode' in that specification.
AudioBuffer() - Web APIs
options options are as follows:
length: the size of the audio buffer in sample-frames.
... to determine the
length to use for a specific number of seconds of audio, use numseconds * samplerate.
AudioBuffer.copyFromChannel() - Web APIs
the value of startinchannel is outside the current range of samples that already exist in the source buffer; that is, it's greater than its current
length.
... var myarraybuffer = audioctx.createbuffer(2, framecount, audioctx.samplerate); var anotherarray = new float32array(
length); myarraybuffer.copyfromchannel(anotherarray, 1, 0); specification specification status comment web audio apithe definition of 'copyfromchannel' in that specification.
AudioBuffer - Web APIs
audiobuffer.
length read only returns an integer representing the
length, in sample-frames, of the pcm data stored in the buffer.
...yarraybuffer = 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.
AudioParam.setTargetAtTime() - Web APIs
the decay rate as defined by the timeconstant parameter is exponential; therefore the value will never reach target completely, but after each timestep of
length timeconstant, the value will have approached target by another 1-e-1≈63.2%1 - e^{-1} \approx 63.2%.
... timeconstant 99.3% n * timeconstant 1-e-n1 - e^{-n} examples in this example, we have a media source with two control buttons (see the webaudio-examples repo for the source code, or view the example live.) when these buttons are pressed, settargetattime() is used to fade the gain value up to 1.0, and down to 0, respectively, with the effect starting after 1 second, and the
length of time the effect lasts being controlled by the timeconstant.
AudioTrackList - Web APIs
length read only the number of tracks in the list.
... audiotracks.onaddtrack = updatetrackcount; audiotracks.onremovetrack = updatetrackcount; function updatetrackcount(event) { trackcount = audiotracks.
length; drawtrackcountindicator(trackcount); } specifications specification status comment html living standardthe definition of 'audiotracklist' in that specification.
AudioWorkletNode() - Web APIs
the array
length must match numberofoutputs.
... indexsizeerror the
length of options.outputchannelcount array does not match options.numberofoutputs.
AudioWorkletNodeOptions - Web APIs
the array
length must match numberofoutputs.
...if the
length of the outputchannelcount array doesn't match numberofoutputs, an indexsizeerror will be thrown.
BaseAudioContext.createAnalyser() - Web APIs
analyser.fftsize = 2048; var buffer
length = analyser.frequencybincount; var dataarray = new uint8array(buffer
length); 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); canv...
...asctx.linewidth = 2; canvasctx.strokestyle = 'rgb(0, 0, 0)'; canvasctx.beginpath(); var slicewidth = width * 1.0 / buffer
length; var x = 0; for(var i = 0; i < buffer
length; i++) { var v = dataarray[i] / 128.0; var y = v * height/2; if(i === 0) { canvasctx.moveto(x, y); } else { canvasctx.lineto(x, y); } x += slicewidth; } canvasctx.lineto(canvas.width, canvas.height/2); canvasctx.stroke(); }; draw(); specifications specification status comment web audio apithe definition of 'createanalyser()' in that specification.
BiquadFilterNode.getFrequencyResponse() - Web APIs
return value undefined exceptions invalidaccesserror the three arrays provided are not all of the same
length.
... function calcfrequencyresponse() { biquadfilter.getfrequencyresponse(myfrequencyarray,magresponseoutput,phaseresponseoutput); for(i = 0; i <= myfrequencyarray.
length-1;i++){ var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + myfrequencyarray[i] + 'hz</strong>: magnitude ' + magresponseoutput[i] + ', phase ' + phaseresponseoutput[i] + ' radians.'; freqresponseoutput.appendchild(listitem); } } calcfrequencyresponse(); specifications specification status comment web audio apithe definition of '...
Blob.size - Web APIs
example this example uses an <input> element of type file to ask the user for a group of files, then iterates over those files outputting their names and
lengths in bytes.
... // 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++) { console.log(files[i].name + " has a size of " + files[i].size + " bytes"); } specifications specification status comment file apithe definition of 'blob.size' in that specification.
CSSNumericValue.type - Web APIs
the type() method of the cssnumericvalue interface returns the type of cssnumericvalue, one of angle, flex, frequency,
length, resolution, percent, percenthint, or time.
... examples let mathsum = css.px("23").sub(css.percent("4")).sub(css.cm("3")).sub(css.in("9")); // returns an object with the structure: {
length: 1, percenthint: "
length"} let cssnumerictype = mathsum.type(); specifications specification status comment css typed om level 1the definition of 'type' in that specification.
CSSStyleDeclaration - Web APIs
cssstyledeclaration.
lengthread only the number of properties.
... example var styleobj = document.stylesheets[0].cssrules[0].style; console.log(styleobj.csstext); for (var i = styleobj.
length; i--;) { var namestring = styleobj[i]; styleobj.removeproperty(namestring); } console.log(styleobj.csstext); specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration' in that specification.
CanvasRenderingContext2D.createImageData() - Web APIs
each pixel within an imagedata object consists of four array values, so the object's data property has a
length of 4 × 5,000, or 20,000.
... 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() and the imagedata object, see pixel manipulation wit...
CanvasRenderingContext2D.lineJoin - Web APIs
degenerate segments with a
length of zero (i.e., with all endpoints and control points at the exact same position) are also ignored.
... <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...
Basic animations - Web APIs
[0], h: this.h, w: this.w }, t)), this.sn.unshift(i), -1 != e) return console.log(e), fa[e].renew(), void (document.getelementbyid("score").innertext = number(document.getelementbyid("score").innertext) + 1); this.sn.pop(), console.log(6) } this.sn.foreach((t, e, i) => { if (0 == e || i.
length - 1 == e) { var n = c.createlineargradient(t.x, t.y, t.x + this.w, t.y + this.h); i.
length - 1 == e ?
... (n.addcolorstop(0, "black"), n.addcolorstop(1, "#8bc34a")) : (n.addcolorstop(0, "#8bc34a"), n.addcolorstop(1, "white")), c.fillstyle = n } else c.fillstyle = "#8bc34a"; c.fillrect(t.x, t.y, this.w, this.h), c.strokestyle = "#e91e63", c.font = "30px serif", c.strokestyle = "#9e9e9e", i.
length - 1 != e && 0 != e && c.strokerect(t.x, t.y, this.w, this.h), 0 == e && (c.beginpath(), c.fillstyle = "#f44336", c.arc(t.x + 10, t.y + 2, 5, 360, 0), c.fill()), c.arc(t.x + 10, t.y + 2, 5, 360, 0), c.fill(), c.beginpath() }) } } function gc() { for (var t = "0123456789abcdef", e = "#", i = 0; i < 6; i++) e += t[math.ceil(15 * math.random())]; return e } function food() { this.x = 0, this.y = 0, this.b = 10, this.w ...
Pixel manipulation with canvas - Web APIs
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.
...emos.org/files/5397/rhino.jpg'; img.onload = function() { draw(this); }; function draw(img) { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); img.style.display = 'none'; var imagedata = ctx.getimagedata(0, 0, canvas.width, canvas.height); var data = imagedata.data; var invert = function() { for (var i = 0; i < data.
length; i += 4) { data[i] = 255 - data[i]; // red data[i + 1] = 255 - data[i + 1]; // green data[i + 2] = 255 - data[i + 2]; // blue } ctx.putimagedata(imagedata, 0, 0); }; var grayscale = function() { for (var i = 0; i < data.
length; i += 4) { var avg = (data[i] + data[i + 1] + data[i + 2]) / 3; data[i] = avg; // red data[i + 1] = avg; //...
CharacterData - Web APIs
characterdata.
length read only returns an unsigned long representing the size of the string contained in characterdata.data.
... characterdata.substringdata() returns a domstring containing the part of characterdata.data of the specified
length and starting at the specified offset.
ChildNode.after() - Web APIs
; }); this.parentnode.insertbefore(docfrag, this.nextsibling); } }); }); })([element.prototype, characterdata.prototype, documenttype.prototype]); another polyfill // from: https://github.com/fabiovergani/js-polyfill_element.prototype.after/blob/master/after.js (function(x){ var o=x.prototype,p='after'; if(!o[p]){ o[p]=function(){ var e, m=arguments, l=m.
length, i=0, t=this, p=t.parentnode, n=node, s=string, d=document; if(p!==null){ while(i<l){ e=m[i]; if(e instanceof n){ t=t.nextsibling; if(t!==null){ p.insertbefore(e,t); }else{ p.appendchild(e); }; }else{ p.appendchild(d.createtextnode(s(e))); }; ++i; ...
... }; }; }; }; })(element); /* minified: (function(x){ var o=x.prototype; o.after||(o.after=function(){var e,m=arguments,l=m.
length,i=0,t=this,p=t.parentnode,n=node,s=string,d=document;if(p!==null){while(i<l){((e=m[i]) instanceof n)?(((t=t.nextsibling )!==null)?p.insertbefore(e,t):p.appendchild(e)):p.appendchild(d.createtextnode(s(e)));++i;}}}); }(element)); */ specification specification status comment domthe definition of 'childnode.after()' in that specification.
Crypto.getRandomValues() - Web APIs
domexception (name: quotaexceedederror) the requested
length exceeds 65,536 bytes.
... examples /* assuming that window.crypto.getrandomvalues is available */ var array = new uint32array(10); window.crypto.getrandomvalues(array); console.log("your lucky numbers:"); for (var i = 0; i < array.
length; i++) { console.log(array[i]); } specification specification status comment web cryptography api recommendation initial definition ...
DOMTokenList - Web APIs
properties domtokenlist.
length read only is an integer representing the number of objects stored in the object.
... methods domtokenlist.item(index) returns the item in the list by its index, or undefined if index is greater than or equal to the list's
length.
DataTransfer.items - Web APIs
ed = "move"; } function drop_handler(ev) { console.log("drop: target.id = " + ev.target.id); ev.preventdefault(); // get the id of the target and add the moved element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.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("...
... types[" + i + "] = " + ev.datatransfer.types[i]); } } // print each item's "kind" and "type" if (ev.datatransfer.items != null) { for (var i=0; i < ev.datatransfer.items.
length; i++) { console.log("...
DataTransfer.types - Web APIs
ed = "move"; } function drop_handler(ev) { console.log("drop: target.id = " + ev.target.id); ev.preventdefault(); // get the id of the target and add the moved element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.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("...
... types[" + i + "] = " + ev.datatransfer.types[i]); } } // print each item's "kind" and "type" if (ev.datatransfer.items != null) { for (var i=0; i < ev.datatransfer.items.
length; i++) { console.log("...
DataTransferItemList.DataTransferItem() - Web APIs
if the index is less than zero or greater than or equal to the number of items in the list (as indicated by the list's
length property, undefined is returned.
...paragraph ...</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 target node data[i].getasstring(function (s){ ev.target.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){ cons...
DataTransferItemList.add() - Web APIs
paragraph ...</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 target node data[i].getasstring(function (s){ ev.target.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){ cons...
...drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; for (var i = 0; i < datalist.
length; i++) { datalist.remove(i); } // clear any remaining drag data datalist.clear(); } result result link specifications specification status comment html living standardthe definition of 'add()' in that specification.
DataTransferItemList.clear() - Web APIs
paragraph ...</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 target node data[i].getasstring(function (s){ ev.target.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){ cons...
...drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; for (var i = 0; i < datalist.
length; i++) { datalist.remove(i); } // clear any remaining drag data datalist.clear(); } result result link specifications specification status comment html living standardthe definition of 'clear()' in that specification.
Document.getElementsByTagName() - Web APIs
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>getelementsbytagname example</title> <script> function getallparaelems() { var allparas = document.getelementsbytagname('p'); var num = allparas.
length; alert('there are ' + num + ' paragraph in this document'); } function div1paraelems() { var div1 = document.getelementbyid('div1'); var div1paras = div1.getelementsbytagname('p'); var num = div1paras.
length; alert('there are ' + num + ' paragraph in #div1'); } function div2paraelems() { var div2 = document.getelementbyid('div2'); var di...
...v2paras = div2.getelementsbytagname('p'); var num = div2paras.
length; alert('there are ' + num + ' paragraph in #div2'); } </script> </head> <body style="border: solid green 3px"> <p>some outer text</p> <p>some outer text</p> <div id="div1" style="border: solid blue 3px"> <p>some div1 text</p> <p>some div1 text</p> <p>some div1 text</p> <div id="div2" style="border: solid red 3px"> <p>some div2 text</p> <p>some div2 text</p> </div> </div> <p>some outer text</p> <p>some outer text</p> <button onclick="getallparaelems();"> show all p elements in document</button><br /> <button onclick="div1paraelems();"> show all p elements in div1 element</button><br /> <button onclick="div2paraelems();"> show all p elements in ...
Document Object Model (DOM) - Web APIs
static type svgangle svgcolor svgicccolor svgelementinstance svgelementinstancelist svg
length svg
lengthlist svgmatrix svgnamelist svgnumber svgnumberlist svgpaint svgpathseg svgpathsegclosepath svgpathsegmovetoabs svgpathsegmovetorel svgpathseglinetoabs svgpathseglinetorel svgpathsegcurvetocubicabs svgpathsegcurvetocubicrel svgpathsegcurvetoquadraticabs svgpathsegcurvetoquadraticrel svgpathsegarcabs svgpathsegarcrel svgpathseglinetohorizontalab...
...icalrel svgpathsegcurvetocubicsmoothabs svgpathsegcurvetocubicsmoothrel svgpathsegcurvetoquadraticsmoothabs svgpathsegcurvetoquadraticsmoothrel svgpathseglist svgpoint svgpointlist svgpreserveaspectratio svgrect svgstringlist svgtransform svgtransformlist animated type svganimatedangle svganimatedboolean svganimatedenumeration svganimatedinteger svganimated
length svganimated
lengthlist svganimatednumber svganimatednumberlist svganimatedpathdata svganimatedpoints svganimatedpreserveaspectratio svganimatedrect svganimatedstring svganimatedtransformlist smil-related interfaces elementtimecontrol timeevent other svg interfaces getsvgdocument shadowanimation svgcolorprofilerule svgcssrule svgdocument svgexception svgexterna...
Element.getClientRects() - Web APIs
*/ 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; tablerectdiv.style.margin = tablerectdiv.sty...
... tablerectdiv.style.width = (rect.width - 2) + 'px'; tablerectdiv.style.height = (rect.height - 2) + 'px'; document.body.appendchild(tablerectdiv); } } (function() { /* call function addclientrectsoverlay(elt) for all elements with assigned class "withclientrectsoverlay" */ var elt = document.getelementsbyclassname('withclientrectsoverlay'); for (var i = 0; i < elt.
length; i++) { addclientrectsoverlay(elt[i]); } })(); result specifications specification status comment css object model (cssom) view modulethe definition of 'element.getclientrects()' in that specification.
Element.matches() - Web APIs
example <ul id="birds"> <li>orange-winged parrot</li> <li class="endangered">philippine eagle</li> <li>great white pelican</li> </ul> <script type="text/javascript"> var birds = document.getelementsbytagname('li'); for (var i = 0; i < birds.
length; i++) { if (birds[i].matches('.endangered')) { console.log('the ' + birds[i].textcontent + ' is endangered!'); } } </script> this will log "the philippine eagle is endangered!" to the console, since the element has indeed a class attribute with value endangered.
...totype.matches) { element.prototype.matches = element.prototype.matchesselector || element.prototype.mozmatchesselector || element.prototype.msmatchesselector || element.prototype.omatchesselector || element.prototype.webkitmatchesselector || function(s) { var matches = (this.document || this.ownerdocument).queryselectorall(s), i = matches.
length; while (--i >= 0 && matches.item(i) !== this) {} return i > -1; }; } however, given the practicality of supporting older browsers, the following should suffice for most (if not all) practical cases (i.e.
Event.eventPhase - Web APIs
divinfo = null, divs = null, usecapture = false; window.onload = function () { divinfo = document.getelementbyid('divinfo') divs = document.getelementsbytagname('div') chcapture = document.getelementbyid('chcapture') chcapture.onclick = function () { removelisteners() addlisteners() } clear() addlisteners() } function removelisteners() { for (let i = 0; i < divs.
length; i++) { let d = divs[i] if (d.id != "divinfo") { d.removeeventlistener("click", ondivclick, true) d.removeeventlistener("click", ondivclick, false) } } } function addlisteners() { for (let i = 0; i < divs.
length; i++) { let d = divs[i] if (d.id != "divinfo") { if (chcapture.checked) { d.addeventlistener("click", ondivclick, true) } ...
..."bubbling" : "error"; divinfo.innerhtml += e.currenttarget.id + "; eventphase: " + level + "<br/>"; } function clear() { for (let i = 0; i < divs.
length; i++) { if (divs[i].id != "divinfo") { divs[i].style.backgroundcolor = (i & 1) ?
HTMLCanvasElement.toDataURL() - Web APIs
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 = nwidth; 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 'htmlcanvaselement.todataurl' in that specification.
HTMLCanvasElement - Web APIs
if no [separate] css height is assigned to the <canvas>, then this value will also be used as the height of the canvas in the
length-unit css pixel.
...if no [separate] css width is assigned to the <canvas>, then this value will also be used as the width of the canvas in the
length-unit css pixel.
HTMLImageElement.sizes - Web APIs
source size values the source size value is a css
length.
... note: the source size value must not be specified as a percentage of the container size; that is,
lengths such as 50% or 100% are not allowed, as there would be uncertainty as to what the specified value is a percentage of.
HTMLInputElement.setSelectionRange() - Web APIs
an index greater than the
length of the element's value is treated as pointing to the end of the value.
...an index greater than the
length of the element's value is treated as pointing to the end of the value.
HTMLInputElement - Web APIs
max
length long: returns / sets the element's max
length attribute, containing the maximum number of characters (in unicode code points) that the value can have.
... min
length long: returns / sets the element's min
length attribute, containing the minimum number of characters (in unicode code points) that the value can have.
HTMLSelectElement.selectedOptions - Web APIs
if no options are currently selected, the collection is empty and returns a
length of 0.
... establishes the event handler for the button, as well as the event handler itself, looks like this: let orderbutton = document.getelementbyid("order"); let itemlist = document.getelementbyid("foods"); let outputbox = document.getelementbyid("output"); orderbutton.addeventlistener("click", function() { let collection = itemlist.selectedoptions; let output = ""; for (let i=0; i<collection.
length; i++) { if (output === "") { output = "your order for the following items has been placed: "; } output += collection[i].label; if (i === (collection.
length - 2) && (collection.
length < 3)) { output += " and "; } else if (i < (collection.
length - 2)) { output += ", "; } else if (i === (collection.
length - 2)) { output += ", and "; } } if (...
HTMLSelectElement - Web APIs
htmlselectelement.
length an unsigned long the number of <option> elements in this select element.
...
length now returns an unsigned long.
Using microtasks in JavaScript with queueMicrotask() - Web APIs
const messagequeue = []; let sendmessage = message => { messagequeue.push(message); if (messagequeue.
length === 1) { queuemicrotask(() => { const json = json.stringify(messagequeue); messagequeue.
length = 0; fetch("url-of-receiver", json); }); } }; when sendmessage() gets called, the specified message is first pushed onto the message queue array.
...that means that any further calls to sendmessage() made in the interim will push their messages onto the message queue, but because of the array
length check before adding a microtask, no new microtask is enqueued.
The HTML DOM API - Web APIs
javascript const namefield = document.getelementbyid("username"); const sendbutton = document.getelementbyid("sendbutton") sendbutton.disabled = true; // [note: this is disabled since it causes this article to always load with this example focused and scrolled into view] //namefield.focus(); namefield.addeventlistener("input", event => { const elem = event.target; const valid = elem.value.
length != 0; if (valid && sendbutton.disabled) { sendbutton.disabled = false; } else if (!valid && !sendbutton.disabled) { sendbutton.disabled = true; } }); this code uses the document interface's getelementbyid() method to get the dom object representing the <input> elements whose ids are username and sendbutton.
...this code looks at the
length of the current value of the input; if it's zero, then the "send" button is disabled if it's not already disabled.
File drag and drop - Web APIs
function drophandler(ev) { console.log('file(s) dropped'); // prevent default behavior (prevent file from being opened) ev.preventdefault(); if (ev.datatransfer.items) { // use datatransferitemlist interface to access the file(s) for (var i = 0; i < ev.datatransfer.items.
length; i++) { // if dropped items aren't files, reject them if (ev.datatransfer.items[i].kind === 'file') { var file = ev.datatransfer.items[i].getasfile(); console.log('...
... file[' + i + '].name = ' + file.name); } } } else { // use datatransfer interface to access the file(s) for (var i = 0; i < ev.datatransfer.files.
length; i++) { console.log('...
Ajax navigation example - Web APIs
assign(surl); } } function processlink () { if (this.classname === sajaxclass) { requestpage(this.href); return false; } return true; } function init () { opageinfo.title = document.title; history.replacestate(opageinfo, opageinfo.title, opageinfo.url); for (var olink, nidx = 0, nlen = document.links.
length; nidx < nlen; document.links[nidx++].onclick = processlink); } const /* customizable constants */ stargetid = "ajax-content", sviewkey = "view_as", sajaxclass = "ajax-nav", /* not customizable constants */ rsearch = /\?.*$/, rhost = /^[^\?]*\?*&*/, rview = new regexp("&" + sviewkey + "\\=[^&]*|&*$", "i"), rendqstmark = /\?$/, oloadingbox = docume...
...ect", 400: "bad request", 401: "unauthorized", 402: "payment required", 403: "forbidden", 404: "not found", 405: "method not allowed", 406: "not acceptable", 407: "proxy authentication required", 408: "request timeout", 409: "conflict", 410: "gone", 411: "
length required", 412: "precondition failed", 413: "request entity too large", 414: "request-uri too long", 415: "unsupported media type", 416: "requested range not satisfiable", 417: "expectation failed", 422: "unprocessable entity", 423: "locked", 424: "failed dependency", 425: "unas...
IIRFilterNode.getFrequencyResponse() - Web APIs
return value undefined exceptions notsupportederror the three arrays provided are not all of the same
length.
... function calcfrequencyresponse() { iirfilter.getfrequencyresponse(myfrequencyarray, magresponseoutput, phaseresponseoutput); for(i = 0; i <= myfrequencyarray.
length-1;i++){ var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + myfrequencyarray[i] + 'hz</strong>: magnitude ' + magresponseoutput[i] + ', phase ' + phaseresponseoutput[i] + ' radians.'; freqresponseoutput.appendchild(listitem); } } calcfrequencyresponse(); specifications specification status comment web audio apithe definition of '...
ImageData.data - Web APIs
let imagedata = new imagedata(100, 100); console.log(imagedata.data); // uint8clampedarray[40000] console.log(imagedata.data.
length); // 40000 filling a blank imagedata object this example creates and fills a new imagedata object with colorful 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) { // 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.data[i + 0] = x; // r value imagedata.data[i + 1] = y; // g value imagedata.data[i + 2] = 255 - x; // b value imagedata.data[i + 3] = 255; // a value } // dra...
Capabilities, constraints, and settings - Web APIs
function startvideo() { buildconstraints(); navigator.mediadevices.getusermedia({ video: videoconstraints, audio: audioconstraints }).then(function(stream) { let audiotracks = stream.getaudiotracks(); let videotracks = stream.getvideotracks(); videoelement.srcobject = stream; if (audiotracks.
length) { audiotrack = audiotracks[0]; } if (videotracks.
length) { videotrack = videotracks[0]; } }).then(function() { return new promise(function(resolve) { videoelement.onloadedmetadata = resolve; }); }).then(function() { getcurrentsettings(); }).catch(handleerror); } there are several steps here: it calls buildconstraints() to create the mediat...
... function keydownhandler(event) { if (event.key == "tab") { let elem = event.target; let str = elem.value; let position = elem.selectionstart; let newstr = str.substring(0, position) + " " + str.substring(position, str.
length); elem.value = newstr; elem.selectionstart = elem.selectionend = position + 2; event.preventdefault(); } } videoconstrainteditor.addeventlistener("keydown", keydownhandler, false); audioconstrainteditor.addeventlistener("keydown", keydownhandler, false); show constrainable properties the browser supports the last significant piece of the puzzle: code that displays, for the user'...
NavigatorPlugins.plugins - Web APIs
the returned value is not a javascript array, but has the
length property and supports accessing individual items using bracket notation (plugins[2]), as well as via item(index) and nameditem("name") methods.
... var plugins
length = navigator.plugins.
length; document.body.innerhtml = plugins
length + " 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 < plugins
length; i++) { let newrow = table.insertrow(); newrow.insertcell().tex...
Node.childNodes - Web APIs
syntax let nodelist = elementnodereference.childnodes; examples simple usage // parg is an object reference to a <p> element // first check that the element has child nodes if (parg.haschildnodes()) { let children = parg.childnodes; for (let i = 0; i < children.
length; i++) { // do something with each child as children[i] // note: list is live!
... adding or removing children will change the list's `
length` } } remove all children from a node // this is one way to remove all children from a node // box is an object reference to an element while (box.firstchild) { //the list is live so it will re-index each call box.removechild(box.firstchild); } notes the items in the collection of nodes are objects, not strings.
PannerNode.refDistance - Web APIs
const context = new audiocontext(); // all our test tones will last this many seconds const note_
length = 6; // this is how far we'll move the sound const z_distance = 20; // this function creates a graph for the test tone with a given refdistance // and schedules it to move away from the listener along the z (depth-wise) axis // at the given start time, resulting in a decrease in volume (decay) const scheduletesttone = (refdistance, starttime) => { const osc = new oscillatornode(context); co...
...nst panner = new pannernode(context); panner.refdistance = refdistance; // set the initial z position, then schedule the ramp panner.positionz.setvalueattime(0, starttime); panner.positionz.linearramptovalueattime(z_distance, starttime + note_
length); osc.connect(panner) .connect(context.destination); osc.start(starttime); osc.stop(starttime + note_
length); }; // this tone should decay immediately and fairly quickly scheduletesttone(1, context.currenttime); // this tone should decay slower and later than the previous one scheduletesttone(4, context.currenttime + note_
length); // this tone should decay only slightly, and only start decaying fairly late scheduletesttone(7, context.currenttime + note_
length * 2); after running this code, the resulting waveforms should look s...
PannerNode.rolloffFactor - Web APIs
example this example demonstrates how different rollofffactor values affect how the volume of the test tone decreases with increasing distance from the listener: const context = new audiocontext(); // all our test tones will last this many seconds const note_
length = 4; // this is how far we'll move the sound const z_distance = 20; // this function creates a graph for the test tone with a given rollofffactor // and schedules it to move away from the listener along the z (depth-wise) axis // at the given start time, resulting in a decrease in volume (decay) const scheduletesttone = (rollofffactor, starttime) => { const osc = new oscillatornode(context); ...
... const panner = new pannernode(context); panner.rollofffactor = rollofffactor; // set the initial z position, then schedule the ramp panner.positionz.setvalueattime(0, starttime); panner.positionz.linearramptovalueattime(z_distance, starttime + note_
length); osc.connect(panner) .connect(context.destination); osc.start(starttime); osc.stop(starttime + note_
length); }; // this tone should decay fairly quickly scheduletesttone(1, context.currenttime); // this tone should decay slower than the previous one scheduletesttone(0.5, context.currenttime + note_
length); // this tone should decay only slightly scheduletesttone(0.1, context.currenttime + note_
length * 2); after running this code, the resulting waveforms should look something like this: specifications spe...
ParentNode.children - Web APIs
if the node has no element children, then children is an empty list with a
length of 0.
... 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.
ParentNode.querySelectorAll() - Web APIs
<div class="outer"> <div class="select"> <div class="inner"> </div> </div> </div> javascript var select = document.queryselector('.select'); var inner = select.queryselectorall('.outer .inner'); inner.
length; // 1, not 0!
... the :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the base element: var select = document.queryselector('.select'); var inner = select.queryselectorall(':scope .outer .inner'); inner.
length; // 0 specifications specification status comment domthe definition of 'parentnode.queryselectorall()' in that specification.
performance.getEntries() - Web APIs
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 let p = performance.getentries(); for (var i=0; i < p.
length; i++) { console.log("entry[" + i + "]"); check_performanceentry(p[i]); } // use getentriesbytype() to get all "mark" entries p = performance.getentriesbytype("mark"); for (let i=0; i < p.
length; i++) { console.log ("mark only entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } // use getentri...
...esbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (let i=0; i < p.
length; i++) { console.log ("mark and begin entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } } specifications specification status comment performance timeline level 2the definition of 'getentries()' in that specification.
performance.getEntriesByName() - Web APIs
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_performanceentry(p[i]); } // use getentriesbytype() to get all "mark" entries p = performance.getentriesbytype("...
...mark"); for (var i=0; i < p.
length; i++) { log ("mark only entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } // use getentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (var i=0; i < p.
length; i++) { log ("mark and begin entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } } specifications specification status comment performance timeline level 2the definition of 'getentriesbyname()' in that specification.
performance.getEntriesByType() - Web APIs
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 + "]"); checkperformanceentry(p[i]); } // use getentriesbytype() to get all "mark" entries p = performance.getentriesbytype("ma...
...rk"); for (var i=0; i < p.
length; i++) { log ("mark only entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } // use getentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (var i=0; i < p.
length; i++) { log ("mark and begin entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } } specifications specification status comment performance timeline level 2the definition of 'getentriesbytype()' in that specification.
performance.mark() - Web APIs
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.
PerformanceEntry.duration - Web APIs
performance.mark not supported"); return; } // create some performance entries via the mark() method performance.mark("begin"); do_work(50000); 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]); } } function check_performanceentry(obj) { var properties = ["name", "entrytype", "starttime", "duration"]; var methods = ["tojson"]; for (var i=0; i < properties.
length; i++) { // check each property var supported = properties[i] in obj; if (supported) log("..." + properties[i] + " = " + obj[propert...
...ies[i]]); else log("..." + properties[i] + " = not supported"); } for (var i=0; i < methods.
length; i++) { // check each method var supported = typeof obj[methods[i]] == "function"; if (supported) { var js = obj[methods[i]](); log("..." + methods[i] + "() = " + json.stringify(js)); } else { log("..." + methods[i] + " = not supported"); } } } specifications specification status comment performance timeline level 2the definition of 'duration' in that specification.
PerformanceEntry.name - Web APIs
performance.mark not supported"); return; } // create some performance entries via the mark() method performance.mark("begin"); do_work(50000); 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]); } } function check_performanceentry(obj) { var properties = ["name", "entrytype", "starttime", "duration"]; var methods = ["tojson"]; for (var i=0; i < properties.
length; i++) { // check each property var supported = properties[i] in obj; if (supported) log("..." + properties[i] + " = " + obj[propert...
...ies[i]]); else log("..." + properties[i] + " = not supported"); } for (var i=0; i < methods.
length; i++) { // check each method var supported = typeof obj[methods[i]] == "function"; if (supported) { var js = obj[methods[i]](); log("..." + methods[i] + "() = " + json.stringify(js)); } else { log("..." + methods[i] + " = not supported"); } } } specifications specification status comment performance timeline level 2the definition of 'name' in that specification.
PerformanceEntry.startTime - Web APIs
performance.mark not supported"); return; } // create some performance entries via the mark() method performance.mark("begin"); do_work(50000); 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]); } } function check_performanceentry(obj) { var properties = ["name", "entrytype", "starttime", "duration"]; var methods = ["tojson"]; for (var i=0; i < properties.
length; i++) { // check each property var supported = properties[i] in obj; if (supported) log("..." + properties[i] + " = " + obj[propert...
...ies[i]]); else log("..." + properties[i] + " = not supported"); } for (var i=0; i < methods.
length; i++) { // check each method var supported = typeof obj[methods[i]] == "function"; if (supported) { var js = obj[methods[i]](); log("..." + methods[i] + "() = " + json.stringify(js)); } else { log("..." + methods[i] + " = not supported"); } } } specifications specification status comment performance timeline level 2the definition of 'starttime' in that specification.
PerformanceEntry.toJSON() - Web APIs
performance.mark not supported"); return; } // create some performance entries via the mark() method performance.mark("begin"); do_work(50000); 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]); } } function check_performanceentry(obj) { var properties = ["name", "entrytype", "starttime", "duration"]; var methods = ["tojson"]; for (var i=0; i < properties.
length; i++) { // check each property var supported = properties[i] in obj; if (supported) log("..." + properties[i] + " = " + obj[propert...
...ies[i]]); else log("..." + properties[i] + " = not supported"); } for (var i=0; i < methods.
length; i++) { // check each method var supported = typeof obj[methods[i]] == "function"; if (supported) { var js = obj[methods[i]](); log("..." + methods[i] + "() = " + json.stringify(js)); } else { log("..." + methods[i] + " = not supported"); } } } specifications specification status comment performance timeline level 2the definition of 'tojson' in that specification.
PerformanceObserverEntryList.getEntries() - Web APIs
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(p...
...erfentries[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.
PerformanceObserverEntryList.getEntriesByName() - Web APIs
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(p...
...erfentries[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 only the 'frame' event observe_frame.observe({entrytypes: ['frame']}); specifications specification status comment performance timeline level 2the definition of 'getentriesbyname()' in that specification.
PerformanceObserverEntryList.getEntriesByType() - Web APIs
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(p...
...erfentries[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 only the 'frame' event observe_frame.observe({entrytypes: ['frame']}); specifications specification status comment performance timeline level 2the definition of 'getentriesbytype()' in that specification.
PerformanceResourceTiming.connectEnd - Web APIs
function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.
length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "respo...
...nsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.
length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("...
PerformanceResourceTiming.connectStart - Web APIs
function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.
length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", ...
... "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.
length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("...
PerformanceResourceTiming.domainLookupEnd - Web APIs
function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.
length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "respo...
...nsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.
length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("...
PerformanceResourceTiming.domainLookupStart - Web APIs
function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.
length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", ...
... "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.
length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("...
PerformanceResourceTiming.fetchStart - Web APIs
function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.
length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", ...
... "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.
length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("...
PerformanceResourceTiming.redirectEnd - Web APIs
function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.
length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", ...
... "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.
length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("...
PerformanceResourceTiming.redirectStart - Web APIs
function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.
length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", ...
... "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.
length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("...
PerformanceResourceTiming.requestStart - Web APIs
function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.
length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", ...
... "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.
length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("...
PerformanceResourceTiming.responseEnd - Web APIs
function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.
length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", ...
... "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.
length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("...
PerformanceResourceTiming.responseStart - Web APIs
function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.
length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", ...
... "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.
length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("...
PerformanceResourceTiming.secureConnectionStart - Web APIs
function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.
length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", ...
... "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.
length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("...
PerformanceResourceTiming.workerStart - Web APIs
function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.
length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", ...
... "responsestart", "responseend", "secureconnectionstart", "workerstart"]; for (var i=0; i < properties.
length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("...
Multi-touch interaction - Web APIs
"target1": return evcache1; case "target2": return evcache2; case "target3": return evcache3; default: log("error with cache handling",ev); } } function push_event(ev) { // save this event in the target's cache var cache = get_cache(ev); cache.push(ev); } function remove_event(ev) { // remove this event from the target's cache var cache = get_cache(ev); for (var i = 0; i < cache.
length; i++) { if (cache[i].pointerid == ev.pointerid) { cache.splice(i, 1); break; } } } update background color the background color of the touch areas will change as follows: no active touches is white; one active touch is yellow; two simultaneous touches is ping and three or more simultaneous touches is lightblue.
...no pointers down // yellow - one pointer down // pink - two pointers down // lightblue - three or more pointers down var evcache = get_cache(ev); switch (evcache.
length) { case 0: // target element has no touch points ev.target.style.background = "white"; break; case 1: // single touch point ev.target.style.background = "yellow"; break; case 2: // two simultaneous touch points ev.target.style.background = "pink"; break; default: // three or more simultaneous touches ev.target.style.background = "lightblue"; } } event logging the...
PositionOptions.timeout - Web APIs
the positionoptions.timeout property is a positive long value representing the maximum
length of time (in milliseconds) the device is allowed to take in order to return a position.
... syntax positionoptions.timeout = time
length specifications specification status comment geolocation apithe definition of 'positionoptions.timeout' in that specification.
ProgressEvent() - Web APIs
syntax progressevent = new progressevent(type, {
lengthcomputable: abooleanvalue, loaded: anumber, total: anumber}); arguments the progressevent() constructor also inherits arguments from event().
...
lengthcomputable optional is a boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable.
ProgressEvent.initProgressEvent() - Web APIs
do not use it anymore, use the standard constructor, progressevent(), to create a synthetic progressevent syntax progress.initprogressevent(typearg, canbubblearg, cancelablearg,
lengthcomputable, loaded, total); parameters typearg is a domstring identifying the specific type of animation event that occurred.
...
lengthcomputable is a boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable.
ProgressEvent - Web APIs
progressevent.
lengthcomputable read only is a boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable.
... 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 definition of 'progressevent' in that specification.
RTCDataChannel: bufferedamountlow event - Web APIs
let pc = new rtcpeerconnection(); let dc = pc.createdatachannel("sendfile"); let source = /* source data object */ dc.bufferedamountlowthreshold = 65536; pc.addeventlistener("bufferedamountlow", ev => { if (source.position <= source.
length) { dc.send(source.readfile(65536)); } }, false); after creating the rtcpeerconnection, this calls rtcpeerconnection.createdatachannel() to create the data channel.
... you can also set up a listener for bufferedamountlow using its event handler property, onbufferedamountlow: pc.onbufferedamountlow = ev => { if (source.position <= source.
length) { dc.send(source.readfile(65536)); } } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'bufferedamountlow' in that specification.
RTCPeerConnection.getConfiguration() - Web APIs
let configuration = mypeerconnection.getconfiguration(); if ((configuration.certificates != undefined) && (!configuration.certificates.
length)) { rtcpeerconnection.generatecertificate({ name: 'rsassa-pkcs1-v1_5', hash: 'sha-256', modulus
length: 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 se...
...e if it has any certificates set by examining whether or not (a) the configuration has a value for certificates, and (b) whether its
length is zero.
Range.setEnd() - Web APIs
indexsizeerror the value specified by endoffset is either greater than or equal to the
length of the node or is less than zero.
... example const range = document.createrange(); const endnode = document.getelementsbytagname('p').item(3); const endoffset = endnode.childnodes.
length; range.setend(endnode, endoffset); setend() is commonly used in conjunction with setstart() to fully configure a range.
ReadableStream.cancel() - Web APIs
searchterm.tolowercase() : searchterm; var buffersize = math.max(tomatch.
length - 1, contextbefore); var bytesreceived = 0; var buffer = ''; var matchfoundat = -1; return reader.read().then(function process(result) { if (result.done) { console.log('failed to find match'); return; } bytesreceived += result.value.
length; console.log(`received ${bytesreceived} bytes of data so far`); buffer += decoder.decode(result.value, {stream: tru...
...buffer.tolowercase() : buffer).indexof(tomatch); } if (matchfoundat === -1) { buffer = buffer.slice(-buffersize); } else if (buffer.slice(matchfoundat + tomatch.
length).
length >= contextafter) { console.log("here's the match:") console.log(buffer.slice( math.max(0, matchfoundat - contextbefore), matchfoundat + tomatch.
length + contextafter )); console.log("cancelling fetch"); reader.cancel(); return; } else { console.log('found match, but need more context…'); } // keep reading return reader.read().then(process); }); }).catch(err => { console.log("something went...
ReadableStreamDefaultReader.read() - Web APIs
if (done) { console.log("stream complete"); para.textcontent = result; return; } // value for fetch streams is a uint8array charsreceived += value.
length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far.
...utf8decoder.decode(chunk) : ""); startindex = re.lastindex = 0; continue; } yield chunk.substring(startindex, result.index); startindex = re.lastindex; } if (startindex < chunk.
length) { // last line didn't end in a newline char yield chunk.substr(startindex); } } for await (let line of maketextfilelineiterator(urloffile)) { processline(line); } specifications specification status comment streamsthe definition of 'read()' in that specification.
ResizeObserverEntry.contentBoxSize - Web APIs
this object contains two properties: blocksize the
length of the observed element's content box in the block dimension.
... inlinesize the
length of the observed element's content box in the inline dimension.
SVGCursorElement - Web APIs
svgcursorelement.x read only an svganimated
length corresponding to the x attribute of the given <cursor> element.
... svgcursorelement.y read only an svganimated
length corresponding to the y attribute of the given <cursor> element.
SVGFEConvolveMatrixElement - Web APIs
svgfeconvolvematrixelement.kernelunit
lengthx read only an svganimatednumber corresponding to the kernelunit
length attribute of the given element.
... svgfeconvolvematrixelement.kernelunit
lengthy read only an svganimatednumber corresponding to the kernelunit
length attribute of the given element.
SVGFEDiffuseLightingElement - Web APIs
svgfediffuselightingelement.kernelunit
lengthx read only an svganimatednumber corresponding to the x component of the kernelunit
length attribute of the given element.
... svgfediffuselightingelement.kernelunit
lengthy read only an svganimatednumber corresponding to the y component of the kernelunit
length attribute of the given element.
SVGFESpecularLightingElement - Web APIs
svgfespecularlightingelement.kernelunit
lengthx read only an svganimatednumber corresponding to the x component of the kernelunit
length attribute of the given element.
... svgfespecularlightingelement.kernelunit
lengthy read only an svganimatednumber corresponding to the y component of the kernelunit
length attribute of the given element.
SVGImageElement.height - Web APIs
the height read-only property of the svgimageelement interface returns an svganimated
length corresponding to the height attribute of the given <image> element.
... syntax var height = svgimageelement.height value an svganimated
length.
SVGImageElement.width - Web APIs
the width read-only property of the svgimageelement interface returns an svganimated
length corresponding to the width attribute of the given <image> element.
... syntax var width = svgimageelement.width; value an svganimated
length.
SVGImageElement.x - Web APIs
the x read-only property of the svgimageelement interface returns an svganimated
length corresponding to the x attribute of the given <image> element.
... syntax var x = svgimageelement.x; value an svganimated
length.
SVGImageElement.y - Web APIs
the y read-only property of the svgimageelement interface returns an svganimated
length corresponding to the y attribute of the given <image> element.
... syntax var y = svgimageelement.y; value an svganimated
length.
SVGNumberList - Web APIs
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 normative document svg 1.1 (2nd edition) properties name type description numberofitems unsigned long the number of items in the list.
...
length unsigned long the number of items in the list.
The 'X' property - Web APIs
usage context name x value <
length> | <percentage> initial 0 applies to <mask> , ‘svg’, ‘rect’, ‘image’, ‘foreignobject’ inherited no percentages refer to the size of the current viewport (see units) media visual computed value absolute
length or percentage animatable yes simple usage a <coordinate> is a
length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for x coordinates, the y-axis for y coordinates).
... its syntax is the same as that for <
length> // rect draws a rectangle with upper left-hand corner at x,y, with width w, and height h, with optional style // standard reference: http://www.w3.org/tr/svg11/shapes.html#rectelement func (svg *svg) rect(x float64, y float64, w float64, h float64, s ...string) { svg.printf(`<rect %s %s`, dim(x, y, w, h, svg.decimals), endstyle(s, emptyclose)) } ​ ...
SVGStringList - Web APIs
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 normative document svg 1.1 (2nd edition) properties name type description numberofitems unsigned long the number of items in the list.
...
length unsigned long a mirror of the value in numberofitems, for consistency with other interfaces.
ServiceWorkerGlobalScope: notificationclick event - Web APIs
event in an addeventlistener method: self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.
length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); or use the onnotificationclick event handler property: self.onnotificationclick = function(event) { console.log('on notification click: ', event.notification.tag); event.notification.clo...
...se(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.
length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specification status notifications apithe definition of 'onnotificationclick' in that specification.
SpeechSynthesis: voiceschanged event - Web APIs
you can use the voiceschanged event in an addeventlistener method: var synth = window.speechsynthesis; synth.addeventlistener('voiceschanged', function() { var voices = synth.getvoices(); for(i = 0; i < voices.
length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } }); or use the onvoiceschanged event handler property: synth.onvoiceschanged = function() { var voices = synth.getv...
...oices(); for(i = 0; i < voices.
length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } specifications specification status comment web speech apithe definition of 'speech synthesis events' in that specification.
SpeechSynthesis - Web APIs
uttxt = document.queryselector('.txt'); var voiceselect = document.queryselector('select'); var pitch = document.queryselector('#pitch'); var pitchvalue = document.queryselector('.pitch-value'); var rate = document.queryselector('#rate'); var ratevalue = document.queryselector('.rate-value'); 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 (speechsynthe...
...sis.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); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'speechsynthesis' in that specification.
SpeechSynthesisUtterance.text - Web APIs
the maximum
length of the text that can be spoken in each utterance is 32,767 characters.
... 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.
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 (speechsynthe...
...sis.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 + '".'); } inputtxt.blur(); } specifications ...
SubtleCrypto.encrypt() - Web APIs
t.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 sure the function that //contains this code is an async function //encrypt function wants a cryptokey object const key_encoded = await crypto.subtle.importkey( "raw", key.buffer, 'aes...
...-ctr' , false, ["encrypt", "decrypt"]); const encrypted_content = await window.crypto.subtle.encrypt( { name: "aes-ctr", counter: iv,
length: 128 }, key_encoded, data ); //uint8array console.log(encrypted_content); aes-cbc this code fetches the contents of a text box, encodes it for encryption, and encrypts it using aes in cbc mode.
SubtleCrypto.generateKey() - Web APIs
let keypair = window.crypto.subtle.generatekey( { name: "rsa-oaep", modulus
length: 4096, publicexponent: new uint8array([1, 0, 1]), hash: "sha-256" }, true, ["encrypt", "decrypt"] ); elliptic curve key pair generation this code generates an ecdsa signing key pair.
... let key = window.crypto.subtle.generatekey( { name: "aes-gcm",
length: 256 }, true, ["encrypt", "decrypt"] ); specifications specification status comment web cryptography apithe definition of 'subtlecrypto.generatekey()' in that specification.
SubtleCrypto.sign() - Web APIs
an extra property, defining the salt
length, is passed into the sign() and verify() functions when they are invoked.
...*/ 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", salt
length: 32, }, privatekey, encoded ); ecdsa this code fetches the contents of a text box, encodes it for signing, and signs it with a private key.
TextTrackList - Web APIs
length read only the number of tracks in the list.
... texttracks.onaddtrack = updatetrackcount; texttracks.onremovetrack = updatetrackcount; function updatetrackcount(event) { trackcount = texttracks.
length; drawtrackcountindicator(trackcount); } specifications specification status comment html living standardthe definition of 'textracklist' in that specification.
TouchEvent.targetTouches - Web APIs
in following code snippet, the function compares the
length of the touches list to the the
length of the targettouches list and returns true if the
lengths are the same and returns false otherwise.
... return (ev.touches.
length == ev.targettouches.
length ?
TouchEvent.touches - Web APIs
in following code snippet, the touchstart event handler checks the
length of the touchevent.touches list to determine the number of touch points that were activated and then invokes different handlers depending on the number of touch points.
... switch (e.touches.
length) { case 1: handle_one_touch(e); break; case 2: handle_two_touches(e); break; case 3: handle_three_touches(e); break; default: console.log("not supported"); break; } }, false); specifications specification status comment touch events – level 2 draft non-stable version.
TransformStream - Web APIs
async transform(chunk, controller) { chunk = await chunk switch (typeof chunk) { case 'object': // just say the stream is done i guess if (chunk === null) controller.terminate() else if (arraybuffer.isview(chunk)) controller.enqueue(new uint8array(chunk.buffer, chunk.byteoffset, chunk.byte
length)) else if (array.isarray(chunk) && chunk.every(value => typeof value === 'number')) controller.enqueue(new uint8array(chunk)) else if ('function' === typeof chunk.valueof && chunk.valueof() !== chunk) this.transform(chunk.valueof(), controller) // hack else if ('tojson' in chunk) this.transform(json.stringify(chunk), controller) break case...
... let responses = [ /* conjoined response tree */ ] let {readable, writable} = new transformstream responses.reduce( (a, res, i, arr) => a.then(() => res.pipeto(writable, {preventclose: (i+1) !== arr.
length})), promise.resolve() ) note that this is not resilient to other influences.
USBDevice.controlTransferIn() - Web APIs
syntax var promise = usbdevice.controltransferin(setup,
length) parameters setup an object that sets options for .
...
length the maximum number of bytes to read from the device.
USBDevice.isochronousTransferIn() - Web APIs
syntax var promise = usbdevice.isochronoustransferin(endpointnumber, packet
lengths) parameters endpointnumber the number of a device-specific endpoint (buffer).
... packet
lengths an array of
lengths for the packets being received.
USBDevice.isochronousTransferOut() - Web APIs
syntax var promise = usbdevice.isochronoustransferout(endpointnumber, data, packet
lengths) parameters endpointnumber the number of a device-specific endpoint (buffer).
... packet
lengths an array of
lengths for the packets being transfered.
USBDevice.transferIn() - Web APIs
syntax var promise = usbdevice.transferin(endpointnumber,
length) parameters endpointnumber the number of a device-specific endpoint (buffer).
...
length the maximum number of bytes that will be read back from the device.
ValidityState.patternMismatch - Web APIs
input:invalid { border: red solid 3px; } note, in this case, we get a patternmismatch not a validitystate.toolong or validitystate.tooshort if the values are too long or too short because it is the pattern that is dictating the
length of the value.
... had we used min
length and max
length attributes instead, we may have seen validitystate.toolong or validitystate.tooshort being true.
VideoTrackList - Web APIs
length read only the number of tracks in the list.
... videotracks.onaddtrack = updatetrackcount; videotracks.onremovetrack = updatetrackcount; function updatetrackcount(event) { trackcount = videotracks.
length; drawtrackcountindicator(trackcount); } specifications specification status comment html living standardthe definition of 'videotracklist' in that specification.
WebGL2RenderingContext.uniform[1234][uif][v]() - Web APIs
syntax void gl.uniform1ui(location, v0); void gl.uniform2ui(location, v0, v1); void gl.uniform3ui(location, v0, v1, v2); void gl.uniform4ui(location, v0, v1, v2, v3); void gl.uniform1fv(location, data, optional srcoffset, optional src
length); void gl.uniform2fv(location, data, optional srcoffset, optional src
length); void gl.uniform3fv(location, data, optional srcoffset, optional src
length); void gl.uniform4fv(location, data, optional srcoffset, optional src
length); void gl.uniform1iv(location, data, optional srcoffset, optional src
length); void gl.uniform2iv(location, data, optional srcoffset, optional src
length); void gl.uniform3i...
...v(location, data, optional srcoffset, optional src
length); void gl.uniform4iv(location, data, optional srcoffset, optional src
length); void gl.uniform1uiv(location, data, optional srcoffset, optional src
length); void gl.uniform2uiv(location, data, optional srcoffset, optional src
length); void gl.uniform3uiv(location, data, optional srcoffset, optional src
length); void gl.uniform4uiv(location, data, optional srcoffset, optional src
length); parameters location a webgluniformlocation object containing the location of the uniform attribute to modify.
WebGL2RenderingContext.uniformMatrix[234]x[234]fv() - Web APIs
syntax void gl.uniformmatrix2fv(location, transpose, data, optional srcoffset, optional src
length); void gl.uniformmatrix3x2fv(location, transpose, data, optional srcoffset, optional src
length); void gl.uniformmatrix4x2fv(location, transpose, data, optional srcoffset, optional src
length); void gl.uniformmatrix2x3fv(location, transpose, data, optional srcoffset, optional src
length); void gl.uniformmatrix3fv(location, transpose, data, optional srcoffset, optional src
length); void gl.uniformmatrix4x3fv(location, transpose, data, o...
...ptional srcoffset, optional src
length); void gl.uniformmatrix2x4fv(location, transpose, data, optional srcoffset, optional src
length); void gl.uniformmatrix3x4fv(location, transpose, data, optional srcoffset, optional src
length); void gl.uniformmatrix4fv(location, transpose, data, optional srcoffset, optional src
length); parameters location a webgluniformlocation object containing the location of the uniform attribute to modify.
WebGLRenderingContext.bufferSubData() - Web APIs
syntax // webgl1: void gl.buffersubdata(target, offset, arraybuffer srcdata); void gl.buffersubdata(target, offset, arraybufferview srcdata); // webgl2: void gl.buffersubdata(target, dstbyteoffset, arraybufferview srcdata, srcoffset,
length); parameters target a glenum specifying the binding point (target).
...
length optional a gluint defaulting to 0.
WebGLRenderingContext.getParameter() - Web APIs
ents glint gl.max_uniform_block_size glint64 gl.max_uniform_buffer_bindings glint gl.max_varying_components glint gl.max_vertex_output_components glint gl.max_vertex_uniform_blocks glint gl.max_vertex_uniform_components glint gl.min_program_texel_offset glint gl.pack_row_
length glint see pixelstorei.
... gl.unpack_row_
length glint see pixelstorei.
WebGLRenderingContext.getShaderInfoLog() - Web APIs
when a webglshader object is initially created, its information log will be a string of
length 0.
...*/ 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.
WebGLRenderingContext.pixelStorei() - Web APIs
glenum gl.browser_default_webgl gl.browser_default_webgl, gl.none webgl when using a webgl 2 context, the following values are available additionally: constant description type default value allowed values (for param) specified in gl.pack_row_
length number of pixels in a row.
... glint 0 0 to infinity opengl es 3.0 gl.pack_skip_rows number of rows of pixel locations skipped before the first pixel is written into memory glint 0 0 to infinity opengl es 3.0 gl.unpack_row_
length number of pixels in a row.
A basic 2D WebGL animation example - Web APIs
vas.height; currentrotation = [0, 1]; currentscale = [1.0, aspectratio]; vertexarray = new float32array([ -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.
WebGL best practices - Web APIs
t res = gl.clientwaitsync(sync, flags, 0); if (res == gl.wait_failed) { reject(); return; } if (res == gl.timeout_expired) { settimeout(test, interval_ms); return; } resolve(); } test()); }); } async function getbuffersubdataasync( gl, target, buffer, srcbyteoffset, dstbuffer, /* optional */ dstoffset, /* optional */
length) { const sync = gl.fencesync(gl.sync_gpu_commands_complete, 0); gl.flush(); await clientwaitasync(gl, sync, 0, 10); gl.deletesync(sync); gl.bindbuffer(target, buffer); gl.getbuffersubdata(target, srcbyteoffset, dstbuffer, dstoffset,
length); gl.bindbuffer(target, null); return dest; } async function readpixelsasync(gl, x, y, w, h, format, type, dest) { const buf = gl.createb...
...uffer(); gl.bindbuffer(gl.pixel_pack_buffer, buf); gl.bufferdata(gl.pixel_pack_buffer, dest.byte
length, gl.stream_read); gl.readpixels(x, y, w, h, format, type, 0); gl.bindbuffer(gl.pixel_pack_buffer, null); await getbuffersubdataasync(gl, gl.pixel_pack_buffer, buf, 0, dest); gl.deletebuffer(buf); return dest; } canvas and webgl-related some tips are relevent to webgl, but deal with other apis.
Using DTMF with WebRTC - Web APIs
function gotstream(stream) { log("got access to the microphone."); let audiotracks = stream.getaudiotracks(); if (hasaddtrack) { if (audiotracks.
length > 0) { audiotracks.foreach(track => callerpc.addtrack(track, stream)); } } else { log("your browser doesn't support rtcpeerconnection.addtrack().
... our call to insertdtmf() specifies not only the dtmf to send (dialstring), but also the
length of each tone in milliseconds (400 ms) and the amount of time between tones (50 ms).
Geometry and reference spaces in WebXR - Web APIs
lengths and distances webgl measures all distances and
lengths in meters.
... the webgl coordinates and
lengths are transformed automatically at render time to the size of the viewport in which the scene is being rendered.
Movement, orientation, and motion: A WebXR example - Web APIs
logglerror("glclear"); const deltatime = (time - lastframetime) * 0.001; // convert to seconds lastframetime = time; for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); logglerror(`setting viewport for eye: ${view.eye}`); gl.canvas.width = viewport.width * pose.views.
length; gl.canvas.height = viewport.height; drawscene(gl, view, programinfo, buffers, texture, deltatime); } } } the first thing we do is call requestanimationframe() to request that drawframe() be called again for the next frame to be rendered.
... function displaymatrix(mat, row
length, target) { let outhtml = ""; if (mat && row
length && row
length <= mat.
length) { let numrows = mat.
length / row
length; outhtml = "<math xmlns='http://www.w3.org/1998/math/mathml' display='block'>\n<mrow>\n<mo>[</mo>\n<mtable>\n"; for (let y=0; y<numrows; y++) { outhtml += "<mtr>\n"; for (let x=0; x<row
length; x++) { outhtml += `<mtd><mn>${mat[(x*row
length) + y...
Using the Web Speech API - 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); } } when we come to run the function, we ...
... 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); in the final part of the handler, we include an speechsynthesisutterance.onpause handler to demonstrate how speechsynthesisevent can be put to good use.
Window.frames - Web APIs
it is similar to an array in that it has a
length property and its items can be accessed using the [i] notation.
... example var frames = window.frames; // or // var frames = window.parent.frames; for (var i = 0; i < frames.
length; i++) { // do something with each subframe as frames[i] frames[i].document.body.style.background = "red"; } specifications specification status comment html living standardthe definition of 'window.frames' in that specification.
Window.speechSynthesis - Web APIs
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 (speechsynthe...
...sis.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.
WindowOrWorkerGlobalScope.btoa() - Web APIs
for example: // convert a unicode string to a string in which // each 16-bit unit occupies only one byte function tobinary(string) { const codeunits = new uint16array(string.
length); for (let i = 0; i < codeunits.
length; i++) { codeunits[i] = string.charcodeat(i); } return string.fromcharcode(...new uint8array(codeunits.buffer)); } // a string that contains characters occupying > 1 byte const mystring = "☸☹☺☻☼☾☿"; const converted = tobinary(mystring); const encoded = btoa(converted); console.log(encoded); // ocy5jjomoyy8jj4mpyy= i...
...f you do this, of course you'll have to reverse the conversion on the decoded string: function frombinary(binary) { const bytes = new uint8array(binary.
length); for (let i = 0; i < bytes.
length; i++) { bytes[i] = binary.charcodeat(i); } return string.fromcharcode(...new uint16array(bytes.buffer)); } const decoded = atob(encoded); const original = frombinary(decoded); console.log(original); // ☸☹☺☻☼☾☿ polyfill you can use a polifill from https://github.com/maxart2501/base64-js/blob/master/base64.js for browsers that don't support it.
XRInputSourceArray - Web APIs
length read only the number of xrinputsource objects in the list.
... let sources = xrsession.inputsources; if (sources.
length > 0) { handleinput(sources[0]); } examples specifications specification status comment webxr device apithe definition of 'xrinputsourcearray' in that specification.
XRRigidTransform.orientation - Web APIs
if you specify a quaternion whose
length is not exactly 1.0 meters, it will be normalized for you.
...as a unit quaternion, the
length of the returned quaternion is always 1.0 meters.
XRViewerPose.views - Web APIs
for each frame, you should always use the current
length of this array rather than caching the value.
...this array's
length may potentially vary over the lifetime of the xrsession (for example, if the viewer enables or disables stereo mode on their xr output device).
ARIA: grid role - Accessibility
ole="gridcell"] { color: #000; } tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { background-color: #f6f6f6; outline: 3px solid blue; } } javascript var selectables = document.queryselectorall('table td[role="gridcell"]'); selectables[0].setattribute('tabindex', 0); var trs = document.queryselectorall('table tbody tr'), row = 0, col = 0, maxrow = trs.
length - 1, maxcol = 0; array.prototype.foreach.call(trs, function(gridrow, i){ array.prototype.foreach.call(gridrow.queryselectorall('td'), function(el, i){ el.dataset.row = row; el.dataset.col = col; col = col + 1; }); if (col>maxcol) { maxcol = col - 1; } col = 0; row = row + 1; }); function moveto(newrow, newcol) { var tgt = document.queryselector('[data-row="' + newrow...
...body td[role="gridcell"] { color: #000; } tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { background-color: #f6f6f6; outline: 3px solid blue; } javascript var selectables = document.queryselectorall('table td[role="gridcell"]'); selectables[0].setattribute('tabindex', 0); var trs = document.queryselectorall('table tbody tr'), row = 0, col = 0, maxrow = trs.
length - 1, maxcol = 0; array.prototype.foreach.call(trs, function(gridrow, i){ array.prototype.foreach.call(gridrow.queryselectorall('td'), function(el, i){ el.dataset.row = row; el.dataset.col = col; col = col + 1; }); if (col>maxcol) { maxcol = col - 1; } col = 0; row = row + 1; }); function moveto(newrow, newcol) { var tgt = document.queryselector('[data-row="' + newrow...
-moz-outline-radius - CSS: Cascading Style Sheets
one, two, three or four <outline-radius> values, represents one of: <
length> see <
length> for possible values.
...z-outline-radius-bottomleft: refer to the corresponding dimension of the border boxcomputed valueas each of the properties of the shorthand:-moz-outline-radius-topleft: as specified-moz-outline-radius-topright: as specified-moz-outline-radius-bottomright: as specified-moz-outline-radius-bottomleft: as specifiedanimation typeas each of the properties of the shorthand:-moz-outline-radius-topleft: a
length, percentage or calc();-moz-outline-radius-topright: a
length, percentage or calc();-moz-outline-radius-bottomright: a
length, percentage or calc();-moz-outline-radius-bottomleft: a
length, percentage or calc(); formal syntax <outline-radius>{1,4} [ / <outline-radius>{1,4} ]?where <outline-radius> = <
length> | <percentage> examples rounding an outline note: this example will not display the d...
-webkit-text-stroke-width - CSS: Cascading Style Sheets
syntax /* keyword values */ -webkit-text-stroke-width: thin; -webkit-text-stroke-width: medium; -webkit-text-stroke-width: thick; /* <
length> values */ -webkit-text-stroke-width: 2px; -webkit-text-stroke-width: 0.1em; -webkit-text-stroke-width: 1mm; -webkit-text-stroke-width: 5pt; /* global values */ -webkit-text-stroke-width: inherit; -webkit-text-stroke-width: initial; -webkit-text-stroke-width: unset; values <line-width> the width of the stroke.
... formal definition initial value0applies toall elementsinheritedyescomputed valueabsolute <
length>animation typediscrete formal syntax <
length> examples varying stroke widths css p { margin: 0; font-size: 4em; -webkit-text-stroke-color: red; } #thin { -webkit-text-stroke-width: thin; } #medium { -webkit-text-stroke-width: 3px; } #thick { -webkit-text-stroke-width: 1.5mm; } html <p id="thin">thin stroke</p> <p id="medium">medium stroke</p> <p id="thick">thick stroke</p> results specifications specification status comment compatibility standardthe definition of '-webkit-text-stroke-width' in that specification.
-webkit-text-stroke - CSS: Cascading Style Sheets
d color values */ -webkit-text-stroke: 4px navy; text-stroke: 4px navy; /* global values */ -webkit-text-stroke: inherit; -webkit-text-stroke: initial; -webkit-text-stroke: unset; text-stroke: inherit; text-stroke: initial; text-stroke: unset; constituent properties this property is a shorthand for the following css properties: -webkit-stroke-color -webkit-stroke-width syntax values <
length> the width of the stroke.
... formal definition initial valueas each of the properties of the shorthand:-webkit-text-stroke-width: 0-webkit-text-stroke-color: currentcolorapplies toall elementsinheritedyescomputed valueas each of the properties of the shorthand:-webkit-text-stroke-width: absolute <
length>-webkit-text-stroke-color: computed coloranimation typeas each of the properties of the shorthand:-webkit-text-stroke-width: discrete-webkit-text-stroke-color: a color formal syntax <
length> | <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
Detecting CSS animation support - CSS: Cascading Style Sheets
pport this code will check to see if css animation support is available: var animation = false, animationstring = 'animation', keyframeprefix = '', domprefixes = 'webkit moz o ms khtml'.split(' '), pfx = '', elem = document.createelement('div'); if( elem.style.animationname !== undefined ) { animation = true; } if( animation === false ) { for( var i = 0; i < domprefixes.
length; i++ ) { if( elem.style[ domprefixes[i] + 'animationname' ] !== undefined ) { pfx = domprefixes[ i ]; animationstring = pfx + 'animation'; keyframeprefix = '-' + pfx.tolowercase() + '-'; animation = true; break; } } } for starters we define a few variables.
...animate in javascript fallback } else { elem.style[ animationstring ] = 'rotate 1s linear infinite'; var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+ 'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+ 'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+ '}'; if( document.stylesheets && document.stylesheets.
length ) { document.stylesheets[0].insertrule( keyframes, 0 ); } else { var s = document.createelement( 'style' ); s.innerhtml = keyframes; document.getelementsbytagname( 'head' )[ 0 ].appendchild( s ); } } this code looks at the value of animation; if it's false, we know we need to use our javascript fallback code to perform our animation.
Resizing background images with background-size - CSS: Cascading Style Sheets
special values: "contain" and "cover" besides <
length> values, the background-size css property offers two special size values, contain and cover.
... contain the contain value specifies that, regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the
length of the corresponding side of the container.
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
specifying fixed
lengths for both dimensions if you use background-size to specify fixed
lengths for both dimensions, those
lengths are always used, per rule 1 above.
... background: url(no-dimensions-1x1-ratio.svg); background-size: auto auto; the rendered output looks like this: using "auto" and one specific
length given rule 1, specified dimensions are always used, so we need to use our rules only to determine the second dimension.
animation-timing-function - CSS: Cascading Style Sheets
the step timing functions divides the input time into a specified number of intervals that are equal in
length.
... steps(n, <jumpterm>) displays an animation iteration along n stops along the transition, displaying each stop for equal
lengths of time.
border-block-start-width - CSS: Cascading Style Sheets
initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute
length; 0 if the border style is none or hiddenanimation typea
length values <'border-width'> the width of the border.
... formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute
length; 0 if the border style is none or hiddenanimation typea
length formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-start-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-width' in that specification.
border-block-start - CSS: Cascading Style Sheets
umborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from one browser to anotherapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute
length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute
length or 0 if border-left-style is none or hiddenborder-right-width: the absolute
length or 0 if border-right-style is none or hiddenborder-top-width: the absolute
length or 0 if border-top-style is none or hiddenborder-style: as each of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style:...
... as specifiedborder-right-style: as specifiedborder-top-style: as specifiedborder-block-start-color: computed coloranimation typeas each of the properties of the shorthand:border-block-start-color: a colorborder-block-start-style: discreteborder-block-start-width: a
length formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-bottom-width - CSS: Cascading Style Sheets
syntax /* keyword values */ border-bottom-width: thin; border-bottom-width: medium; border-bottom-width: thick; /* <
length> values */ border-bottom-width: 10em; border-bottom-width: 3vmax; border-bottom-width: 6px; /* global keywords */ border-bottom-width: inherit; border-bottom-width: initial; border-bottom-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <
length> or a keyword.
...it also applies to ::first-letter.inheritednocomputed valuethe absolute
length or 0 if border-bottom-style is none or hiddenanimation typea
length formal syntax <line-width>where <line-width> = <
length> | thin | medium | thick examples comparing bottom border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-bottom-width: thick; } div:nth-child(2) { border-bottom-width: 2em; } ...
border-image - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesas each of the properties of the shorthand:border-image-slice: refer to the size of the border imageborder-image-width: refer to the width or height of the border image areacomputed valueas each of the properties of the shorthand:border-image-outset: as specified, but with relative
lengths converted into absolute
lengthsborder-image-repeat: as specifiedborder-image-slice: one to four percentage(s) (as specified) or absolute
length(s), plus the keyword fill if specifiedborder-image-source: none or the image with its uri made absoluteborder-image-width: as specified, but with relative
lengths converted into absolute
lengthsanimation typediscrete formal syntax <'border-image-source...
...it also applies to ::first-letter.inheritednopercentagesas each of the properties of the shorthand:border-image-slice: refer to the size of the border imageborder-image-width: refer to the width or height of the border image areacomputed valueas each of the properties of the shorthand:border-image-outset: as specified, but with relative
lengths converted into absolute
lengthsborder-image-repeat: as specifiedborder-image-slice: one to four percentage(s) (as specified) or absolute
length(s), plus the keyword fill if specifiedborder-image-source: none or the image with its uri made absoluteborder-image-width: as specified, but with relative
lengths converted into absolute
lengthsanimation typediscrete ...
border-inline-end-width - CSS: Cascading Style Sheets
initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute
length; 0 if the border style is none or hiddenanimation typea
length values <'border-width'> the width of the border.
... formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute
length; 0 if the border style is none or hiddenanimation typea
length formal syntax <'border-top-width'> examples applying a border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-end-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-width' in that specification.
border-inline-start - CSS: Cascading Style Sheets
umborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from one browser to anotherapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute
length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute
length or 0 if border-left-style is none or hiddenborder-right-width: the absolute
length or 0 if border-right-style is none or hiddenborder-top-width: the absolute
length or 0 if border-top-style is none or hiddenborder-style: as each of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style:...
... as specifiedborder-right-style: as specifiedborder-top-style: as specifiedborder-inline-start-color: computed coloranimation typeas each of the properties of the shorthand:border-inline-start-color: a colorborder-inline-start-style: discreteborder-inline-start-width: a
length formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-inline - CSS: Cascading Style Sheets
initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-top-width: the absolute
length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typediscrete constituent properties this property is a shorthand for the following css properties: border-inline-color border-inline-style border-inline-width syntax values the border-inline is specified with one or more of the following, in any order: <'border-width'> ...
... formal definition initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-top-width: the absolute
length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typediscrete formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-left-width - CSS: Cascading Style Sheets
syntax /* keyword values */ border-left-width: thin; border-left-width: medium; border-left-width: thick; /* <
length> values */ border-left-width: 10em; border-left-width: 3vmax; border-left-width: 6px; /* global keywords */ border-left-width: inherit; border-left-width: initial; border-left-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <
length> or a keyword.
...it also applies to ::first-letter.inheritednocomputed valuethe absolute
length or 0 if border-left-style is none or hiddenanimation typea
length formal syntax <line-width>where <line-width> = <
length> | thin | medium | thick examples comparing border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-left-width: thick; } div:nth-child(2) { border-left-width: 2em; } result spe...
border-right-width - CSS: Cascading Style Sheets
syntax /* keyword values */ border-right-width: thin; border-right-width: medium; border-right-width: thick; /* <
length> values */ border-right-width: 10em; border-right-width: 3vmax; border-right-width: 6px; /* global keywords */ border-right-width: inherit; border-right-width: initial; border-right-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <
length> or a keyword.
...it also applies to ::first-letter.inheritednocomputed valuethe absolute
length or 0 if border-right-style is none or hiddenanimation typea
length formal syntax <line-width>where <line-width> = <
length> | thin | medium | thick examples comparing border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-right-width: thick; } div:nth-child(2) { border-right-width: 2em; } result ...
border-top-width - CSS: Cascading Style Sheets
syntax /* keyword values */ border-top-width: thin; border-top-width: medium; border-top-width: thick; /* <
length> values */ border-top-width: 10em; border-top-width: 3vmax; border-top-width: 6px; /* global keywords */ border-top-width: inherit; border-top-width: initial; border-top-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <
length> or a keyword.
...it also applies to ::first-letter.inheritednocomputed valuethe absolute
length or 0 if border-top-style is none or hiddenanimation typea
length formal syntax <line-width>where <line-width> = <
length> | thin | medium | thick examples html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-top-width: thick; } div:nth-child(2) { border-top-width: 2em; } result specifications specif...
border - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute
length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute
length or 0 if border-left-style is none or hiddenborder-right-width: the absolute
length or 0 if border-right-style is none or hiddenborder-top-width: the absolute
length or 0 if border-top-style is none or hiddenborder-style: as each of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style:...
...mputed colorborder-right-color: computed colorborder-top-color: computed coloranimation typeas each of the properties of the shorthand:border-color: as each of the properties of the shorthand:border-bottom-color: a colorborder-left-color: a colorborder-right-color: a colorborder-top-color: a colorborder-style: discreteborder-width: as each of the properties of the shorthand:border-bottom-width: a
lengthborder-left-width: a
lengthborder-right-width: a
lengthborder-top-width: a
length formal syntax <line-width> | <line-style> | <color>where <line-width> = <
length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system...
clip - CSS: Cascading Style Sheets
the <top>, <right>, <bottom>, and <left> values may be either a <
length> or auto.
... formal definition initial valueautoapplies toabsolutely positioned elementsinheritednocomputed valueauto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the computed
length otherwiseanimation typea rectangle formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image css .dotted-border { border: dotted; position: relative; width: 536px; height: 350px; } #top-left, #middle, #bottom-right { position: absolute; top: 0; } #top-left { left: 360px; clip: rect(0 175px 113px 0); } #middle { left: ...
column-rule - CSS: Cascading Style Sheets
values <'column-rule-width'> is a <
length> or one of the three keywords, thin, medium, or thick.
... formal definition initial valueas each of the properties of the shorthand:column-rule-width: mediumcolumn-rule-style: nonecolumn-rule-color: currentcolorapplies tomulticol elementsinheritednocomputed valueas each of the properties of the shorthand:column-rule-color: computed colorcolumn-rule-style: as specifiedcolumn-rule-width: the absolute
length; 0 if the column-rule-style is none or hiddenanimation typeas each of the properties of the shorthand:column-rule-color: a colorcolumn-rule-style: discretecolumn-rule-width: a
length formal syntax <'column-rule-width'> | <'column-rule-style'> | <'column-rule-color'> examples example 1 /* same as "medium dotted currentcolor" */ p.foo { column-rule: dotted; } /* same as "medium solid blue" */...
columns - CSS: Cascading Style Sheets
values <'column-width'> the ideal column width, defined as a <
length> or the keyword auto.
... formal definition initial valueas each of the properties of the shorthand:column-width: autocolumn-count: autoapplies toblock containers except table wrapper boxesinheritednocomputed valueas each of the properties of the shorthand:column-width: the absolute
length, zero or largercolumn-count: as specifiedanimation typeas each of the properties of the shorthand:column-width: a
lengthcolumn-count: an integer formal syntax <'column-width'> | <'column-count'> examples setting three equal columns html <p class="content-box"> this is a bunch of text split into three columns using the css `columns` property.
drop-shadow() - CSS: Cascading Style Sheets
parameters offset-x offset-y (required) two <
length> values that determine the shadow offset.
... blur-radius (optional) the shadow's blur radius, specified as a <
length>.
fit-content() - CSS: Cascading Style Sheets
syntax the fit-content() function accepts a <
length> or a <percentage> as an argument.
... /* <
length> values */ fit-content(200px) fit-content(5cm) fit-content(30vw) fit-content(100ch) /* <percentage> value */ fit-content(40%) values <
length> an absolute
length.
flex-basis - CSS: Cascading Style Sheets
values <'width'> an absolute <
length>, a <percentage> of the parent flex container's main size property, or the keyword auto.
... formal definition initial valueautoapplies toflex items, including in-flow pseudo-elementsinheritednopercentagesrefer to the flex container's inner main sizecomputed valueas specified, but with relative
lengths converted into absolute
lengthsanimation typea
length, percentage or calc(); formal syntax content | <'width'> examples setting flex item initial sizes html <ul class="container"> <li class="flex flex1">1: flex-basis test</li> <li class="flex flex2">2: flex-basis test</li> <li class="flex flex3">3: flex-basis test</li> <li class="flex flex4">4: flex-basis test</li> <li class="fle...
font-smooth - CSS: Cascading Style Sheets
syntax /* keyword values */ font-smooth: auto; font-smooth: never; font-smooth: always; /* <
length> value */ font-smooth: 2em; webkit implements a similar property, but with different values: -webkit-font-smoothing.
... formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | never | always | <absolute-size> | <
length>where <absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large examples basic usage example the following example shows the safari/chromium and firefox equivalents that turn on font-smoothing on macos.
grid - CSS: Cascading Style Sheets
hand:grid-template-rows: refer to corresponding dimension of the content areagrid-template-columns: refer to corresponding dimension of the content areagrid-auto-rows: refer to corresponding dimension of the content areagrid-auto-columns: refer to corresponding dimension of the content areacomputed valueas each of the properties of the shorthand:grid-template-rows: as specified, but with relative
lengths converted into absolute
lengthsgrid-template-columns: as specified, but with relative
lengths converted into absolute
lengthsgrid-template-areas: as specifiedgrid-auto-rows: the percentage as specified or the absolute
lengthgrid-auto-columns: the percentage as specified or the absolute
lengthgrid-auto-flow: as specifiedgrid-column-gap: the percentage as specified or the absolute
lengthgrid-row-g...
...ap: the percentage as specified or the absolute
lengthcolumn-gap: as specified, with <
length>s made absolute, and normal computing to zero except on multi-column elementsrow-gap: as specified, with <
length>s made absolute, and normal computing to zero except on multi-column elementsanimation typediscrete formal syntax <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense?
inline-size - CSS: Cascading Style Sheets
syntax /* <
length> values */ inline-size: 300px; inline-size: 25em; /* <percentage> values */ inline-size: 75%; /* keyword values */ inline-size: max-content; inline-size: min-content; inline-size: fit-content(20em); inline-size: auto; /* global values */ inline-size: inherit; inline-size: initial; inline-size: unset; if the writing mode is vertically oriented, the value of inline-size relates to the height o...
... formal definition initial valueautoapplies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as width and heightanimation typea
length, percentage or calc(); formal syntax <'width'> examples setting inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; inline-size: 110px; } result specifications specification status comment css logical properties and values level 1the definition of 'inline-size' in...
inset-block-end - CSS: Cascading Style Sheets
/* <
length> values */ inset-block-end: 3px; inset-block-end: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-block-end: 10%; /* keyword value */ inset-block-end: auto; /* global values */ inset-block-end: inherit; inset-block-end: initial; inset-block-end: unset; syntax values the inset-block-end property takes the same values as the left property.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea
length, percentage or calc(); formal syntax <'top'> examples setting block end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative; inset-block-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-block-end' in that specification.
inset-block-start - CSS: Cascading Style Sheets
/* <
length> values */ inset-block-start: 3px; inset-block-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-block-start: 10%; /* keyword value */ inset-block-start: auto; /* global values */ inset-block-start: inherit; inset-block-start: initial; inset-block-start: unset; syntax values the inset-block-start property takes the same values as the left property.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea
length, percentage or calc(); formal syntax <'top'> examples setting block start offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-block-start: 20px; background-color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'inset-block-start' in that specification.
inset-block - CSS: Cascading Style Sheets
/* <
length> values */ inset-block: 3px 10px; inset-block: 2.4em 3em; inset-block: 10px; /* value applied to start and end */ /* <percentage>s of the width or height of the containing block */ inset-block: 10% 5%; /* keyword value */ inset-block: auto; /* global values */ inset-block: inherit; inset-block: initial; inset-block: unset; constituent properties this property is a shorthand for the following css properties: inset-block-end inse...
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea
length, percentage or calc(); formal syntax <'top'>{1,2} examples setting block start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-block: 20px 50px; background-color: #c8c800; } result specifications specification status comment css logica...
inset-inline-end - CSS: Cascading Style Sheets
/* <
length> values */ inset-inline-end: 3px; inset-inline-end: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-end: 10%; /* keyword value */ inset-inline-end: auto; /* global values */ inset-inline-end: inherit; inset-inline-end: initial; inset-inline-end: unset; the shorthand for inset-inline-start and inset-inline-end is inset-inline.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea
length, percentage or calc(); formal syntax <'top'> examples setting inline end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative; inset-inline-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values l...
inset-inline-start - CSS: Cascading Style Sheets
/* <
length> values */ inset-inline-start: 3px; inset-inline-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-start: 10%; /* keyword value */ inset-inline-start: auto; /* global values */ inset-inline-start: inherit; inset-inline-start: initial; inset-inline-start: unset; the shorthand for inset-inline-start and inset-inline-end is inset-inline.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea
length, percentage or calc(); formal syntax <'top'> examples setting inline start offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline-start: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and v...
inset-inline - CSS: Cascading Style Sheets
/* <
length> values */ inset-inline: 3px 10px; inset-inline: 2.4em 3em; inset-inline: 10px; /* value applied to start and end */ /* <percentage>s of the width or height of the containing block */ inset-inline: 10% 5%; /* keyword value */ inset-inline: auto; /* global values */ inset-inline: inherit; inset-inline: initial; inset-inline: unset; constituent properties this property is a shorthand for the following css propertie...
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea
length, percentage or calc(); formal syntax <'top'>{1,2} examples setting inline start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline: 20px 50px; background-color: #c8c800; } result specifications specification status ...
inset - CSS: Cascading Style Sheets
/* <
length> values */ inset: 10px; /* value applied to all edges */ inset: 4px 8px; /* top/bottom left/right */ inset: 5px 15px 10px; /* top left/right bottom */ inset: 2.4em 3em 3em 3em; /* top right bottom left */ /* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */ inset: 10% 5% 5% 5%; /* keyword value */ inset: auto; /* global values */ inset: inherit; inset: initial; inset: u...
...formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea
length, percentage or calc(); formal syntax <'top'>{1,4} examples setting offsets for an element html <div> <span class="exampletext">example text</span> </div> css div { background-color: yellow; width: 150px; height: 120px; position: relative; } .exampletext { writing-mode: sideways-rl; position: absolute; inset: 20px 40px 30px 10px; background-color: #c8c800; } result specifications specification status comment ...
margin-block-end - CSS: Cascading Style Sheets
syntax /* <
length> values */ margin-block-end: 10px; /* an absolute
length */ margin-block-end: 1em; /* relative to the text size */ margin-block-end: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-block-end: auto; /* global values */ margin-block-end: inherit; margin-block-end: initial; margin-block-end: unset; it corresponds to the margin-top, margin-right, margin...
... formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a
length, the corresponding absolute
length; if specified as a percentage, the specified value; otherwise, autoanimation typea
length formal syntax <'margin-left'> examples setting block end margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-block-end: 20p...
margin-block-start - CSS: Cascading Style Sheets
syntax /* <
length> values */ margin-block-start: 10px; /* an absolute
length */ margin-block-start: 1em; /* relative to the text size */ margin-block-start: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-block-start: auto; /* global values */ margin-block-start: inherit; margin-block-start: initial; margin-block-start: unset; it corresponds to the margin-top, margin...
... formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a
length, the corresponding absolute
length; if specified as a percentage, the specified value; otherwise, autoanimation typea
length formal syntax <'margin-left'> examples setting block start margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-block-start:...
margin-block - CSS: Cascading Style Sheets
/* <
length> values */ margin-block: 10px 20px; /* an absolute
length */ margin-block: 1em 2em; /* relative to the text size */ margin-block: 5% 2%; /* relative to the nearest block container's width */ margin-block: 10px; /* sets both start and end values */ /* keyword values */ margin-block: auto; /* global values */ margin-block: inherit; margin-block: initial; margin-block: unset; these values corresponds to the margin-top and margin-bottom, or margin-right, and margin-left property depending on the values defined for writing-mode, direction, and text-orientation.
... formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a
length, the corresponding absolute
length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting block start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-block: 20px 40px; background-color: #...
margin-inline-end - CSS: Cascading Style Sheets
syntax /* <
length> values */ margin-inline-end: 10px; /* an absolute
length */ margin-inline-end: 1em; /* relative to the text size */ margin-inline-end: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-inline-end: auto; /* global values */ margin-inline-end: inherit; margin-inline-end: initial; margin-inline-end: unset; it relates to margin-block-start, margin-blo...
... formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a
length, the corresponding absolute
length; if specified as a percentage, the specified value; otherwise, autoanimation typea
length formal syntax <'margin-left'> examples setting inline end margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-inline-end: 20px; background-color: #c8c800; } result specifications specification stat...
margin-inline-start - CSS: Cascading Style Sheets
syntax /* <
length> values */ margin-inline-start: 10px; /* an absolute
length */ margin-inline-start: 1em; /* relative to the text size */ margin-inline-start: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-inline-start: auto; /* global values */ margin-inline-start: inherit; it relates to margin-block-start, margin-block-end, and margin-inline-end, which define the...
...formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a
length, the corresponding absolute
length; if specified as a percentage, the specified value; otherwise, autoanimation typea
length formal syntax <'margin-left'> examples setting inline start margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-inline-start: 20px; background-color: #c8c800; } result specifications specification status comment css logical proper...
mask-position - CSS: Cascading Style Sheets
l definition initial valuecenterapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to size of mask painting area minus size of mask layer image (see the text for background-position)computed valueconsists of two keywords representing the origin and two offsets from that origin, each given as an absolute
length (if given a <
length>), otherwise as a percentage.animation typerepeatable list of simple list of
length, percentage, or calc formal syntax <position>#where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
... | [ [ left | right ] <
length-percentage> ] && [ [ top | bottom ] <
length-percentage> ] ]where <
length-percentage> = <
length> | <percentage> examples setting mask position css #wrapper { border: 1px solid black; width: 250px; height: 250px; } #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: no-repeat; mask-position: top right; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="wrapper"> <div id="masked"> </div> </div> <select id="maskposition"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> <option value="top right" selected>top right</option> <option...
max-inline-size - CSS: Cascading Style Sheets
syntax /* <
length> values */ max-inline-size: 300px; max-inline-size: 25em; /* <percentage> values */ max-inline-size: 75%; /* keyword values */ max-inline-size: auto; max-inline-size: max-content; max-inline-size: min-content; max-inline-size: fit-content(20em); /* global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset; values the max-inline-size property takes the same ...
... formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as max-width and max-heightanimation typea
length, percentage or calc(); formal syntax <'max-width'> examples setting max inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 100%; max-inline-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'max-inline-size' in that specification.
min-block-size - CSS: Cascading Style Sheets
syntax /* <
length> values */ min-block-size: 100px; min-block-size: 5em; /* <percentage> values */ min-block-size: 10%; /* keyword values */ min-block-size: max-content; min-block-size: min-content; min-block-size: fit-content(20em); /* global values */ min-block-size: inherit; min-block-size: initial; min-block-size: unset; if the writing mode is vertically oriented, the value of min-block-size relates to th...
... formal definition initial value0applies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as min-width and min-heightanimation typea
length, percentage or calc(); formal syntax <'min-width'> examples setting minimum block size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; min-block-size: 200px; } result specifications specification status comment css logical properties and values level 1the definiti...
min-inline-size - CSS: Cascading Style Sheets
syntax /* <
length> values */ min-inline-size: 100px; min-inline-size: 5em; /* <percentage> values */ min-inline-size: 10%; /* keyword values */ min-inline-size: max-content; min-inline-size: min-content; min-inline-size: fit-content(20em); /* global values */ min-inline-size: inherit; min-inline-size: initial; min-inline-size: unset; if the writing mode is vertically oriented, the value of min-inline-size rel...
... formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as min-width and min-heightanimation typea
length, percentage or calc(); formal syntax <'min-width'> examples setting minimum inline size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 5%; min-inline-size: 200px; } result specifications specification status comment css logical properties and values...
object-position - CSS: Cascading Style Sheets
formal definition initial value50% 50%applies toreplaced elementsinheritedyespercentagesrefer to width and height of element itselfcomputed valueas specifiedanimation typerepeatable list of simple list of
length, percentage, or calc formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
... | [ [ left | right ] <
length-percentage> ] && [ [ top | bottom ] <
length-percentage> ] ]where <
length-percentage> = <
length> | <percentage> examples positioning image content html here we see html that includes two <img> elements, each displaying the mdn logo.
offset - CSS: Cascading Style Sheets
3cm; offset: url(arc.svg) 30deg / 50px 100px; formal definition initial valueas each of the properties of the shorthand:offset-position: autooffset-path: noneoffset-distance: 0offset-anchor: autooffset-rotate: autoapplies totransformable elementsinheritednopercentagesas each of the properties of the shorthand:offset-position: refertosizeofcontainingblockoffset-distance: refer to the total path
lengthoffset-anchor: relativetowidthandheightcomputed valueas each of the properties of the shorthand:offset-position: for <
length> the absolute value, otherwise a percentageoffset-path: as specifiedoffset-distance: for <
length> the absolute value, otherwise a percentageoffset-anchor: for <
length> the absolute value, otherwise a percentageoffset-rotate: as specifiedanimation typeas each of the propertie...
...s of the shorthand:offset-position: a positionoffset-path: as <angle>, <basic-shape> or <path()>offset-distance: a
length, percentage or calc();offset-anchor: a positionoffset-rotate: as <angle>, <basic-shape> or <path()>creates stacking contextyes formal syntax [ <'offset-position'>?
outline-offset - CSS: Cascading Style Sheets
syntax /* <
length> values */ outline-offset: 3px; outline-offset: 0.2em; /* global values */ outline-offset: inherit; outline-offset: initial; outline-offset: unset; values <
length> the width of the space between the element and its outline.
... formal definition initial value0applies toall elementsinheritednocomputed valueas specified, but with relative
lengths converted into absolute
lengthsanimation typea
length formal syntax <
length> examples setting outline offset in pixels html <p>gallia est omnis divisa in partes tres.</p> css p { outline: 1px dashed red; outline-offset: 10px; background: yellow; border: 1px solid blue; margin: 15px; } result specifications specification status comment css basic...
padding-block-end - CSS: Cascading Style Sheets
syntax /* <
length> values */ padding-block-end: 10px; /* an absolute
length */ padding-block-end: 1em; /* a
length relative to the text size */ /* <percentage> value */ padding-block-end: 5%; /* a padding relative to the block container's width */ /* global values */ padding-block-end: inherit; padding-block-end: initial; padding-block-end: unset; values the padding-block-end property takes ...
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <
length>animation typea
length formal syntax <'padding-left'> examples setting block end padding for vertical text html content <div> <p class="exampletext">example text</p> </div> css content div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-end: 20px; background-color: #c8c800; } result specifications ...
padding-block-start - CSS: Cascading Style Sheets
syntax /* <
length> values */ padding-block-start: 10px; /* an absolute
length */ padding-block-start: 1em; /* a
length relative to the text size */ /* <percentage> value */ padding-block-start: 5%; /* a padding relative to the block container's width */ /* global values */ padding-block-start: inherit; padding-block-start: initial; padding-block-start: unset; values the padding-block-start p...
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <
length>animation typea
length formal syntax <'padding-left'> examples setting block start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-start: 20px; background-color: #c8c800; } result specifications specifi...
padding-block - CSS: Cascading Style Sheets
/* <
length> values */ padding-block: 10px 20px; /* an absolute
length */ padding-block: 1em 2em; /* relative to the text size */ padding-block: 10px; /* sets both start and end values */ /* <percentage> values */ padding-block: 5% 2%; /* relative to the nearest block container's width */ /* global values */ padding-block: inherit; padding-block: initial; padding-block: unset; these values corresponds to the padding-top and padding-bottom, or padding-right, and padding-left property depending on the values defined for writing-mode, direction, and text-orien...
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <
length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting block padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-block: 20px 40px; background-color: #c8c800; } result specifications specification status comment ...
padding-inline-end - CSS: Cascading Style Sheets
syntax /* <
length> values */ padding-inline-end: 10px; /* an absolute
length */ padding-inline-end: 1em; /* a
length relative to the text size */ /* <percentage> value */ padding-inline-end: 5%; /* a padding relative to the block container's width */ /* global values */ padding-inline-end: inherit; padding-inline-end: initial; padding-inline-end: unset; values the padding-inline-end property takes th...
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <
length>animation typea
length formal syntax <'padding-left'> examples setting inline end padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-end: 20px; background-color: #c8c800; } specifications specification ...
padding-inline-start - CSS: Cascading Style Sheets
syntax /* <
length> values */ padding-inline-start: 10px; /* an absolute
length */ padding-inline-start: 1em; /* a
length relative to the text size */ /* <percentage> value */ padding-inline-start: 5%; /* a padding relative to the block container's width */ /* global values */ padding-inline-start: inherit; padding-inline-start: initial; padding-inline-start: unset; values the padding-inline-start pr...
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <
length>animation typea
length formal syntax <'padding-left'> examples setting inline start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-start: 20px; background-color: #c8c800; } specifications specification...
padding-inline - CSS: Cascading Style Sheets
/* <
length> values */ padding-inline: 10px 20px; /* an absolute
length */ padding-inline: 1em 2em; /* relative to the text size */ padding-inline: 10px; /* sets both start and end values */ /* <percentage> values */ padding-inline: 5% 2%; /* relative to the nearest block container's width */ /* global values */ padding-inline: inherit; padding-inline: initial; padding-inline: unset; constituent properties this property is a shorthand for the following css properties: padding-inline-end padding-inline-start syntax values the padding-inline proper...
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <
length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting inline padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-inline: 20px 40px; background-color: #c8c800; } result specifications specifi...
repeating-conic-gradient() - CSS: Cascading Style Sheets
<position> using the same
length, order and keyterm values as the background-position property, the position defines center of the gradient.
...the
length defines at which point between two color stops the gradient color should reach the midpoint of the color transition.
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
syntax /* <
length> values */ row-gap: 20px; row-gap: 1em; row-gap: 3vmin; row-gap: 0.5cm; /* <percentage> value */ row-gap: 10%; /* global values */ row-gap: inherit; row-gap: initial; row-gap: unset; values <
length-percentage> is the width of the gutter separating the rows.
... formal definition initial valuenormalapplies tomulti-column elements, flex containers, grid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, with <
length>s made absolute, and normal computing to zero except on multi-column elementsanimation typea
length, percentage or calc(); formal syntax normal | <
length-percentage>where <
length-percentage> = <
length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; flex-wrap: wrap; width: 300px; row-gap: 20px; } #flexbox > div { border: 1px solid green; background-color: lim...
scale - CSS: Cascading Style Sheets
two
length/percentage values two <number>s that specify the x and y axis scaling values (respectively) of a 2d scale.
... three
length/percentage values three <number>s that specify the x, y, and z axis scaling values (respectively) of a 3d scale.
scroll-margin-block-end - CSS: Cascading Style Sheets
syntax /* <
length> values */ scroll-margin-block-end: 10px; scroll-margin-block-end: 1em; /* global values */ scroll-margin-block-end: inherit; scroll-margin-block-end: initial; scroll-margin-block-end: unset; values <
length> an outset from the block end edge of the scroll container.
... formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <
length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-block-end' in that specification.
scroll-margin-block-start - CSS: Cascading Style Sheets
syntax /* <
length> values */ scroll-margin-block-start: 10px; scroll-margin-block-start: 1em; /* global values */ scroll-margin-block-start: inherit; scroll-margin-block-start: initial; scroll-margin-block-start: unset; values <
length> an outset from the block start edge of the scroll container.
... formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <
length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-block-start' in that specification.
scroll-margin-block - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: scroll-margin-block-end scroll-margin-block-start syntax /* <
length> values */ scroll-margin-block: 10px; scroll-margin-block: 1em .5em ; /* global values */ scroll-margin-block: inherit; scroll-margin-block: initial; scroll-margin-block: unset; values <
length> an outset from the corresponding edge of the scroll container.
... formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <
length>{1,2} specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-block' in that specification.
scroll-margin-bottom - CSS: Cascading Style Sheets
syntax /* <
length> values */ scroll-margin-bottom: 10px; scroll-margin-bottom: 1em; /* global values */ scroll-margin-bottom: inherit; scroll-margin-bottom: initial; scroll-margin-bottom: unset; values <
length> an outset from the bottom edge of the scroll container.
... formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <
length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-bottom' in that specification.
scroll-margin-inline-end - CSS: Cascading Style Sheets
syntax /* <
length> values */ scroll-margin-inline-end: 10px; scroll-margin-inline-end: 1em; /* global values */ scroll-margin-inline-end: inherit; scroll-margin-inline-end: initial; scroll-margin-inline-end: unset; values <
length> an outset from the inline end edge of the scroll container.
... formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <
length> examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
scroll-margin-inline-start - CSS: Cascading Style Sheets
syntax /* <
length> values */ scroll-margin-inline-start: 10px; scroll-margin-inline-start: 1em; /* global values */ scroll-margin-inline-start: inherit; scroll-margin-inline-start: initial; scroll-margin-inline-start: unset; values <
length> an outset from the inline start edge of the scroll container.
... formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <
length> examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
scroll-margin-inline - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: scroll-margin-inline-end scroll-margin-inline-start syntax /* <
length> values */ scroll-margin-inline: 10px; scroll-margin-inline: 1em .5em ; /* global values */ scroll-margin-inline: inherit; scroll-margin-inline: initial; scroll-margin-inline: unset; values <
length> an outset from the corresponding edge of the scroll container.
... formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <
length>{1,2} examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
scroll-margin-left - CSS: Cascading Style Sheets
syntax /* <
length> values */ scroll-margin-left: 10px; scroll-margin-left: 1em; /* global values */ scroll-margin-left: inherit; scroll-margin-left: initial; scroll-margin-left: unset; values <
length> an outset from the left edge of the scroll container.
... formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <
length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-left' in that specification.
scroll-margin-right - CSS: Cascading Style Sheets
syntax /* <
length> values */ scroll-margin-right: 10px; scroll-margin-right: 1em; /* global values */ scroll-margin-right: inherit; scroll-margin-right: initial; scroll-margin-right: unset; values <
length> an outset from the right edge of the scroll container.
... formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <
length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-right' in that specification.
scroll-margin-top - CSS: Cascading Style Sheets
syntax /* <
length> values */ scroll-margin-top: 10px; scroll-margin-top: 1em; /* global values */ scroll-margin-top: inherit; scroll-margin-top: initial; scroll-margin-top: unset; values <
length> an outset from the top edge of the scroll container.
... formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <
length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-top' in that specification.
scroll-margin - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: scroll-margin-bottom scroll-margin-left scroll-margin-right scroll-margin-top syntax /* <
length> values */ scroll-margin: 10px; scroll-margin: 1em .5em 1em 1em; /* global values */ scroll-margin: inherit; scroll-margin: initial; scroll-margin: unset; values <
length> an outset from the corresponding edge of the scroll container.
... formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <
length>{1,4} examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
scroll-padding-block-end - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-block-end: auto; /* <
length> values */ scroll-padding-block-end: 10px; scroll-padding-block-end: 1em; scroll-padding-block-end: 10%; /* global values */ scroll-padding-block-end: inherit; scroll-padding-block-end: initial; scroll-padding-block-end: unset; values <
length-percentage> an inwards offset from the block end edge of the scrollport, as a valid
length or a percentage.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <
length-percentage>where <
length-percentage> = <
length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-block-end' in that specification.
scroll-padding-block-start - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-block-start: auto; /* <
length> values */ scroll-padding-block-start: 10px; scroll-padding-block-start: 1em; scroll-padding-block-start: 10%; /* global values */ scroll-padding-block-start: inherit; scroll-padding-block-start: initial; scroll-padding-block-start: unset; values <
length-percentage> an inwards offset from the block start edge of the scrollport, as a valid
length or a percentage.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <
length-percentage>where <
length-percentage> = <
length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-block-start' in that specification.
scroll-padding-block - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: scroll-padding-block-end scroll-padding-block-start syntax /* keyword values */ scroll-padding-block: auto; /* <
length> values */ scroll-padding-block: 10px; scroll-padding-block: 1em .5em; scroll-padding-block: 10%; /* global values */ scroll-padding-block: inherit; scroll-padding-block: initial; scroll-padding-block: unset; values <
length-percentage> an inwards offset from the corresponding edge of the scrollport, as a valid
length or a percentage.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <
length-percentage> ]{1,2}where <
length-percentage> = <
length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-block' in that specification.
scroll-padding-bottom - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-bottom: auto; /* <
length> values */ scroll-padding-bottom: 10px; scroll-padding-bottom: 1em; scroll-padding-bottom: 10%; /* global values */ scroll-padding-bottom: inherit; scroll-padding-bottom: initial; scroll-padding-bottom: unset; values <
length-percentage> an inwards offset from the bottom edge of the scrollport, as a valid
length or a percentage.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <
length-percentage>where <
length-percentage> = <
length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-bottom' in that specification.
scroll-padding-inline-end - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-inline-end: auto; /* <
length> values */ scroll-padding-inline-end: 10px; scroll-padding-inline-end: 1em; scroll-padding-inline-end: 10%; /* global values */ scroll-padding-inline-end: inherit; scroll-padding-inline-end: initial; scroll-padding-inline-end: unset; values <
length-percentage> an inwards offset from the inline end edge of the scrollport, as a valid
length or a percentage.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <
length-percentage>where <
length-percentage> = <
length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-inline-end' in that specification.
scroll-padding-inline-start - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-inline-start: auto; /* <
length> values */ scroll-padding-inline-start: 10px; scroll-padding-inline-start: 1em; scroll-padding-inline-start: 10%; /* global values */ scroll-padding-inline-start: inherit; scroll-padding-inline-start: initial; scroll-padding-inline-start: unset; values <
length-percentage> an inwards offset from the inline start edge of the scrollport, as a valid
length or a percentage.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <
length-percentage>where <
length-percentage> = <
length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-inline-start' in that specification.
scroll-padding-inline - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: scroll-padding-inline-end scroll-padding-inline-start syntax /* keyword values */ scroll-padding-inline: auto; /* <
length> values */ scroll-padding-inline: 10px; scroll-padding-inline: 1em .5em; scroll-padding-inline: 10%; /* global values */ scroll-padding-inline: inherit; scroll-padding-inline: initial; scroll-padding-inline: unset; values <
length-percentage> an inwards offset from the corresponding edge of the scrollport, as a valid
length or a percentage.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <
length-percentage> ]{1,2}where <
length-percentage> = <
length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-inline' in that specification.
scroll-padding-left - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-left: auto; /* <
length> values */ scroll-padding-left: 10px; scroll-padding-left: 1em; scroll-padding-left: 10%; /* global values */ scroll-padding-left: inherit; scroll-padding-left: initial; scroll-padding-left: unset; values <
length-percentage> an inwards offset from the left edge of the scrollport, as a valid
length or a percentage.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <
length-percentage>where <
length-percentage> = <
length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-left' in that specification.
scroll-padding-right - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-right: auto; /* <
length> values */ scroll-padding-right: 10px; scroll-padding-right: 1em; scroll-padding-right: 10%; /* global values */ scroll-padding-right: inherit; scroll-padding-right: initial; scroll-padding-right: unset; values <
length-percentage> an inwards offset from the top edge of the scrollport, as a valid
length or a percentage.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <
length-percentage>where <
length-percentage> = <
length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-right' in that specification.
scroll-padding-top - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-top: auto; /* <
length> values */ scroll-padding-top: 10px; scroll-padding-top: 1em; scroll-padding-top: 10%; /* global values */ scroll-padding-top: inherit; scroll-padding-top: initial; scroll-padding-top: unset; values <
length-percentage> an inwards offset from the top edge of the scrollport, as a valid
length or a percentage.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <
length-percentage>where <
length-percentage> = <
length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-top' in that specification.
scroll-padding - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: scroll-padding-bottom scroll-padding-left scroll-padding-right scroll-padding-top syntax /* keyword values */ scroll-padding: auto; /* <
length> values */ scroll-padding: 10px; scroll-padding: 1em .5em 1em 1em; scroll-padding: 10%; /* global values */ scroll-padding: inherit; scroll-padding: initial; scroll-padding: unset; values <
length-percentage> an inwards offset from the corresponding edge of the scrollport, as a valid <
length> or a <percentage>.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <
length-percentage> ]{1,4}where <
length-percentage> = <
length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding' in that specification.
scroll-snap-coordinate - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednopercentagesrefer to the element’s border boxcomputed valueas specified, but with relative
lengths converted into absolute
lengthsanimation typea position formal syntax none | <position>#where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
... | [ [ left | right ] <
length-percentage> ] && [ [ top | bottom ] <
length-percentage> ] ]where <
length-percentage> = <
length> | <percentage> examples setting scroll snap coordinates html <div id="container"> <div> <p>at coordinate (0, 0)</p> <div class="scrollcontainer coordinate0"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (25, 0)</p> <div class="scrollcontainer coordinate25"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (50, 0)</p> <div class="scrollcontainer coordinate50"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </div> css #container { display: flex; } #container > div:nth-child(-n+2) { margin-right: 2...
scroll-snap-destination - CSS: Cascading Style Sheets
formal definition initial value0px 0pxapplies toscroll containersinheritednopercentagesrelative to same axis of the padding-box of the scroll containercomputed valueas specified, but with relative
lengths converted into absolute
lengthsanimation typea position formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <
length-percentage> ] [ top | center | bottom | <
length-percentage> ]?
... | [ [ left | right ] <
length-percentage> ] && [ [ top | bottom ] <
length-percentage> ] ]where <
length-percentage> = <
length> | <percentage> examples setting scroll snap destination html <div id="container"> <div> <p>at coordinate (0, 0)</p> <div class="scrollcontainer destination0"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (25, 0)</p> <div class="scrollcontainer destination25"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (50, 0)</p> <div class="scrollcontainer destination50"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </div> css #container { display: flex; } #container > div:nth-child(-n+2) { margin-right...
shape-margin - CSS: Cascading Style Sheets
syntax /* <
length> values */ shape-margin: 10px; shape-margin: 20mm; /* <percentage> value */ shape-margin: 60%; /* global values */ shape-margin: inherit; shape-margin: initial; shape-margin: unset; values <
length-percentage> sets the margin of the shape to a <
length> value or to a <percentage> of the width of the element's containing block.
... formal definition initial value0applies tofloatsinheritednopercentagesrefer to the width of the containing blockcomputed valueas specified, but with relative
lengths converted into absolute
lengthsanimation typea
length, percentage or calc(); formal syntax <
length-percentage>where <
length-percentage> = <
length> | <percentage> examples adding a margin to a polygon html <section> <div class="shape"></div> we are not quite sure of any one thing in biology; our knowledge of geology is relatively very slight, and the economic laws of society are uncertain to every one except some individual who attempts to set them forth; but before the world was fashioned the square on the hypotenuse was equal to the sum of the squares on the other two sides of a right triangle, and it will be so after thi...
text-overflow - CSS: Cascading Style Sheets
each value is specified as one of: one of the keyword values: clip, ellipsis, fade the function fade(), which is passed a <
length> or a <percentage> to control the fade distance a <string>.
... fade( <
length> | <percentage> ) this function clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.
perspective() - CSS: Cascading Style Sheets
syntax the perspective distance used by perspective() is specified by a <
length> value, which represents the distance between the user and the z=0 plane.
... perspective(d) values d is a <
length> representing the distance from the user to the z=0 plane.
translateX() - CSS: Cascading Style Sheets
syntax /* <
length-percentage> values */ transform: translatex(200px); transform: translatex(50%); values <
length-percentage> is a <
length> or <percentage> representing the abscissa of the translating vector.
... 10t010001 10t010001 100t010000100001 [1 0 0 1 t 0] formal syntax translatex(<
length-percentage>) examples html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translatex(10px); /* equal to translate(10px) */ background-color: pink; } result specifications specification status comment css transforms level 1the definition of 't...
translateY() - CSS: Cascading Style Sheets
syntax /* <
length-percentage> values */ transform: translatey(200px); transform: translatey(50%); values <
length-percentage> the value is a <
length> or <percentage> representing the ordinate of the translating vector.
... 10001t001 10001t001 1000010t00100001 [1 0 0 1 0 t] formal syntax translatey(<
length-percentage>) examples html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translatey(10px); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'translatey()' in that specificat...
translateZ() - CSS: Cascading Style Sheets
this transformation is defined by a <
length> which specifies how far inward or outward the element or elements move.
... syntax translatez(tz) values tz a <
length> representing the z-component of the translating vector.
transition-delay - CSS: Cascading Style Sheets
a positive value will delay the start of the transition effect for the given
length of time.
...in other words, the effect will be animated as if it had already been running for the given
length of time.
HTML attribute: pattern - HTML: Hypertext Markup Language
input:invalid { border: red solid 3px; } had we used min
length and max
length attributes instead, we may have seen validitystate.toolong or validitystate.tooshort being true.
... <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required size="45" pattern="[a-z]{4,8}" title="4 to 8 lowercase letters"> <span class="validity"></span> <p>usernames must be lowercase and 4-8 characters in
length.</p> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } p { font-size: 80%; color: #999; } 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; } this renders l...
<table>: The Table element - HTML: Hypertext Markup Language
if the cellpadding's
length is defined in pixels, this pixel-sized space will be applied to all four sides of the cell's content.
... if the
length is defined using a percentage value, the content will be centered and the total vertical space (top and bottom) will represent this value.
Data URLs - HTTP
length limitations although firefox supports data urls of essentially unlimited
length, browsers are not required to support any particular maximum
length of data.
... for example, the opera 11 browser limited urls to 65535 characters long which limits data urls to 65529 characters (65529 characters being the
length of the encoded data, not the source, if you use the plain data:, without specifying a mime type).
MIME types (IANA media types) - HTTP
lhost:8000 user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate connection: keep-alive upgrade-insecure-requests: 1 content-type: multipart/form-data; boundary=---------------------------8721656041911415653955004498 content-
length: 465 -----------------------------8721656041911415653955004498 content-disposition: form-data; name="mytextfield" test -----------------------------8721656041911415653955004498 content-disposition: form-data; name="mycheckbox" on -----------------------------8721656041911415653955004498 content-disposition: form-data; name="myfile"; filename="test.txt" content-type: text/plain simple file.
... http/1.1 206 partial content accept-ranges: bytes content-type: multipart/byteranges; boundary=3d6b6a416f9b5 content-
length: 385 --3d6b6a416f9b5 content-type: text/html content-range: bytes 100-200/1270 eta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="vieport" content --3d6b6a416f9b5 content-type: text/html content-range: bytes 300-400/1270 -color: #f0f0f2; margin: 0; padding: 0; font-family: "open sans", "helvetica --3d6b6a416f9b5-- importance of setting ...
Browser detection using the user agent - HTTP
function(mq) { for (var i=0,len=mql.
length|0; i<len; i=i+1|0) if (mql[i][0] === mq) mql.splice(i, 1); mq.removelistener(whenmediachanges); } : listentomediaquery; var orientationchanged = false; addeventlistener("orientationchange", function(){ orientationchanged = true; }, passive_listener_option); addeventlistener("resize", settimeout.bind(0,function(){ if (orientationchanged && !mediaqueryupdated) for (var...
... i=0,len=mql.
length|0; i<len; i=i+1|0) mql[i][1]( mql[i][0] ); mediaqueryupdated = orientationchanged = false; },0)); which part of the user agent contains the information you are looking for?
Cross-Origin Resource Sharing (CORS) - HTTP
host: bar.other user-agent: mozilla/5.0 (macintosh; intel mac os x 10.14; rv:71.0) gecko/20100101 firefox/71.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip,deflate connection: keep-alive x-pingother: pingpong content-type: text/xml; charset=utf-8 referer: https://foo.example/examples/preflightinvocation.html content-
length: 55 origin: https://foo.example pragma: no-cache cache-control: no-cache <person><name>arun</name></person> http/1.1 200 ok date: mon, 01 dec 2008 01:15:40 gmt server: apache/2 access-control-allow-origin: https://foo.example vary: accept-encoding, origin content-encoding: gzip content-
length: 235 keep-alive: timeout=2, max=99 connection: keep-alive content-type: text/plain [some xml payload]...
...e/examples/credential.html origin: http://foo.example cookie: pageaccess=2 http/1.1 200 ok date: mon, 01 dec 2008 01:34:52 gmt server: apache/2 access-control-allow-origin: https://foo.example access-control-allow-credentials: true cache-control: no-cache pragma: no-cache set-cookie: pageaccess=3; expires=wed, 31-dec-2008 01:34:53 gmt vary: accept-encoding, origin content-encoding: gzip content-
length: 106 keep-alive: timeout=2, max=100 connection: keep-alive content-type: text/plain [text/plain payload] although line 10 contains the cookie destined for the content on http://bar.other, if bar.other did not respond with an access-control-allow-credentials: true (line 17) the response would be ignored and not made available to web content.
Access-Control-Expose-Headers - HTTP
by default, only the 7 cors-safelisted response headers are exposed: cache-control content-language content-
length content-type expires last-modified pragma if you want clients to be able to access other headers, you have to list them using the access-control-expose-headers header.
... examples to expose a non-cors-safelisted request header, you can specify: access-control-expose-headers: content-
length to additionally expose a custom header, like x-kuma-revision, you can specify multiple headers separated by a comma: access-control-expose-headers: content-
length, x-kuma-revision in requests without credentials, you can also use a wildcard value: access-control-expose-headers: * however, this won't wildcard the authorization header, so if you need to expose that, you will need to list it ex...
Expect - HTTP
for example, the server may reject a request if its content-
length is too large.
... put /somewhere/fun http/1.1 host: origin.example.com content-type: video/h264 content-
length: 1234567890987 expect: 100-continue the server now checks the request headers and may respond with a 100 (continue) response to instruct the client to go ahead and send the message body, or it will send a 417 (expectation failed) status if any of the expectations cannot be met.
Range - HTTP
header type request header forbidden header name no syntax range: <unit>=<range-start>- range: <unit>=<range-start>-<range-end> range: <unit>=<range-start>-<range-end>, <range-start>-<range-end> range: <unit>=<range-start>-<range-end>, <range-start>-<range-end>, <range-start>-<range-end> range: <unit>=-<suffix-
length> directives <unit> the unit in which ranges are specified.
... <suffix-
length> an integer in the given unit indicating the number of units at the end of the file to return.
Transfer-Encoding - HTTP
the content-
length header is omitted in this case and at the beginning of each chunk you need to add the
length of the current chunk in hexadecimal format, followed by '\r\n' and then the chunk itself, followed by another '\r\n'.
... the terminating chunk is a regular chunk, with the exception that its
length is zero.
HTTP headers - HTTP
entity headers contain information about the body of the resource, like its content
length or mime type.
... message body information content-
length the size of the resource, in decimal number of bytes.
HTTP Index - HTTP
73 content-
length http, headers, reference the content-
length entity header indicates the size of the entity-body, in bytes, sent to the recipient.
... 246 411
length required client error, http, http status code, reference, status code the hypertext transfer protocol (http) 411
length required client error response code indicates that the server refuses to accept the request without a defined content-
length header.
206 Partial Content - HTTP
status 206 partial content examples a response containing one single range: http/1.1 206 partial content date: wed, 15 nov 2015 06:25:24 gmt last-modified: wed, 15 nov 2015 04:58:08 gmt content-range: bytes 21010-47021/47022 content-
length: 26012 content-type: image/gif ...
... a response containing several ranges: http/1.1 206 partial content date: wed, 15 nov 2015 06:25:24 gmt last-modified: wed, 15 nov 2015 04:58:08 gmt content-
length: 1741 content-type: multipart/byteranges; boundary=string_separator --string_separator content-type: application/pdf content-range: bytes 234-639/8000 ...the first range...
JavaScript data types and data structures - JavaScript
the
length of a string is the number of elements in it.
... indexed collections: arrays and typed arrays arrays are regular objects for which there is a particular relationship between integer-key-ed properties and the
length property.
Loops and iteration - JavaScript
on selected="selected">r&b</option> <option>jazz</option> <option>blues</option> <option>new age</option> <option>classical</option> <option>opera</option> </select> </p> <p><input id="btn" type="button" value="how many are selected?" /></p> </form> <script> function howmany(selectobject) { let numberselected = 0; for (let i = 0; i < selectobject.options.
length; i++) { if (selectobject.options[i].selected) { numberselected++; } } return numberselected; } let btn = document.getelementbyid('btn'); btn.addeventlistener('click', function() { alert('number of options selected: ' + howmany(document.selectform.musictypes)); }); </script> do...while statement the do...while statement repeats until a specified condition evaluates to fals...
... example 1 the following example iterates through the elements in an array until it finds the index of an element whose value is thevalue: for (let i = 0; i < a.
length; i++) { if (a[i] === thevalue) { break; } } example 2: breaking to a label let x = 0; let z = 0; labelcancelloops: while (true) { console.log('outer loops: ' + x); x += 1; z = 1; while (true) { console.log('inner loops: ' + z); z += 1; if (z === 10 && x === 10) { break labelcancelloops; } else if (z === 10) { break; } } } continue statement t...
Inheritance and the prototype chain - JavaScript
'use strict'; class polygon { constructor(height, width) { this.height = height; this.width = width; } } class square extends polygon { constructor(side
length) { super(side
length, side
length); } get area() { return this.height * this.width; } set side
length(new
length) { this.height = new
length; this.width = new
length; } } 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 ...
...also, be aware of the
length of the prototype chains in your code and break them up if necessary to avoid possible performance problems.
TypeError: invalid arguments - JavaScript
typed array constructors require either a
length, another typed array, array-like objects, iterable objects or an arraybuffer object to create a new typed array.
... var ta = new uint8array("nope"); // typeerror: invalid arguments different ways to create a valid uint8array: // from a
length var uint8 = new uint8array(2); uint8[0] = 42; console.log(uint8[0]); // 42 console.log(uint8.
length); // 2 console.log(uint8.bytes_per_element); // 1 // from an array var arr = new uint8array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new uint8array([21, 31]); var y = new uint8array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(8); var z = new uint8array(buffer, 1, 4); // f...
Functions - JavaScript
arguments.
length: the number of arguments passed to the function.
... // this function returns a string padded with leading zeros function padzeros(num, totallen) { var numstr = num.tostring(); // initialize return value as string var numzeros = totallen - numstr.
length; // calculate no.
Array.prototype.slice() - JavaScript
if end is omitted, slice extracts through the end of the sequence (arr.
length).
... if end is greater than the
length of the sequence, slice extracts through to the end of the sequence (arr.
length).
ArrayBuffer() constructor - JavaScript
syntax new arraybuffer(
length) parameters
length the size, in bytes, of the array buffer to create.
... exceptions a rangeerror is thrown if the
length is larger than number.max_safe_integer (>= 2 ** 53) or negative.
Object.getOwnPropertyNames() - JavaScript
object.getownpropertynames('foo'); // typeerror: "foo" is not an object (es5 code) object.getownpropertynames('foo'); // ["0", "1", "2", "
length"] (es2015 code) examples using object.getownpropertynames() var arr = ['a', 'b', 'c']; console.log(object.getownpropertynames(arr).sort()); // .sort() is an array method.
... // logs ["0", "1", "2", "
length"] // array-like object var obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(object.getownpropertynames(obj).sort()); // .sort() is an array method.
Object.keys() - JavaScript
tion() { 'use strict'; var hasownproperty = object.prototype.hasownproperty, hasdontenumbug = !({ tostring: null }).propertyisenumerable('tostring'), dontenums = [ 'tostring', 'tolocalestring', 'valueof', 'hasownproperty', 'isprototypeof', 'propertyisenumerable', 'constructor' ], dontenums
length = dontenums.
length; return function(obj) { if (typeof obj !== 'function' && (typeof obj !== 'object' || obj === null)) { throw new typeerror('object.keys called on non-object'); } var result = [], prop, i; for (prop in obj) { if (hasownproperty.call(obj, prop)) { result.push(prop); } } if (hasdontenumbug) { for ...
...(i = 0; i < dontenums
length; i++) { if (hasownproperty.call(obj, dontenums[i])) { result.push(dontenums[i]); } } } return result; }; }()); } please note that the above code includes non-enumerable keys in ie7 (and maybe ie8), when passing in an object from a different window.
Proxy - JavaScript
let products = new proxy({ browsers: ['internet explorer', 'netscape'] }, { get: function(obj, prop) { // an extra property if (prop === 'latestbrowser') { return obj.browsers[obj.browsers.
length - 1]; } // the default behavior to return the value return obj[prop]; }, set: function(obj, prop, value) { // an extra property if (prop === 'latestbrowser') { obj.browsers.push(value); return true; } // convert the value if it is not an array if (typeof value === 'string') { value = [value]; } // the default behavior to store the v...
... let products = new proxy([ { name: 'firefox', type: 'browser' }, { name: 'seamonkey', type: 'browser' }, { name: 'thunderbird', type: 'mailer' } ], { get: function(obj, prop) { // the default behavior to return the value; prop is usually an integer if (prop in obj) { return obj[prop]; } // get the number of products; an alias of products.
length if (prop === 'number') { return obj.
length; } let result, types = {}; for (let product of obj) { if (product.name === prop) { result = product; } if (types[product.type]) { types[product.type].push(product); } else { types[product.type] = [product]; } } // get a product by name if (result) { return re...
SharedArrayBuffer() constructor - JavaScript
the sharedarraybuffer() constructor is used to create a sharedarraybuffer object representing a generic, fixed-
length raw binary data buffer, similar to the arraybuffer object.
... syntax new sharedarraybuffer([
length]) parameters
length the size, in bytes, of the array buffer to create.
SharedArrayBuffer.prototype.slice() - JavaScript
if end is omitted, slice extracts through the end of the sequence (sab.byte
length).
... examples using slice var sab = new sharedarraybuffer(1024); sab.slice(); // sharedarraybuffer { byte
length: 1024 } sab.slice(2); // sharedarraybuffer { byte
length: 1022 } sab.slice(-2); // sharedarraybuffer { byte
length: 2 } sab.slice(0, 1); // sharedarraybuffer { byte
length: 1 } specifications specification ecmascript (ecma-262)the definition of 'sharedarraybuffer.prototype.slice' in that specification.
String.fromCodePoint() - JavaScript
use the code below for a polyfill: if (!string.fromcodepoint) (function(stringfromcharcode) { var fromcodepoint = function(_) { var codeunits = [], codelen = 0, result = ""; for (var index=0, len = arguments.
length; index !== len; ++index) { var codepoint = +arguments[index]; // correctly handles all cases including `nan`, `-infinity`, `+infinity` // the surrounding `!(...)` is required to correctly handle `nan` cases // the (codepoint>>>0) === codepoint clause handles decimals and negatives if (!(codepoint < 0x10ffff && (codepoint>>>0) === codepoint)) throw...
... // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae codepoint -= 0x10000; codelen = codeunits.push( (codepoint >> 10) + 0xd800, // highsurrogate (codepoint % 0x400) + 0xdc00 // lowsurrogate ); } if (codelen >= 0x3fff) { result += stringfromcharcode.apply(null, codeunits); codeunits.
length = 0; } } return result + stringfromcharcode.apply(null, codeunits); }; try { // ie 8 only supports `object.defineproperty` on dom elements object.defineproperty(string, "fromcodepoint", { "value": fromcodepoint, "configurable": true, "writable": true }); } catch(e) { string.fromcodepoint = fromcodepoint; } }(string.fromcharcode)); ex...
String.prototype.matchAll() - JavaScript
instead, by using matchall, you get an iterator to use with the more convenient for...of, array spread, or array.from() constructs: const regexp = regexp('foo[a-z]*','g'); const str = 'table football, foosball'; const matches = str.matchall(regexp); for (const match of matches) { console.log(`found ${match[0]} start=${match.index} end=${match.index + match[0].
length}.`); } // expected output: "found football start=6 end=14." // expected output: "found foosball start=16 end=24." // matches iterator is exhausted after the for..of iteration // call matchall again to create a new iterator array.from(str.matchall(regexp), m => m[0]); // array [ "football", "foosball" ] matchall will throw an exception if the g flag is missing.
... capture groups are ignored when using match() with the global /g flag: let regexp = /t(e)(st(\d?))/g; let str = 'test1test2'; str.match(regexp); // array ['test1', 'test2'] using matchall, you can access capture groups easily: let array = [...str.matchall(regexp)]; array[0]; // ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2',
length: 4] array[1]; // ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2',
length: 4] specifications specification ecmascript (ecma-262)the definition of 'string.prototype.matchall' in that specification.
String.prototype.repeat() - JavaScript
count = +count; // check nan if (count != count) count = 0; if (count < 0) throw new rangeerror('repeat count must be non-negative'); if (count == infinity) throw new rangeerror('repeat count must be less than infinity'); count = math.floor(count); if (str.
length == 0 || count == 0) return ''; // ensuring count is a 31-bit integer allows us to heavily optimize the // main part.
... but anyway, most current (august 2014) browsers can't handle // strings 1 << 28 chars or longer, so: if (str.
length * count >= 1 << 28) throw new rangeerror('repeat count must not overflow maximum string size'); var maxcount = str.
length * count; count = math.floor(math.log(count) / math.log(2)); while (count) { str += str; count--; } str += str.substring(0, maxcount - str.
length); return str; } } examples using repeat 'abc'.repeat(-1) // rangeerror 'abc'.repeat(0) // '' 'abc'.repeat(1) // 'abc' 'abc'.repeat(2) // 'abcabc' 'abc'.repeat(3.5) // 'abcabcabc' (count will be converted to integer) 'abc'.repeat(1/0) // rangeerror ({ tostring: () => 'abc', repeat: string.prototype.repeat }).repeat(2) // 'abcabc' (repeat() is ...
String.prototype.split() - JavaScript
zero
length) string, which appears at the first (or last) position of the returned array.
... function splitstring(stringtosplit, separator) { const arrayofstrings = stringtosplit.split(separator) console.log('the original string is: ', stringtosplit) console.log('the separator is: ', separator) console.log('the array has ', arrayofstrings.
length, ' elements: ', arrayofstrings.join(' / ')) } const tempeststring = 'oh brave new world that has such people in it.' const monthstring = 'jan,feb,mar,apr,may,jun,jul,aug,sep,oct,nov,dec' const space = ' ' const comma = ',' splitstring(tempeststring, space) splitstring(tempeststring) splitstring(monthstring, comma) this example produces the following output: the original string is: "oh brave...
Symbol.isConcatSpreadable - JavaScript
symbol.isconcatspreadable needs to be set to true in order to get a flattened array: let x = [1, 2, 3] let fakearray = { [symbol.isconcatspreadable]: true,
length: 2, 0: 'hello', 1: 'world' } x.concat(fakearray) // [1, 2, 3, "hello", "world"] note: the
length property is used to control the number of object properties to be added.
... in the above example,
length:2 indicates two properties has to be added.
TypedArray.prototype.copyWithin() - JavaScript
the end argument is optional and defaults to the
length of the array.
... syntax typedarray.copywithin(target, start[, end = this.
length]) parameters target target start index position where to copy the elements to.
WebAssembly.Module.customSections() - JavaScript
we then do a check using webassembly.module.customsections, looking to see whether the module instance contains a "name" custom section by checking that its
length is more than 0.
... webassembly.compilestreaming(fetch('simple-name-section.wasm')) .then(function(mod) { var namesections = webassembly.module.customsections(mod, "name"); if (namesections.
length != 0) { console.log("module contains a name section"); console.log(namesections[0]); }; }); specifications specification webassembly javascript interfacethe definition of 'customsections()' in that specification.
WebAssembly.Table.prototype.grow() - JavaScript
return value the previous
length of the table.
... var table = new webassembly.table({ element: "anyfunc", initial: 2, maximum: 10 }); you can then grow the table by 1 with the following: console.log(table.
length); // "2" console.log(table.grow(1)); // "2" console.log(table.
length); // "3" specifications specification webassembly javascript interfacethe definition of 'grow()' in that specification.
eval() - JavaScript
"a.b.c" eval( 'var result = obj.' + proppath ); avoiding eval() here could be done by splitting the property path and looping through the different properties: function getdescendantprop(obj, desc) { var arr = desc.split('.'); while (arr.
length) { obj = obj[arr.shift()]; } return obj; } var obj = {a: {b: {c: 0}}}; var proppath = getproppath(); // returns e.g.
... "a.b.c" var result = getdescendantprop(obj, proppath); setting a property that way works similarly: function setdescendantprop(obj, desc, value) { var arr = desc.split('.'); while (arr.
length > 1) { obj = obj[arr.shift()]; } return obj[arr[0]] = value; } var obj = {a: {b: {c: 0}}}; var proppath = getproppath(); // returns e.g.
Spread syntax (...) - JavaScript
hout spread syntax, you would have to do it indirectly through partial application: function applyandnew(constructor, args) { function partial () { return constructor.apply(this, args); }; if (typeof constructor.prototype === "object") { partial.prototype = object.create(constructor.prototype); } return partial; } function myconstructor () { console.log("arguments.
length: " + arguments.
length); console.log(arguments); this.prop1="val1"; this.prop2="val2"; }; const myarguments = ["hi", "how", "are", "you", "mr", null]; const myconstructorwitharguments = applyandnew(myconstructor, myarguments); console.log(new myconstructorwitharguments); // (internal log of myconstructor): arguments.
length: 6 // (internal log of myconstructor): ["h...
... spread syntax (other than in the case of spread properties) can be applied only to iterable objects: const obj = {'key1': 'value1'}; const array = [...obj]; // typeerror: obj is not iterable spread with many values when using spread syntax for function calls, be aware of the possibility of exceeding the javascript engine's argument
length limit.
in operator - JavaScript
// arrays let trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'] 0 in trees // returns true 3 in trees // returns true 6 in trees // returns false 'bay' in trees // returns false (you must specify the index number, not the value at that index) '
length' in trees // returns true (
length is an array property) symbol.iterator in trees // returns true (arrays are iterable, works only in es2015+) // predefined objects 'pi' in math // returns true // custom objects let mycar = {make: 'honda', model: 'accord', year: 1998} 'make' in mycar // returns true 'model' in mycar // returns true you must specify an object on the right side of the ...
... let color1 = new string('green') '
length' in color1 // returns true let color2 = 'coral' // generates an error (color2 is not a string object) '
length' in color2 using in with deleted or undefined properties if you delete a property with the delete operator, the in operator returns false for that property.
super - JavaScript
class rectangle { constructor(height, width) { this.name = 'rectangle'; this.height = height; this.width = width; } sayname() { console.log('hi, i am a ', this.name + '.'); } get area() { return this.height * this.width; } set area(value) { this._area = value; } } class square extends rectangle { constructor(
length) { this.height; // referenceerror, super needs to be called first!
... // here, it calls the parent class's constructor with
lengths // provided for the rectangle's width and height super(
length,
length); // note: in derived classes, super() must be called before you // can use 'this'.
for await...of - JavaScript
for await (const chunk of streamasynciterable(response.body)) { // incrementing the total response
length.
... 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.
label - JavaScript
var itemspassed = 0; var i, j; top: for (i = 0; i < items.
length; i++) { for (j = 0; j < tests.
length; j++) { if (!tests[j].pass(items[i])) { continue top; } } itemspassed++; } using a labeled break with for loops var i, j; loop1: for (i = 0; i < 3; i++) { //the first for statement is labeled "loop1" loop2: for (j = 0; j < 3; j++) { //the second for statement is labeled "loop2" if (i === 1 && j === 1) { break...
... var allpass = true; var i, j; top: for (i = 0; items.
length; i++) for (j = 0; j < tests.
length; i++) if (!tests[j].pass(items[i])) { allpass = false; break top; } using a labeled block with break you can use labels within simple blocks, but only break statements can make use of non-loop labels.
Template literals (Template strings) - JavaScript
function template(strings, ...keys) { return (function(...values) { let dict = values[values.
length - 1] || {}; let result = [strings[0]]; keys.foreach(function(key, i) { let value = number.isinteger(key) ?
... let str = string.raw`hi\n${2+3}!`; // "hi\n5!" str.
length; // 6 array.from(str).join(','); // "h,i,\,n,5,!" tagged templates and escape sequences es2016 behavior as of ecmascript 2016, tagged templates conform to the rules of the following escape sequences: unicode escapes started by "\u", for example \u00a9 unicode code point escapes indicated by "\u{}", for example \u{2f804} hexadecimal escapes started by "\x", for example \xa9 octal litera...
Values - MathML
lengths several mathml presentation elements have attributes that accept
length values used for size or spacing.
... mathml accepts different units and constants for specifying
lengths.
<mmultiscripts> - MathML
subscriptshift the minimum space by which to shift the subscript below the baseline of the expression, as a css
length.
... superscriptshift the minimum space by which to shift the superscript above the baseline of the expression, as a css
length.
<msubsup> - MathML
subscriptshift the minimum space by which to shift the subscript below the baseline of the expression, as a
length value.
... superscriptshift the minimum space by which to shift the superscript above the baseline of the expression, as a
length value.
<mtable> - MathML
unimplemented minlabelspacing a
length value specifing the minimum space between a label and the adjacent cell in the row.
...accepts
length values.
MathML documentation index - MathML
7 values guide, mathml, mathml reference several mathml presentation elements have attributes that accept
length values used for size or spacing.
... mathml accepts different units and constants for specifying
lengths.
Image file type and format guide - Web media technologies
the
length of a color table is always a power of 2 (that is, each palette has 2, 4, 8, 16, 32, 64, or 256 entries).
... every value in a tiff file is specified using its tag (indicating what kind of information it is, such as the width of the image) and its type (indicating the format the data is stored in), followed by the
length of the array of values to assign to that tag (all properties are stored in arrays, even for single values).
Digital video concepts - Web media technologies
there are three types of cones, each of which responds to a particular wave
length band of incoming light, but also to the intensity of the light at that wave
length.
... each type of cone, then, captures the relative reponse peaks at various wave
lengths, and the brain uses this data to figure out the intensity and hue of the color of the light arriving at that part of the retina.
Lazy loading - Web Performance
it's a way to shorten the
length of the critical rendering path, which translates into reduced page load times.
... one of the methods we can use to tackle this problem is to shorten the critical rendering path
length by lazy loading resources that are not critical for the first render to happen.
baseline-shift - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following four elements: <altglyph>, <textpath>, <tref>, and <tspan> usage notes value <
length-percentage> | sub | super default value 0 animatable yes sub the dominant-baseline is shifted to the default position for subscripts.
... <
length-percentage> a
length value raises (positive value) or lowers (negative value) the dominant-baseline of the parent text content element by the specified
length.
r - SVG: Scalable Vector Graphics
value <
length> | <percentage> default value 0 animatable yes note: starting with svg2, r is a geometry property meaning this attribute can also be used as a css property for circles.
... value <
length> | <percentage> default value 50% animatable yes specifications specification status comment scalable vector graphics (svg) 2the definition of 'r' in that specification.
refX - SVG: Scalable Vector Graphics
value <
length-percentage> | <number> | left | center | right default value 0 animatable yes <
length-percentage>
lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes.
... value <
length> | left | center | right default value none animatable yes <
length-percentage>
lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes.
refY - SVG: Scalable Vector Graphics
value <
length-percentage> | <number> | top | center | bottom default value 0 animatable yes <
length-percentage>
lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes.
... value <
length> | top | center | bottom default value none animatable yes <
length-percentage>
lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes.
rx - SVG: Scalable Vector Graphics
value <
length> | <percentage> | auto default value auto animatable yes note: starting with svg2, rx is a geometry property meaning this attribute can also be used as a css property for ellipses.
... value <
length> | <percentage> | auto default value auto animatable yes note: starting with svg2, rx is a geometry property meaning this attribute can also be used as a css property for rects.
ry - SVG: Scalable Vector Graphics
value <
length> | <percentage> | auto default value auto animatable yes note: starting with svg2, ry is a geometry property meaning this attribute can also be used as a css property for ellipses.
... value <
length> | <percentage> | auto default value auto animatable yes note: starting with svg2, ry is a geometry property meaning this attribute can also be used as a css property for rects.
startOffset - SVG: Scalable Vector Graphics
</textpath> </text> </svg> usage notes value <
length-percentage> | <number> default value 0 animatable yes <
length-percentage> a
length represents a distance along the path measured in the current user coordinate system for the <textpath> element.
... note: negative values and values larger than the path
length (e.g.
stroke-miterlimit - SVG: Scalable Vector Graphics
the stroke-miterlimit attribute is a presentation attribute defining a limit on the ratio of the miter
length to the stroke-width used to draw a miter join.
... the ratio of miter
length (distance between the outer tip and the inner corner of the miter) to stroke-width is directly related to the angle (theta) between the segments in user space by the formula: stroke-miterlimit = miter
length stroke-width = 1 sin ( θ 2 ) for example, a miter limit of 1.414 converts miters to bevels for theta less than 90 degrees, a limit of 4.0 converts them for theta l...
x1 - SVG: Scalable Vector Graphics
value <
length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="5" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="9" x2="5" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x1 defin...
...the exact behavior of this attribute is influenced by the gradientunits attributs value <
length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the left bounding limit of the shape it is applied to --> <lineargradient x1="0%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 80% of the left bounding limit of the shape it...
x2 - SVG: Scalable Vector Graphics
value <
length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="5" x2="1" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x2 defin...
...the exact behavior of this attribute is influenced by the gradientunits attributs value <
length> | <percentage> default value 100% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the right bounding limit of the shape it is applied to --> <lineargradient x2="100%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 20% of the left bounding limit of the shape i...
y1 - SVG: Scalable Vector Graphics
value <
length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="1" y2="5" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="9" y2="5" stroke="blue" /> </svg> lineargradient for <lineargradient>, y1 defin...
...the exact behavior of this attribute is influenced by the gradientunits attributs value <
length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the top left corner of the bounding box of the shape it is applied to.
y2 - SVG: Scalable Vector Graphics
value <
length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, y2 defin...
...the exact behavior of this attribute is influenced by the gradientunits attributs value <
length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the top right corner of the bounding box of the shape it is applied to.
<feDiffuseLighting> - SVG: Scalable Vector Graphics
attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in surfacescale diffuseconstant kernelunit
length dom interface this element implements the svgfediffuselightingelement interface.
... working draft deprecated kernelunit
length attribute scalable vector graphics (svg) 1.1 (second edition)the definition of '<fediffuselighting>' in that specification.
<marker> - SVG: Scalable Vector Graphics
value type: <
length> ; default value: 3; animatable: yes markerunits this attribute defines the coordinate system for the attributes markerwidth, markerheight and the contents of the <marker>.
... value type: <
length> ; default value: 3; animatable: yes orient this attribute defines the orientation of the marker relative to the shape it is attached to.
<mask> - SVG: Scalable Vector Graphics
value type: <
length> ; default value: 120%; animatable: yes maskcontentunits this attribute defines the coordinate system for the contents of the <mask>.
... value type: <
length> ; default value: 120%; animatable: yes global attributes core attributes most notably: id styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, display, fill, fill-opacity, fill-rule, filter, mask, opacity, shape-rendering, stroke, stroke-dasharray, stroke-d...
<use> - SVG: Scalable Vector Graphics
value type: <
length> ; default value: 0; animatable: yes height the height of the use element.
... value type: <
length> ; default value: 0; animatable: yes note: width, and height have no effect on use elements, unless the element referenced has a viewbox - i.e.
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
(alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical) recently implemented presentation attributes: direction, unicode-bidi, font-variant, text-decoration svgtextelement recently imlemented bindings: selectsubstring recently implemented attributes: text
length,
lengthadjust tspan implemented.
...(alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical) recently implemented presentation attributes: direction, unicode-bidi, font-variant, text-decoration svgtspanelement recently implemented bindings: selectsubstring recently implemented attributes: text
length,
lengthadjust tref this feature, present in early draft of the spec, has been removed from it and is therefor not implemented (bug 273171).
Texts - SVG: Scalable Vector Graphics
text
length this is a more obscure attribute giving the calculated
length of the string.
... it is meant to allow the rendering engine to fine-tune the positions of the glyphs when its own measured text
length doesn't meet the one provided here.
substring - XPath
syntax substring(string ,start [,
length] ) arguments string the string to evaluate.
... start the position withinstring the substring begins
length(optional) the
length of the substring.
Introduction to using XPath in JavaScript - XPath
the total number of nodes contained can be accessed through the snapshot
length property.
... snapshot example var nodessnapshot = document.evaluate('//phonenumber', documentnode, null, xpathresult.ordered_node_snapshot_type, null ); for ( var i=0 ; i < nodessnapshot.snapshot
length; i++ ) { alert( nodessnapshot.snapshotitem(i).textcontent ); } first node when the specified result type in the resulttype parameter is either: any_unordered_node_type first_ordered_node_type the xpathresult object returned is only the first found node that matched the xpath expression.
XPath snippets - XPath
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 whether there is a special need for namespace resolvers, etc.
...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.snapshot
length; 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.
Content Scripts - Archive of obsolete content
contentscriptfile: self.data.url("content-script.js"), contenturl: "http://en.wikipedia.org/wiki/internet" }); pageworker.port.on("first-para", function(firstpara) { console.log(firstpara); }); pageworker.port.emit("get-first-para"); // content-script.js self.port.on("get-first-para", getfirstpara); function getfirstpara() { var paras = document.getelementsbytagname("p"); if (paras.
length > 0) { var firstpara = paras[0].textcontent; self.port.emit("first-para", firstpara); } } from page-mod a single page-mod object might attach its scripts to multiple pages, each with its own context in which the content scripts are executing, so it needs a separate channel (worker) for each page.
page-worker - Archive of obsolete content
for example, this add-on loads a page from wikipedia, and runs a content script in it to send all the headers back to the main add-on code: var pageworkers = require("sdk/page-worker"); // this content script sends header titles from the page to the add-on: var script = "var elements = document.queryselectorall('h2 > span'); " + "for (var i = 0; i < elements.
length; i++) { " + " postmessage(elements[i].textcontent) " + "}"; // create a page worker that loads wikipedia: pageworkers.page({ contenturl: "http://en.wikipedia.org/wiki/internet", contentscript: script, contentscriptwhen: "ready", onmessage: function(message) { console.log(message); } }); for conciseness, this example creates the content script as a string...
Canvas code snippets - Archive of obsolete content
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.
Drag & Drop - Archive of obsolete content
tem to retrieve the file data var trans = components.classes["@mozilla.org/widget/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...
HTML to DOM - Archive of obsolete content
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 h...
IsDefaultNamespace - Archive of obsolete content
re/namespaces-algorithms.html#isdefaultnamespacealgo function isdefaultnamespace(node, namespaceuri) { if (node.isdefaultnamespace) { return node.isdefaultnamespace(namespaceuri); } switch (node.nodetype) { case 1: // element_node if (!node.prefix) { return (node.namespaceuri === namespaceuri); } if (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 ...
LookupNamespaceURI - Archive of obsolete content
pe) { case 1: // element_node (could also just test for node.element_node, etc., if supported in all browsers) if (node.namespaceuri != null && node.prefix === prefix) { // note: prefix could be "null" in the case we are looking for default namespace return node.namespaceuri; } if (node.attributes.
length) { for (i = 0; i < node.attributes.
length; i++) { att = node.attributes[i]; if (xmlnspattern.test(att.name) && xmlnspattern.exec(att.name)[1] === prefix) { if (att.value) { return att.value; } return null; // unknow...
LookupPrefix - Archive of obsolete content
only function _lookupnamespaceprefix (namespaceuri, originalelement) { var xmlnspattern = /^xmlns:(.*)$/; if (originalelement.namespaceuri && originalelement.namespaceuri === namespaceuri && originalelement.prefix && originalelement.lookupnamespaceuri(originalelement.prefix) === namespaceuri) { return originalelement.prefix; } if (originalelement.attributes && originalelement.attributes.
length) { for (var i=0; i < originalelement.attributes.
length; i++) { var att = originalelement.attributes[i]; xmlnspattern.lastindex = 0; var localname = att.localname || att.name.substr(att.name.indexof(':')+1); // latter test for ie which doesn't support localname if (localname.indexof(':') !== -1) { // for firefox when in html mode localname = localname.substr(att.name.indexof(':')...
Tabbox - Archive of obsolete content
ar currentindex = tabbox.selectedindex; if(currentindex>=0){ var tabs=document.getelementbyid("tabs"); var tabpanels=document.getelementbyid("tabpanels"); tabpanels.removechild(tabpanels.childnodes[currentindex]); tabs.removeitemat(currentindex); /*work around if last tab is removed, widget 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
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 ...
XPath - Archive of obsolete content
jax is a class written by javascript which return responsexml object to parsexml function function parsexml(obj)//obj is the returnxml object now { if(!obj.documentelement) { alert("your browser does't support this script!"); return; } var fields = [];//store the results if(window.activexobject) { var tobj = obj.documentelement.selectnodes("/root/field/item"); for(var i=0;i<tobj.
length; i++) { fields.push(tobj[i].text); } } else { var tobj = obj.evaluate("/root/field/item",obj.documentelement,null, xpathresult.any_type, null); var tmp = tobj.iteratenext(); while(tmp) { fields.push(tmp.textcontent); tmp = tobj.iteratenext(); } } alert(fields); } //here is the demo xml file for xpath <?xml version="1.0"?> <root> <field> <item>art_id</item> <...
Creating a dynamic status bar extension - Archive of obsolete content
function inforeceived() { var samplepanel = document.getelementbyid('stockwatcher'); var output = httprequest.responsetext; if (output.
length) { // remove whitespace from the end of the string; // this gets rid of the end-of-line characters output = output.replace(/\w*$/, ''); // build the tooltip string var fieldarray = output.split(','); // assert that fieldarray[0] == 'goog' samplepanel.label = 'goog: ' + fieldarray[1]; samplepanel.tooltiptext = 'chg: ' + fieldarray[4] + ' | ' + 'open: ' + f...
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) { netscape.security.privilegemanager.enableprivilege('universalxpconnect'); ...
Dehydra Object Reference - Archive of obsolete content
for example, an int[10] would have .max = 9 .variable
length boolean flag true if the type represents a c99 variable-
length array type number type property type description .precision integer for floating-point types, the precision of the type .min integer for integer types, the minimum value capable of being stored .max integer for integer types, the maximum value capable of being stored .issigned boolean flag for integer types, true ...
Documentation for BiDi Mozilla - Archive of obsolete content
rsion to/from presentation forms nsbidipresutils layout/base/nsbidipresutils.cpp utilities for the layout engine including: resolve frames by bidi level split framesreorder frames format bidi text support for deletion and insertion of frames by editor nsbiditextframe layout/generic/nsbidiframes.cpp subclass of nsframe with additional method setoffsets, to adjust mcontentoffset and mcontent
length during bidi processing nsdirectionalframe layout/generic/nsbidiframes.cpp subclass of nsframethis is a special frame which represents a bidi control.
Java in Firefox Extensions - Archive of obsolete content
ls.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...
Basics - Archive of obsolete content
blah(
lengthstringfocusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text
lengththe number of open tabsstring focusedthe current tab in your browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document i...
statusBar - Archive of obsolete content
syntax jetpack.statusbar.append(options); possible options are: url width (string/
length) the width of the panel-item html (string) the html code which will be used inside the item onload (event) this event fires when the item was appended.
Priority Content - Archive of obsolete content
book
length works in progress: netscape gecko plugin api reference 1.0 original: netscape gecko plugin api reference 1.0 wiki location: gecko plugin api reference migrators: started: core javascript reference 1.5 original: core javascript reference 1.5 wiki location: core javascript 1.5 reference migrators: deb richardson in progress: transforming xml: netscape and xslt 1.0 original: transform...
Space Manager Detailed Design - Archive of obsolete content
allocated and returned for the // right part // // does not insert the new band rect into the linked list bandrect* splithorizontally(nscoord aright); // accessor functions prbool isoccupiedby(const nsiframe*) const; void addframe(const nsiframe*); void removeframe(const nsiframe*); prbool hassameframelist(const bandrect* abandrect) const; print32
length() const; }; // circular linked list of band rects struct bandlist : bandrect { bandlist(); // accessors prbool isempty() const {return pr_clist_is_empty((prcliststr*)this);} bandrect* head() const {return (bandrect*)pr_list_head(this);} bandrect* tail() const {return (bandrect*)pr_list_tail(this);} // operations void append(bandrect* abandrect) {pr_app...
URIs and URLs - Archive of obsolete content
together 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.
DOM Interfaces - Archive of obsolete content
if (element.ownerdocument instanceof ci.nsidomdocumentxbl) { var anonchildren = element.ownerdocument.getanonymousnodes(element); if (anonchildren) { for (var i = 0; i < anonchildren.
length; i++) { if (anonchildren[i].nodetype == 1) return false; } } } return true; ...
Windows Install - Archive of obsolete content
err = winreg.setvaluestring(subkey, valname, value); } } function prepareren8dot3(listlongfilepaths) { var ftemp = getfolder("temporary"); var fprogram = getfolder("program"); var fren8dot3ini = getwinprofile(ftemp, "ren8dot3.ini"); var binicreated = false; var flongfilepath; var sshortfilepath; if(fren8dot3ini != null) { for(i = 0; i < listlongfilepaths.
length; i++) { flongfilepath = getfolder(fprogram, listlongfilepaths[i]); sshortfilepath = file.windowsgetshortname(flongfilepath); if(sshortfilepath) { fren8dot3ini.writestring("rename", sshortfilepath, flongfilepath); binicreated = true; } } if(binicreated) updatewinreg4ren8dot3() ; } return(0); } // main var srdest;...
Attribute (XUL) - Archive of obsolete content
header hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight max
length maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline multiple name negate newlines next noautofocus noautohide noinitialfocus nomatch norestorefocus object observes onbeforeaccept onbookmarkgroup onchange onclick onclosetab oncommand oncommandupdate ondialogaccept ondialogcan...
How to implement a custom XUL query processor component - Archive of obsolete content
s no longer being 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"}, ...
Tooltips - Archive of obsolete content
for instance, if a cell has a long label and the column is shorter than the label's
length, a tooltip will appear when the mouse is moved over the cell so that the user can see the entire value.
Building Menus With Templates - Archive of obsolete content
here is an example using an xml source: <button type="menu" datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <menupopup> <menuitem uri="?" label="?name"/> </menupopup> </action> </template> </button> <button label="children" oncommand="alert(this.previoussibling.childnodes.
length);"/> in this example, the datasources attribute has been placed on a menu-type button.
Adding Labels and Images - Archive of obsolete content
</description> you can set the text via script using the textcontent property, as in the following example: <description id="text" width="200"/> document.getelementbyid('text').textcontent = "some
lengthy word wrapped text goes here."; internally, both the label element and the description elements are the same.
Document Object Model - Archive of obsolete content
the following example shows how to iterate over the children of the root node: var childnodes = document.documentelement.childnodes; for (var i = 0; i < childnodes.
length; i++) { var child = childnodes[i]; // do something with child } the childnodes variable will hold the children of the document root element.
RDF Datasources - Archive of obsolete content
resources name http://home.netscape.com/nc-rdf#name name of the file url http://home.netscape.com/nc-rdf#url url of the file content-
length http://home.netscape.com/nc-rdf#content-
length the
length of the file.
SAX - Archive of obsolete content
on of the most commonly used content handler: 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='" + ...
Function.arity - Archive of obsolete content
the arity property used to return the number of arguments expected by the function, however, it no longer exists and has been replaced by the function.prototype.
length property.
New in JavaScript 1.4 - Archive of obsolete content
new features in javascript 1.4 exception handling (throw and try...catch) in operator instanceof operator changed functionality in javascript 1.4 eval() changes (cannot be called indirectly and no longer a method of object) arguments not a property of functions deprecated function.arity in favor of function.
length changes to liveconnect ...
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.__par...
Object.prototype.watch() - Archive of obsolete content
class person { constructor(name, age) { this.watch('age', this._isvalidassignment.bind(this)); this.watch('name', this._isvalidassignment.bind(this)); this.name = name; this.age = age; } tostring() { return this.name + ', ' + this.age; } _isvalidassignment(id, oldval, newval) { if (id === 'name' && (!newval || newval.
length > 30)) { throw new rangeerror('invalid name for ' + this); } if (id === 'age' && (newval < 0 || newval > 200)) { throw new rangeerror('invalid age for ' + this); } return newval; } } const will = new person('will', 29); console.log(will); // will, 29 try { will.name = ''; } catch (e) { console.log(e); } try { will.age = -4; } catch (e) { console.log(e);...
ParallelArray - Archive of obsolete content
syntax new parallelarray() new parallelarray([element0, element1, ...]) new parallelarray(array
length, elementalfunction) parallelarray instances properties
length reflects the number of elements in the parallelarray.
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
listing 11 - consuming the xml feed <script runat="server"> var r = jaxer.web.get("service.html", {as: 'e4x'}); for (var i=0, len = r.comment.
length(); i<len; i++) { var comment = r.comment[i]; document.write('id: ' + comment.@id + '<br/>'); document.write('name: ' + comment.@name + '<br/>'); document.write('message: ' + comment.@message + '<br/>'); document.write('<hr/>'); } </script> the code in listing 11 is very simple.
Implementation Status - Archive of obsolete content
y applied via a bind to an element fails to apply to child attributes 342319; 6.1.5 calculate supported 6.1.6 constraint supported 6.1.7 p3ptype unsupported 279049; 6.2.1 atomic datatype partial we will support simpletype's using
length, min
length, max
length, pattern, maxinclusive, mininclusive, maxexclusive, minexclusive, totaldigits, and fractiondigits 7.
WebVR — Virtual Reality for the Web - Game development
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] instanceof positionsensorvrdevice && devices[i].hardwareunitid === ghmd.hardwareunitid) { gpositionsensor = devices[i]; break; } } } }); this code will loop through the available ...
Audio for Web games - Game development
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.currenttime > stoptime) { this.pause(); } }, false); note: you can try out our audio sprite player live on jsfiddle.
Win the game - Game development
add the following new code into your ballhitbrick() function: function ballhitbrick(ball, brick) { brick.kill(); score += 10; scoretext.settext('points: '+score); var count_alive = 0; for (i = 0; i < bricks.children.
length; i++) { if (bricks.children[i].alive == true) { count_alive++; } } if (count_alive == 0) { alert('you won the game, congratulations!'); location.reload(); } } we loop through the bricks in the group using bricks.children, checking for the aliveness of each with each brick's .alive() method.
2D maze game with device orientation - Game development
after leveldata, but still in the initlevels function, we're adding the blocks into an array in the for loop using some of the framework-specific methods: for(var i=0; i<this.maxlevels; i++) { var newlevel = this.add.group(); newlevel.enablebody = true; newlevel.physicsbodytype = phaser.physics.arcade; for(var e=0; e<this.leveldata[i].
length; e++) { var item = this.leveldata[i][e]; newlevel.create(item.x, item.y, 'element-'+item.t); } newlevel.setall('body.immovable', true); newlevel.visible = false; this.levels.push(newlevel); } first, add.group() is used to create a new group of items.
Forbidden header name - MDN Web Docs Glossary: Definitions of Web-related terms
forbidden header names start with proxy- or sec-, or are one of the following names: accept-charset accept-encoding access-control-request-headers access-control-request-method connection content-
length cookie cookie2 date dnt expect feature-policy host keep-alive origin proxy- sec- referer te trailer transfer-encoding upgrade via note: the user-agent header is no longer forbidden, as per spec — see forbidden header name list (this was implemented in firefox 43) — it can now be set in a fetch headers object, or via xhr setrequestheader().
WAI-ARIA basics - Learn web development
when this is checked/unchecked, we update the text inside the hidden live region to tell screenreader users what the result of checking this checkbox is, as well as updating the aria-disabled state, and some visual indicators too: function togglemusician(bool) { let instruitem = formitems[formitems.
length-1]; if(bool) { instruitem.input.disabled = false; instruitem.label.style.color = '#000'; instruitem.input.setattribute('aria-disabled', 'false'); hiddenalert.textcontent = 'instruments played field now enabled; use it to tell us what you play.'; } else { instruitem.input.disabled = true; instruitem.label.style.color = '#999'; instruitem.input.setattribute('aria-dis...
Multiple-column layout - Learn web development
using your example above, change the size of the gap by adding a column-gap property: .container { column-width: 200px; column-gap: 20px; } you can play around with different values — the property accepts any
length unit.
Practical positioning examples - Learn web development
put the following block of code, exactly as written in between your opening and closing <script> tags (you'll find these below the html content): var tabs = document.queryselectorall('.info-box li a'); var panels = document.queryselectorall('.info-box article'); for(i = 0; i < tabs.
length; i++) { var tab = tabs[i]; settabhandler(tab, i); } function settabhandler(tab, tabpos) { tab.onclick = function() { for(i = 0; i < tabs.
length; i++) { tabs[i].classname = ''; } tab.classname = 'active'; for(i = 0; i < panels.
length; i++) { panels[i].classname = ''; } panels[tabpos].classname = 'active-panel'; } } this code does the following: f...
Example 4 - Learn web development
'.option'), selectedindex = getindex(select); select.tabindex = 0; select.previouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, index) { option.addeventlistener('click', function (event) { updatevalue(select, index); }); }); select.addeventlistener('keyup', function (event) { var
length = optionlist.
length, index = getindex(select); if (event.keycode === 27) { deactivateselect(select); } if (event.keycode === 40 && index <
length - 1) { index++; } if (event.keycode === 38 && index > 0) { index--; } updatevalue(select, index); }); }); }); result ...
Example 5 - Learn web development
lue(select, index); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); select.addeventlistener('keyup', function (event) { var
length = optionlist.
length, index = getindex(select); if (event.keycode === 27) { deactivateselect(select); } if (event.keycode === 40 && index <
length - 1) { index++; } if (event.keycode === 38 && index > 0) { index--; } updatevalue(select, index); }); }); }); result ...
How to build custom form controls - Learn web development
// each time a user clicks on an option, we update the value accordingly optionlist.foreach(function (option, index) { option.addeventlistener('click', function (event) { updatevalue(select, index); }); }); // each time a user uses their keyboard on a focused control, we update the value accordingly select.addeventlistener('keyup', function (event) { var
length = optionlist.
length, index = getindex(select); // when the user hits the down arrow, we jump to the next option if (event.keycode === 40 && index <
length - 1) { index++; } // when the user hits the up arrow, we jump to the previous option if (event.keycode === 38 && index > 0) { index--; } updatevalue(select, index); }); }); }); in the code abov...
Sending forms through JavaScript - Learn web development
e.dom.addeventlistener( "change", function () { if( reader.readystate === filereader.loading ) { reader.abort(); } reader.readasbinarystring( file.dom.files[0] ); } ); // senddata is our main function function senddata() { // if there is a selected file, wait it is read // if there is not, delay the execution of the function if( !file.binary && file.dom.files.
length > 0 ) { settimeout( senddata, 10 ); return; } // to construct our multipart form data request, // we need an xmlhttprequest instance const xhr = new xmlhttprequest(); // we need a separator to define each part of the request const boundary = "blob"; // store our body request in a string.
UI pseudo-classes - Learn web development
lling-checkbox').addeventlistener('change', togglebilling); }, false); function togglebilling() { // select the billing text fields let billingitems = document.queryselectorall('#billing input[type="text"]'); // select the billing text labels let billinglabels = document.queryselectorall('.billing-label'); // toggle the billing text fields and labels for (let i = 0; i < billingitems.
length; i++) { billingitems[i].disabled = !billingitems[i].disabled; if(billinglabels[i].getattribute('class') === 'billing-label disabled-label') { billinglabels[i].setattribute('class', 'billing-label'); } else { billinglabels[i].setattribute('class', 'billing-label disabled-label'); } } } it uses the change event to let the user enable/disable the billing fields, and t...
Adding vector graphics to the Web - Learn web development
function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.
length); textarea.value = front + text + back; caretpos = caretpos + text.
length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not ...
From object to iframe — other embedding technologies - Learn web development
function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.
length); textarea.value = front + text + back; caretpos = caretpos + text.
length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not t...
Responsive images - Learn web development
a space the width of the slot the image will fill when the media condition is true (480px) note: for the slot width, you may provide an absolute
length (px, em) or a
length relative to the viewport (vw), but not percentages.
HTML table basics - Learn web development
name mass (1024kg) diameter (km) density (kg/m3) gravity (m/s2)
length of day (hours) distance from sun (106km) mean temperature (°c) number of moons notes terrestial planets mercury 0.330 4,879 5427 3.7 4222.6 57.9 167 0 closest to the sun venus 4.87 12,104 5243 8.9 2802.0 108.2 464 0 earth 5.97 12,756 5514 9.8 24.0 149.6 15 1 our world ...
Client-side storage - Learn web development
function init() { // loop through the video names one by one for(let i = 0; i < videos.
length; i++) { // open transaction, get object store, and get() each video by name let objectstore = db.transaction('videos_os').objectstore('videos_os'); let request = objectstore.get(videos[i].name); request.onsuccess = function() { // if the result exists in the database (is not undefined) if(request.result) { // grab the videos from idb and display them using disp...
Storing the information you need — Variables - Learn web development
you can have a simple object that represents a box and contains information about its width,
length, and height, or you could have an object that represents a person, and contains data about their name, height, weight, what language they speak, how to say hello to them, and more.
JavaScript First Steps - Learn web development
useful string methods now we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the
length of a text string, joining and splitting strings, substituting one character in a string for another, and more.
Working with Svelte stores - Learn web development
'checked' : 'unchecked'} ${todos.
length} todos` } const removecompletedtodos = () => { $alert = `removed ${todos.filter(t => t.completed).
length} todos` todos = todos.filter(t => !t.completed) } so basically, we've imported the store and updated it on every event, which causes a new alert to show each time.
Browser chrome tests
a simple test would look like this: function test() { ok(gbrowser, "gbrowser exists"); is(gbrowser.tabs.
length, 1, "browser has 1 tab"); } the test() function is invoked by the test harness when the test is run.
Creating a Login Manager storage module
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(...
Debugging on Windows
for xpcom strings (the "external" string api) you can use the following values: ;; mozilla (1.9) ; internal strings nsastring_internal=<mdata,su>,
length=<m
length,u> nsacstring_internal=<mdata,s>,
length=<m
length,u> ; xpcom strings nsastring=<nsstringcontainer.v,su>,
length=<nsstringcontainer.d1,u> nsacstring=<nscstringcontainer.v,s>,
length=<nscstringcontainer.d1,u> nsstringcontainer=<v,su>,
length=<d1,u> nscstringcontainer=<v,s>,
length=<d1,u> there is a more extensive version of this file in progress in autoexpforvc8.
Reviewer Checklist
when making ui changes, be aware of the fact that strings will be different
lengths in different locales.
Communicating with frame scripts
// on some event var browsermm = gbrowser.selectedbrowser.messagemanager; browsermm.loadframescript("chrome://my-addon@me.org/content/frame-script.js", false); messagemanagers.push(browsermm); console.log(messagemanagers.
length); we can listen for message-manager-disconnect to update the array when the message managers disconnect (for example because the user closed the tab): function myobserver() { } myobserver.prototype = { observe: function(subject, topic, data) { var index = messagemanagers.indexof(subject); if (index != -1) { console.log("one of our message managers disconnected"); mms.spli...
overflow-clip-box-block
"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-block: padding-box; } javascript function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.
length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c csswg; it is not yet on the standard track but, if accepted, should appear in css overflow module level 3.
overflow-clip-box-inline
> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-inline: padding-box; } javascript function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.
length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c csswg; it is not yet on the standard track but, if accepted, should appear in css overflow module level 3.
overflow-clip-box
ll padding-box"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box: padding-box; } js function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.
length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c csswg; it is not yet on the standard track but, if accepted, should appear in css overflow module level 3.
HTTP Cache
in this case, the content-
length (or different indicator) header doesn't equal to the data size reported by the cache entry.
IME handling guide
when native ime notifies gecko of a composition string change, a caret position change and/or a change of
length of clauses, a widget dispatches widgetcompositionevent with ecompositionchange event.
Add-on Manager
for example, to take a look at the add-ons that were disabled at startup: components.utils.import("resource://gre/modules/addonmanager.jsm"); let addonids = addonmanager.getstartupchanges(addonmanager.startup_change_disabled); if (addonids.
length > 0) { // addonids is now an array of the add-on ids that have been disabled alert("note: " + addonids.
length + " add-ons have been disabled."); } open add-on manager tab the add-on manager tab can be opened programatically with the function browseropenaddonsmgr which is available on chrome window of "navigator:browser" type.
CustomizableUI.jsm
console.log('my widget moved'); var useicon; if (aarea == customizableui.area_panel) { useicon = 'chrome://branding/content/icon32.png'; } else { useicon = 'chrome://branding/content/icon16.png'; } var myinstances = customizableui.getwidget('noida').instances; for (var i=0; i<myinstances.
length; i++) { myinstances[i].node.setattribute('image', useicon); } }, onwidgetdestroyed: function(awidgetid) { console.log('a widget destroyed so removing listener, arguments:', arguments); if (awidgetid != 'noida') { return } console.log('my widget destoryed'); customizableui.remov...
NetUtil.jsm
createinstance(ci.nsistringinputstream); istream.setdata(test_data, test_data.
length); netutil.asynccopy(istream, ostream, function(aresult) { if (!components.issuccesscode(aresult)) { // an error occurred!
Examples
const {cu} = require("chrome"); const {textdecoder, textencoder, os} = cu.import("resource://gre/modules/osfile.jsm", {}); /* files: an array of file paths */ function readtextfiles(files) { let promises = [], decoder = new textdecoder(); for (let i = 0; i < files.
length; i++) { let promise = os.file.read(files[i]) promise = promise.then(function onsuccess(array) { return decoder.decode(array); }); promises.push(promise); } return promise.all(promises); } let folder = "/path/to/folder"; let promise = readtextfiles([ os.path.join(folder, "read.me"), os.path.join(folder, "home.html") ]); promise.then( function onsuccess(filescontent...
Sqlite.jsm
conn.executetransaction(async function complextransaction() { await conn.execute("insert into mytable values (?, ?)", ["foo", "bar"]); let data = await conn.execute("select * from mytable"); if (data.
length < 5) { throw new error("we don't have the expected 5 rows to perform the next operation!"); } // ...
source-editor.jsm
the default is 0 if backwards is false, or text.
length if backwards is true.
Localization technical reviews
string
lengths in pipnss.properties there are some character limits in the security/manager/chrome/pipnss/pipnss.properties file that you should be aware of.
NSS_3.12.1_release_notes.html
] bug 434099: nss relies on unchecked pkcs#11 object attribute values bug 434187: fix the gcc compiler warnings in nss/lib bug 434398: libpkix cannot find issuer cert immediately after checking it with ocsp bug 434808: certutil -b deadlock when importing two or more roots bug 434860: coverity 1150 - dead code in ocsp_createcertid bug 436428: remove unneeded assert from sec_pkcs7encrypt
length bug 436430: make nss public headers compilable with no_nspr_10_support defined bug 436577: uninitialized variable in sec_pkcs5createalgorithmid bug 438685: libpkix doesn't try all the issuers in a bridge with multiple certs bug 438876: signtool is still using static libraries.
NSS_3.12.2_release_notes.html
bug 432260: [[@ pkix_pl_httpdefaultclient_hdrcheckcomplete - pkix_pl_memcpy] crashes when there is no content-
length header in the http response bug 436599: pkix: aia extension is not used in some bridge ca / known certs configuration bug 437804: certutil -r for cert renewal should derive the subject from the cert if none is specified.
NSS 3.12.5 release_notes
if the string parameter is null (as opposed to empty, zero
length), then the softoken default is used.
NSS 3.12.6 release notes
t_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 alternate library for sqlite bug 524167: crash in [[@ find_objects_by_template - nsstoken_findcertificatebyissuerandserialnumber] bug 526910: maxresponse
length (initialized to pkix_default_max_response_
length) is too small for downloading some crls.
NSS 3.17.3 release notes
notable changes in nss 3.17.3 the quickder decoder now decodes
lengths robustly (cve-2014-1569).
NSS 3.30 release notes
rsa-pss signatures produced by key pairs with a modulus bit
length that is not a multiple of 8 are now supported.
NSS 3.44.4 release notes
bugs fixed in nss 3.44.4 cve-2020-12399 - force a fixed
length for dsa exponentiation compatibility nss 3.44.4 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 as finished bug 1550708 - fix gyp scripts on solaris sparc so that libfreebl_64fpu_3.s...
NSS 3.46 release notes
bugs fixed in nss 3.46 bug 1572164 - don't unnecessarily free session in nsc_wrapkey bug 1574220 - improve controls after errors in tstcln, selfserv and vfyserv cmds bug 1550636 - upgrade sqlite in nss to a 2019 version bug 1572593 - reset advertised extensions in ssl_constructextensions bug 1415118 - nss build with ./build.sh --enable-libpkix fails bug 1539788 - add
length checks for cryptographic primitives (cve-2019-17006) bug 1542077 - mp_set_ulong and mp_set_int should return errors on bad values bug 1572791 - read out-of-bounds in der_decodetimechoice_util from sslexp_delegatecredential bug 1560593 - cleanup.sh script does not set error exit code for tests that "failed with core" bug 1566601 - add wycheproof test vectors for aes-kw bug 1571316 - curve2551...
NSS 3.47 release notes
cted bit set bug 1583068 - nss 3.47 should pick up fix from bug 1575821 (nspr 4.23) bug 1152625 - support aes hw acceleration on armv8 bug 1549225 - disable dsa signature schemes for tls 1.3 bug 1586947 - pk11_importandreturnprivatekey does not store nickname for ec keys bug 1586456 - unnecessary conditional in pki3hack, pk11load and stanpcertdb bug 1576307 - check mechanism param and param
length before casting to mechanism-specific structs bug 1577953 - support longer (up to rfc maximum) hkdf outputs bug 1508776 - remove refcounting from sftk_freesession (cve-2019-11756) bug 1494063 - support tls exporter in tstclnt and selfserv bug 1581024 - heap overflow in nss utility "derdump" bug 1582343 - soft token mac verification not constant time bug 1578238 - handle invald tag sizes for ...
NSS 3.52.1 release notes
bugs fixed in nss 3.52.1 cve-2020-12399 - force a fixed
length for dsa exponentiation compatibility nss 3.52.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS Sample Code Sample1
// utility function to print hex data static void printbuffer(unsigned char *digest, unsigned int len) { int i; cout << "
length: " << len << endl; for(i = 0;i < len;i++) printf("%02x ", digest[i]); cout << endl; } // xxx data protection // - takes an input buffer, applies the encryption // and mac, and generates a buffer with the result.
FC_SignFinal
if psignature is null the
length of the signature is returned and fc_signfinal may be called again with psignature set to retrieve the signature.
NSC_InitToken
syntax ck_rv nsc_inittoken( ck_slot_id slotid, ck_char_ptr ppin, ck_ulong ulpinlen, ck_char_ptr plabel ); parameters nsc_inittoken() has the following parameters: slotid the id of the token's slot ppin the password of the security officer (so) ulpinlen the
length in bytes of the so password plabel points to the label of the token, which must be padded with spaces to 32 bytes and not be null-terminated description nsc_inittoken() initializes a brand new token or re-initializes a token that was initialized before.
NSC_Login
syntax ck_rv nsc_login( ck_session_handle hsession, ck_user_type usertype, ck_char_ptr ppin, ck_ulong ulpinlen ); parameters nsc_login() takes four parameters: hsession [in] a session handle usertype [in] the user type (cku_so or cku_user) ppin [in] a pointer that points to the user's pin ulpinlen [in] the
length of the pin description nsc_login() logs a user into a token.
NSS reference
pkcs #7 functions based on "archived pkcs #7 functions documentation." pkcs #5 functions password-based encryption sec_pkcs5getiv sec_pkcs5createalgorithmid sec_pkcs5getcryptoalgorithm sec_pkcs5getkey
length sec_pkcs5getpbealgorithm sec_pkcs5isalgorithmpbealg pkcs #12 functions based on "archived pkcs #12 functions documentation." used to exchange data such as private keys and certificates between two parties.
sslfnc.html
to avoid the overhead of repeating the full ssl handshake in situations like this, the ssl protocol supports the use of a session cache, which retains information about each connection for some predetermined
length of time.
sslintro.html
to avoid the overhead of repeating the full ssl handshake in situations like this, the ssl protocol supports the use of a session cache, which retains information about each connection, such as the master secret generated during the ssl handshake, for a predetermined
length of time.
TLS Cipher Suite Discovery
the sslciphersuiteinfo structure contains this information, declared in "sslt.h": typedef struct sslciphersuiteinfostr { pruint16
length; pruint16 ciphersuite; /* cipher suite name */ const char * ciphersuitename; /* server authentication info */ const char * authalgorithmname; sslauthtype authalgorithm; /* key exchange algorithm info */ const char * keatypename; sslkeatype keatype; /* symmetric encryption info */ cons...
NSS Tools pk12util
dfile specify the text file containing the slot's password -k slotpassword specify a slot's password -w p12filepasswordfile specify the text file containing the pkcs 12 file's password -w p12filepassword specify the pkcs 12 file's password -c key-cipher specify the key encryption algorithm -c certcipher specify the pfx encryption algorithm -m | --key_len keylen specify the desired
length of the symmetric key to be used to encrypt the private key -n | --cert_key_len certleylen specify the desired
length of the symmetric key to be used to encrypt the top level protocol data unit password based encryption pkcs #12 provides for not only the protection of the private keys but also the certificate and meta-data associated with the keys.
certutil
the
length of the validity period is set with the -v argument.
Tutorial: Embedding Rhino
string s = ""; for (int i=0; i < args.
length; i++) { s += args[i]; } evaluating a script the code object result = cx.evaluatestring(scope, s, "<cmd>", 1, null); uses the context cx to evaluate a string.
Rhino FAQ
for instance, to create an array of java.lang.string of
length five, do var stringarray = java.lang.reflect.array.newinstance(java.lang.string, 5); then if you wish to assign the string "hi" to the first element, simply execute stringarray[0] = "hi".
Small Footprint
on a recent build, the
length of js.jar was 603,127 bytes corresponding to 1,171,708 bytes of all uncompressed rhino classes with debug information included.
Rhino overview
otherwise the ecma conformant version is used (an array is constructed with no elements but with
length property equal to i).
Performance Hints
for example, you could rewrite function sum(a) { result = 0; for (i=0; i < a.
length; i++) result += a[i]; return result; } as function sum(a) { var result = 0; for (var i=0; i < a.
length; i++) result += a[i]; return result; } this is not equivalent code because the second version does not modify global variables result and i.
How to embed the JavaScript engine
// js::autovaluevector argv(cx); // argv.resize(2); js::autovaluearray<2> argv(cx); argv[0].setint32(1); argv[1].setint32(2); then call the function: // [spidermonkey 24] pass arguments
length and the 'jsval *' pointer.
Exact Stack Rooting
bool returnfoo(jscontext *cx, mutablehandlestring out) { out.set(js_newstringcopyz(cx, "foo")); return bool(out); } size_t get
lengthfoo(jscontext *cx) { rootedstring s(cx); if (returnfoo(cx, &s)) return js_getstring
length(s); return size_t(-1); } all methods in the js-api that return gcpointers have been changed to this out-param style.
Property cache
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}.
JS::CompileOptions
forceasync bool false means js::cancompileoffthread may returns false depends on the
length of the code.
JS::Value
boolean jsval_is_boolean(v) jsval_true, jsval_false, boolean_to_jsval(b) jsval_to_boolean(v) number jsval_is_number(v), jsval_is_int(v), jsval_is_double(v) jsval_zero, jsval_one, int_to_jsval(i), double_to_jsval(d) jsval_to_int(v), jsval_to_double(v) string jsval_is_string(v) string_to_jsval(str) jsval_to_string(v), js_getstringchars(str), js_getstring
length(str) object !jsval_is_primitive(v) object_to_jsval(obj) jsval_to_object(v) there was also a further method, jsval_is_object(v), which did not what you would expect -- return true if the value was an object -- but rather returned true if the value was an object or if it was null.
JSVAL_IS_STRING
to access the content of a string jsval, use jsval_to_string, js_getstringchars, and js_getstring
length.
JS_AliasProperty
creating an alias does not change the
length of the property array.
JS_AlreadyHasOwnProperty
namelen size_t (in js_alreadyhasownucproperty only) the
length of name, in characters; or the special value (size_t) -1 to indicate that name is null-terminated.
JS_BeginRequest
any blocking native call, or
lengthy computation that can race safely with the garbage collector, within a request, must be bracketed with js_suspendrequest and js_resumerequest.
JS_ConcatStrings
the result could be the same as one of the input strings, if the other string is zero
length.
nsIMimeHeaders
ameters 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 ...
nsIMsgSearchCustomTerm
* * @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 mes...
nsIOutputStream
nsresult writestream(const nsacstring& asource, nsiinputstream* astream) { pruint32 num; return astream->writesegments(copysegment, (void*) &asource, asource.
length(), &num); } remarks this interface was frozen for gecko 1.0.
nsIProcess
var args = ["argument1", "argument2"]; process.run(false, args, args.
length); see also nsifile nsiprocess2 obsolete since gecko 1.9.2 ...
nsIProperties
void getkeys( out pruint32 count, [array, size_is(count), retval] out string keys ); parameters count the
length of the result array.
nsISHistory
max
length long used to get/set the maximum number of toplevel documents, session history can hold for each instance.
nsITransferable
adatalen the
length of the data, or 0 if adata is an nsiflavordataprovider.
nsITreeColumns
length long an alias for count (for the benefit of scripts which treat this as an array).
nsIURIFixup
the fixup object implementer should honour this flag and only perform any
lengthy keyword (or search) operation if it is set.
nsIURLParser
os, out long schemelen, out unsigned long authoritypos, out long authoritylen, out unsigned long pathpos, out long pathlen); void parseuserinfo(in string userinfo, in long userinfolen, out unsigned long usernamepos, out long usernamelen, out unsigned long passwordpos, out long passwordlen); methods the string to parse in the methods may be given as a null terminated string, in which case the
length argument should be -1.
nsIWebContentHandlerRegistrar
ng, 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 w...
nsIXPConnect
this method will turn debug mode on or off when the context stack reaches zero
length.
nsIZipWriter
ers\3k2kyc1\documents\prefs\prefs var xpi = fu.file(dir.path + '\\' + dir.leafname + '.zip'); zw.open(xpi, pr.pr_rdwr | pr.pr_create_file | pr.pr_truncate); //pr_truncate overwrites if file exists //pr_create_file creates file if it dne //pr_rdwr opens for reading and writing //recursviely add all var dirarr = [dir]; //adds dirs to this as it finds it for (var i=0; i<dirarr.
length; i++) { cu.reporterror('adding contents of dir['+i+']: ' + dirarr[i].leafname + ' path: ' + dirarr[i].path); var direntries = dirarr[i].directoryentries; while (direntries.hasmoreelements()) { var entry = direntries.getnext().queryinterface(ci.nsifile); //entry is instance of nsifile so here https://developer.mozilla.org/docs/xpcom_interface_reference/nsifile ...
NS_CStringGetData
return values the ns_cstringgetdata function returns the
length of adata, measured in storage units (bytes).
NS_StringGetData
return values the ns_stringgetdata function returns the
length of adata, measured in storage units (bytes).
XPIDL Syntax
the following is a list of potential features which are parseable but may not result in expected code: struct, union, and enumerated types array declarators (appears to be supported in xpidl_header.c but not xpidl_typelib.c) exception declarations module declarations variable arguments (that makes the abnf get more wonky) sequence types max-
length strings fixed-point numbers "any" and "long double" types.
XPIDL
resources (mostly outdated) some unsorted notes including a keyword list xpidl is a tool for generating c++ headers, java interfaces, xpconnect typelibs, and html documentation from xpidl files generating xpt files on windows a google groups post with instructions on how to use variable-
length argument lists using xpidl.
Gloda examples
msadded(aitems, acollection) { }, onitemsmodified: function _onitemsmodified(aitems, acollection) { }, onitemsremoved: function _onitemsremoved(aitems, acollection) { }, onquerycompleted: function _onquerycompleted(id_coll) { //woops no identity if (id_coll.items.
length <= 0) return; id = id_coll.items[0]; //now we use the identity to find all messages that person was involved with msg_q=gloda.newquery(gloda.noun_message) msg_q.involves(id) msg_q.getcollection({ /* called when new items are returned by the database q...
MailNews fakeserver
icletogroup 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.
Mail composition back end
essage *msgtoreplace, - if the delivery mode is set to nsmsgsaveasdraft, this is a pointer to the the nsimessage object for the message that needs to be replaced const char *attachment1_type, const char *attachment1_body, pruint32 attachment1_body_
length, - the full text of the first attachment is provided via `attachment1_type' `attachment1_body' and `attachment1_body_
length'.
Activity Manager examples
ementation 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 (initiator) { nsisupports* ptr; rv = ob...
Use SQLite
logs (id unique, log)'); tx.executesql('insert into logs (id, log) values (1, "foobar")'); tx.executesql('insert into logs (id, log) values (2, "logmsg")'); msg = '<p>log message created and row inserted.</p>'; document.queryselector('#status').innerhtml = msg; }); db.transaction(function (tx) { tx.executesql('select * from logs', [], function (tx, results) { var len = results.rows.
length, i; msg = "<p>found rows: " + len + "</p>"; document.queryselector('#status').innerhtml += msg; for (i = 0; i < len; i++){ msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; document.queryselector('#status').innerhtml += msg; } }, null); }); ...
Using Objective-C from js-ctypes
// [nsstring getbytes:max
length:used
length:encoding:options:range:remainingrange:] sel foo = sel_registername("getbytes:max
length:used
length:encoding:options:range:remainingrange:"); method which returns non-id type if a method returns a type which is compatible with id, we can cast it, or just use it as id type (since we don't need to use a different type for each instance, in terms of c).
PointerType
note: this is never ctypes.void_t or an array type with an unspecified
length.
StructType
note: this is never ctypes.void_t or an array type with an unspecified
length.
ctypes
method overview ctype arraytype(type[,
length]); cdata cast(data, type); ctype functiontype(abi, returntype[, argtype1, ...]); cdata int64(n); string libraryname(name); library open(libspec); ctype pointertype(typespec); ctype structtype(name[, fields]); cdata uint64(n); properties property type description errno number the value of the latest system error.
js-ctypes reference
ctypes.arraytype(type, [
length]) and the .array() method, which creates a new type describing an array of objects of an existing type.
Initialization and Destruction - Plugins
to ensure that the browser does not crash or leak memory when the saved data is discarded, the buf field should be a flat structure (a simple structure with no allocated substructures) allocated with npn_memalloc, as in this example: char* mydata = "here is some saved data.\n"; int32 my
length = strlen(mydata) + 1; *save = (npsaveddata*) npn_memalloc(sizeof(npsaveddata)); (*save)->len = my
length; (*save)->buf = (void*) npn_memalloc(my
length); strcpy((*save)->buf, mydata); if you allocate saved instance data in npp_destroy, be sure to allocate memory with this function, since the browser can delete the saved data with the equivalent of npn_memalloc at any time.
Debugger.Frame - Firefox Developer Tools
when non-null, this is an object, allocated in the same global as the debugger, with array.prototype on its prototype chain, a non-writable
length property, and properties whose names are array indices.
Monster example - Firefox Developer Tools
here's the code: var monster_count = 5000; var min_name_
length = 2; var max_name_
length = 48; function monster() { function randomint(min, max) { return math.floor(math.random() * (max - min + 1)) + min; } function randomname() { var chars = "abcdefghijklmnopqrstuvwxyz"; var name
length = randomint(min_name_
length, max_name_
length); var name = ""; for (var j = 0; j < name
length; j++) { name += chars[randomint(0, chars.
length-1)]; } return name; } this.name = randomname(); this.eyecount = randomint(0, 25); this.tentaclecount = randomi...
Network request details - Firefox Developer Tools
ame": "backend-timing", "value": "d=74716 t=1560258099074460" }, { "name": "cache-control", "value": "private, must-revalidate, max-age=0" }, { "name": "content-disposition", "value": "inline; filename=api-result.js" }, { "name": "content-encoding", "value": "gzip" }, { "name": "content-
length", "value": "673" }, { "name": "content-type", "value": "text/javascript; charset=utf-8" }, { "name": "date", "value": "tue, 11 jun 2019 13:01:39 gmt" }, { "name": "mediawiki-login-suppressed", "value": "true" }, { "name": "p3p", "value": "cp=\"this is not a p3p policy!
Waterfall - Firefox Developer Tools
to help reduce the
length of pauses, spidermonkey implements incremental gc: this means that it can perform garbage collection in fairly small increments, letting the program run in between.
Settings - Firefox Developer Tools
to change the threshold at which attributes are truncated, you can edit the about:config preference "devtools.markup.collapseattribute
length".
Rich output - Firefox Developer Tools
) (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 "target" icon next to the node in the console output: click it to switch to the inspector with that node selected.
Animation.finish() - Web APIs
that is, if the animation is playing forward, it sets the playback time to the
length of the animation sequence, and if the animation is playing in reverse (having had its reverse() method called), it sets the playback time to 0.
AudioBufferSourceNode.loopEnd - Web APIs
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; song
length = buffer.duration; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.connect(audioctx.destination); source.loop = true; loopstartcontrol.setattribute('max', math.floor(song
length)); loopendcontrol.setattribute('max', math.floor(song
length)); }, function(e){"error with decoding audio data" + e.err}); ...
AudioBufferSourceNode.loopStart - Web APIs
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; song
length = buffer.duration; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.connect(audioctx.destination); source.loop = true; loopstartcontrol.setattribute('max', math.floor(song
length)); loopendcontrol.setattribute('max', math.floor(song
length)); }, function(e){"error with decoding audio data" + e.err}); ...
AudioBufferSourceNode - Web APIs
ybuffer = 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.
AudioContext.createJavaScriptNode() - Web APIs
trates the use of createjavascriptnode(): var sinewave = function(context) { var that = this; this.x = 0; // initial sample number this.context = context; this.node = context.createjavascriptnode(1024, 1, 1); this.node.onaudioprocess = function(e) { that.process(e) }; } sinewave.prototype.process = function(e) { var data = e.outputbuffer.getchanneldata(0); for (var i = 0; i < data.
length; ++i) { data[i] = math.sin(this.x++); } } sinewave.prototype.play = function() { this.node.connect(this.context.destination); } sinewave.prototype.pause = function() { this.node.disconnect(); } see also generating tones with the web audio api exploring the html5 web audio: visualizing sound ...
AudioParamDescriptor - Web APIs
e-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 ?
AudioProcessingEvent - Web APIs
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(); } ...
AudioScheduledSourceNode.start() - Web APIs
if no value is passed then the duration will be equal to the
length of the audio buffer minus the offset value return value undefined exceptions invalidstatenode the node has already been started.
AudioTrackList.onremovetrack - Web APIs
document.queryselector("my-video").audiotracks.onremovetrack = function(event) { mytrackcount = document.queryselector("my-video").audiotracks.
length; }; the current number of audio tracks remaining in the media element is obtained from audiotracklist property
length.
AudioWorkletNode.parameters - Web APIs
e-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 ?
AudioWorkletNode - Web APIs
// white-noise-processor.js class whitenoiseprocessor extends audioworkletprocessor { 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 } }) return true } } registerprocessor('white-noise-processor', whitenoiseprocessor) next, in our main script file we'll load the processor, create an instance of audioworkletnode passing it the name of the processor, and connect the node to an audio graph.
AudioWorkletProcessor.parameterDescriptors (static getter) - Web APIs
e-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 ?
AudioWorkletProcessor - Web APIs
// white-noise-processor.js class whitenoiseprocessor extends audioworkletprocessor { 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 } }) return true } } registerprocessor('white-noise-processor', whitenoiseprocessor) next, in our main script file we'll load the processor, create an instance of audioworkletnode, passing it the name of the processor, then connect the node to an audio graph.
Background Tasks API - Web APIs
function runtaskqueue(deadline) { while ((deadline.timeremaining() > 0 || deadline.didtimeout) && tasklist.
length) { let task = tasklist.shift(); currenttasknumber++; task.handler(task.data); schedulestatusrefresh(); } if (tasklist.
length) { taskhandle = requestidlecallback(runtaskqueue, { timeout: 1000} ); } else { taskhandle = 0; } } runtaskqueue()'s core is a loop which continues as long as there's time left (as determined by checking deadline.timeremaining) to be sure ...
BaseAudioContext.createScriptProcessor() - Web APIs
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(); } ...
Blob.type - Web APIs
var i, fileinput, files, allowedfiletypes; // fileinput is a htmlinputelement: <input type="file" multiple id="myfileinput"> fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (simliar to nodelist) files = fileinput.files; // our application only allows gif, png, and jpeg images allowedfiletypes = ["image/png", "image/jpeg", "image/gif"]; for (i = 0; i < files.
length; i++) { // test if file.type is an allowed file type.
Body.text() - Web APIs
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.target.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; }); }); } ...
CSS numeric factory functions - Web APIs
syntax css.number(number); css.percent(number); // <
length> css.em(number); css.ex(number); css.ch(number); css.ic(number); css.rem(number); css.lh(number); css.rlh(number); css.vw(number); css.vh(number); css.vi(number); css.vb(number); css.vmin(number); css.vmax(number); css.cm(number); css.mm(number); css.q(number); css.in(number); css.pt(number); css.pc(number); css.px(number); // <angle> css.deg(number); css.grad(number); css.rad(number); css.turn(number); // <time> css.s(number); c...
CSSMathSum - Web APIs
h: 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('width').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...
CSSMathValue.operator - Web APIs
n</div> we assign a width with a calculation div { width: calc(50% - 0.5vw); } 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').values ); // cssnumericarray {0: cssunitvalue, 1: cssmathnegate,
length: 2} console.log( stylemap.get('width').operator ); // 'sum' console.log( stylemap.get('width').values[1].operator ) // 'negate' the cssmathvalue.operator returns sum for the equation and negate for the operator on the second value.
CSSStyleDeclaration.setProperty() - Web APIs
tn = document.queryselector('.color'); const box = document.queryselector('.box'); function random(min,max) { const num = math.floor(math.random()*(max-min)) + min; return num; } function randomcolor() { return 'rgb(' + random(0,255) + ', ' + random(0,255) + ', ' + random(0,255) + ')'; } const stylesheet = document.stylesheets[1]; let boxpararule; for(let i = 0; i < stylesheet.cssrules.
length; i++) { if(stylesheet.cssrules[i].selectortext === '.box p') { boxpararule = stylesheet.cssrules[i]; } } function setrandomborder() { const newborder = random(1, 50) + 'px solid ' + randomcolor(); boxpararule.style.setproperty('border', newborder); } function setrandombgcolor() { const newbgcolor = randomcolor(); boxpararule.style.setproperty('background-color', newbgcolor); } ...
CSSStyleSheet.addRule() - Web APIs
if index is not specified, the next index after the last item currently in the list is used (that is, the value of cssstylesheet.cssrules.
length).
CSSStyleSheet.cssRules - Web APIs
examples individual rules within the stylesheet can then be accessed by index: let rulelist = document.stylesheets[0].cssrules; for (let i=0; i < rulelist.
length; i++) { processrule(rulelist[i]); } rules can also be accessed using for...of: let rulelist = document.stylesheets[0].cssrules; for (let rule of rulelist) { processrule(rule); } however, because cssrule is not a proper array, you can't use foreach().
CSSStyleSheet - Web APIs
this is normally used to access individual rules like this: stylesheet.cssrules[i] // where i = 0..cssrules.
length-1 to add or remove items in cssrules, use the cssstylesheet's insertrule() and deleterule() methods.
CSSStyleValue.parse() - Web APIs
const css = cssstylevalue.parse( 'transform', 'translate3d(10px,10px,0) scale(0.5)'); csstransformvalue {0: csstranslate, 1: cssscale,
length: 2, is2d: false} specifications specification status comment css typed om level 1the definition of 'parse()' in that specification.
CSSUnparsedValue.CSSUnparsedValue() - Web APIs
examples let value = new cssunparsedvalue( ['4deg'] ), values = new cssunparsedvalue( ['1em', '#445566', '-45px'] ); console.log( value ); // cssunparsedvalue {0: "4deg",
length: 1} console.log( values ); // cssunparsedvalue {0: "1em", 1: "#445566", 2: "-45px",
length: 3} specifications specification status comment css typed om level 1the definition of 'cssunparsedvalue' in that specification.
CSSValueList - Web APIs
cssvaluelist.
lengthread only an unsigned long representing the number of cssvalues in the list.
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].tostring(); const strokewidth = parseint(args[1]); console.log(thecolor); if ( strokewi...
CanvasRenderingContext2D.arcTo() - Web APIs
= { x: 0, y: 50 }; const p1 = { x: 100, y: 100 }; const p2 = { x: 150, y: 50 }; const p3 = { x: 200, y: 100 }; const labelpoint = function (p, offset, i = 0){ const {x, y} = offset; ctx.beginpath(); ctx.arc(p.x, p.y, 2, 0, math.pi * 2); ctx.fill(); ctx.filltext(`${i}:(${p.x}, ${p.y})`, p.x + x, p.y + y); } const drawpoints = function (points){ for (let i = 0; i < points.
length; i++) { var p = points[i]; labelpoint(p, { x: 0, y: -20 } , i) } } // draw arc const drawarc = function ([p0, p1, p2], r) { ctx.beginpath(); ctx.moveto(p0.x, p0.y); ctx.arcto(p1.x, p1.y, p2.x, p2.y, r); ctx.lineto(p2.x, p2.y); ctx.stroke(); } let t0 = 0; let rr = 0; // the radius that changes over time let a = 0; // angle let pi2 = math.pi * 2; const loop = function (t) { ...
CanvasRenderingContext2D.lineCap - Web APIs
as" 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]; ctx.beginpath(); ctx.moveto(25 + i * 50, 10); ctx.lineto(25 + i * 50, 140); ctx.stroke(); } screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.linecap' in that specification.
Manipulating video using canvas - Web APIs
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 video element is displaying the most recent frame of video data, which look...
Compositing example - Web APIs
on createcanvas() { var canvas = document.createelement("canvas"); canvas.style.background = "url("+op_8x8.data+")"; canvas.style.border = "1px solid #000"; canvas.style.margin = "5px"; canvas.width = width/2; canvas.height = height/2; return canvas; } function runcomposite() { var dl = document.createelement("dl"); document.body.appendchild(dl); while(gco.
length) { var pop = gco.pop(); var dt = document.createelement("dt"); 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...
Using images - Web APIs
s some css to make things look nice: body { background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4f191a; margin: 10px; } img { display: none; } table { margin: 0 auto; } td { padding: 15px; } tying it all together is the javascript to draw our framed images: function draw() { // loop through all images for (var i = 0; i < document.images.
length; i++) { // don't add a canvas for the frame image if (document.images[i].getattribute('id') != 'frame') { // create canvas element canvas = document.createelement('canvas'); canvas.setattribute('width', 132); canvas.setattribute('height', 150); // insert before the image document.images[i].parentnode.insertbefore(canvas,document.images[i]); ct...
Canvas API - Web APIs
html5 canvas deep dive a hands-on, book-
length introduction to the canvas api and webgl.
ChildNode.replaceWith() - Web APIs
with(node) { replacewith("foo"); } // referenceerror: replacewith is not defined polyfill you can polyfill the replacewith() method in internet explorer 10+ and higher with the following code: function replacewithpolyfill() { 'use-strict'; // for safari, and ie > 10 var parent = this.parentnode, i = arguments.
length, currentnode; if (!parent) return; if (!i) // if there are no arguments parent.removechild(this); while (i--) { // i-- decrements i and returns the value of i before the decrement currentnode = arguments[i]; if (typeof currentnode !== 'object'){ currentnode = this.ownerdocument.createtextnode(currentnode); } else if (currentnode.parentnode){ currentnode.parentnod...
Client.url - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: 'window' }).then(function(clientlist) { for (var i = 0; i < clientlist.
length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment service workersthe definition of 'url' in that specification.
Clients.matchAll() - Web APIs
examples clients.matchall(options).then(function(clientlist) { for (var i = 0 ; i < clientlist.
length ; i++) { if (clientlist[i].url === 'index.html') { clients.openwindow(clientlist[i]); // or do something else involving the matching client } } }); specifications specification status comment service workersthe definition of 'clients: matchall' in that specification.
Clipboard.read() - Web APIs
if (result.state == "granted" || result.state == "prompt") { navigator.clipboard.read().then(data => { for (let i=0; i<data.items.
length; i++) { if (data.items[i].type != "image/png") { alert("clipboard contains non-image data.
ContentIndex.getAll() - Web APIs
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.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createelement('ul'); for (const entry of entries) { ...
ContentIndex - Web APIs
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.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createelement('ul'); for (const entry of entries) { ...
Content Index API - Web APIs
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.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createelement('ul'); for (const entry of entries) { ...
CustomElementRegistry.define() - Web APIs
// create a class for the element class wordcount extends htmlparagraphelement { constructor() { // always call super first in constructor super(); // count words in element's parent element var wcparent = this.parentnode; function countwords(node){ var text = node.innertext || node.textcontent return text.split(/\s+/g).
length; } var count = 'words: ' + countwords(wcparent); // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create text node and add word count to it var text = document.createelement('span'); text.textcontent = count; // append it to the shadow root shadow.appendchild(text); // update count when element content changes setinterval...
CustomElementRegistry - Web APIs
// create a class for the element class wordcount extends htmlparagraphelement { constructor() { // always call super first in constructor super(); // count words in element's parent element var wcparent = this.parentnode; function countwords(node){ var text = node.innertext || node.textcontent return text.split(/\s+/g).
length; } var count = 'words: ' + countwords(wcparent); // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create text node and add word count to it var text = document.createelement('span'); text.textcontent = count; // append it to the shadow root shadow.appendchild(text); // update count when element content changes setinterval...
Binary strings - Web APIs
the size of the data so represented is twice as big as it would be in normal binary format, however this will not be visible to the final user, since the
length of javascript strings is calculated using two bytes as the unit.
DOMTokenList.forEach() - Web APIs
lasses.foreach( function(value, key, listobj) { span.textcontent += `${value} ${key}/${this} ++ `; }, "arg" ); result polyfill this polyfill adds compatibility to all browsers supporting es5: if (window.domtokenlist && !domtokenlist.prototype.foreach) { domtokenlist.prototype.foreach = function (callback, thisarg) { thisarg = thisarg || window; for (var i = 0; i < this.
length; i++) { callback.call(thisarg, this[i], i, this); } }; } specifications specification status comment domthe definition of 'foreach() (as iterable<node>)' in that specification.
DataTransfer.mozGetDataAt() - Web APIs
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.mozgetdataat(types[t], i); output("(" + (typeof data) + ") : <" + data + " >\n"); } catch (ex) { output("<>\n"); dump(ex); } } } } specifications this method is not defined in any web standard.
DataTransfer.mozTypesAt() - Web APIs
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.mozgetdataat(types[t], i); output("(" + (typeof data) + ") : <" + data + " >\n"); } catch (ex) { output("<>\n"); dump(ex); } } } } specifications this method is not defined in any web standard.
DataTransferItem.getAsFile() - 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 target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("...
DataTransferItem.getAsString() - 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 target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("...
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 target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html 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 target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("...
DataTransferItem.webkitGetAsEntry() - Web APIs
hat our drop zone can receive the drop: dropzone.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].webkitgetasentry(); if (item) { scanfiles(item, listing); } } }, false); this fetches the list of datatransferitem objects representing the items dropped from event.datatransfer.items.
DeprecationReportBody - Web APIs
the report details are displayed via the displayreports() fuction, which takes the observer callback's reports parameter as its parameter: function displayreports(reports) { const outputelem = document.queryselector('.output'); const list = document.createelement('ul'); outputelem.appendchild(list); for(let i = 0; i < reports.
length; i++) { let listitem = document.createelement('li'); let textnode = document.createtextnode('report ' + (i + 1) + ', type: ' + reports[i].type); listitem.appendchild(textnode); let innerlist = document.createelement('ul'); listitem.appendchild(innerlist); list.appendchild(listitem); for (let key in reports[i].body) { let innerlistitem = document.createelement('l...
Document.anchors - Web APIs
example if (document.anchors.
length >= 5) { dump("found too many anchors"); } the following is an example that auto populates a table of contents with every anchor on the page: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>test</title> <script> function init() { var toc = document.getelementbyid("toc"); var i, li, newanchor; for (i = 0; i < document.anchors.
length; i++) { li = document.createelement("li"); newanchor = document.createelement('a'); newanchor.href = "#" + document.anchors[i].name; newanchor.innerhtml = document.anchors[i].text; li.appendchild(newa...
Document.caretRangeFromPoint() - Web APIs
ntx, e.clienty); textnode = range.startcontainer; offset = range.startoffset; } // only split text_nodes if (textnode && textnode.nodetype == 3) { let replacement = textnode.splittext(offset); let br = document.createelement('br'); textnode.parentnode.insertbefore(br, replacement); } } let paragraphs = document.getelementsbytagname("p"); for (let i = 0; i < paragraphs.
length; i++) { paragraphs[i].addeventlistener('click', insertbreakatpoint, false); } result ...
Document.cookie - Web APIs
rfc 2965 (section 5.3, "implementation limits") specifies that there should be no maximum
length of a cookie's key or value size, and encourages implementations to support arbitrarily large cookies.
Document.getElementsByClassName() - Web APIs
le juice</span> <span class="foo bar">something random</span> <textarea id="resultarea" style="width:98%;height:7em"></textarea> javascript // getelementsbyclassname only selects elements that have both given classes var allorangejuicebyclass = document.getelementsbyclassname('orange juice'); var result = "document.getelementsbyclassname('orange juice')"; for (var i=0, len=allorangejuicebyclass.
length|0; i<len; i=i+1|0) { result += "\n " + allorangejuicebyclass[i].textcontent; } // queryselector only selects full complete matches var allorangejuicequery = document.queryselectorall('.orange.juice'); result += "\n\ndocument.queryselectorall('.orange.juice')"; for (var i=0, len=allorangejuicequery.
length|0; i<len; i=i+1|0) { result += "\n " + allorangejuicequery[i].textcontent; } doc...
Document.images - Web APIs
var ilist = document.images; for(var i = 0; i < ilist.
length; i++) { if(ilist[i].src == 'banner.gif') { // found the banner } } specifications specification status comment html living standardthe definition of 'document.images' in that specification.
Document.links - Web APIs
example var links = document.links; for(var i = 0; i < links.
length; i++) { var linkhref = document.createtextnode(links[i].href); var linebreak = document.createelement("br"); document.body.appendchild(linkhref); document.body.appendchild(linebreak); } specifications specification status comment html living standardthe definition of 'document.links' in that specification.
Document.scripts - Web APIs
let scripts = document.scripts; if (scripts.
length) { alert('this page has scripts!'); } specifications specification status comment html living standardthe definition of 'document.scripts' in that specification.
Document.styleSheetSets - Web APIs
example given an <ul> (list) element with the id "sheetlist", you can populate it with the names of all the available style sheet sets with code like this: let list = document.getelementbyid('sheetlist'); let sheets = document.stylesheetsets; list.innerhtml = ''; for (let i = 0; i < sheets.
length; i++) { let item = document.createelement('li'); item.innerhtml = sheets[i]; list.appendchild(item); } notes the list of available style sheet sets is constructed by enumerating all the style sheets available for the document, in the order in which they're listed in the document.stylesheets attribute, adding the title of each style sheet that has a title to the list.
DocumentOrShadowRoot.caretPositionFromPoint() - Web APIs
textnode = range.startcontainer; offset = range.startoffset; } // only split text_nodes if (textnode.nodetype == 3) { var replacement = textnode.splittext(offset); var br = document.createelement('br'); textnode.parentnode.insertbefore(br, replacement); } } window.onload = function (){ var paragraphs = document.getelementsbytagname("p"); for (i=0 ; i < paragraphs.
length; i++) { paragraphs[i].addeventlistener("click", insertbreakatpoint, false); } }; specifications specification status comment css object model (cssom) view modulethe definition of 'caretpositionfrompoint()' in that specification.
DocumentOrShadowRoot.elementsFromPoint() - Web APIs
example html <div> <p>some text</p> </div> <p>elements at point 30, 20:</p> <div id="output"></div> javascript let output = document.getelementbyid("output"); if (document.elementsfrompoint) { let elements = document.elementsfrompoint(30, 20); for (var i = 0; i < elements.
length; i++) { output.textcontent += elements[i].localname; if (i < elements.
length - 1) { output.textcontent += " < "; } } } else { output.innerhtml = "<span style=\"color: red;\">" + "browser does not support <code>document.elementsfrompoint()</code>" + "</span>"; } specifications specification status shadow domthe definition of 'elementsfro...
DocumentOrShadowRoot.getSelection() - Web APIs
however, attempting to use a javascript string property or method such as
length or substr directly on a selection object results in an error if it does not have that property or method and may return unexpected results if it does.
DocumentOrShadowRoot.nodesFromPoint() - Web APIs
example html content <div> <p>some text</p> </div> <p>nodes at point 30, 20:</p> <div id="output"></div> javascript content var output = document.getelementbyid("output"); if (document.nodesfrompoint) { var nodes = document.nodesfrompoint(30, 20); for(var i = 0; i < nodes.
length; i++) { output.textcontent += nodes[i].localname; if (i < nodes.
length - 1) { output.textcontent += " < "; } } } else { output.innerhtml = "<span style=\"color: red;\">" + "browser does not support <code>document.nodesfrompoint()</code>" + "</span>"; } specifications not part of any specification at present.
DocumentOrShadowRoot.styleSheets - Web APIs
examples function getstylesheet(unique_title) { for (var i=0; i<document.stylesheets.
length; i++) { var sheet = document.stylesheets[i]; if (sheet.title == unique_title) { return sheet; } } } notes the returned list is ordered as follows: stylesheets retrieved from <link> headers are placed first, sorted in header order.
Introduction to the DOM - Web APIs
const table = document.getelementbyid("table"); const tableattrs = table.attributes; // node/element interface for (let i = 0; i < tableattrs.
length; i++) { // htmltableelement interface: border attribute if(tableattrs[i].nodename.tolowercase() == "border") table.border = "1"; } // htmltableelement interface: summary attribute table.summary = "note: increased border"; core interfaces in the dom this section lists some of the most commonly-used interfaces in the dom.
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
*/ function data_of( txt ) { var data = txt.textcontent; // use ecma-262 edition 3 string and regexp features data = data.replace(/[\t\n\r ]+/g, " "); if (data.charat(0) == " ") data = data.substring(1, data.
length); if (data.charat(data.
length - 1) == " ") data = data.substring(0, data.
length - 1); return data; } example the following code demonstrates the use of the functions above.
Element.attachShadow() - Web APIs
// create a class for the element class wordcount extends htmlparagraphelement { constructor() { // always call super first in constructor super(); // count words in element's parent element var wcparent = this.parentnode; function countwords(node){ var text = node.innertext || node.textcontent return text.trim().split(/\s+/g).
length; } var count = 'words: ' + countwords(wcparent); // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create text node and add word count to it var text = document.createelement('span'); text.textcontent = count; // append it to the shadow root shadow.appendchild(text); // update count when element content changes setinterval(...
Element.attributes - Web APIs
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> </head> <body> <p id="paragraph" style="color: green;">sample paragraph</p> <form action=""> <p> <input type="button" value="show first attribute name and value" onclick="listattrib...
Element.closest() - Web APIs
if (window.element && !element.prototype.closest) { element.prototype.closest = function(s) { var matches = (this.document || this.ownerdocument).queryselectorall(s), i, el = this; do { i = matches.
length; while (--i >= 0 && matches.item(i) !== el) {}; } while ((i < 0) && (el = el.parentelement)); return el; }; } specifications specification status comment domthe definition of 'element.closest()' in that specification.
Element.getAttributeNames() - Web APIs
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.getElementsByClassName() - Web APIs
var matches = element.getelementsbyclassname('colorbox'); for (var i=0; i<matches.
length; i++) { matches[i].classlist.remove('colorbox'); matches.item(i).classlist.add('hueframe'); } instead, use another method, such as: var matches = element.getelementsbyclassname('colorbox'); while (matches.
length > 0) { matches.item(0).classlist.add('hueframe'); matches[0].classlist.remove('colorbox'); } this code finds descendant elements with the "colorbox" class, adds the class "hu...
Element.getElementsByTagNameNS() - Web APIs
var table = document.getelementbyid("forecast-table"); var cells = table.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "td"); for (var i = 0; i < cells.
length; i++) { var axis = cells[i].getattribute("axis"); if (axis == "year") { // grab the data } } specifications specification status comment domthe definition of 'element.getelementsbytagnamens()' in that specification.
Element.hasAttributes() - Web APIs
examples let foo = document.getelementbyid('foo'); if (foo.hasattributes()) { // do something with 'foo.attributes' } polyfill ;(function(prototype) { prototype.hasattributes = prototype.hasattributes || function() { return (this.attributes.
length > 0); } })(element.prototype); specifications specification status comment domthe definition of 'element.hasattributes()' in that specification.
Event.currentTarget - Web APIs
function hide(e){ e.currenttarget.style.visibility = 'hidden'; console.log(e.currenttarget); // when this function is used as an event handler: this === e.currenttarget } var ps = document.getelementsbytagname('p'); for(var i = 0; i < ps.
length; i++){ // console: print the clicked <p> element ps[i].addeventlistener('click', hide, false); } // console: print <body> document.body.addeventlistener('click', hide, false); // click around and make paragraphs disappear note: the value of event.currenttarget is only available while the event is being handled.
Event.msConvertURL() - Web APIs
if (!filelist) { console.log("filelist is null."); return; } for (var i = 0; i < filelist.
length; i++) { var file = filelist[i]; var url = url.createobjecturl(file); if (evt.converturl) { // use standard if available.
EventTarget - Web APIs
rget.prototype.listeners = null; eventtarget.prototype.addeventlistener = function(type, callback) { if (!(type in this.listeners)) { this.listeners[type] = []; } this.listeners[type].push(callback); }; eventtarget.prototype.removeeventlistener = function(type, callback) { if (!(type in this.listeners)) { return; } var stack = this.listeners[type]; for (var i = 0, l = stack.
length; i < l; i++) { if (stack[i] === callback){ stack.splice(i, 1); return; } } }; eventtarget.prototype.dispatchevent = function(event) { if (!(event.type in this.listeners)) { return true; } var stack = this.listeners[event.type].slice(); for (var i = 0, l = stack.
length; i < l; i++) { stack[i].call(this, event); } return !event.defaultprevented; }; spec...
File.getAsBinary() - Web APIs
linputelement: <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(); // modify data with string methods } ...
File.getAsText() - Web APIs
linputelement: <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 } } }...
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 depending on browser settings.
File.name - Web APIs
example <input type="file" multiple onchange="processselectedfiles(this)"> function processselectedfiles(fileinput) { var files = fileinput.files; for (var i = 0; i < files.
length; i++) { alert("filename " + files[i].name); } } try the results out below: specifications specification status comment file apithe definition of 'name' in that specification.
File.type - Web APIs
syntax var name = file.type; value a string, containing the media type(mime) indicating the type of the file, for example "image/png" for png images example <input type="file" multiple onchange="showtype(this)"> function showtype(fileinput) { var files = fileinput.files; for (var i = 0; i < files.
length; i++) { var name = files[i].name; var type = files[i].type; alert("filename: " + name + " , type: " + type); } } note: based on the current implementation, browsers won't actually read the bytestream of a file to determine its media type.
File.webkitRelativePath - Web APIs
html content <input type="file" id="filepicker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.
length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].webkitrelativepath; output.appendchild(item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitrelativepath' in that specification.
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.
FileSystemDirectoryReader.readEntries() - Web APIs
hat our drop zone can receive the drop: dropzone.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].webkitgetasentry(); if (item) { scanfiles(item, listing); } } }, false); this fetches the list of datatransferitem objects representing the items dropped from event.datatransfer.items.
Using FormData Objects - Web APIs
simply include an <input> element of type file in your <form>: <form enctype="multipart/form-data" method="post" name="fileinfo"> <label>your email address:</label> <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" max
length="64" /><br /> <label>custom file label:</label> <input type="text" name="filelabel" size="12" max
length="32" /><br /> <label>file to stash:</label> <input type="file" name="file" required /> <input type="submit" value="stash the file!" /> </form> <div></div> then you can send it using code like the following: var form = document.forms.nameditem("fileinfo"); form.addeventlistener('sub...
Frame Timing API - Web APIs
the observer (callback) will be notified when new "frame" events are added to the browser's performance timeline and the frame's duration (
length of time) will be available.
Gamepad - Web APIs
%d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.
length, e.gamepad.axes.
length); }); specifications specification status comment gamepadthe definition of 'gamepad' in that specification.
GamepadEvent.gamepad - Web APIs
%d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.
length, e.gamepad.axes.
length); }); value a gamepad object.
GamepadEvent - Web APIs
%d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.
length, e.gamepad.axes.
length); }); and on a window.gamepaddisconnected event.
GlobalEventHandlers.onchange - Web APIs
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.target.value.
length} character(s) long.`; } result specification specification status comment html living standardthe definition of 'onchange' in that specification.
GlobalEventHandlers.oninput - Web APIs
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.target.value.
length} character(s) long.`; } result specifications specification status comment html living standardthe definiti...
HTMLAnchorElement.rel - Web APIs
syntax var relstr = anchorelt.rel; anchorelt.rel = relstr; example var anchors = document.getelementsbytagname("a"); var
length = anchors.
length; for (var i = 0; i <
length; i++) { alert("rel: " + anchors[i].rel); } specifications specification status comment html living standardthe definition of 'rel' in that specification.
HTMLAnchorElement.relList - Web APIs
syntax var relstr = anchorelt.rellist; example var anchors = document.getelementsbytagname("a"); var
length = anchors.
length; for (var i = 0; i <
length; i++) { var list = anchors[i].rellist; var list
length = list.
length; console.log("new anchor node found with", list
length, "link types in rellist."); for (var j = 0; j < list
length; j++) { console.log(list[j]); } } specifications specification status comment html living standardthe definition of 'rellist' in...
HTMLAreaElement.rel - Web APIs
syntax var relstr = areaelt.rel; areaelt.rel = relstr; example var areas = document.getelementsbytagname("area"); var
length = areas.
length; for (var i = 0; i <
length; i++) { alert("rel: " + areas[i].rel); } specifications specification status comment html living standardthe definition of 'rel' in that specification.
HTMLAreaElement.relList - Web APIs
syntax var relstr = areaelt.rellist; example var areas = document.getelementsbytagname("area"); var
length = areas.
length; for (var i = 0; i <
length; i++) { var list = areas[i].rellist; var list
length = list.
length; console.log("new area found."); for (var j = 0; j < list
length; j++) { console.log(list[j]); } } specifications specification status comment html living standardthe definition of 'rellist' in that specification.
HTMLButtonElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <button id="test">button</button> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const button = document.getelementbyid("test"); for(var i = 0; i < button.labels.
length; i++) { console.log(button.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLCollection.item - Web APIs
return value the node at the specified index, or null if index is less than zero or greater than or equal to the
length property.
HTMLInputElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <input id="test"/> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const input = document.getelementbyid("test"); for(var i = 0; i < input.labels.
length; i++) { console.log(input.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLInputElement.multiple - Web APIs
example // fileinput is a <input type=file multiple> let fileinput = document.getelementbyid('myfileinput'); if (fileinput.multiple == true) { for (let i = 0; i < fileinput.files.
length; i++) { // loop fileinput.files } // only one file available } else { let file = fileinput.files.item(0); } ...
HTMLInputElement.select() - Web APIs
in browsers where it is not supported, it is possible to replace it with a call to htmlinputelement.setselectionrange() with parameters 0 and the input's value
length: <input onclick="this.select();" value="sample text" /> <!-- equivalent to --> <input onclick="this.setselectionrange(0, this.value.
length);" value="sample text" /> specifications specification status comment html living standardthe definition of 'select' in that specification.
HTMLInputElement.webkitdirectory - Web APIs
html content <input type="file" id="filepicker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.
length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].webkitrelativepath; output.appendchild(item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitdirectory' in that specification.
HTMLLinkElement.rel - Web APIs
syntax var relstr = linkelt.rel; linkelt.rel = relstr; example var links = document.getelementsbytagname('link'); var
length = links.
length; for (var i = 0; i <
length; i++) { alert(links[i]); } specifications specification status comment html living standardthe definition of 'rel' in that specification.
HTMLLinkElement.relList - Web APIs
syntax var relstr = linkelt.rellist; example var links = document.getelementsbytagname("link"); var
length = links.
length; for (var i = 0; i <
length; i++) { var list = links[i].rellist; var list
length = list.
length; console.log("new link found."); for (var j = 0; j < list
length; j++) { console.log(list[j]); } } specifications specification status comment html living standardthe definition of 'rellist' in that specification.
HTMLMediaElement.audioTracks - Web APIs
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.buffered - Web APIs
example var obj = document.createelement('video'); console.log(obj.buffered); // timeranges {
length: 0 } specifications specification status comment html living standardthe definition of 'htmlmediaelement.buffered' in that specification.
HTMLMediaElement.seekable - Web APIs
examples var video = document.queryselector("video"); var timerangesobject = video.seekable; var timeranges = []; //go through the object and output an array for (let count = 0; count < timerangesobject.
length; count ++) { timeranges.push([timerangesobject.start(count), timerangesobject.end(count)]); } specifications specification status comment html living standardthe definition of 'htmlmediaelement' in that specification.
HTMLMedia​Element​.textTracks - Web APIs
var tracks = document.queryselector('video').texttracks; for (var i = 0, l = tracks.
length; i < l; i++) { /* tracks.
length == 10 */ if (tracks[i].language == 'en') { console.dir(tracks[i]); } } properties & methods properties
length returns the number of text tracks in texttracklist object.
HTMLMeterElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <meter id="test" min="0" max="100" value="70">70</meter> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const meter = document.getelementbyid("test"); for(var i = 0; i < meter.labels.
length; i++) { console.log(meter.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
Option() - Web APIs
s[key] = new option(element,key); }); append options with different parameters /* assuming we have the following html <select id="s"> <option>first</option> <option>second</option> <option>third</option> </select> */ var s = document.getelementbyid('s'); var options = [ 'zero', 'one', 'two' ]; options.foreach(function(element, key) { if (element == 'zero') { s[s.options.
length] = new option(element, s.options.
length, false, false); } if (element == 'one') { s[s.options.
length] = new option(element, s.options.
length, true, false); // will add the "selected" attribute } if (element == 'two') { s[s.options.
length] = new option(element, s.options.
length, false, true); // just will be selected in "view" } }); /* result <select id="s"> <option value="0">...
HTMLOptionsCollection - Web APIs
idth="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.
HTMLOutputElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <output id="test">output</output> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const output = document.getelementbyid("test"); for(var i = 0; i < output.labels.
length; i++) { console.log(output.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLPreElement - Web APIs
htmlpreelement.width is a long value reflecting the obsolete width attribute, containing a fixed-size
length for the <pre> element.
HTMLProgressElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <progress id="test" value="70" max="100">70%</progress> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const progress = document.getelementbyid("test"); for(var i = 0; i < progress.labels.
length; i++) { console.log(progress.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLSelectElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <select id="test"> <option value="1">option 1</option> <option value="2">option 2</option> </select> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.labels.
length; i++) { console.log(select.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLSelectElement.options - Web APIs
example html <label for="test">label</label> <select id="test"> <option value="1">option 1</option> <option value="2">option 2</option> </select> javascript window.addeventlistener("domcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.options.
length; i++) { console.log(select.options[i].label); // "option 1" and "option 2" } }); specifications specification status comment html living standardthe definition of 'options' in that specification.
HTMLTableElement.rows - Web APIs
example myrows = mytable.rows; firstrow = mytable.rows[0]; lastrow = mytable.rows.item(mytable.rows.
length-1); this demonstrates how you can use both array syntax (line 2) and the htmlcollection.item() method (line 3) to obtain individual rows in the table.
HTMLTableElement.tBodies - Web APIs
mytable.tbodies.
length; specifications specification status comment html living standardthe definition of 'htmltableelement: tbodies' in that specification.
HTMLTableElement - Web APIs
htmltableelement.width is a domstring containing the
length in pixels or in percentage of the desired width fo the entire table.
HTMLTextAreaElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <textarea id="test">some text</textarea> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const textarea = document.getelementbyid("test"); for(var i = 0; i < textarea.labels.
length; i++) { console.log(textarea.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
Drag Operations - Web APIs
the following example returns the data associated with the best-supported format: function dodrop(event) { const supportedtypes = ["application/x-moz-file", "text/uri-list", "text/plain"]; const types = event.datatransfer.types.filter(type => supportedtypes.includes(type)); if (types.
length) { const data = event.datatransfer.getdata(types[0]); } event.preventdefault(); } finishing a drag once the drag is complete, a dragend event is fired at the source of the drag (the same element that received the dragstart event).
Dragging and Dropping Multiple Items - Web APIs
<html> <head> <script> function dodrop(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.mozgetdataat(types[t], i); output("(" + (typeof data) + ") : <" + data + " >\n"); } catch (ex) { output("<<error>>\n"); dump(ex); } } } } function output(text) { document.getelementbyid("output").textcontent += text; dump(text); } </script> </head> <body> <div id="outpu...
History - Web APIs
length read only returns an integer representing the number of elements in the session history, including the currently loaded page.
History API - Web APIs
another use for the go() method is to refresh the current page by either passing 0, or by invoking it without an argument: // the following statements // both have the effect of // refreshing the page window.history.go(0) window.history.go() you can determine the number of pages in the history stack by looking at the value of the
length property: let numberofentries = window.history.
length interfaces history allows manipulation of the browser session history (that is, the pages visited in the tab or frame that the current page is loaded in).
HkdfParams - Web APIs
ideally, the salt is a random or pseudo-random value with the same
length as the output of the digest function.
LargestContentfulPaint - Web APIs
// https://bugs.webkit.org/show_bug.cgi?id=209216 try { let lcp; const po = new performanceobserver((entrylist) => { const entries = entrylist.getentries(); const lastentry = entries[entries.
length - 1]; // update `lcp` to the latest value, using `rendertime` if it's available, // otherwise using `loadtime`.
Long Tasks API - Web APIs
usage var observer = new performanceobserver(function(list) { var perfentries = list.getentries(); for (var i = 0; i < perfentries.
length; i++) { // process long task notifications: // report back for analytics and monitoring // ...
MediaError.message - Web APIs
case mediaerror.media_err_decode: s+= "an error occurred while decoding the audio."; break; case mediaerror.media_err_src_not_supported: s+= "the audio is missing or is in a format not supported by your browser."; break; default: s += "an unknown error occurred."; break; } let message = err.message; if (message && message.
length) { s += " " + message; } displayerrormessage("<strong>error " + err.code + ":</strong> " + s + "<br>"); }; this gets the mediaerror object describing the error from the error property on the htmlaudioelement representing the audio player.
MediaList - Web APIs
medialist.
length read only returns the number of media queries in the medialist.
Media Session API - Web APIs
mediapositionstate used to contain information about the current playback position, playback speed, and overall media duration when calling the mediasession method setpositionstate() to establish the media's
length, playback position, and playback speed.
MouseEvent.movementX - Web APIs
html <p id="log">move your mouse around.</p> javascript function logmovement(event) { log.insertadjacenthtml('afterbegin', `movement: ${event.movementx}, ${event.movementy}<br>`); while (log.childnodes.
length > 128) log.lastchild.remove() } const log = document.getelementbyid('log'); document.addeventlistener('mousemove', logmovement); result specifications specification status comment pointer lockthe definition of 'mouseevent.movementx' in that specification.
NameList - Web APIs
properties namelist.
length read only methods namelist.contains() returns a boolean.
Navigator.getGamepads() - Web APIs
%d buttons, %d axes.", gp.index, gp.id, gp.buttons.
length, gp.axes.
length ); }); specifications specification status comment gamepadthe definition of 'the gamepad api specification' in that specification.
msSaveBlob - Web APIs
notes when a site calls this method, the behavior is the same as when windows internet explorer downloads a file with the following in the header, where x-download-options removes the file open button from the browser file download dialog: content-
length: <blob.size> content-type: <blob.type> content-disposition: attachment;filename=<defaultname> x-download-options: noopen specifications not part of any specifications.
msSaveOrOpenBlob - Web APIs
notes when a site calls this method, the behavior is the same as when windows internet explorer downloads a file with the following in the header: content-
length: <blob.size> content-type: <blob.type> content-disposition: attachment;filename=<defaultname> specifications not part of any specifications.
NavigatorPlugins.mimeTypes - Web APIs
syntax var mimetypes[] = navigator.mimetypes; mimetypes is a mimetypearray object which has a
length property as well as item(index) and nameditem(name) methods.
Node.hasChildNodes() - Web APIs
g with 'foo.childnodes' } polyfill here is one possible polyfill: ;(function(prototype) { prototype.haschildnodes = prototype.haschildnodes || function() { return !!this.firstchild; } })(node.prototype); there are various ways to determine whether the node has a child node: node.haschildnodes() node.firstchild != null (or just node.firstchild) node.childnodes && node.childnodes.
length (or node.childnodes.
length > 0) specifications specification status comment domthe definition of 'node: haschildnodes' in that specification.
Node.normalize() - Web APIs
syntax element.normalize(); example let wrapper = document.createelement("div"); wrapper.appendchild( document.createtextnode("part 1 ") ); wrapper.appendchild( document.createtextnode("part 2 ") ); // at this point, wrapper.childnodes.
length === 2 // wrapper.childnodes[0].textcontent === "part 1 " // wrapper.childnodes[1].textcontent === "part 2 " wrapper.normalize(); // now, wrapper.childnodes.
length === 1 // wrapper.childnodes[0].textcontent === "part 1 part 2 " specifications specification status comment domthe definition of 'node: normalize' in that specification.
Node - Web APIs
llback function for each node contained by a root node (including the root itself): function eachnode(rootnode, callback) { if (!callback) { const nodes = [] eachnode(rootnode, function(node) { nodes.push(node) }) return nodes } if (false === callback(rootnode)) { return false } if (rootnode.haschildnodes()) { const nodes = rootnode.childnodes for (let i = 0, l = nodes.
length; i < l; ++i) { if (false === eachnode(nodes[i], callback)) { return } } } } syntax eachnode(rootnode, callback) description recursively calls a function for each descendant node of rootnode (including the root itself).
NodeList.prototype.forEach() - Web APIs
ults in the following: [object htmlparagraphelement], 0, mythisarg [object text], 1, mythisarg [object htmlspanelement], 2, mythisarg polyfill this polyfill adds compatibility to all browsers supporting es5: if (window.nodelist && !nodelist.prototype.foreach) { nodelist.prototype.foreach = function (callback, thisarg) { thisarg = thisarg || window; for (var i = 0; i < this.
length; i++) { callback.call(thisarg, this[i], i, this); } }; } or if (window.nodelist && !nodelist.prototype.foreach) { nodelist.prototype.foreach = array.prototype.foreach; } the above behavior is how many browsers actually implement nodelist.prototype.foreach() (chrome, for example).
NotificationEvent.notification - Web APIs
console.log('notification tag:', event.notification.tag); console.log('notification data:', event.notification.data); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.
length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment notifications apithe definition of 'notification' in that specification.
NotificationEvent - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.
length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment notifications apithe definition of 'notificationevent' in that specification.
NotifyAudioAvailableEvent - Web APIs
all audio frames are normalized to contain 1024 samples by default, but could be any
length between 512 and 16384 samples if the user has set a different
length using the mozframebuffer
length attribute.
PaintWorklet.registerPaint - Web APIs
/* checkboardworklet.js */ class checkerboardpainter { paint(ctx, geom, properties) { // use `ctx` as if it was a normal canvas const colors = ['red', 'green', 'blue']; const size = 32; for(let y = 0; y < geom.height/size; y++) { for(let x = 0; x < geom.width/size; x++) { const color = colors[(x + y) % colors.
length]; ctx.beginpath(); ctx.fillstyle = color; ctx.rect(x * size, y * size, size, size); ctx.fill(); } } } } // register our class under a specific name registerpaint('checkerboard', checkerboardpainter); the first step in using a paintworket is defining the paint worklet using the registerpaint() function, as done above.
PaintWorklet - Web APIs
class checkerboardpainter { paint(ctx, geom, properties) { // use `ctx` as if it was a normal canvas const colors = ['red', 'green', 'blue']; const size = 32; for(let y = 0; y < geom.height/size; y++) { for(let x = 0; x < geom.width/size; x++) { const color = colors[(x + y) % colors.
length]; ctx.beginpath(); ctx.fillstyle = color; ctx.rect(x * size, y * size, size, size); ctx.fill(); } } } } // register our class under a specific name registerpaint('checkerboard', checkerboardpainter); load a paintworklet the following example demonstrates loading the above worklet from its js file and does so by feature detection.
ParentNode.lastElementChild - Web APIs
;(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.
PaymentRequest.onshippingoptionchange - Web APIs
ternational shipping'; shippingoption.amount.value = '10.00'; details.total.amount.value = '65.00'; // shipping to elsewhere is unsupported } else { // empty array indicates rejection of the address details.shippingoptions = []; return promise.resolve(details); console.log(details.error); } // hardcode for simplicity if (details.displayitems.
length === 2) { details.displayitems[2] = shippingoption; } else { details.displayitems.push(shippingoption); } details.shippingoptions = [shippingoption]; return promise.resolve(details); })(details, request.shippingaddress)); }); specifications specification status comment payment request apithe definition of 'onshippingoptionchange' in that sp...
PaymentResponse.onpayerdetailchange - Web APIs
e(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 specification status comment ...
PaymentResponse: payerdetailchange event - Web APIs
e(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 could also set up the event hand...
performance.clearMarks() - Web APIs
function logmarkcount() { console.log( "found this many entries: " + performance.getentriesbytype("mark").
length ); } // create a bunch of marks.
performance.clearMeasures() - Web APIs
function logmeasurecount() { console.log( "found this many entries: " + performance.getentriesbytype("measure").
length ); } // create a bunch of measures.
performance.clearResourceTimings() - Web APIs
resource(); var supported = typeof performance.clearresourcetimings == "function"; if (supported) { console.log("run: performance.clearresourcetimings()"); performance.clearresourcetimings(); } else { console.log("performance.clearresourcetimings() not supported"); return; } // getentries should now return zero var p = performance.getentriesbytype("resource"); if (p.
length == 0) console.log("...
PerformanceEntry.entryType - Web APIs
k for feature support before continuing if (performance.mark === undefined) { console.log("performance.mark not supported"); return; } // create a performance entry named "begin" via the mark() method performance.mark("begin"); // check the entrytype of all the "begin" entries var entriesnamedbegin = performance.getentriesbyname("begin"); for (var i=0; i < entriesnamedbegin.
length; i++) { var typeofentry = entriesnamedbegin[i].entrytype; console.log("entry is type: " + typeofentry); } } specifications specification status comment performance timeline level 2the definition of 'entrytype' in that specification.
PerformanceEntry - Web APIs
function print_performanceentries() { // use getentries() to get a list of all performance entries var p = performance.getentries(); for (var i=0; i < p.
length; i++) { console.log("performanceentry[" + i + "]"); print_performanceentry(p[i]); } } function print_performanceentry(perfentry) { var properties = ["name", "entrytype", "starttime", "duration"]; for (var i=0; i < properties.
length; i++) { // check each property var supported = properties[i] in perfentry; if (s...
PerformanceNavigationTiming.domComplete - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.
length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.lo...
PerformanceNavigationTiming.domContentLoadedEventEnd - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.
length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.dominteractive); // document load and unload time console.log("document load = " + (p...
PerformanceNavigationTiming.domContentLoadedEventStart - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.
length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.lo...
PerformanceNavigationTiming.domInteractive - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.
length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.dominteractive); // document load and unload time console.log("document load = " + (p...
PerformanceNavigationTiming.loadEventEnd - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.
length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.dominteractive); // document load and unload time console.log("document load = " + (p...
PerformanceNavigationTiming.loadEventStart - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.
length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.lo...
PerformanceNavigationTiming.redirectCount - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.
length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.lo...
PerformanceNavigationTiming.type - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.
length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.lo...
PerformanceNavigationTiming.unloadEventEnd - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.
length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.lo...
PerformanceNavigationTiming.unloadEventStart - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.
length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.lo...
PerformanceObserver() - Web APIs
example 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 performance timeline level 2the definitio...
PeformanceObserver.disconnect() - Web APIs
syntax performanceobserver.disconnect(); example 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 // ...
PerformanceObserver.observe() - Web APIs
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 performance timeline level 2the definitio...
PerformanceObserver.takeRecords() - Web APIs
example 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"]}); var records = observer.takerecords(); console.log(records[0].name); console.log(records[0].starttime); console.log(records[0].duration); specifications specification status comment performance timeline level 2the definition of 'takerecords()' in that specification...
PerformanceObserverEntryList - Web APIs
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.
PerformanceResourceTiming.decodedBodySize - Web APIs
dbodysize); else console.log("encodedbodysize = not supported"); if ("transfersize" in perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.
length; i++) { log_sizes(p[i]); } } specifications specification status comment resource timing level 2the definition of 'decodedbodysize' in that specification.
PerformanceResourceTiming.encodedBodySize - Web APIs
dbodysize); else console.log("encodedbodysize = not supported"); if ("transfersize" in perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.
length; i++) { log_sizes(p[i]); } } specifications specification status comment resource timing level 2the definition of 'encodedbodysize' in that specification.
PerformanceResourceTiming.initiatorType - Web APIs
example function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.
length; i++) { print_initiatortype(p[i]); } } function print_initiatortype(perfentry) { // print this performance entry object's initiatortype value var value = "initiatortype" in perfentry; if (value) console.log("...
PerformanceResourceTiming.nextHopProtocol - Web APIs
function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.
length; i++) { print_nexthopprotocol(p[i]); } } function print_nexthopprotocol(perfentry) { var value = "nexthopprotocol" in perfentry; if (value) console.log("nexthopprotocol = " + perfentry.nexthopprotocol); else console.log("nexthopprotocol = not supported"); } specifications specification status comment resource timing level 2the definition of 'nexthopp...
PerformanceResourceTiming.transferSize - Web APIs
dbodysize); else console.log("encodedbodysize = not supported"); if ("transfersize" in perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.
length; i++) { log_sizes(p[i]); } } specifications specification status comment resource timing level 2the definition of 'transfersize' in that specification.
PerformanceResourceTiming - Web APIs
an application can use the timing metrics to determine, for example, the
length of time it takes to fetch a specific resource, such as an xmlhttprequest, <svg>, image, or script.
Using Pointer Events - Web APIs
function ongoingtouchindexbyid(idtofind) { for (var i = 0; i < ongoingtouches.
length; i++) { var id = ongoingtouches[i].identifier; if (id == idtofind) { return i; } } return -1; // not found } showing what's going on function log(msg) { var p = document.getelementbyid('log'); p.innerhtml = msg + "\n" + p.innerhtml; } specifications specification status comment pointer events – level 2the definition of 'pointerevent' in...
PositionOptions.maximumAge - Web APIs
syntax positionoptions.maximumage = time
length specifications specification status comment geolocation apithe definition of 'positionoptions.maximumage' in that specification.
PositionOptions - Web APIs
positionoptions.timeout secure context is a positive long value representing the maximum
length of time (in milliseconds) the device is allowed to take in order to return a position.
ProgressEvent.total - Web APIs
syntax value = progressevent.total specifications specification status comment xmlhttprequestthe definition of 'progressevent.
lengthcomputable' in that specification.
PushManager.registrations() - Web APIs
example var req = navigator.push.registrations(); req.onsuccess = function(e) { if (req.result.
length > 0) { for (var i = 0, l = req.result.
length; i < l; i++) { console.log("existing registration", req.result[i].pushendpoint, req.result[i].version); } // reuse existing endpoints.
RTCDataChannel: error event - Web APIs
cific error detail types switch(err.errordetail) { case "sdp-syntax-error": console.error(" sdp syntax error in line ", err.sdplinenumber); break; case "idp-load-failure": console.error(" identity provider load failure: http error ", err.httprequeststatuscode); break; case "sctp-failure": if (err.sctpcausecode < sctpcausecodes.
length) { console.error(" sctp failure: ", err.sctpcausecode); } else { console.error(" unknown sctp error"); } break; case "dtls-failure": if (err.receivedalert) { console.error(" received dlts failure alert: ", err.receivedalert); } if (err.sentalert) { console.error(" sent dlts failure alert: ", err.receivedalert); ...
RTCDataChannel.onbufferedamountlow - Web APIs
*/ dc.onbufferedamountlow = function() { if (source.position <= source.
length) { dc.send(source.readfile(65536)); } } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.onbufferedamountlow' in that specification.
RTCPeerConnection.generateCertificate() - Web APIs
example rtcpeerconnection.generatecertificate({ name: 'rsassa-pkcs1-v1_5', hash: 'sha-256', modulus
length: 2048, publicexponent: new uint8array([1, 0, 1]) }).then(function(cert) { var pc = new rtcpeerconnection({certificates: [cert]}); }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'generatecertificate()' in that specification.
RTCPeerConnection.getDefaultIceServers() - Web APIs
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.getStreamById() - Web APIs
// from: https://bugs.chromium.org/p/chromium/issues/detail?id=698163&desc=5#c10 rtcpeerconnection.prototype.getstreambyid = function(id) { try { var localstreams = this.getlocalstreams(); var remotestreams = this.getremotestreams(); var i; for (i = 0; i < localstreams.
length; i++) { if (localstreams[i].id == id) return localstreams[i]; } for (i = 0; i < remotestreams.
length; i++) { if (remotestreams[i].id == id) return remotestreams[i]; } } catch(e) {} return null; } ...
RTCRtpReceiver.getCapabilities() static function - Web APIs
because the set of capabilities available tend to be stable for a
length of time (people don't install and uninstall codecs and the like very often), the media capabilities can in whole or in part provide a cross-origin method for identifying a user.
RTCRtpSender.getCapabilities() static function - Web APIs
because the set of capabilities available tend to be stable for a
length of time (people don't install and uninstall codecs and the like very often), the media capabilities can in whole or in part provide a cross-origin method for identifying a user.
ReadableStream.getReader() - Web APIs
if (done) { console.log("stream complete"); para.textcontent = value; return; } // value for fetch streams is a uint8array charsreceived += value.
length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far.
ReadableStream.tee() - Web APIs
if (done) { console.log("stream complete"); return; } // value for fetch streams is a uint8array charsreceived += value.
length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'read ' + charsreceived + ' characters so far.
ReadableStreamBYOBReader.read() - Web APIs
exceptions typeerror the source object is not a readablestreambyobreader, the stream has no owner, the view is not an object or has become detached, or the view's
length is 0.
ReadableStreamDefaultReader.ReadableStreamDefaultReader() - Web APIs
if (done) { console.log("stream complete"); para.textcontent = result; return; } // value for fetch streams is a uint8array charsreceived += value.
length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far.
ReadableStreamDefaultReader.cancel() - Web APIs
if (done) { console.log("stream complete"); reader.cancel(); para.textcontent = result; return; } // value for fetch streams is a uint8array charsreceived += value.
length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far.
Report - Web APIs
the report details are displayed via the displayreports() fuction, which takes the observer callback's reports parameter as its parameter: function displayreports(reports) { const outputelem = document.queryselector('.output'); const list = document.createelement('ul'); outputelem.appendchild(list); for(let i = 0; i < reports.
length; i++) { let listitem = document.createelement('li'); let textnode = document.createtextnode('report ' + (i + 1) + ', type: ' + reports[i].type); listitem.appendchild(textnode); let innerlist = document.createelement('ul'); listitem.appendchild(innerlist); list.appendchild(listitem); for (let key in reports[i].body) { let innerlistitem = document.createelement('l...
Resource Timing API - Web APIs
an application can use the timing metrics to determine, for example, the
length of time it takes to load a specific resource, such as an xmlhttprequest, <svg>, image, or script.
cx - Web APIs
syntax var xcoordinate = element.cx; value an svganimated
length representing the x-coordinate of the circleʼs center.
cy - Web APIs
syntax var ycoordinate = element.cy; value an svganimated
length representing the y-coordinate of the circleʼs center.
r - Web APIs
syntax var radius = element.r; value an svganimated
length representing the radius of the circle.
SVGTextPathElement - Web APIs
svgtextpathelement.startoffset read only an svganimated
length corresponding to the x component of the startoffset attribute of the given element.
ScriptProcessorNode: audioprocess event - Web APIs
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; } } }) you could also set up the event handler using the scriptprocessornode.onaudioprocess property: scriptnode.onaudioprocess = function(audioprocessingevent) { ...
ScriptProcessorNode.bufferSize - Web APIs
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 ...
ScriptProcessorNode.onaudioprocess - Web APIs
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(); } ...
ScriptProcessorNode - Web APIs
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 ...
Selection.addRange() - Web APIs
ong> selecting the <strong>strong words</strong>.</p> <button>select strong words</button> javascript let button = document.queryselector('button'); button.addeventlistener('click', function () { let selection = window.getselection(); let strongs = document.getelementsbytagname('strong'); if (selection.rangecount > 0) { selection.removeallranges(); } for (let i = 0; i < strongs.
length; i++) { let range = document.createrange(); range.selectnode(strongs[i]); selection.addrange(range); } }); result specifications specification status comment selection apithe definition of 'selection.addrange()' in that specification.
ServiceWorkerGlobalScope.onnotificationclick - Web APIs
}; example self.onnotificationclick = function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.
length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specification status comment notifications apithe definition of 'onnotificationclick' in that specification.
ShadowRoot - Web APIs
from here 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) { 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...
SourceBufferList - Web APIs
target="_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.
SpeechGrammarList - Web APIs
properties speechgrammarlist.
length read only returns the number of speechgrammar objects contained in the speechgrammarlist.
SpeechRecognitionEvent.results - Web APIs
when subsequent result events are fired, interim results may be overwritten by a newer interim result or by a final result — they may even be removed, if they are at the end of the "results" array and the array
length decreases.
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.
SpeechSynthesis.getVoices() - Web APIs
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); } } populatevoi...
SpeechSynthesis.onvoiceschanged - Web APIs
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 (speechsynthe...
SpeechSynthesis.speak() - Web APIs
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 'speak()' in that specification.
SpeechSynthesisErrorEvent.error - Web APIs
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.error('an error has occurred with the speech synthesis: ' + event.error); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'error' in that spe...
SpeechSynthesisErrorEvent - Web APIs
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 'speechsynthesiserror...
SpeechSynthesisUtterance.SpeechSynthesisUtterance() - Web APIs
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 'speechsynthesisutterance()' in that specification.
SpeechSynthesisUtterance.lang - Web APIs
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.onboundary - Web APIs
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 'onbo...
SpeechSynthesisUtterance.onend - Web APIs
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 'onen...
SpeechSynthesisUtterance.onerror - Web APIs
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 spe...
SpeechSynthesisUtterance.onmark - Web APIs
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
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 specifi...
SpeechSynthesisUtterance.onresume - Web APIs
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 spec...
SpeechSynthesisUtterance.onstart - Web APIs
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 speci...
SpeechSynthesisUtterance.pitch - Web APIs
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
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.voice - Web APIs
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.
SpeechSynthesisUtterance.volume - Web APIs
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.
SpeechSynthesisUtterance - Web APIs
var synth = window.speechsynthesis; var voices = synth.getvoices(); var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); for(var i = 0; i < voices.
length; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.value = i; voiceselect.appendchild(option); } inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); utterthis.voice = voices[voiceselect.value]; synth.speak(utterthis); inputtxt.b...
SpeechSynthesisVoice.default - Web APIs
examples 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); } specifications specification status comme...
SpeechSynthesisVoice.lang - Web APIs
examples 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); } specifications specification status comment web speech apithe definition of 'lang' in that specification.
SpeechSynthesisVoice.localService - Web APIs
examples 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'; } console.log(voices[i].localservice); option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } specifications ...
SpeechSynthesisVoice.name - Web APIs
examples 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); } specifications specification status comment web speech apithe definition of 'name' in that specification.
SpeechSynthesisVoice.voiceURI - Web APIs
examples 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'; } console.log(voices[i].voiceuri); // on mac, this returns urns, for example 'urn:moz-tts:osx:com.apple.speech.synthesis.voice.daniel' option.setattribute('data-lang', voices[i].lang); option.
StaticRange - Web APIs
staticrange.collapsed read only returns a boolean value which is true if the range's start and end positions are the same, resulting in a range of
length 0.
Storage.key() - Web APIs
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.
Storage - Web APIs
properties storage.
length read only returns an integer representing the number of data items stored in the storage object.
Using readable streams - Web APIs
if (done) { console.log("stream complete"); para.textcontent = result; return; } charsreceived += value.
length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'read ' + charsreceived + ' characters so far.
Using writable streams - Web APIs
the second object is optional, and allows you to specify a custom queueing strategy to use for your stream, which takes the form of an instance of byte
lengthqueuingstrategy or countqueuingstrategy.
Streams API - Web APIs
related stream apis and operations byte
lengthqueuingstrategy provides a built-in byte
length queuing strategy that can be used when constructing streams.
StylePropertyMapReadOnly.get() - Web APIs
// get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const stylemap = myelement.computedstylemap(); // array of properties we're interested in const ofinterest = ['font-weight', 'border-left-color', 'color', '--colour']; // iterate thru our properties of interest for ( let i = 0; i < ofinterest.
length; i++ ) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(ofinterest[i])); styleslist.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode( stylemap.get(ofinterest[i]))); styleslist.appendchild(cssvalue); } specifications specifi...
StyleSheet.media - Web APIs
example <!doctype html> <html> <head> <link rel="stylesheet" href="document.css" type="text/css" media="screen" /> <style rel="stylesheet" type="text/css" media="screen, print"> body { background-color: snow; } </style> </head> <body> <script> for (var isheetindex = 0; isheetindex < document.stylesheets.
length; isheetindex++) { console.log('document.stylesheets[' + string(isheetindex) + '].media: ' + json.stringify(document.stylesheets[isheetindex].media)); if (isheetindex === 0) document.stylesheets[isheetindex].media.appendmedium('handheld'); if (isheetindex === 1) document.stylesheets[isheetindex].media.deletemedium('print'); console.log('document.stylesheets[' + string(isheetind...
StyleSheetList - Web APIs
examples get document stylesheet objects with for loop for (let i = 0; i < document.stylesheets.
length; i++) { let stylesheet = document.stylesheets[i]; } get all css rules for the document using array methods const allcss = [...document.stylesheets] .map(stylesheet => { try { return [...stylesheet.cssrules] .map(rule => rule.csstext) .join(''); } catch (e) { console.log('access to stylesheet %s is denied.
SubtleCrypto.decrypt() - Web APIs
function decryptmessage(key, ciphertext) { return window.crypto.subtle.decrypt( { name: "aes-ctr", counter,
length: 64 }, key, ciphertext ); } aes-cbc this code decrypts ciphertext using aes in cbc mode.
SubtleCrypto.verify() - Web APIs
*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".rsa-pss .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( { name: "rsa-pss", salt
length: 32, }, publickey, signature, encoded ); signaturevalue.classlist.add(result ?
TextTrack.mode - Web APIs
window.addeventlistener("load", event => { let trackelem = document.queryselector("track"); let track = trackelem.track; track.mode = "showing"; for (let index=0; index < track.cues.
length; index++) { let cue = track.cues[index]; cue.pauseonexit = true; }; }); specifications specification status comment html living standardthe definition of 'mode' in that specification.
TextTrackList.onremovetrack - Web APIs
document.queryselectorall("video, audio")[0].texttracks.onremovetrack = function(event) { mytrackcount = document.queryselectorall("video, audio")[0].texttracks.
length; }; the current number of text tracks remaining in the media element is obtained from texttracklist property
length.
TimeRanges.end() - Web APIs
example given a video element with the id "myvideo": var v = document.getelementbyid("myvideo"); var buf = v.buffered; var numranges = buf.
length; if (buf.
length == 1) { // only one range if (buf.start(0) == 0 && buf.end(0) == v.duration) { // the one range starts at the beginning and ends at // the end of the video, so the whole thing is loaded } } this example looks at the time ranges and looks to see if the entire video has been loaded.
TimeRanges.start() - Web APIs
example given a video element with the id "myvideo": var v = document.getelementbyid("myvideo"); var buf = v.buffered; var numranges = buf.
length; if (buf.
length == 1) { // only one range if (buf.start(0) == 0 && buf.end(0) == v.duration) { // the one range starts at the beginning and ends at // the end of the video, so the whole thing is loaded } } this example looks at the time ranges and looks to see if the entire video has been loaded.
TimeRanges - Web APIs
properties timeranges.
length read only returns an unsigned long representing the number of time ranges represented by the time range object.
Touch.force - Web APIs
for (var i=0; i < e.targettouches.
length; i++) { // add code to "switch" based on the force value.
Touch.identifier - Web APIs
for (var i=0; i < e.changedtouches.
length; i++) { console.log("changedtouches[" + i + "].identifier = " + e.changedtouches[i].identifier); } }, false); specifications specification status comment touch events – level 2 draft no change.
Touch.pageX - Web APIs
var i; for (i=0; i < e.changedtouches.
length; i++) { console.log("touchpoint[" + i + "].pagex = " + e.changedtouches[i].pagex); console.log("touchpoint[" + i + "].pagey = " + e.changedtouches[i].pagey); } }, false); specifications specification status comment touch events – level 2 draft no change from the previous version.
Touch.pageY - Web APIs
var i; for (i=0; i < e.changedtouches.
length; i++) { console.log("touchpoint[" + i + "].pagex = " + e.changedtouches[i].pagex); console.log("touchpoint[" + i + "].pagey = " + e.changedtouches[i].pagey); } }, false); specifications specification status comment touch events – level 2 draft no change from last version.
Touch.screenX - Web APIs
var i; for (i=0; i < e.touches.
length; i++) { console.log("touchpoint[" + i + "].screenx = " + e.touches[i].screenx); console.log("touchpoint[" + i + "].screeny = " + e.touches[i].screeny); } }, false); specifications specification status comment touch events – level 2 draft non-stable version.
Touch.target - Web APIs
for (var i=0; i < e.targettouches.
length; i++) { console.log("touchpoint[" + i + "].target = " + e.targettouches[i].target); } }, false); specifications specification status comment touch events – level 2 draft non-stable version.
TouchEvent.changedTouches - Web APIs
for (var i=0; i < e.changedtouches.
length; i++) { console.log("changedtouches[" + i + "].identifier = " + e.changedtouches[i].identifier); } }, false); specifications specification status comment touch events – level 2 draft non-stable version.
TouchList - Web APIs
properties touchlist.
length read only the number of touch objects in the touchlist.
USB.getDevices() - Web APIs
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.
USBDevice.clearHalt() - Web APIs
while (true) { let result = await data.transferin(1, 6); if (result.data && result.data.byte
length === 6) { console.log('channel 1: ' + result.data.getuint16(0)); console.log('channel 2: ' + result.data.getuint16(2)); console.log('channel 5: ' + result.data.getuint16(4)); } if (result.status === 'stall') { console.warn('endpoint stalled.
validityState.tooLong - Web APIs
the read-only toolong property of a validitystate object indicates if the value of an <input> or <textarea>, after having been edited by the user, exceeds the maximum code-unit
length established by the element's max
length attribute.
validityState.tooShort - Web APIs
the read-only tooshort property of a validitystate object indicates if the value of an <input>, <button>, <select>, <output>, <fieldset> or <textarea>, after having been edited by the user, is less than the minimum code-unit
length established by the element's min
length attribute.
Vibration API - Web APIs
describing vibrations vibration is described as a pattern of on-off pulses, which may be of varying
lengths.
VideoTrack - Web APIs
for (var i = 0; i < tracks.
length; i++) { if (tracks[i].language === userlanguage) { tracks[i].selected = true; break; } }); the language is in standard (rfc 5646) format.
VideoTrackList.onremovetrack - Web APIs
document.queryselector("my-video").videotracks.onremovetrack = function(event) { mytrackcount = document.queryselector("my-video").videotracks.
length; }; the current number of video tracks remaining in the media element is obtained from videotracklist property
length.
WEBGL_compressed_texture_astc - Web APIs
constants blocks bits per pixel arraybuffer byte
length bytes if height and width are 512 ext.compressed_rgba_astc_4x4_khr ext.compressed_srgb8_alpha8_astc_4x4_khr 4x4 8.00 floor((width + 3) / 4) * floor((height + 3) / 4) * 16 262144 ext.compressed_rgba_astc_5x4_khr ext.compressed_srgb8_alpha8_astc_5x4_khr 5x4 6.40 floor((width + 4) / 5) * floor((height + 3) / 4) * 16 210944 ext.compressed...
WebGL2RenderingContext.compressedTexSubImage3D() - Web APIs
syntax // read from the buffer bound to gl.pixel_unpack_buffer void gl.compressedtexsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, imagesize, offset); void gl.compressedtexsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, arraybufferview srcdata, optional srcoffset, optional src
lengthoverride); parameters target a glenum specifying the binding point (target) of the active texture.
WebGL2RenderingContext.copyBufferSubData() - Web APIs
examples var srcbuffer = gl.createbuffer(); var dstbuffer = gl.createbuffer(); var data = new float32array(vertices); var
length = vertices.
length * 4; gl.bindbuffer(gl.array_buffer, srcbuffer); gl.bufferdata(gl.array_buffer, data, gl.static_draw); gl.bindbuffer(gl.copy_read_buffer, srcbuffer); gl.bindbuffer(gl.array_buffer, dstbuffer); gl.bufferdata(gl.array_buffer, new float32array(
length), gl.static_draw); gl.copybuffersubdata(gl.copy_read_buffer, gl.array_buffer, 0, 0,
length); specifications specificati...
WebGLRenderingContext.compressedTexImage[23]D() - Web APIs
pixels); // additionally available in webgl 2: // read from buffer bound to gl.pixel_unpack_buffer void gl.compressedteximage2d(target, level, internalformat, width, height, border, glsizei imagesize, glintptr offset); void gl.compressedteximage2d(target, level, internalformat, width, height, border, arraybufferview srcdata, optional srcoffset, optional src
lengthoverride); // read from buffer bound to gl.pixel_unpack_buffer void gl.compressedteximage3d(target, level, internalformat, width, height, depth, border, glsizei imagesize, glintptr offset); void gl.compressedteximage3d(target, level, internalformat, width, height, depth, border, arraybufferview srcdata, optional srcoffset, optional src
lengthoverride); parameters ...
WebGLRenderingContext.compressedTexSubImage2D() - Web APIs
pixels); // additionally available in webgl 2: void gl.compressedtexsubimage2d(target, level, xoffset, yoffset, width, height, format, imagesize, offset); void gl.compressedtexsubimage2d(target, level, xoffset, yoffset, width, height, format, arraybufferview srcdata, optional srcoffset, optional src
lengthoverride); parameters target a glenum specifying the binding point (target) of the active compressed texture.
Textures from code - Web APIs
.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribute vec2 position; void main() { gl_position = vec4(position, 0.0, 1.0); gl_pointsize = 128.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { vec2 fragmentposition = 2.0*gl_pointcoord - 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; ...
Creating 3D objects using WebGL - Web APIs
var colors = []; for (var j = 0; j < facecolors.
length; ++j) { const c = facecolors[j]; // repeat each color four times for the four vertices of the face colors = colors.concat(c, c, c, c); } const colorbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, colorbuffer); gl.bufferdata(gl.array_buffer, new float32array(colors), gl.static_draw); define the element array once the vertex arrays are generated, we need to build...
A simple RTCDataChannel sample - Web APIs
<div class="messagebox"> <label for="message">enter a message: <input type="text" name="message" id="message" placeholder="message text" inputmode="latin" size=60 max
length=120 disabled> </label> <button id="sendbutton" name="sendbutton" class="buttonright" disabled> send </button> </div> finally, there's the little box into which we'll insert the messages.
Writing WebSocket client applications - Web APIs
/em> signed in at " + timestr + "</b><br>"; break; case "message": 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.
Inputs and input sources - Web APIs
let primaryinputsource = xrsession.inputsources[0]; for (let i=0; i < xrsession.inputsources.
length; i++) { if (xrsession.inputsources[i].handedness === user.handedness) { primaryinputsource = inputsources[i]; break; } } this snippet of code starts by assuming that the first input source is the primary, but then looks for one whose handedness matches the one specified in the user object.
Web Audio API best practices - Web APIs
both are legitimate ways of working, however, it's more common to use the former when you are working with full-
length tracks, and the latter when working with shorter, more sample-like tracks.
Migrating from webkitAudioContext - Web APIs
function startsource() { var src = arguments[0]; var startargs = array.prototype.slice.call(arguments, 1); src.onended = function() { sources.splice(sources.indexof(src), 1); } sources.push(src); src.start.apply(src, startargs); } function activesources() { return sources.
length; } var src0 = context.createbuffersource(); var src0 = context.createbuffersource(); // set buffers and other parameters...
Example and tutorial: Simple synth keyboard - Web APIs
notefreq.foreach(function(keys, idx) { let keylist = object.entries(keys); let octaveelem = document.createelement("div"); octaveelem.classname = "octave"; keylist.foreach(function(key) { if (key[0].
length == 1) { octaveelem.appendchild(createkey(key[0], idx, key[1])); } }); keyboard.appendchild(octaveelem); }); document.queryselector("div[data-note='b'][data-octave='5']").scrollintoview(false); sineterms = new float32array([0, 0, 1, 0, 1]); cosineterms = new float32array(sineterms.
length); customwaveform = audiocontext.createperiodicwave(cosineterms, sineterms); ...
Using IIR filters - Web APIs
ntsize); canvasctx.filltext('g', spacing-fontsize, (height-spacing+fontsize)/2); canvasctx.filltext('0', spacing-fontsize, height-spacing+fontsize); canvasctx.filltext('hz', width/2, height-spacing+fontsize); canvasctx.filltext('20k', width-spacing, height-spacing+fontsize); // loop over our magnitude response data and plot our filter canvasctx.beginpath(); for(let i = 0; i < magresponseoutput.
length; i++) { if (i === 0) { canvasctx.moveto(spacing, height-(magresponseoutput[i]*100)-spacing ); } else { canvasctx.lineto((width/totalarrayitems)*i, height-(magresponseoutput[i]*100)-spacing ); } } canvasctx.stroke(); summary that's it for our iirfilter demo.
Window.crypto - Web APIs
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.getSelection() - Web APIs
however, attempting to use a javascript string property or method such as
length or substr directly on a selection object will result in an error if it does not have that property or method and may return unexpected results if it does.
window.location - Web APIs
example #6: using bookmarks without changing the hash property: <!doctype html> <html> <head> <meta charset="utf-8"/> <title>mdn example</title> <script> function shownode (onode) { document.documentelement.scrolltop = onode.offsettop; document.documentelement.scrollleft = onode.offsetleft; } function showbookmark (sbookmark, busehash) { if (arguments.
length === 1 || busehash) { location.hash = sbookmark; return; } var obookmark = document.queryselector(sbookmark); if (obookmark) { shownode(obookmark); } } </script> <style> span.intlink { cursor: pointer; color: #0000ff; text-decoration: underline; } </style> </head> <body> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
Window.openDialog() - Web APIs
if the features parameter is a zero-
length string, or contains only one or more of the behavior features (chrome, dependent, dialog and modal) the chrome features are assumed "os' choice." that is, window creation code is not given specific instructions, but is instead allowed to select the chrome that best fits a dialog on that operating system.
Window - Web APIs
window.
length read only returns the number of frames in the window.
WindowClient.focus() - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.
length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment service workersthe definition of 'focus()' in that specification.
WindowClient.focused - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.
length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) { if(!client.focused) return client.focus(); } } } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment service workersthe definition of 'windowclient: focused' in that specific...
WindowClient.visibilityState - Web APIs
example event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (let i = 0; i < clientlist.
length; i++) { let client = clientlist[i]; if (client.url == '/' && 'focus' in client) { if (client.visibilitystate === 'hidden') return client.focus(); } } } if (clients.openwindow) { return clients.openwindow('/'); } })); }); specifications specification status comment service workersthe definition of 'visibilit...
WindowClient - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.
length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) { client.focus(); break; } } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment service workersthe definition of 'windowclient' in that specification.
WorkerGlobalScope.self - Web APIs
global scope of the same type as that worker object written to the console — something like the following: dedicatedworkerglobalscope { undefined: undefined, infinity: infinity, math: mathconstructor, nan: nan, intl: object…} infinity: infinity array: function array() { [native code] } arguments: null caller: null isarray: function isarray() { [native code] }
length: 1 name: "array" observe: function observe() { [native code] } prototype: array[0] unobserve: function unobserve() { [native code] } __proto__: function empty() {} <function scope> arraybuffer: function arraybuffer() { [native code] } blob: function blob() { [native code] } boolean: function boolean() { [native code] } dataview: function datavie...
HTML in XMLHttpRequest - Web APIs
(new regexp("(?:(?:.(?!<\\s*" + aexec[1] + "[^>]*[>]))*.?<\\s*" + aexec[1] + "[^>]*[>](?:.(?!<\\s*\/\\s*" + aexec[1] + "\\s*>))*.?<\\s*\/\\s*" + aexec[1] + "\\s*>)*(?:.(?!<\\s*\/\\s*" + aexec[1] + "\\s*>))*.?", "i")).exec(ssrc.slice(ssrc.indexof(aexec[0]) + aexec[0].
length)) || "" : ""; } var oreq = new xmlhttprequest(); oreq.open("get", "yourpage.html", true); oreq.onload = function () { console.log(gethtml(this, "intro")); }; oreq.send(null); note: this solution is very expensive for the interpreter.
XMLHttpRequest.getAllResponseHeaders() - Web APIs
an example of what a raw header string looks like: date: fri, 08 dec 2017 21:04:30 gmt\r\n content-encoding: gzip\r\n x-content-type-options: nosniff\r\n server: meinheld/0.6.1\r\n x-frame-options: deny\r\n content-type: text/html; charset=utf-8\r\n connection: keep-alive\r\n strict-transport-security: max-age=63072000\r\n vary: cookie, accept-encoding\r\n content-
length: 6502\r\n x-xss-protection: 1; mode=block\r\n each line is terminated by both carriage return and line feed characters (\r\n).
XMLHttpRequest.sendAsBinary() - Web APIs
/*\ |*| |*| :: xmlhttprequest.prototype.sendasbinary() polyfill :: |*| |*| https://developer.mozilla.org/docs/dom/xmlhttprequest#sendasbinary() |*| \*/ if (!xmlhttprequest.prototype.sendasbinary) { xmlhttprequest.prototype.sendasbinary = function (sdata) { var nbytes = sdata.
length, ui8data = new uint8array(nbytes); for (var nidx = 0; nidx < nbytes; nidx++) { ui8data[nidx] = sdata.charcodeat(nidx) & 0xff; } /* send as arraybufferview...: */ this.send(ui8data); /* ...or as arraybuffer (legacy)...: this.send(ui8data.buffer); */ }; } note: it's possible to build this polyfill putting two types of data as argument for send(): an arraybuffer (ui8data...
XPathEvaluator.createExpression() - Web APIs
html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("output").textcontent = result.snapshot
length; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathevaluator.createexpression()' in that specification.
XPathEvaluator.evaluate() - Web APIs
html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var evaluator = new xpathevaluator(); var result = evaluator.evaluate("//div", document, null, xpathresult.ordered_node_snapshot_type); document.queryselector("output").textcontent = result.snapshot
length; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathevaluator.evaluate()' in that specification.
XPathEvaluator - Web APIs
html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("output").textcontent = result.snapshot
length; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathevaluator' in that specification.
XPathExpression.evaluate() - Web APIs
html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("output").textcontent = result.snapshot
length; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathexpression.evaluate()' in that specification.
XPathExpression - Web APIs
html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression(xpath); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("output").textcontent = result.snapshot
length; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathexpression' in that specification.
XPathResult.snapshotItem() - Web APIs
html <div>xpath example</div> <div>tag names of the matched nodes: <output></output></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.ordered_node_snapshot_type, null); var node = null; var tagnames = []; for(var i = 0; i < result.snapshot
length; i++) { var node = result.snapshotitem(i); tagnames.push(node.localname); } document.queryselector("output").textcontent = tagnames.join(", "); result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.snapshotitem()' in that specification.
ARIA: gridcell role - Accessibility
examples the following example creates a table-style grouping of information: <h3 id="table-title">jovian gas giant planets</h3> <div role="grid" aria-describedby="table-title"> <div role="rowgroup"> <div role="row"> <div role="columnheader">name</div> <div role="columnheader">diameter (km)</div> <div role="columnheader">
length of day (hours)</div> <div role="columnheader">distance from sun (10<sup>6</sup>km)</div> <div role="columnheader">number of moons</div> </div> </div> <div role="rowgroup"> <div role="row"> <div role="gridcell">jupiter</div> <div role="gridcell">142,984</div> <div role="gridcell">9.9</div> <div role="gridcell">778.6</div> <div role="gridcell">6...
ARIA: tab role - Accessibility
er("click", changetabs); }); // enable arrow navigation between tabs in the tab list let tabfocus = 0; tablist.addeventlistener("keydown", e => { // move right if (e.keycode === 39 || e.keycode === 37) { tabs[tabfocus].setattribute("tabindex", -1); if (e.keycode === 39) { tabfocus++; // if we're at the end, go to the start if (tabfocus >= tabs.
length) { tabfocus = 0; } // move left } else if (e.keycode === 37) { tabfocus--; // if we're at the start, move to the end if (tabfocus < 0) { tabfocus = tabs.
length - 1; } } tabs[tabfocus].setattribute("tabindex", 0); tabs[tabfocus].focus(); } }); }); function changetabs(e) { const target = e.target; ...
ARIA: button role - Accessibility
if(name.
length > 0) { listitem = document.createelement('li'); listitem.appendchild(document.createtextnode(name)); // add the new name to the list.
Architecture - Accessibility
compute the item offset relative to the start of this line search forward from the starting offset for an embed character if an embed character is found, continue processing with offset = index plus the line start index if an embed character is not found: if the line ending is equal to one less than the
length of all text in the accessible, proceed to the next accessible in dept first search order and recurse on the first character until a non-embed is found.
-webkit-border-before - CSS: Cascading Style Sheets
t-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from one browser to anotherapplies toall elementsinheritedyespercentagesas each of the properties of the shorthand:-webkit-border-before-width: logical-width of containing blockcomputed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute
length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute
length or 0 if border-left-style is none or hiddenborder-right-width: the absolute
length or 0 if border-right-style is none or hiddenborder-top-width: the absolute
length or 0 if border-top-style is none or hiddenborder-style: as each of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style:...
-webkit-mask-repeat-y - CSS: Cascading Style Sheets
formal definition initial valuerepeatapplies toall elementsinheritednocomputed valuefor <
length> the absolute value, otherwise a percentageanimation typediscrete formal syntax repeat | no-repeat | space | round examples using a repeating or non-repeating mask image .exampleone { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-y: repeat; } .exampletwo { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-y: no-repeat; } using multiple mask images you can specif...
:disabled - CSS: Cascading Style Sheets
nt.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').onchange = togglebilling; }, false); function togglebilling() { // select the billing text fields var billingitems = document.queryselectorall('#billing input[type="text"]'); // toggle the billing text fields for (var i = 0; i < billingitems.
length; i++) { billingitems[i].disabled = !billingitems[i].disabled; } } result specifications specification status comment html living standardthe definition of ':disabled' in that specification.
:indeterminate - CSS: Cascading Style Sheets
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.
@media - CSS: Cascading Style Sheets
width width of the viewport including width of scrollbar accessibility concerns to best accommodate people who adjust a site's text size, use ems when you need a <
length> for your media queries.
@viewport - CSS: Cascading Style Sheets
lengths specified as percentages are calculated relative to the initial viewport, which is the viewport before any user agent or authored styles have had an opportunity to adjust the viewport.
Logical properties for sizing - CSS: Cascading Style Sheets
logical property physical property inline-size width block-size height min-inline-size min-width min-block-size min-height max-inline-size max-width max-block-size max-height width and height example the logical mappings for width and height are inline-size, which sets the
length in the inline dimension and block-size, which sets the
length in the block dimension.
Using CSS transitions - CSS: Cascading Style Sheets
body> css content .box { border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000ff; transition: width 2s, height 2s, background-color 2s, transform 2s; } .box:hover { background-color: #ffcccc; width: 200px; height: 200px; transform: rotate(180deg); } when property value lists are of different
lengths if any property's list of values is shorter than the others, its values are repeated to make them match.
CSS data types - CSS: Cascading Style Sheets
ons include the following: <angle> <angle-percentage> <angular-color-hint> <angular-color-stop> <attr-fallback> <attr-name> <basic-shape> <blend-mode> <calc-product> <calc-sum> <calc-value> <color> <color-stop> <color-stop-angle> <counter-style> <custom-ident> <dimension> <filter-function> <flex> <frequency> <frequency-percentage> <gradient> <ident> <image> <integer> <
length> <
length-percentage> <number> <number-percentage> <percentage> <position> <quote> <ratio> <resolution> <shape-box> <shape-radius> <string> <time> <time-percentage> <timing-function> <toggle-value> <transform-function> <type-or-unit> <url> <url-modifier> <zero> specifications specification status comment css values and units module level 4 edi...
Mozilla CSS extensions - CSS: Cascading Style Sheets
62 -moz-stackobsolete since gecko 62 -moz-markerobsolete since gecko 62 empty-cells -moz-show-background (default value in quirks mode) font -moz-button -moz-info -moz-desktop -moz-dialog (also a color) -moz-document -moz-workspace -moz-window -moz-list -moz-pull-down-menu -moz-field (also a color) font-family -moz-fixed image-rendering -moz-crisp-edges <
length> -moz-calc list-style-type -moz-arabic-indic -moz-bengali -moz-cjk-earthly-branch -moz-cjk-heavenly-stem -moz-devanagari -moz-ethiopic-halehame -moz-ethiopic-halehame-am -moz-ethiopic-halehame-ti-er -moz-ethiopic-halehame-ti-et -moz-ethiopic-numeric -moz-gujarati -moz-gurmukhi -moz-hangul -moz-hangul-consonant -moz-japanese-formal -moz-japanese-informal -moz-kannada -m...
CSS reference - CSS: Cascading Style Sheets
l()hsla()hue-rotate()hyphensi<ident><image>image()image-orientationimage-renderingimage-set()@importin:in-range:indeterminateinheritinitialinline-sizeinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>:invalidinvert()isolationjjustify-contentjustify-itemsjustify-selfkkhz@keyframesl:lang:last-child:last-of-typeleader():leftleft@left-bottom<
length><
length-percentage>letter-spacingline-breakline-heightlinear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal()mmarginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-top::markermarks (@page)maskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemas...
Cubic Bezier Generator - CSS: Cascading Style Sheets
<html> <canvas id="bezier" width="336" height="336"> </canvas> <form> <label for="x1">x1 = </label><input onchange="updatecanvas();" type="text" max
length=6 id="x1" value="0.79" class='field'> <label for="y1">y1 = </label><input onchange="updatecanvas();return true;" type="text" max
length=6 id="y1" value="0.33" class='field'> <label for="x2">x2 = </label><input onchange="updatecanvas();return true;" type="text" max
length=6 id="x2" value="0.14" class='field'> <label for="y2">y2 = </label><input onchange="updatecanvas();return true;" type="text" max
length=6 id="y2" value="0.53" class='field'> <br> <output id="output">log</output> </form> </html> .field { width: 40px; } function updatecanvas() { var x1 = d...
backdrop-filter - CSS: Cascading Style Sheets
and all graphics elementsinheritednocomputed valueas specifiedanimation typea filter function list formal syntax none | <filter-function-list>where <filter-function-list> = [ <filter-function> | <url> ]+where <filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>where <blur()> = blur( <
length> )<brightness()> = brightness( <number-percentage> )<contrast()> = contrast( [ <number-percentage> ] )<drop-shadow()> = drop-shadow( <
length>{2,3} <color>?
border-block-end-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute
length; 0 if the border style is none or hiddenanimation typea
length formal syntax <'border-top-width'> examples border width with veritcal text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-end-width: 5px; } results sp...
border-block-end - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-top-width: the absolute
length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typeas each of the properties of the shorthand:border-block-end-color: a colorborder-block-end-style: discreteborder-block-end-width: a
length formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> |...
border-block-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute
length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-width: 5px; } results specif...
border-block - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-top-width: the absolute
length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typediscrete formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-bottom - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas each of the properties of the shorthand:border-bottom-width: the absolute
length or 0 if border-bottom-style is none or hiddenborder-bottom-style: as specifiedborder-bottom-color: computed coloranimation typeas each of the properties of the shorthand:border-bottom-color: a colorborder-bottom-style: discreteborder-bottom-width: a
length formal syntax <line-width> | <line-style> | <color>where <line-width> = <
length> | thin | medium | thick<line-style> = none | hidden | dotte...
border-image-slice - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the size of the border imagecomputed valueone to four percentage(s) (as specified) or absolute
length(s), plus the keyword fill if specifiedanimation typeby computed value type formal syntax <number-percentage>{1,4} && fill?where <number-percentage> = <number> | <percentage> examples adjustable border width and slice the folowing example shows a simple <div> with a border image set on it.
border-inline-start-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute
length; 0 if the border style is none or hiddenanimation typea
length formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-start-width: 5px; } specifications specification ...
border-inline-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute
length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-width: 5px 10px; } specifications specification ...
border-left - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas each of the properties of the shorthand:border-left-width: the absolute
length or 0 if border-left-style is none or hiddenborder-left-style: as specifiedborder-left-color: computed coloranimation typeas each of the properties of the shorthand:border-left-color: a colorborder-left-style: discreteborder-left-width: a
length formal syntax <line-width> | <line-style> | <color>where <line-width> = <
length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed |...
border-right - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas each of the properties of the shorthand:border-right-width: the absolute
length or 0 if border-right-style is none or hiddenborder-right-style: as specifiedborder-right-color: computed coloranimation typeas each of the properties of the shorthand:border-right-color: a colorborder-right-style: discreteborder-right-width: a
length formal syntax <line-width> | <line-style> | <color>where <line-width> = <
length> | thin | medium | thick<line-style> = none | hidden | dotted | da...
border-top - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas each of the properties of the shorthand:border-top-width: the absolute
length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typeas each of the properties of the shorthand:border-top-color: a colorborder-top-style: discreteborder-top-width: a
length formal syntax <line-width> | <line-style> | <color>where <line-width> = <
length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid...
flex - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:flex-grow: 0flex-shrink: 1flex-basis: autoapplies toflex items, including in-flow pseudo-elementsinheritednocomputed valueas each of the properties of the shorthand:flex-grow: as specifiedflex-shrink: as specifiedflex-basis: as specified, but with relative
lengths converted into absolute
lengthsanimation typeas each of the properties of the shorthand:flex-grow: a numberflex-shrink: a numberflex-basis: a
length, percentage or calc(); formal syntax none | [ <'flex-grow'> <'flex-shrink'>?
justify-content - CSS: Cascading Style Sheets
the alignment is done after the
lengths and auto margins are applied, meaning that, if in a flexbox layout there is at least one flexible element, with flex-grow different from 0, it will have no effect as there won't be any available space.
mask-border - CSS: Cascading Style Sheets
iner elements excluding the defs element and all graphics elementsinheritednopercentagesas each of the properties of the shorthand:mask-border-slice: refer to size of the mask border imagemask-border-width: relative to width/height of the mask border image areacomputed valueas each of the properties of the shorthand:mask-border-mode: as specifiedmask-border-outset: as specified, but with relative
lengths converted into absolute
lengthsmask-border-repeat: as specifiedmask-border-slice: as specifiedmask-border-source: as specified, but with <url> values made absolutemask-border-width: as specified, but with relative
lengths converted into absolute
lengthsanimation typeas each of the properties of the shorthand:mask-border-mode: discretemask-border-outset: discretemask-border-repeat: discretemask-b...
outline - CSS: Cascading Style Sheets
the transparent keyword maps to rgba(0,0,0,0).outline-width: an absolute
length; if the keyword none is specified, the computed value is 0outline-style: as specifiedanimation typeas each of the properties of the shorthand:outline-color: a coloroutline-width: a
lengthoutline-style: discrete formal syntax [ <'outline-color'> | <'outline-style'> | <'outline-width'> ] examples using outline to set a focus style html <a href="#">this link has a special focus style.</a> cs...
<percentage> - CSS: Cascading Style Sheets
thus, even if a percentage value is used on the parent property, a real value (such as a width in pixels for a <
length> value) will be accessible on the inherited property, not the percentage value.
repeat() - CSS: Cascading Style Sheets
100px, 1fr) [col-end]) repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end]) /* <fixed-repeat> values */ repeat(4, 250px) repeat(4, [col-start] 250px [col-end]) repeat(4, [col-start] 60% [col-end]) repeat(4, [col-start] minmax(100px, 1fr) [col-end]) repeat(4, [col-start] fit-content(200px) [col-end]) repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) syntax values <
length> a positive integer
length.
text-decoration-skip-ink - CSS: Cascading Style Sheets
syntax /* single keyword */ text-decoration-skip-ink: none; text-decoration-skip-ink: auto; text-decoration-skip-ink: all; /* global keywords */ text-decoration-skip: inherit; text-decoration-skip: initial; text-decoration-skip: unset; values none underlines and overlines are drawn across the full
length of the text content, including parts that cross over glyph descenders and ascenders.
<time> - CSS: Cascading Style Sheets
+0s zero with a leading + and a unit -0ms zero with a leading - and a unit invalid times 0 although unitless zero is allowed for <
length>s, it's invalid for <time>s.
Getting Started - Developer guides
if(timearray[timearray.
length-1] === '') { timearray.pop(); } lastdata.textcontent = timearray[timearray.
length-1]; } setinterval(fetchdata, 5000); </script> </body> </html> ...
Cross-browser audio basics - Developer guides
metadata: download the audio metadata; this is usually the best option, as it allows you to access and display information such as audio
length, and allow the browser to work out which audio file it should use.
Audio and Video Delivery - Developer guides
llback content: <video controls> <source src="dynamicsearch.mp4" type="video/mp4"></source> <a href="dynamicsearch.mp4"> <img src="dynamicsearch.jpg" alt="dynamic app search in firefox os"> </a> <p>click image to play a video demo of dynamic app search</p> </video> var v = document.queryselector('video'), sources = v.queryselectorall('source'), lastsource = sources[sources.
length-1]; lastsource.addeventlistener('error', function(ev) { var d = document.createelement('div'); d.innerhtml = v.innerhtml; v.parentnode.replacechild(d, v); }, false); audio/video javascript libraries a number of audio and video javascript libaries exist.
Audio and video manipulation - Developer guides
t("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 ...
<input type="checkbox"> - HTML: Hypertext Markup Language
var overall = document.queryselector('input[id="enchtbl"]'); var ingredients = document.queryselectorall('ul input'); overall.addeventlistener('click', function(e) { e.preventdefault(); }); for(var i = 0; i < ingredients.
length; i++) { ingredients[i].addeventlistener('click', updatedisplay); } function updatedisplay() { var checkedcount = 0; for(var i = 0; i < ingredients.
length; i++) { if(ingredients[i].checked) { checkedcount++; } } if(checkedcount === 0) { overall.checked = false; overall.indeterminate = false; } else if(checkedcount === ingredients.
length...
Evolution of HTTP - HTTP
img/header-background.png http/1.1 host: developer.cdn.mozilla.net user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: */* accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate, br referer: https://developer.mozilla.org/docs/glossary/simple_header 200 ok age: 9578461 cache-control: public, max-age=315360000 connection: keep-alive content-
length: 3077 content-type: image/png date: thu, 31 mar 2016 13:34:46 gmt last-modified: wed, 21 oct 2015 18:27:50 gmt server: apache (image content of 3077 bytes) http/1.1 was first published as rfc 2068 in january 1997.
Compression in HTTP - HTTP
te and transfer-encoding are mostly used to send a response by chunks, allowing to start transmitting a resource without knowing its
length.
Access-Control-Allow-Headers - HTTP
headers, and origin, such as: options /resource/foo access-control-request-method: delete access-control-request-headers: origin, x-requested-with origin: https://foo.bar.org response if the server allows cors requests to use the delete method, it responds with an access-control-allow-methods response header, which lists delete along with the other methods it supports: http/1.1 200 ok content-
length: 0 connection: keep-alive access-control-allow-origin: https://foo.bar.org access-control-allow-methods: post, get, options, delete access-control-max-age: 86400 if the requested method isn't supported, the server will respond with an error.
Content-Disposition - HTTP
examples a response triggering the "save as" dialog: 200 ok content-type: text/html; charset=utf-8 content-disposition: attachment; filename="cool.html" content-
length: 21 <html>save me!</html> this simple html file will be saved as a regular download rather than displayed in the browser.
Content-Type - HTTP
<form action="/" method="post" enctype="multipart/form-data"> <input type="text" name="description" value="some text"> <input type="file" name="myfile"> <button type="submit">submit</button> </form> the request looks something like this (less interesting headers are omitted here): post /foo http/1.1 content-
length: 68137 content-type: multipart/form-data; boundary=---------------------------974767299852498929531610575 -----------------------------974767299852498929531610575 content-disposition: form-data; name="description" some text -----------------------------974767299852498929531610575 content-disposition: form-data; name="myfile"; filename="foo.txt" content-type: text/plain (content of the uploaded...
Index - HTTP
25 content-
length http, headers, reference the content-
length entity header indicates the size of the entity-body, in bytes, sent to the recipient.
Save-Data - HTTP
with save-data: on request: get /image.jpg http/1.0 host: example.com save-data: on response: http/1.0 200 ok content-
length: 102832 vary: accept-encoding, save-data cache-control: public, max-age=31536000 content-type: image/jpeg [...] without save-data request: get /image.jpg http/1.0 host: example.com response: http/1.0 200 ok content-
length: 481770 vary: accept-encoding, save-data cache-control: public, max-age=31536000 content-type: image/jpeg [...] specifications specification title ...
Set-Cookie - HTTP
set-cookie: sessionid=38afes7a8 permanent cookie instead of expiring when the client is closed, permanent cookies expire at a specific date (expires) or after a specific
length of time (max-age).
Trailer - HTTP
these header fields are disallowed: message framing headers (e.g., transfer-encoding and content-
length), routing headers (e.g., host), request modifiers (e.g., controls and conditionals, like cache-control, max-forwards, or te), authentication headers (e.g., authorization or set-cookie), or content-encoding, content-type, content-range, and trailer itself.
HEAD - HTTP
for example, if a url might produce a large download, a head request could read its content-
length header to check the filesize without actually downloading the file.
PATCH - HTTP
request has body yes successful response has body yes safe no idempotent no cacheable no allowed in html forms no syntax patch /file.txt http/1.1 example request patch /file.txt http/1.1 host: www.example.com content-type: application/example if-match: "e0023aa4e" content-
length: 100 [description of changes] response a successful response is indicated by any 2xx status code.
POST - HTTP
successful response has body yes safe no idempotent no cacheable only if freshness information is included allowed in html forms yes syntax post /test example a simple form using the default application/x-www-form-urlencoded content type: post /test http/1.1 host: foo.example content-type: application/x-www-form-urlencoded content-
length: 27 field1=value1&field2=value2 a form using the multipart/form-data content type: post /test http/1.1 host: foo.example content-type: multipart/form-data;boundary="boundary" --boundary content-disposition: form-data; name="field1" value1 --boundary content-disposition: form-data; name="field2"; filename="example.txt" value2 --boundary-- specifications specification title ...
PUT - HTTP
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 target 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.
Network Error Logging - HTTP
he ip address is invalid tcp.address_unreachable the ip address is unreachable tcp.failed the tcp connection failed due to reasons not covered by previous errors http.error the user agent successfully received a response, but it had a 4xx or 5xx status code http.protocol.error the connection was aborted due to an http protocol error http.response.invalid response is empty, has a content-
length mismatch, has improper encoding, and/or other conditions that prevent user agent from processing the response http.response.redirect_loop the request was aborted due to a detected redirect loop http.failed the connection failed due to errors in http protocol not covered by previous errors specifications specification network error logging ...
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...
416 Range Not Satisfiable - HTTP
the 416 response message contains a content-range indicating an unsatisfied range (that is a '*') followed by a '/' and the current
length of the resource.
426 Upgrade Required - HTTP
status 426 upgrade required examples http/1.1 426 upgrade required upgrade: http/2.0 connection: upgrade content-
length: 53 content-type: text/plain this service requires use of the http/2.0 protocol specifications specification title rfc 7231, section 6.5.15: 426 upgrade required hypertext transfer protocol (http/1.1): semantics and content ...
Groups and ranges - JavaScript
examples counting vowels var aliceexcerpt = "there was a long silence after this, and alice could only hear whispers now and then."; var regexpvowels = /[aeiouy]/g; console.log("number of vowels:", aliceexcerpt.match(regexpvowels).
length); // number of vowels: 25 using groups let personlist = `first_name: john, last_name: doe first_name: jane, last_name: smith`; let regexpnames = /first_name: (\w+), last_name: (\w+)/mg; let match = regexpnames.exec(personlist); do { console.log(`hello ${match[1]} ${match[2]}`); } while((match = regexpnames.exec(personlist)) !== null); using named groups let personlist = `first_name: john...
constructor - JavaScript
class square extends polygon { constructor(
length) { // here, it calls the parent class' constructor with
lengths // provided for the polygon's width and height super(
length,
length); // note: in derived classes, `super()` must be called before you // can use `this`.
extends - JavaScript
class square extends polygon { constructor(
length) { // here, it calls the parent class' constructor with
lengths // provided for the polygon's width and height super(
length,
length); // note: in derived classes, super() must be called before you // can use 'this'.
The legacy Iterator protocol - JavaScript
simple example with the old protocol function makeiterator(array){ var nextindex = 0; return { next: function(){ if(nextindex < array.
length){ return array[nextindex++]; else throw new stopiteration(); } } } var it = makeiterator(['yo', 'ya']); console.log(it.next()); // 'yo' console.log(it.next()); // 'ya' try{ console.log(it.next()); } catch(e){ if(e instanceof stopiteration){ // iteration over } } ...
Warning: String.x is deprecated; use String.prototype.x instead - JavaScript
methods = [ 'contains', 'substring', 'tolowercase', 'touppercase', 'charat', 'charcodeat', 'indexof', 'lastindexof', 'startswith', 'endswith', 'trim', 'trimleft', 'trimright', 'tolocalelowercase', 'normalize', 'tolocaleuppercase', 'localecompare', 'match', 'search', 'slice', 'replace', 'split', 'substr', 'concat', 'localecompare' ], methodcount = methods.
length, assignstringgeneric = function(methodname) { var method = string.prototype[methodname]; string[methodname] = function(arg1) { return method.apply(arg1, array.prototype.slice.call(arguments, 1)); }; }; for (i = 0; i < methodcount; i++) { assignstringgeneric(methods[i]); } }()); ...
JavaScript error reference - JavaScript
error: permission denied to access property "x"internalerror: too much recursionrangeerror: argument is not a valid code pointrangeerror: invalid array
lengthrangeerror: invalid daterangeerror: precision is out of rangerangeerror: radix must be an integerrangeerror: repeat count must be less than infinityrangeerror: repeat count must be non-negativereferenceerror: "x" is not definedreferenceerror: assignment to undeclared variable "x"referenceerror: can't access lexical declaration "x" before initializationreferenceerror: deprecated caller or arguments...
Default parameters - JavaScript
day!') // ["david", "hi", "happy birthday!"] this functionality can be approximated like this, which demonstrates how many edge cases are handled: function go() { return ':p' } function withdefaults(a, b = 5, c = b, d = go(), e = this, f = arguments, g = this.value) { return [a, b, c, d, e, f, g] } function withoutdefaults(a, b, c, d, e, f, g) { switch (arguments.
length) { case 0: a; case 1: b = 5; case 2: c = b; case 3: d = go(); case 4: e = this; case 5: f = arguments; case 6: g = this.value; default: } return [a, b, c, d, e, f, g]; } withdefaults.call({value: '=^_^='}); // [undefined, 5, 5, ":p", {value:"=^_^="}, arguments, "=^_^="] withoutdefaults.call({value: '=^_^='}); // [unde...
getter - JavaScript
const obj = { log: ['example','test'], get latest() { if (this.log.
length === 0) return undefined; return this.log[this.log.
length - 1]; } } console.log(obj.latest); // "test" note that attempting to assign a value to latest will not change it.
Rest parameters - JavaScript
// using the same function definition from example above myfun("one", "two") // a, one // b, two // manymoreargs, [] argument
length since theargs is an array, a count of its elements is given by the
length property: function fun1(...theargs) { console.log(theargs.
length) } fun1() // 0 fun1(5) // 1 fun1(5, 6, 7) // 3 ordinary parameter and rest parameters in the next example, a rest parameter is used to collect all parameters after the first into an array.
Array.prototype.reduceRight() - JavaScript
prototype.reduceright) { array.prototype.reduceright = function(callback /*, initialvalue*/) { 'use strict'; if (null === this || 'undefined' === typeof this) { throw new typeerror('array.prototype.reduce called on null or undefined'); } if ('function' !== typeof callback) { throw new typeerror(callback + ' is not a function'); } var t = object(this), len = t.
length >>> 0, k = len - 1, value; if (arguments.
length >= 2) { value = arguments[1]; } else { while (k >= 0 && !(k in t)) { k--; } if (k < 0) { throw new typeerror('reduce of empty array with no initial value'); } value = t[k--]; } for (; k >= 0; k--) { if (k in t) { value = callback(value, t[k], k, t); } } r...
Array.prototype.flat() - JavaScript
r.slice(); }; flatdeep(arr, infinity); // [1, 2, 3, 4, 5, 6] use a stack // non recursive flatten deep using a stack // note that depth control is hard/inefficient as we will need to tag each value with its own depth // also possible w/o reversing on shift/unshift, but array ops on the end tends to be faster function flatten(input) { const stack = [...input]; const res = []; while(stack.
length) { // pop value from stack const next = stack.pop(); if(array.isarray(next)) { // push back array items, won't modify the original input stack.push(...next); } else { res.push(next); } } // reverse to restore input order return res.reverse(); } const arr = [1, 2, [3, 4, [5, 6]]]; flatten(arr); // [1, 2, 3, 4, 5, 6] use generator function function* f...
Array.prototype.flatMap() - JavaScript
let arr1 = ["it's sunny in", "", "california"]; arr1.map(x => x.split(" ")); // [["it's","sunny","in"],[""],["california"]] arr1.flatmap(x => x.split(" ")); // ["it's","sunny","in", "", "california"] notice, the output list
length can be different from the input list
length.
Array.prototype.forEach() - JavaScript
converting a for loop to foreach const items = ['item1', 'item2', 'item3'] const copyitems = [] // before for (let i = 0; i < items.
length; i++) { copyitems.push(items[i]) } // after items.foreach(function(item){ copyitems.push(item) }) printing the contents of an array note: in order to display the content of an array in the console, you can use console.table(), which prints a formatted version of the array.
Array.isArray() - JavaScript
var iframe = document.createelement('iframe'); document.body.appendchild(iframe); xarray = window.frames[window.frames.
length-1].array; var arr = new xarray(1,2,3); // [1,2,3] // correctly checking for array array.isarray(arr); // true // considered harmful, because doesn't work through iframes arr instanceof array; // false specifications specification ecmascript (ecma-262)the definition of 'array.isarray' in that specification.
Array.of() - JavaScript
the difference between array.of() and the array constructor is in the handling of integer arguments: array.of(7) creates an array with a single element, 7, whereas array(7) creates an empty array with a
length property of 7 (note: this implies an array of 7 empty slots, not slots with actual undefined values).
Array.prototype.some() - JavaScript
cma-262, edition 5, 15.4.4.17 // reference: http://es5.github.io/#x15.4.4.17 if (!array.prototype.some) { array.prototype.some = function(fun, thisarg) { 'use strict'; if (this == null) { throw new typeerror('array.prototype.some called on null or undefined'); } if (typeof fun !== 'function') { throw new typeerror(); } var t = object(this); var len = t.
length >>> 0; for (var i = 0; i < len; i++) { if (i in t && fun.call(thisarg, t[i], i, t)) { return true; } } return false; }; } examples testing value of array elements the following example tests whether any element in the array is bigger than 10.
Array.prototype.values() - JavaScript
done: true } iteraror.next().value; // undefined one-use: the array iterator object is one use or temporary object example: var arr = ['a', 'b', 'c', 'd', 'e']; var iterator = arr.values(); for (let letter of iterator) { console.log(letter); } //"a" "b" "c" "d" "e" for (let letter of iterator) { console.log(letter); } // undefined reason: when next().done=true or currentindex>
length the for..of loop ends.
DataView.prototype.buffer - JavaScript
examples using the buffer property var buffer = new arraybuffer(8); var dataview = new dataview(buffer); dataview.buffer; // arraybuffer { byte
length: 8 } specifications specification ecmascript (ecma-262)the definition of 'dataview.prototype.buffer' in that specification.
DataView - JavaScript
dataview.prototype.byte
length the
length (in bytes) of this view from the start of its arraybuffer.
Date - JavaScript
due to the differing
lengths of days (due to daylight saving changeover), months, and years, expressing elapsed time in units greater than hours, minutes, and seconds requires addressing a number of issues, and should be thoroughly researched before being attempted.
Function.prototype.call() - JavaScript
const animals = [ { species: 'lion', name: 'king' }, { species: 'whale', name: 'fail' } ]; for (let i = 0; i < animals.
length; i++) { (function(i) { this.print = function() { console.log('#' + i + ' ' + this.species + ': ' + this.name); } this.print(); }).call(animals[i], i); } using call to invoke a function and specifying the context for 'this' in the example below, when we call greet, the value of this will be bound to object obj.
Generator.prototype.next() - JavaScript
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(); // object {value: (3) [1, 2, 3], done: false} page.next(); ...
Intl - JavaScript
multiple locales may be specified (and a best-supported locale determined by evaluating each of them in order and comparing against the locales supported by the implementation) by passing an array (or array-like object, with a
length property and corresponding indexed elements) whose elements are either intl.locale objects or values that convert to unicode bcp 47 locale identifier strings.
Math - JavaScript
d some functions (such as css transforms) can accept degrees, it is a good idea to keep functions handy that convert between the two: function degtorad(degrees) { return degrees * (math.pi / 180); }; function radtodeg(rad) { return rad / (math.pi / 180); }; calculating the height of an equalateral triangle if we want to calculate the height of an equalateral triangle, and we know its side
length is 100, we can use the formulae
length of the adjacent multiplied by the tangent of the angle is equal to the opposite.
Object.assign() - JavaScript
polyfill this polyfill doesn't support symbol properties, since es5 doesn't have symbols anyway: if (typeof object.assign !== 'function') { // must be writable: true, enumerable: false, configurable: true object.defineproperty(object, "assign", { value: function assign(target, varargs) { // .
length of function is 2 'use strict'; if (target === null || target === undefined) { throw new typeerror('cannot convert undefined or null to object'); } var to = object(target); for (var index = 1; index < arguments.
length; index++) { var nextsource = arguments[index]; if (nextsource !== null && nextsource !== undefined) { for (var next...
Object.prototype.constructor - JavaScript
function type () {} let types = [ new array(), [], new boolean(), true, // remains unchanged new date(), new error(), new function(), function () {}, math, new number(), 1, // remains unchanged new object(), {}, new regexp(), /(?:)/, new string(), 'test' // remains unchanged ] for (let i = 0; i < types.
length; i++) { types[i].constructor = type types[i] = [types[i].constructor, types[i] instanceof type, types[i].tostring()] } console.log(types.join('\n')) this example displays the following output (comments added for reference): function type() {},false, // new array() function type() {},false, // [] function type() {},fal...
Object.defineProperties() - JavaScript
peerror('bad set'); d.set = s; } if (('get' in d || 'set' in d) && ('value' in d || 'writable' in d)) throw new typeerror('identity-confused descriptor'); return d; } if (typeof obj !== 'object' || obj === null) throw new typeerror('bad obj'); properties = object(properties); var keys = object.keys(properties); var descs = []; for (var i = 0; i < keys.
length; i++) descs.push([keys[i], converttodescriptor(properties[keys[i]])]); for (var i = 0; i < descs.
length; i++) object.defineproperty(obj, descs[i][0], descs[i][1]); return obj; } examples using object.defineproperties var obj = {}; object.defineproperties(obj, { 'property1': { value: true, writable: true }, 'property2': { value: 'hello', writable: false } ...
Object.entries() - JavaScript
of the following: a demonstration implementation of object.entries in the tc39/proposal-object-values-entries (if you don't need any support for ie); a polyfill in the es-shims/object.entries repositories; or, you can use the simple, ready-to-deploy polyfill listed below: if (!object.entries) { object.entries = function( obj ){ var ownprops = object.keys( obj ), i = ownprops.
length, resarray = new array(i); // preallocate the array while (i--) resarray[i] = [ownprops[i], obj[ownprops[i]]]; return resarray; }; } for the above polyfill code snippet, if you need support for ie<9, then you will also need an object.keys() polyfill (such as the one found on the object.keys page).
Object.freeze() - JavaScript
e array buffer views with elements > object.freeze(new dataview(new arraybuffer(32))) // no elements dataview {} > object.freeze(new float64array(new arraybuffer(64), 63, 0)) // no elements float64array [] > object.freeze(new float64array(new arraybuffer(64), 32, 2)) // has elements typeerror: cannot freeze array buffer views with elements note that; as the standard three properties (buf.byte
length, buf.byteoffset and buf.buffer) are read-only (as are those of an arraybuffer or sharedarraybuffer), there is no reason for attempting to freeze these properties.
Object.getOwnPropertySymbols() - JavaScript
examples using getownpropertysymbols var obj = {}; var a = symbol('a'); var b = symbol.for('b'); obj[a] = 'localsymbol'; obj[b] = 'globalsymbol'; var objectsymbols = object.getownpropertysymbols(obj); console.log(objectsymbols.
length); // 2 console.log(objectsymbols); // [symbol(a), symbol(b)] console.log(objectsymbols[0]); // symbol(a) specifications specification ecmascript (ecma-262)the definition of 'object.getownpropertysymbols' in that specification.
Object.is() - JavaScript
two values are the same if one of the following holds: both undefined both null both true or both false both strings of the same
length with the same characters in the same order both the same object (means both object have same reference) both numbers and both +0 both -0 both nan or both non-zero and both not nan and both have the same value this is not the same as being equal according to the == operator.
Object.prototype.propertyIsEnumerable() - JavaScript
built-in properties: var a = ['is enumerable']; a.propertyisenumerable(0); // returns true a.propertyisenumerable('
length'); // returns false math.propertyisenumerable('random'); // returns false this.propertyisenumerable('math'); // returns false direct vs.
Object.setPrototypeOf() - JavaScript
* **/ object.appendchain = function(ochain, oproto) { if (arguments.
length < 2) { throw new typeerror('object.appendchain - not enough arguments'); } if (typeof oproto !== 'object' && typeof oproto !== 'string') { throw new typeerror('second argument to object.appendchain must be an object or a string'); } var onewproto = oproto, oreturn = o2nd = olast = ochain instanceof this ?
RangeError - JavaScript
this can be encountered when: passing a value that is not one of the allowed string values to string.prototype.normalize(), or when attempting to create an array of an illegal
length with the array constructor, or when passing bad values to the numeric methods number.prototype.toexponential(), number.prototype.tofixed() or number.prototype.toprecision().
Reflect.getOwnPropertyDescriptor() - JavaScript
examples using reflect.getownpropertydescriptor() reflect.getownpropertydescriptor({x: 'hello'}, 'x') // {value: "hello", writable: true, enumerable: true, configurable: true} reflect.getownpropertydescriptor({x: 'hello'}, 'y') // undefined reflect.getownpropertydescriptor([], '
length') // {value: 0, writable: true, enumerable: false, configurable: false} difference to object.getownpropertydescriptor() if the target argument to this method is not an object (a primitive), then it will cause a typeerror.
Reflect.ownKeys() - JavaScript
examples using reflect.ownkeys() reflect.ownkeys({z: 3, y: 2, x: 1}) // [ "z", "y", "x" ] reflect.ownkeys([]) // ["
length"] let sym = symbol.for('comet') let sym2 = symbol.for('meteor') let obj = {[sym]: 0, 'str': 0, '773': 0, '0': 0, [sym2]: 0, '-1': 0, '8': 0, 'second str': 0} reflect.ownkeys(obj) // [ "0", "8", "773", "str", "-1", "second str", symbol(comet), symbol(meteor) ] // indexes in numeric order, // strings in insertion order, // symbols in insertion order specifications specificat...
Reflect.set() - JavaScript
reflect.set(arr, '
length', 1) // true arr // ["duck"] // with just one argument, propertykey and value are "undefined".
String.prototype.codePointAt() - JavaScript
dom elements try { var object = {}; var $defineproperty = object.defineproperty; var result = $defineproperty(object, object, object) && $defineproperty; } catch(error) {} return result; }()); var codepointat = function(position) { if (this == null) { throw typeerror(); } var string = string(this); var size = string.
length; // `tointeger` var index = position ?
String.prototype.startsWith() - JavaScript
rawpos|0 : 0; return this.substring(pos, pos + search.
length) === search; } }); } a more robust (fully es2015 specification compliant), but less performant and compact, polyfill is available on github by mathias bynens.
String.prototype.trimEnd() - JavaScript
in some engines this means: string.prototype.trimright.name === "trimend"; examples using trimend() the following example displays the lowercase string ' foo': var str = ' foo '; console.log(str.
length); // 8 str = str.trimend(); console.log(str.
length); // 6 console.log(str); // ' foo' specifications specification ecmascript (ecma-262)the definition of 'string.prototype.trimend' in that specification.
String.prototype.trimStart() - JavaScript
w.string, proto=string.prototype; ((o,p)=>{ if(p in o?o[p]?false:true:true){ const r=/^\s+/; o[p]=o.trimleft||function(){ return this.replace(r,'') } } })(proto,'trimstart'); })(window); */ examples using trimstart() the following example displays the lowercase string 'foo ': var str = ' foo '; console.log(str.
length); // 8 str = str.trimstart(); console.log(str.
length); // 5 console.log(str); // 'foo ' specifications specification ecmascript (ecma-262)the definition of ' string.prototype.trimstart' in that specification.
TypedArray.prototype.buffer - JavaScript
examples using the buffer property var buffer = new arraybuffer(8); var uint16 = new uint16array(buffer); uint16.buffer; // arraybuffer { byte
length: 8 } specifications specification ecmascript (ecma-262)the definition of 'typedarray.prototype.buffer' in that specification.
TypedArray.prototype.set() - JavaScript
all values from the source array are copied into the target array, unless the
length of the source array plus the offset exceeds the
length of the target array, in which case an exception is thrown.
TypedArray.prototype.subarray() - JavaScript
description the range specified by begin and end is clamped to the valid index range for the current array; if the computed
length of the new array would be negative, it's clamped to zero.
Codecs used by WebRTC - Web media technologies
the prefercodec() function called by the code above looks like this to move a specified codec to the top of the list (to be prioritized during negotiation): function prefercodec(codecs, mimetype) { let othercodecs = []; let sortedcodecs = []; let count = codecs.
length; codecs.foreach(codec => { if (codec.mimetype === mimetype) { sortedcodecs.push(codec); } else { othercodecs.push(codec); } }); return sortedcodecs.concat(othercodecs); } this code is just splitting the codec list into two arrays: one containing codecs whose mime type matches the one specified by the mimetype parameter, and the other with all the other codecs.
Critical rendering path - Web Performance
performance tips include 1) minimizing the number of critical resources by deferring their download, marking them as async, or eliminating them altogether, 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.
Understanding latency - Web Performance
latency can be measured one way, for example, the amount of time it takes to send a request for resources, or the
length of the entire round-trip from the browser’s request for a resource to the moment when the requested resource arrives at the browser.
Web Performance
it is a way of shorten the critical rendering path
length, what would translate into improved page load times.
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
var gamesimages = []; for(var i=0; i<games.
length; i++) { gamesimages.push('data/img/'+games[i].slug+'.jpg'); } var contenttocache = appshellfiles.concat(gamesimages); then we can manage the install event itself: self.addeventlistener('install', (e) => { console.log('[service worker] install'); e.waituntil( caches.open(cachename).then((cache) => { console.log('[service worker] caching all: app shell and content'); ret...
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
create a notification the example app creates a notification out of the available data — a game is picked at random, and the chosen one feeds the notification with the content: it sets the game's name as the title, mentioning the author in the body, and showing the image as an icon: 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); } a new random notification is created every 30 secon...
Media - Progressive web apps (PWAs)
for print media, you normally use appropriate
length units like inches (in) and points (pt = 1/72 inch), or centimeters (cm) and millimeters (mm).
Progressive web apps (PWAs)
introduction to progressive web apps progressive web app structure making pwas work offline with service workers how to make pwas installable how to make pwas re-engageable using notifications and push progressive loading technology guides client-side storage — a
lengthy guide showing how and when to use web storage, indexeddb, and service workers.
clipPathUnits - SVG: Scalable Vector Graphics
it means that the origin of the coordinate system is the top left corner of the object bounding box and the width and height of the object bounding box are considered to have a
length of 1 unit value.
dur - SVG: Scalable Vector Graphics
1s" repeatcount="indefinite"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="3s" repeatcount="indefinite"/> </rect> </svg> usage notes value <clock-value> | media | indefinite default value indefinite animatable no <clock-value> this value specifies the
length of the simple duration.
font-size - SVG: Scalable Vector Graphics
y element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-size="smaller">smaller</text> <text x="100" y="20" font-size="2em">2em</text> </svg> usage notes value <absolute-size> | <relative-size> | <
length-percentage> default value medium animatable yes for a description of the values, please refer to the css font-size property.
fr - SVG: Scalable Vector Graphics
x="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="25%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100" fill="url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <
length> default value 0 animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x=...
fx - SVG: Scalable Vector Graphics
cx="0.5" cy="0.5" r="0.5" fx="0.75" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100" fill="url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <
length> default value coincides with the presentational value of cx for the element whether the value for cx was inherited or not.
fy - SVG: Scalable Vector Graphics
cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.75" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100" fill="url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <
length> default value coincides with the presentational value of cy for the element whether the value for cy was inherited or not.
markerHeight - SVG: Scalable Vector Graphics
only one element is using this attribute: <marker> usage notes value <
length-percentage> | <number> default value 3 animatable yes <
length-percentage> this value defines either an absolute or a relative height of the marker.
markerWidth - SVG: Scalable Vector Graphics
only one element is using this attribute: <marker> usage notes value <
length-percentage> | <number> default value 3 animatable yes <
length-percentage> this value defines either an absolute or a relative width of the marker.
max - SVG: Scalable Vector Graphics
values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" max="6s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value none animatable no <clock-value> specifies the
length of the maximum value of the active duration, measured in local time.
min - SVG: Scalable Vector Graphics
e" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" min="2s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value 0 animatable no <clock-value> specifies the
length of the minimum value of the active duration, measured in local time.
stroke-dasharray - SVG: Scalable Vector Graphics
ck" stroke-dasharray="4 1 2" /> <!-- dashes and gaps of various sizes with an even number of values --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="4 1 2 3" /> </svg> usage notes value none | <dasharray> default value none animatable yes <dasharray> a list of comma and/or white space separated <
length>s and <percentage>s that specify the
lengths of alternating dashes and gaps.
stroke-dashoffset - SVG: Scalable Vector Graphics
ends up in the same rendering as the previous example --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="1" /> <!-- the following red lines highlight the offset of the dash array for each line --> <path d="m0,5 h-3 m0,7 h3 m0,9 h-1" stroke="rgba(255,0,0,.5)" /> </svg> usage notes value <percentage> | <
length> default value 0 animatable yes the offset is usually expressed in user units resolved against the path
length but if a <percentage> is used, the value is resolved as a percentage of the current viewport.
stroke-width - SVG: Scalable Vector Graphics
30 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke width: 1 --> <circle cx="5" cy="5" r="3" stroke="green" /> <!-- stroke width as a number --> <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" /> <!-- stroke width as a percentage --> <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" /> </svg> usage notes value <
length> | <percentage> default value 1px animatable yes note: a percentage value is always computed as a percentage of the normalized viewbox diagonal
length.
<feConvolveMatrix> - SVG: Scalable Vector Graphics
*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 class style specific attributes in order kernelmatrix divisor bias targetx targety edgemode kernelunit
length preservealpha dom interface this element implements the svgfeconvolvematrixelement interface.
<feSpecularLighting> - SVG: Scalable Vector Graphics
attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in surfacescale specularconstant specularexponent kernelunit
length dom interface this element implements the svgfespecularlightingelement interface.
<polyline> - SVG: Scalable Vector Graphics
ts="0,100 50,25 50,75 100,0" /> <!-- example of the same polyline shape with stroke and no fill --> <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline value type: <number>+ ; default value: ""; animatable: yes path
length this attribute lets specify the total
length for the path, in user units.
Positions - SVG: Scalable Vector Graphics
(however, the device may decide, what it understands as one pixel.)
lengths in the svg file with specific dimensions, like "in" or "cm", are then calculated in a way that makes them appear 1:1 in the resulting image.