Search completed in 0.96 seconds.
JavaScript modules - JavaScript
« previous this guide gives you all you need to get started with
javascript module syntax.
... « previous this guide gives you all you need to get started with
javascript module syntax.
...o get started with
javascript module syntax.
...And 27 more matches
JavaScript shells - JavaScript
a
javascript shell allows you to quickly test snippets of
javascript code without having to reload a web page.
... a
javascript shell allows you to quickly test snippets of
javascript code without having to reload a web page.
... a
javascript shell allows you to quickly test snippets of
javascript code without having to reload a web page.
...And 21 more matches
JavaScript data types and data structures - JavaScript
programming languages all have built-in data structures, but these often differ from one language to another.
... programming languages all have built-in data structures, but these often differ from one language to another.
...es all have built-in data structures, but these often differ from one language to another.
...And 17 more matches
About the JavaScript reference - JavaScript
the
javascript reference serves as a repository of facts about the
javascript language.
... the
javascript reference serves as a repository of facts about the
javascript language.
... the
javascript reference serves as a repository of facts about the
javascript language.
...And 17 more matches
JavaScript typed arrays - JavaScript
javascript typed arrays are array-like objects that provide a mechanism for reading and writing raw binary data in memory buffers.
...
javascript typed arrays are array-like objects that provide a mechanism for reading and writing raw binary data in memory buffers.
...
javascript typed arrays are array-like objects that provide a mechanism for reading and writing raw binary data in memory buffers.
...And 3 more matches
JavaScript Guide - JavaScript
the
javascript guide shows you how to use
javascript and gives an overview of the language.
... the
javascript guide shows you how to use
javascript and gives an overview of the language.
... the
javascript guide shows you how to use
javascript and gives an overview of the language.
...And 2 more matches
JavaScript technologies overview - JavaScript
introduction whereas html defines a webpage's structure and content and css sets the formatting and appearance,
javascript adds interactivity to a webpage and creates rich web applications.
... introduction whereas html defines a webpage's structure and content and css sets the formatting and appearance,
javascript adds interactivity to a webpage and creates rich web applications.
...structure and content and css sets the formatting and appearance,
javascript adds interactivity to a webpage and creates rich web applications.
...And 2 more matches
JavaScript reference - JavaScript
this part of the
javascript section on mdn serves as a repository of facts about the
javascript language.
... this part of the
javascript section on mdn serves as a repository of facts about the
javascript language.
...nalization intl intl.collator intl.datetimeformat intl.displaynames intl.listformat intl.locale intl.numberformat intl.pluralrules intl.relativetimeformat webassembly webassembly webassembly.module webassembly.instance webassembly.memory webassembly.table webassembly.compileerror webassembly.linkerror webassembly.runtimeerror statements
javascript statements and declarations control flowblock break continue empty if...else switch throw try...catch declarations var let const functions and classes function function* async function return class iterations do...while for for each...in for...in for...of for await...of while other debugger import label with e...
...And 2 more matches
JavaScript error reference - JavaScript
below, you'll find a list of errors which are thrown by
javascript.
... the reported problem isn't always immediately clear.
...e pages below will provide additional details about these errors.
...lid assignment to const "x"typeerror: property "x" is non-configurable and can't be deletedtypeerror: setting getter-only property "x"typeerror: variable "x" redeclares argumenturierror: malformed uri sequencewarning: 08/09 is not a legal ecma-262 octal constantwarning: -file- is being assigned a //# sourcemappingurl, but already has onewarning: date.prototype.tolocaleformat is deprecatedwarning:
javascript 1.6's for-each-in loops are deprecatedwarning: string.x is deprecated; use string.prototype.x insteadwarning: expression closures are deprecatedwarning: unreachable code after return statement ...
Warning: JavaScript 1.6's for-each-in loops are deprecated - JavaScript
the
javascript warning "
javascript 1.6's for-each-in loops are deprecated; consider using es6 for-of instead" occurs when a for each (variable in obj) statement is used.
... the
javascript warning "
javascript 1.6's for-each-in loops are deprecated; consider using es6 for-of instead" occurs when a for each (variable in obj) statement is used.
... the
javascript warning "
javascript 1.6's for-each-in loops are deprecated; consider using es6 for-of instead" occurs when a for each (variable in obj) statement is used.
Handling common JavaScript problems - Learn web development
previous overview: cross browser testing next now we'll look at common cross-browser
javascript problems and how to fix them.
... previous overview: cross browser testing next now we'll look at common cross-browser
javascript problems and how to fix them.
...erview: cross browser testing next now we'll look at common cross-browser
javascript problems and how to fix them.
...And 76 more matches
What is JavaScript? - Learn web development
overview: first steps next welcome to the mdn beginner's
javascript course!
... overview: first steps next welcome to the mdn beginner's
javascript course!
... overview: first steps next welcome to the mdn beginner's
javascript course!
...And 72 more matches
Introduction - JavaScript
« previousnext » this chapter introduces
javascript and discusses some of its fundamental concepts.
...
javascript and discusses some of its fundamental concepts.
...e of its fundamental concepts.
...And 61 more matches
Details of the object model - JavaScript
« previousnext »
javascript is an object-based language based on prototypes, rather than being class-based.
... « previousnext »
javascript is an object-based language based on prototypes, rather than being class-based.
... « previousnext »
javascript is an object-based language based on prototypes, rather than being class-based.
...And 55 more matches
JavaScript
javascript (js) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions.
...
javascript (js) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions.
...mming language with first-class functions.
...And 48 more matches
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
by davey waterson,
javascript architect, aptana there's no debate that
javascript is the most widely used language client-side on the web.
... by davey waterson,
javascript architect, aptana there's no debate that
javascript is the most widely used language client-side on the web.
... by davey waterson,
javascript architect, aptana there's no debate that
javascript is the most widely used language client-side on the web.
...And 46 more matches
Introduction to the JavaScript shell
the
javascript shell (js) is a command-line program included in the spidermonkey source distribution.
... the
javascript shell (js) is a command-line program included in the spidermonkey source distribution.
... the
javascript shell (js) is a command-line program included in the spidermonkey source distribution.
...And 34 more matches
Grammar and types - JavaScript
« previousnext » this chapter discusses
javascript's basic grammar, variable declarations, data types and literals.
... « previousnext » this chapter discusses
javascript's basic grammar, variable declarations, data types and literals.
... « previousnext » this chapter discusses
javascript's basic grammar, variable declarations, data types and literals.
...And 31 more matches
JavaScript basics - Learn web development
previous overview: getting started with the web next
javascript is a programming language that adds interactivity to your website.
... previous overview: getting started with the web next
javascript is a programming language that adds interactivity to your website.
...previous overview: getting started with the web next
javascript is a programming language that adds interactivity to your website.
...And 30 more matches
CSS and JavaScript accessibility best practices - Learn web development
previous overview: accessibility next css and
javascript, when used properly, also have the potential to allow for accessible web experiences ...
... previous overview: accessibility next css and
javascript, when used properly, also have the potential to allow for accessible web experiences ...
...d
javascript, when used properly, also have the potential to allow for accessible web experiences ...
...And 29 more matches
Use JavaScript within a webpage - Learn web development
take your webpages to the next level by harnessing
javascript.
... take your webpages to the next level by harnessing
javascript.
... take your webpages to the next level by harnessing
javascript.
...And 29 more matches
Basic math in JavaScript — numbers and operators - Learn web development
previous overview: first steps next at this point in the course we discuss math in
javascript — how we can use operators and other features to successfully manipulate numbers to do our bidding.
... previous overview: first steps next at this point in the course we discuss math in
javascript — how we can use operators and other features to successfully manipulate numbers to do our bidding.
...vious overview: first steps next at this point in the course we discuss math in
javascript — how we can use operators and other features to successfully manipulate numbers to do our bidding.
...And 24 more matches
A first splash into JavaScript - Learn web development
previous overview: first steps next now you've learned something about the theory of
javascript, and what you can do with it, we are going to give you a crash course in the basic features of
javascript via a completely practical tutorial.
...s next now you've learned something about the theory of
javascript, and what you can do with it, we are going to give you a crash course in the basic features of
javascript via a completely practical tutorial.
... do with it, we are going to give you a crash course in the basic features of
javascript via a completely practical tutorial.
...And 23 more matches
JavaScript — Dynamic client-side scripting - Learn web development
javascript is a programming language that allows you to implement complex things on web pages.
...
javascript is a programming language that allows you to implement complex things on web pages.
...isplay static information for you to look at—displaying timely content updates, interactive maps, animated 2d/3d graphics, scrolling video jukeboxes, or more—you can bet that
javascript is probably involved.
...And 22 more matches
Inheritance and the prototype chain - JavaScript
javascript is a bit confusing for developers experienced in class-based languages (like java or c++), as it is dynamic and does not provide a class implementation per se (the class keyword is introduced in es2015, but is syntactical sugar,
javascript remains prototype-based).
...
javascript is a bit confusing for developers experienced in class-based languages (like java or c++), as it is dynamic and does not provide a class implementation per se (the class keyword is introduced in es2015, but is syntactical sugar,
javascript remains prototype-based).
...).
...And 22 more matches
Strict mode - JavaScript
sometimes you'll see the default, non-strict mode referred to as "sloppy mode".
... sometimes you'll see the default, non-strict mode referred to as "sloppy mode".
...erent semantics from normal code.
...And 22 more matches
Solve common problems in your JavaScript code - Learn web development
the following links point to solutions to common problems you may encounter when writing
javascript.
... the following statement: myfunction(); function scope remember that functions have their own scope — you can't access a variable value set inside a function from outside the function, unless you declared the variable globally (i.e.
... return from a function, the
javascript interpreter exits the function — no code after the return statement will run.
...And 20 more matches
JavaScript Daemons Management - Archive of obsolete content
in computer science a daemon is a task that runs as a background process, rather than being under the direct control of an interactive user.
... in computer science a daemon is a task that runs as a background process, rather than being under the direct control of an interactive user.
...n the recommended way for simple animations, because daemon without its collection of methods is essentially a clone of it.
...And 19 more matches
JavaScript - MDN Web Docs Glossary: Definitions of Web-related terms
summary
javascript (or "js") is a programming language used most often for dynamic client-side scripts on webpages, but it is also often used on the server-side, using a runtime such as node.js.
... summary
javascript (or "js") is a programming language used most often for dynamic client-side scripts on webpages, but it is also often used on the server-side, using a runtime such as node.js.
... summary
javascript (or "js") is a programming language used most often for dynamic client-side scripts on webpages, but it is also often used on the server-side, using a runtime such as node.js.
...And 19 more matches
New in JavaScript 1.3 - Archive of obsolete content
the following is a changelog for
javascript from netscape navigator 4.0 to 4.5.
... the following is a changelog for
javascript from netscape navigator 4.0 to 4.5.
... the following is a changelog for
javascript from netscape navigator 4.0 to 4.5.
...And 18 more matches
In depth: Microtasks and the JavaScript runtime environment - Web APIs
when debugging or, possibly, when trying to decide upon the best approach to solving a problem around timing and scheduling of tasks and microtasks, there are things about how the
javascript runtime operates under the hood that may be useful to understand.
... when debugging or, possibly, when trying to decide upon the best approach to solving a problem around timing and scheduling of tasks and microtasks, there are things about how the
javascript runtime operates under the hood that may be useful to understand.
...re are things about how the
javascript runtime operates under the hood that may be useful to understand.
...And 18 more matches
JavaScript First Steps - Learn web development
in our first
javascript module, we first answer some fundamental questions such as "what is
javascript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing
javascript.
...st practical experience of writing
javascript.
...s.
...And 17 more matches
Inheritance in JavaScript - Learn web development
ils of oojs now explained, this article shows how to create "child" object classes (constructors) that inherit features from their "parent" classes.
... when and where you might use oojs, and look at how classes are dealt with in modern ecmascript syntax.
...and oojs basics (see introduction to objects).
...And 17 more matches
Introducing JavaScript objects - Learn web development
in
javascript, most things are objects, from core
javascript features like arrays to the browser apis built on top of
javascript.
... in
javascript, most things are objects, from core
javascript features like arrays to the browser apis built on top of
javascript.
...eate your own objects.
...And 17 more matches
New in JavaScript - Archive of obsolete content
this chapter contains information about
javascript's version history and implementation status for mozilla/spidermonkey-based
javascript applications, such as firefox.
... this chapter contains information about
javascript's version history and implementation status for mozilla/spidermonkey-based
javascript applications, such as firefox.
...tus for the current standard ecma-262 edition 5.1 in mozilla-based engines and products.
...And 16 more matches
Using JavaScript code modules
javascript code modules are a concept introduced in gecko 1.9 and can be used for sharing code between different privileged scopes.
...
javascript code modules are a concept introduced in gecko 1.9 and can be used for sharing code between different privileged scopes.
...
javascript code modules are a concept introduced in gecko 1.9 and can be used for sharing code between different privileged scopes.
...And 16 more matches
Working with objects - JavaScript
« previousnext »
javascript is designed on a simple object-based paradigm.
...ties, and a property is an association between a name (or key) and a value.
...ase the property is known as a method.
...And 16 more matches
Using the WebAssembly JavaScript API - WebAssembly
if you have already compiled a module from another language using tools like emscripten, or loaded and run the code yourself, the next step is to learn more about using the other features of the webassembly
javascript api.
...next step is to learn more about using the other features of the webassembly
javascript api.
...sm module (which we also meet in converting webassembly format to wasm): (module (func $i (import "imports" "imported_func") (param i32)) (func (export "exported_func") i32.const 42 call $i)) in the second line, you will see that the import has a two-level namespace — the internal function $i is imported from imports.imported_func.
...And 16 more matches
JavaScript performance - Learn web development
previous overview: performance next while images and video account for over 70% of the bytes downloaded for the average website, byte per byte,
javascript has a greater negative impact on performance.
... previous overview: performance next while images and video account for over 70% of the bytes downloaded for the average website, byte per byte,
javascript has a greater negative impact on performance.
... per byte,
javascript has a greater negative impact on performance.
...And 15 more matches
JavaScript object basics - Learn web development
overview: objects next in this article, we'll look at fundamental
javascript object syntax, and revisit some
javascript features that we've already seen earlier in the course, reiterating the fact that many of the features you've already dealt with are objects.
... overview: objects next in this article, we'll look at fundamental
javascript object syntax, and revisit some
javascript features that we've already seen earlier in the course, reiterating the fact that many of the features you've already dealt with are objects.
...e already seen earlier in the course, reiterating the fact that many of the features you've already dealt with are objects.
...And 14 more matches
eval() - JavaScript
warning: executing
javascript from a string is an enormous security risk.
... warning: executing
javascript from a string is an enormous security risk.
... see never use eval()!, below.
...And 14 more matches
Object-oriented JavaScript for beginners - Learn web development
previous overview: objects next with the basics out of the way, we'll now focus on object-oriented
javascript (oojs) — this article presents a basic view of object-oriented programming (oop) theory, then explores how
javascript emulates object classes via constructor functions, and how to create object instances.
...t with the basics out of the way, we'll now focus on object-oriented
javascript (oojs) — this article presents a basic view of object-oriented programming (oop) theory, then explores how
javascript emulates object classes via constructor functions, and how to create object instances.
...object classes via constructor functions, and how to create object instances.
...And 13 more matches
JavaScript Object Management - Archive of obsolete content
« previousnext » chrome
javascript in this section we'll look into how to handle
javascript data effectively, beginning with chrome code, in ways which will prevent pollution of shared namespaces and conflicts with other add-ons resulting from such global namespace pollution.
... « previousnext » chrome
javascript in this section we'll look into how to handle
javascript data effectively, beginning with chrome code, in ways which will prevent pollution of shared namespaces and conflicts with other add-ons resulting from such global namespace pollution.
... « previousnext » chrome
javascript in this section we'll look into how to handle
javascript data effectively, beginning with chrome code, in ways which will prevent pollution of shared namespaces and conflicts with other add-ons resulting from such global namespace pollution.
...And 12 more matches
Introducing asynchronous JavaScript - Learn web development
previous overview: asynchronous next in this article we briefly recap the problems associated with synchronous
javascript, and take a first look at some of the different asynchronous techniques you'll encounter, showing how they can help us solve such problems.
... previous overview: asynchronous next in this article we briefly recap the problems associated with synchronous
javascript, and take a first look at some of the different asynchronous techniques you'll encounter, showing how they can help us solve such problems.
... in this article we briefly recap the problems associated with synchronous
javascript, and take a first look at some of the different asynchronous techniques you'll encounter, showing how they can help us solve such problems.
...And 12 more matches
Handling text — strings in JavaScript - Learn web development
previous overview: first steps next next, we'll turn our attention to strings — this is what pieces of text are called in programming.
...ntion to strings — this is what pieces of text are called in programming.
...cle, we'll look at all the common things that you really ought to know about strings when learning
javascript, such as creating strings, escaping quotes in strings, and joining strings together.
...And 12 more matches
The JavaScript Runtime
erpretation beginning with rhino 1.4 release 2, an interpretive mode is supported.
...interpretive mode, an internal representation of the compiled form is created and stored rather than generating a java class.
...nd stored rather than generating a java class.
...And 12 more matches
Using microtasks in JavaScript with queueMicrotask() - Web APIs
a microtask is a short function which is executed after the function or program which created it exits and only if the
javascript execution stack is empty, but before returning control to the event loop being used by the user agent to drive the script's execution environment.
...being used by the user agent to drive the script's execution environment.
...re are other times when the ability to defer work until the current event loop pass is wrapping up.
...And 12 more matches
Control flow and error handling - JavaScript
« previousnext »
javascript supports a compact set of statements, specifically control flow statements, that you can use to incorporate a great deal of interactivity in your application.
... « previousnext »
javascript supports a compact set of statements, specifically control flow statements, that you can use to incorporate a great deal of interactivity in your application.
......
...And 11 more matches
Expressions and operators - JavaScript
« previousnext » this chapter describes
javascript's expressions and operators, including assignment, comparison, arithmetic, bitwise, logical, string, ternary and more.
... « previousnext » this chapter describes
javascript's expressions and operators, including assignment, comparison, arithmetic, bitwise, logical, string, ternary and more.
... is also available in the reference.
...And 11 more matches
Lexical grammar - JavaScript
this page describes
javascript's lexical grammar.
...o-break space <nbsp> normal space, but no point at which a line may break others other unicode space characters <usp> spaces in unicode on wikipedia line terminators in addition to white space characters, line terminator characters are used to improve the readability of the source text.
... u+000a line feed <lf> new line character in unix systems.
...And 11 more matches
What went wrong? Troubleshooting JavaScript - Learn web development
previous overview: first steps next when you built up the "guess the number" game in the previous article, you may have found that it didn't work.
...you built up the "guess the number" game in the previous article, you may have found that it didn't work.
...o fix!
...And 10 more matches
JavaScript code modules
note: these are not the same thing as standard
javascript modules.
... note: these are not the same thing as standard
javascript modules.
... note: these are not the same thing as standard
javascript modules.
...And 10 more matches
Memory Management - JavaScript
low-level languages like c, have manual memory management primitives such as malloc() and free().
...life cycle regardless of the programming language, the memory life cycle is pretty much always the same: allocate the memory you need use the allocated memory (read, write) release the allocated memory when it is not needed anymore the second part is explicit in all languages.
...he programming language, the memory life cycle is pretty much always the same: allocate the memory you need use the allocated memory (read, write) release the allocated memory when it is not needed anymore the second part is explicit in all languages.
...And 10 more matches
Downloading JSON and JavaScript in extensions - Archive of obsolete content
a common practice found in many extensions is using xmlhttprequest (or some other mechanism) to download
javascript or json (they are different) from a remote website.
... a common practice found in many extensions is using xmlhttprequest (or some other mechanism) to download
javascript or json (they are different) from a remote website.
...) to download
javascript or json (they are different) from a remote website.
...And 9 more matches
Exception logging in JavaScript - Archive of obsolete content
in versions of firefox prior to firefox 3, all
javascript exceptions were always logged into the error console if they remained unhandled at the time execution returned back into c++ code.
... in versions of firefox prior to firefox 3, all
javascript exceptions were always logged into the error console if they remained unhandled at the time execution returned back into c++ code.
...re always logged into the error console if they remained unhandled at the time execution returned back into c++ code.
...And 9 more matches
New in JavaScript 1.1 - Archive of obsolete content
the following is a changelog for
javascript from netscape navigator 2.0 to 3.0.
... the following is a changelog for
javascript from netscape navigator 2.0 to 3.0.
... the following is a changelog for
javascript from netscape navigator 2.0 to 3.0.
...And 9 more matches
Asynchronous JavaScript - Learn web development
in this module we take a look at asynchronous
javascript, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.
... in this module we take a look at asynchronous
javascript, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.
...rtant, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.
...And 9 more matches
SpiderMonkey: The Mozilla JavaScript runtime
spidermonkey is mozilla's
javascript engine written in c and c++.
... spidermonkey is mozilla's
javascript engine written in c and c++.
... in c and c++.
...And 9 more matches
Indexed collections - JavaScript
x value.
...n the object representing the array, instead of an array element.
...myarray = ['mango', 'apple', 'orange'] understanding length at the implementation level,
javascript's arrays actually store their elements as standard object properties, using the array index as the property name.
...And 9 more matches
JavaScript timers - Archive of obsolete content
a block of
javascript code is generally executed synchronously.
... a block of
javascript code is generally executed synchronously.
...ween each call to that function.
...And 8 more matches
New in JavaScript 1.2 - Archive of obsolete content
the following is a changelog for
javascript from netscape navigator 3.0 to 4.0.
... the following is a changelog for
javascript from netscape navigator 3.0 to 4.0.
... the following is a changelog for
javascript from netscape navigator 3.0 to 4.0.
...And 8 more matches
Functions - JavaScript
« previousnext » functions are one of the fundamental building blocks in
javascript.
... « previousnext » functions are one of the fundamental building blocks in
javascript.
... similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output.
...And 8 more matches
Writing JavaScript for XHTML - Archive of obsolete content
g browser considers the content to be html, and does not utilise its xml parser.
...dia type at all.
...sometimes known as 'polyglot' documents.) to test the following examples locally, use firefox's extension switch.
...And 7 more matches
Creating JavaScript callbacks in components
callback patterns in idl xpcom components use idl to create interfaces.
...ler = { onword : function(word) { alert(word); } }; var stringparser = /* get a reference to the parser somehow */ stringparser.addobserver(wordhandler); stringparser.parse("pay no attention to the man behind the curtain"); you can find examples of this pattern all over the mozilla codebase.
...rse("pay no attention to the man behind the curtain"); you can find examples of this pattern all over the mozilla codebase.
...And 7 more matches
Array - JavaScript
the
javascript array class is a global object that is used in the construction of arrays; which are high-level, list-like objects.
... the
javascript array class is a global object that is used in the construction of arrays; which are high-level, list-like objects.
...ct that is used in the construction of arrays; which are high-level, list-like objects.
...And 7 more matches
Archived JavaScript Reference - Archive of obsolete content
obsolete
javascript features and unmaintained docs arguments.callerthe obsolete arguments.caller property used to provide the function that invoked the currently executing function.
... obsolete
javascript features and unmaintained docs arguments.callerthe obsolete arguments.caller property used to provide the function that invoked the currently executing function.
...iable over all values of object's properties.
...And 6 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
previous overview: asynchronous next this tutorial looks at the traditional methods
javascript has available for running code asychronously after a set time period has elapsed, or at a regular interval (e.g.
...ious overview: asynchronous next this tutorial looks at the traditional methods
javascript has available for running code asychronously after a set time period has elapsed, or at a regular interval (e.g.
...r interval (e.g.
...And 6 more matches
Intensive JavaScript - Firefox Developer Tools
by default the browser uses a single thread to run all the
javascript in your page as well as to perform layout, reflows, and garbage collection.
... by default the browser uses a single thread to run all the
javascript in your page as well as to perform layout, reflows, and garbage collection.
... by default the browser uses a single thread to run all the
javascript in your page as well as to perform layout, reflows, and garbage collection.
...And 6 more matches
JSON - JavaScript
the json object contains methods for parsing
javascript object notation (json) and converting values to json.
... the json object contains methods for parsing
javascript object notation (json) and converting values to json.
... the json object contains methods for parsing
javascript object notation (json) and converting values to json.
...And 6 more matches
Rhino JavaScript compiler
overview the
javascript compiler translates
javascript source into java class files.
... overview the
javascript compiler translates
javascript source into java class files.
...cript source into java class files.
...And 5 more matches
How to build an XPCOM component in JavaScript
if you are looking for add-on sdk solution for xpcom
javascript components then check out platform/xpcom module first.
... if you are looking for add-on sdk solution for xpcom
javascript components then check out platform/xpcom module first.
...l will show you what you need to do to get a component working in as few and as simple steps as possible.
...And 5 more matches
Numbers and dates - JavaScript
« previousnext » this chapter introduces the concepts, objects and functions used to work with and perform calculations using numbers and dates in
javascript.
... « previousnext » this chapter introduces the concepts, objects and functions used to work with and perform calculations using numbers and dates in
javascript.
...recision 64-bit binary format ieee 754 (i.e., a number between ±2−1022 and ±2+1023, or about ±10−308 to ±10+308, with a numeric precision of 53 bits).
...And 5 more matches
Functions - JavaScript
generally speaking, a function is a "subprogram" that can be called by code external (or internal in the case of recursion) to the function.
...f statements called the function body.
...unction, and the function will return a value.
...And 5 more matches
WeakRef - JavaScript
rom getting garbage-collected.
...f() returns the weakref object's target object, or undefined if the target object has been reclaimed.
...c behaviors not guaranteed by the specification.
...And 5 more matches
Destructuring assignment - JavaScript
the destructuring assignment syntax is a
javascript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
...string that matched each parenthesized group in the regular expression.
...ession.
...And 5 more matches
JavaScript building blocks - Learn web development
in this module, we continue our coverage of all
javascript's key fundamental features, turning our attention to commonly-encountered types of code blocks such as conditional statements, loops, functions, and events.
...ly in passing — here we'll discuss it all explicitly.
...ls in any programming language, code needs to make decisions and carry out actions accordingly depending on different inputs.
...And 4 more matches
Debugging JavaScript
this document is intended to help developers writing
javascript code in mozilla, mainly for mozilla itself, but it may also be useful for web developers.
... is intended to help developers writing
javascript code in mozilla, mainly for mozilla itself, but it may also be useful for web developers.
...rs.
...And 4 more matches
Closures - JavaScript
a closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).
...xecuted.
...tuitive that this code still works.
...And 4 more matches
JSON.stringify() - JavaScript
the json.stringify() method converts a
javascript object or value to a json string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.
...rializing circular references throws "typeerror: cyclic object value" json.stringify(circularreference); to serialize circular references you can use a library that supports them (e.g.
... json.stringify(circularreference); to serialize circular references you can use a library that supports them (e.g.
...And 4 more matches
CSS and JavaScript animation performance - Web Performance
animations are critical for a pleasurable user experience on many applications.
... animations are critical for a pleasurable user experience on many applications.
...ion's style, as well as possible intermediate points.
...And 4 more matches
Understanding client-side JavaScript frameworks - Learn web development
javascript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications.
... want to back up and first answer more fundamental questions such as: why should i use a framework?
... want you to go forward and learn about frameworks in a pragmatic way that doesn't forget about web platform fundamental best practices such as accessibility.
...And 3 more matches
javascript.options.strict
javascript warnings are generated when code is executed that doesn't cause a run-time error, but is non-standard, poorly written, or prone to cause logic errors.
...
javascript warnings are generated when code is executed that doesn't cause a run-time error, but is non-standard, poorly written, or prone to cause logic errors.
...
javascript warnings are generated when code is executed that doesn't cause a run-time error, but is non-standard, poorly written, or prone to cause logic errors.
...And 3 more matches
Creating JavaScript jstest reftests
directory contains tests of spidermonkey conformance to ecmascript as well as spidermonkey non-standard extenstions to ecmascript.
...nical committee.
...ng exceptions, and the matching is fuzzy in an unspecified way.
...And 3 more matches
The JavaScript input interpreter - Firefox Developer Tools
you can interpret
javascript expressions in real time using the interpreter provided by the web console.
... you can interpret
javascript expressions in real time using the interpreter provided by the web console.
... execute the input, but behaves as if you had pressed shift+enter , so you can finish entering the function definition.
...And 3 more matches
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
introduction this article is an overview of some powerful, fundamental dom level 1 methods and how to use them from
javascript.
....
... its parent <table> element using tbl.appendchild(tblbody); next, we attach the <table> element to its parent <body> element using body.appendchild(tbl); remember this technique.
...And 3 more matches
Loops and iteration - JavaScript
« previousnext » loops offer a quick and easy way to do something repeatedly.
... « previousnext » loops offer a quick and easy way to do something repeatedly.
...different kinds of loops, but they all essentially do the same thing: they repeat an action some number of times.
...And 3 more matches
Regular expressions - JavaScript
« previousnext » regular expressions are patterns used to match character combinations in strings.
... « previousnext » regular expressions are patterns used to match character combinations in strings.
...add them using string.replace: function escaperegexp(string) { return string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string } the "g" after the regular expression is an option or flag that performs a global search, looking in the whole string and returning all matches.
...And 3 more matches
Warning: -file- is being assigned a //# sourceMappingURL, but already has one - JavaScript
the
javascript warning "-file- is being assigned a //# sourcemappingurl, but already has one." occurs when a source map has been specified more than once for a given
javascript source.
... the
javascript warning "-file- is being assigned a //# sourcemappingurl, but already has one." occurs when a source map has been specified more than once for a given
javascript source.
... warning "-file- is being assigned a //# sourcemappingurl, but already has one." occurs when a source map has been specified more than once for a given
javascript source.
...And 3 more matches
SyntaxError: missing ; before statement - JavaScript
the
javascript exception "missing ; before statement" occurs when there is a semicolon (;) missing somewhere and can't be added by automatic semicolon insertion (asi).
... the
javascript exception "missing ; before statement" occurs when there is a semicolon (;) missing somewhere and can't be added by automatic semicolon insertion (asi).
...re statement" occurs when there is a semicolon (;) missing somewhere and can't be added by automatic semicolon insertion (asi).
...And 3 more matches
JavaScript Client API - Archive of obsolete content
overview this page describes how to use the internal client-side sync
javascript api.
... people should always know with whom they are dealing and where the information or software they are downloading came from).
...is produced or endorsed by mozilla.
...And 2 more matches
2D breakout game using pure JavaScript - Game development
next » in this step-by-step tutorial we create a simple mdn breakout game written entirely in pure
javascript and rendered on html5 <canvas>.
...able, live samples available to play with so you can see what the intermediate stages should look like.
...wn simple web games.
...And 2 more matches
Text formatting - JavaScript
« previousnext » this chapter introduces how to work with strings and text in
javascript.
... « previousnext » this chapter introduces how to work with strings and text in
javascript.
...ototype.codepointat().
...And 2 more matches
Deprecated and obsolete features - JavaScript
this page lists features of
javascript that are deprecated (that is, still available but planned for removal) and obsolete (that is, no longer usable).
...ch, and string.prototype.replace are deprecated.
...ubstr probably won't be removed anytime soon, but it's defined in annex b of the ecma-262 standard, whose introduction states: "… programmers should not use or assume the existence of these features and behaviours when writing new ecmascript code.
...And 2 more matches
JSON.parse() - JavaScript
the json.parse() method parses a json string, constructing the
javascript value or object described by the string.
...var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[ee][+\-]?\d+)?/g; var rx_four = /(?:^|:|,)(?:\s*\[)+/g; var rx_dangerous = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g; json.parse = function(text, reviver) { // the parse method takes a text and an optional reviver function, and returns // a
javascript value if the text is a valid json text.
... value[k] = v; } else { delete value[k]; } } } } return reviver.call(holder, key, value); } // parsing happens in four stages.
...And 2 more matches
Number - JavaScript
number is a primitive wrapper object used to represent and manipulate numbers like 37 or -9.25.
...format ieee 754 value, like double in java or c#.
...mits to what it can store.
...And 2 more matches
WebAssembly.Table - JavaScript
the webassembly.table() object is a
javascript wrapper object — an array-like structure representing a webassembly table, which stores function references.
... the webassembly.table() object is a
javascript wrapper object — an array-like structure representing a webassembly table, which stores function references.
... the webassembly.table() object is a
javascript wrapper object — an array-like structure representing a webassembly table, which stores function references.
...And 2 more matches
isNaN() - JavaScript
s whether a value is nan or not.
... // true: "blabla" is converted to a number.
...is as a number fails and returns nan useful special-case behavior there is a more usage oriented way to think of isnan(): if isnan(x) returns false, you can use x in an arithmetic expression not making the expression return nan.
...And 2 more matches
typeof - JavaScript
b.com/mdn/interactive-examples and send us a pull request.
...ar expressions section for historical results // the following are confusing, dangerous, and wasteful.
...confusing, dangerous, and wasteful.
...And 2 more matches
void operator - JavaScript
efined examples immediately invoked function expressions when using an immediately-invoked function expression, void can be used to force the function keyword to be treated as an expression instead of a declaration.
...ction expressions when using an immediately-invoked function expression, void can be used to force the function keyword to be treated as an expression instead of a declaration.
...}(); // output: "executed!" executing the above function without the void keyword will result in an uncaught syntaxerror.
...And 2 more matches
JavaScript Debugger Service - Archive of obsolete content
obsolete since gecko 33 (firefox 33 / thunderbird 33 / seamonkey 2.30) this feature is obsolete.
...3 (firefox 33 / thunderbird 33 / seamonkey 2.30) this feature is obsolete.
...e } }; // triggered when jsd.errorhook[onerror] returns false jsd.debughook = { onexecute: function(frame, type, rv) { // your function here } }; jsd.enumeratescripts({ // the enumeratescript method will be called once for every script jsd knows about enumeratescript: function(script) { // your function here } }); a simple stack trace here, we will show how to implement a simple
javascript stack trace using the jsd.
...ist.
Drag and Drop JavaScript Wrapper - Archive of obsolete content
« previousnext » gecko 1.9.1 (firefox 3.5) and later supports a newer and simpler api.
... « previousnext » gecko 1.9.1 (firefox 3.5) and later supports a newer and simpler api.
... « previousnext » gecko 1.9.1 (firefox 3.5) and later supports a newer and simpler api.
...ferdata, action) { var htmltext = "<strong>cabbage</strong>"; var plaintext = "cabbage"; transferdata.data = new transferdata(); transferdata.data.adddataforflavour("text/html",htmltext); transferdata.data.adddataforflavour("text/unicode",plaintext); } } here, an observer has been declared and stored in the variable textobserver.
New in JavaScript 1.6 - Archive of obsolete content
the following is a changelog for
javascript 1.6.
... the following is a changelog for
javascript 1.6.
... in firefox 1.5 (gecko 1.8), which was released in november 2005.
...cript 1.6 support for ecmascript for xml (e4x) for creating and processing xml content within
javascript has been added.
JavaScript-DOM Prototypes in Mozilla
prototype setup on an xpconnect wrapped dom node in mozilla when a dom node is accessed from
javascript in mozilla, the native c++ dom node is wrapped using xpconnect and the wrapper is exposed to
javascript as the
javascript representation of the dom node.
... of this let's look at an html image element in a document.
...to__ | htmlelement.prototype | |.__proto__ | element.prototype | |.__proto__ | node.prototype | |.__proto__ | object.prototype | |.__proto__ | null if you have an instance of a htmldivelement in
javascript, the following will hold true: div.__proto__ === htmldivelement.prototype which means that the following should also be true: div.__proto__ === div.constructor.prototype non standard no browser is required to provide modifiable __proto__, nor a global node, nor provide any way to get at host objects nor their associated prototypes.
...ame htmlimageelement earlier, the recursion will stop right there.
JavaScript Tips
e if it succeeds.
...nstanceof to cache all its known interfaces.
...e c++ method access a c++ object.
...ings; these vary from element to element.
AudioContext.createJavaScriptNode() - Web APIs
the audiocontext.create
javascriptnode() method creates a
javascriptnode which is used for directly manipulating audio data with
javascript.
... the audiocontext.create
javascriptnode() method creates a
javascriptnode which is used for directly manipulating audio data with
javascript.
...., one of: 256, 512, 1024, 2048, 4096, 8192, or 16384.
...gher for better overall quality.
Keyboard-navigable JavaScript widgets - Accessibility
overview web applications often use
javascript to mimic desktop widgets such as menus, tree views, rich text fields, and tab panels.
... overview web applications often use
javascript to mimic desktop widgets such as menus, tree views, rich text fields, and tab panels.
...ndex.
...w should be removed from the tab order (tabindex="-1").
Concurrency model and the event loop - JavaScript
javascript has a concurrency model based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks.
...
javascript has a concurrency model based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks.
...les.
...m call back" several runtimes communicating together a web worker or a cross-origin iframe has its own stack, heap, and message queue.
Using Promises - JavaScript
rthand for: const promise = createaudiofileasync(audiosettings); promise.then(successcallback, failurecallback); we call this an asynchronous function call.
... having them cluttering up your output—by adding a handler for the unhandledrejection event, like this: window.addeventlistener("unhandledrejection", event => { /* you might start here by adding code to examine the promise specified by event.promise and the reason in event.reason */ event.preventdefault(); }, false); by calling the event's preventdefault() method, you tell the
javascript runtime not to do its default action when rejected promises go unhandled.
... this can be useful at times.
...ult (i.e.
SyntaxError: missing ) after argument list - JavaScript
the
javascript exception "missing ) after argument list" occurs when there is an error with how a function is called.
...ght be a typo, a missing operator, or an unescaped string.
...pi: ".
...va" + "script" = \"' + 'java' + 'script\"); // syntaxerror: missing ) after argument list here
javascript thinks that you meant to have ); inside the string and ignores it, and it ends up not knowing that you meant the ); to end the function console.log.
Date - JavaScript
javascript date objects represent a single moment in time in a platform-independent format.
...ngle moment in time in a platform-independent format.
....prototype.totimestring() returns the "time" portion of the date as a human-readable string.
...year() methods should be used.
Error - JavaScript
error objects are thrown when runtime errors occur.
...ted and thrown.
...rror object with the intention of raising it using the throw keyword.
...nstanceof rangeerror) { console.error(e.name + ': ' + e.message) } // ...
Object.prototype.valueOf() - JavaScript
d in a github repository.
...tive-examples and send us a pull request.
...pose you have an object type mynumbertype and you want to create a valueof method for it.
...efined function to the object's valueof method: mynumbertype.prototype.valueof = function() { return customprimitivevalue; }; with the preceding code in place, any time an object of type mynumbertype is used in a context where it is to be represented as a primitive value,
javascript automatically calls the function defined in the preceding code.
String - JavaScript
aracters correspond to a numerical index: return 'cat'[1] // returns "a" when using bracket notation for character access, attempting to delete or assign a value to these properties will not succeed.
...he usual case-sensitive way.
... certain utf-8 character conversions.
...by double or single quotes) and strings returned from string calls in a non-constructor context (that is, called without using the new keyword) are primitive strings.
WebAssembly.Memory() constructor - JavaScript
the webassembly.memory() constructor creates a new memory object whose buffer property is a resizable arraybuffer or sharedarraybuffer that holds the raw bytes of memory accessed by a webassembly instance.
... the webassembly.memory() constructor creates a new memory object whose buffer property is a resizable arraybuffer or sharedarraybuffer that holds the raw bytes of memory accessed by a webassembly instance.
...he default is false.
...nsole.log(sum); }); creating a shared memory by default, webassembly memories are unshared.
WebAssembly.Memory - JavaScript
the webassembly.memory object is a resizable arraybuffer or sharedarraybuffer that holds the raw bytes of memory accessed by a webassembly instance.
... the webassembly.memory object is a resizable arraybuffer or sharedarraybuffer that holds the raw bytes of memory accessed by a webassembly instance.
...erties memory.prototype.buffer an accessor property that returns the buffer contained in the memory.
...sole.log(sum); }); creating a shared memory by default, webassembly memories are unshared.
Standard built-in objects - JavaScript
this chapter documents all of
javascript's standard, built-in objects, including their methods and properties.
... in the global scope.
...cope.
...array uint32array float32array float64array bigint64array biguint64array keyed collections these objects represent collections which use keys.
Exponentiation (**) - JavaScript
-associative: a ** b ** c is equal to a ** (b ** c).
...ceptions.
...e a lower precedence than unary operators.
...nnot put a unary operator (+/-/~/!/delete/void/typeof) immediately before the base number; doing so will cause a syntaxerror.
with - JavaScript
ow for details.
...nt forces the specified object to be searched first for all name lookups.
...h something other than a plain object.
...ar example, array.prototype has been defined with values in its symbol.unscopables object.
Trailing commas - JavaScript
trailing commas (sometimes called "final commas") can be useful when adding new elements, parameters, or properties to
javascript code.
... trailing commas (sometimes called "final commas") can be useful when adding new elements, parameters, or properties to
javascript code.
... a trailing comma.
...g with trailing comma [a, b,] = [1, 2]; // object destructuring with trailing comma var o = { p: 42, q: true, }; var {p, q,} = o; again, when using a rest element, a syntaxerror will be thrown: var [a, ...b,] = [1, 2, 3]; // syntaxerror: rest element may not have a trailing comma trailing commas in json trailing commas in objects were only introduced in ecmascript 5.
Introduction to using XPath in JavaScript - XPath
this document describes the interface for using xpath in
javascript internally, in extensions, and from websites.
...ectively of the xpathresult object.
..., if the returned result type is a node-set then it will only be an unordered_node_iterator_type.
...ir" /> <address street="10 downing street" city="london" country="uk"/> <phonenumber>020 7925 0918</phonenumber> </person> </people> to make the contents of the xml document available within the extension, we create an xmlhttprequest object to load the document synchronously, the variable xmldoc will contain the document as an xmldocument object against which we can use the evaluate method
javascript used in the extensions xul/js documents.
International characters in XUL JavaScript - Archive of obsolete content
gecko 1.8, as used in firefox 1.5 and other applications, added support for non-ascii characters in
javascript files loaded from xul files.
...e, they can contain a line: var text = "ein schönes beispiel eines mehrsprachigen textes: 日本語"; this mixes german and japanese characters.
... encoding will be the same as the one used by the xul file (which can be specified using an encoding attribute in the <?xml?> tag).
New in JavaScript 1.4 - Archive of obsolete content
the following is a changelog for
javascript 1.4, which was only used for netscape's server side
javascript released in 1999.
... the following is a changelog for
javascript 1.4, which was only used for netscape's server side
javascript released in 1999.
... the following is a changelog for
javascript 1.4, which was only used for netscape's server side
javascript released in 1999.
Describing microformats in JavaScript - Archive of obsolete content
microformats are described in
javascript by using a standardized structure format that has several standard members that describe the object.
... microformats are described in
javascript by using a standardized structure format that has several standard members that describe the object.
... to be contained in the street-address array.
Creating JavaScript tests
there are two large spidermonkey test suites: jstests (in js/src/tests) and jit-tests (in js/src/jit-test).
...e]) check that v1 and v2 are the same value.
...e is basically no cost to adding a new test, so add as many feature tests as needed to cover each feature orthogonally.
How to embed the JavaScript engine
see also jsapi user guide.
...spidermonkey js\src directory.
...u could write: ok = js_definefunction(cx, global, "doit", doit, doit_minargs, 0); or, if you had a bunch of native functions to define, you would probably put them in a table: static jsfunctionspec my_functions[] = { js_fn("doit", doit, doit_minargs, 0), /* etc...
Iterators and generators - JavaScript
« previousnext » processing each of the items in a collection is a very common operation.
...eration.
... alongside done, it is the iterator's return value.
Meta programming - JavaScript
« previousnext » starting with ecmascript 2015,
javascript gains support for the proxy and reflect objects allowing you to intercept and define custom behavior for fundamental language operations (e.g.
... « previousnext » starting with ecmascript 2015,
javascript gains support for the proxy and reflect objects allowing you to intercept and define custom behavior for fundamental language operations (e.g.
...rn '[[' + name + ']]' } }) let proxy = revocable.proxy console.log(proxy.foo) // "[[foo]]" revocable.revoke() console.log(proxy.foo) // typeerror is thrown proxy.foo = 1 // typeerror again delete proxy.foo // still typeerror typeof proxy // "object", typeof doesn't trigger any trap reflection reflect is a built-in object that provides methods for interceptable
javascript operations.
Warning: 08/09 is not a legal ECMA-262 octal constant - JavaScript
the
javascript warning "08 (or 09) is not a legal ecma-262 octal constant" occurs when 08 or 09 number literals are used.
... the
javascript warning "08 (or 09) is not a legal ecma-262 octal constant" occurs when 08 or 09 number literals are used.
...al ecma-262 octal constant.
SyntaxError: test for equality (==) mistyped as assignment (=)? - JavaScript
the
javascript warning "test for equality (==) mistyped as assignment (=)?" occurs when there was an assignment (=) when you would normally expect a test for equality (==).
... the
javascript warning "test for equality (==) mistyped as assignment (=)?" occurs when there was an assignment (=) when you would normally expect a test for equality (==).
...ment (=) when you would normally expect a test for equality (==).
TypeError: invalid assignment to const "x" - JavaScript
the
javascript exception "invalid assignment to const" occurs when it was attempted to alter a constant value.
... the
javascript exception "invalid assignment to const" occurs when it was attempted to alter a constant value.
...ed.
URIError: malformed URI sequence - JavaScript
the
javascript exception "malformed uri sequence" occurs when uri encoding or decoding wasn't successful.
... for example: encodeuri('\ud800\udfff'); // "%f0%90%8f%bf" decoding decoding replaces each escape sequence in the encoded uri component with the character that it represents.
...%90%8f%bf" decoding decoding replaces each escape sequence in the encoded uri component with the character that it represents.
TypeError: "x" is not a function - JavaScript
the
javascript exception "is not a function" occurs when there was an attempt to call a value from a function, but the value is not actually a function.
...rt property or method {x} (edge) typeerror: "x" is not a function error type typeerror what went wrong?
...s not a function error type typeerror what went wrong?
InternalError: too much recursion - JavaScript
the
javascript exception "too much recursion" or "maximum call stack size exceeded" occurs when there are too many function calls, or a function is missing a base case.
... itself is called a recursive function.
...p(x) { // the base case is missing loop(x + 1); // recursive call } loop(0); // internalerror: too much recursion class error: too much recursion class person{ constructor(){} set name(name){ this.name = name; // recursive call } } const tony = new person(); tony.name = "tonisha"; // internalerror: too much recursion when a value is assigned to the property name (this.name = name;)
javascript needs to set that property.
Array() constructor - JavaScript
the array() constructor is used to create array objects.
...jects.
...gle argument is passed to the array constructor and that argument is a number (see the arraylength parameter below).
AsyncFunction - JavaScript
the asyncfunction constructor creates a new async function object.
...is actually an asyncfunction object.
...of(async function(){}).constructor syntax new asyncfunction([arg1[, arg2[, ...argn]],] functionbody) parameters arg1, arg2, ...
Function.prototype.bind() - JavaScript
se noncompliant deviation details.
...second latebloomer.prototype.bloom = function() { window.settimeout(this.declare.bind(this), 1000); }; latebloomer.prototype.declare = function() { console.log(`i am a beautiful flower with ${this.petalcount} petals!`); }; const flower = new latebloomer(); flower.bloom(); // after 1 second, calls 'flower.declare()' bound functions used as constructors warning: this section demonstrates
javascript capabilities and documents some edge cases of the bind() method.
...nceof yaxispoint; // true new yaxispoint(17, 42) instanceof point; // true note that you need not do anything special to create a bound function for use with new.
Function.name - JavaScript
he interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...ributes of function.name writable no enumerable no configurable yes note that in non-standard, pre-es2015 implementations the configurable attribute was false as well.
... no configurable yes note that in non-standard, pre-es2015 implementations the configurable attribute was false as well.
GeneratorFunction - JavaScript
the generatorfunction constructor creates a new generator function object.
...ratorfunction object.
...of(function*(){}).constructor syntax new generatorfunction ([arg1[, arg2[, ...argn]],] functionbody) parameters arg1, arg2, ...
Math.imul() - JavaScript
n value the result of the c-like 32-bit multiplication of the given arguments.
... numbers in imul, you will experience a degrade in performance.
...) & 0xffff; var blo = b & 0xffff; // the shift by 0 fixes the sign on the high part // the final |0 converts the unsigned value into a signed value return ((alo * blo) + (((ahi * blo + alo * bhi) << 16) >>> 0) | 0); }; however, the following function is more performant because it is likely that browsers in which this polyfill would be used do not optimize with an internal integer type in
javascript, instead using floating points for all numbers.
Math - JavaScript
...
...operties and methods of math are static.
... 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.prototype.__proto__ - JavaScript
warning: changing the [[prototype]] of an object is, by the nature of how modern
javascript engines optimize property accesses, a very slow operation, in every browser and
javascript engine.
...ption the __proto__ getter function exposes the value of the internal [[prototype]] of an object.
...ts created using an object literal, this value is object.prototype.
Object.prototype.toString() - JavaScript
n an object is referred to in a manner in which a string is expected.
...g.prototype.tostring = function dogtostring() { const ret = 'dog ' + this.name + ' is a ' + this.sex + ' ' + this.color + ' ' + this.breed; return ret; } or, using es6 template strings: dog.prototype.tostring = function dogtostring() { return `dog ${this.name} is a ${this.sex} ${this.color} ${this.breed}`; } with the preceding code in place, any time thedog is used in a string context,
javascript automatically calls the dogtostring() function, which returns the following string: "dog gabby is a female chocolate lab" using tostring() to detect object class tostring() can be used with every object and (by default) allows you to get its class.
...object.prototype.tostring() with every object, you need to call function.prototype.call() or function.prototype.apply() on it, passing the object you want to inspect as the first parameter (called thisarg).
Object - JavaScript
the object class represents one of
javascript's data types.
... the object class represents one of
javascript's data types.
...op-value')) { return this['-prop-value']; } else { // it doesn't look like one of my objects, so let's fall back on // the default behavior by reproducing the current behavior as best we can.
WebAssembly.Instance.prototype.exports - JavaScript
the exports readonly property of the webassembly.instance object prototype returns an object containing as its members all the functions exported from the webassembly module instance, to allow them to be accessed and used by
javascript.
...assembly.instance object prototype returns an object containing as its members all the functions exported from the webassembly module instance, to allow them to be accessed and used by
javascript.
...nce.
WebAssembly.Instance - JavaScript
a webassembly.instance object is a stateful, executable instance of a webassembly.module.
...le.
...ction like this: const importobject = { imports: { imported_func: function(arg) { console.log(arg); } } }; webassembly.instantiatestreaming(fetch('simple.wasm'), importobject) .then(obj => obj.instance.exports.exported_func()); this also demonstrates how the exports property is used to access exported functions.
WebAssembly.Table.prototype.set() - JavaScript
the set() prototype method of the webassembly.table object mutates a reference stored at a given index to a different value.
...object) .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.
... 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.
WebAssembly - JavaScript
the webassembly
javascript object acts as the namespace for all webassembly-related functionality.
...webassembly.table() constructors.
... into the function when it fulfills.
undefined - JavaScript
the global undefined property represents the primitive value undefined.
...example is stored in a github repository.
...f (typeof x === 'undefined') { // these statements execute } one reason to use typeof is that it does not throw an error if the variable has not been declared.
Property accessors - JavaScript
ake a distinction between properties and methods.
...bol.
...[bar]) in the spidermonkey
javascript engine, this string would be "[object object]".
Expressions and operators - JavaScript
this chapter documents all the
javascript language operators, expressions and keywords.
... this chapter documents all the
javascript language operators, expressions and keywords.
...perator.
empty - JavaScript
an empty statement is used to provide no statement, although the
javascript syntax would expect one.
...nt, although the
javascript syntax would expect one.
...is stored in a github repository.
label - JavaScript
can refer to.
...tored in a github repository.
... label any
javascript identifier that is not a reserved word.
switch - JavaScript
so this block will run console.log(0); // note: the forgotten break would have been here case 1: // no break statement in 'case 0:' so this case will run as well console.log(1); break; // it encounters this break so will not continue into 'case 2:' case 2: console.log(2); break; default: console.log('default'); } can i put a default between cases?
...match: var foo = 5; switch (foo) { case 2: console.log(2); break; // it encounters this break so will not continue into 'default:' default: console.log('default') // fall-through case 1: console.log('1'); } it also works when you put default before all other cases.
...); break; case 'dinosaur': default: console.log('this animal will not.'); } multi-case : chained operations this is an example of a multiple-operation sequential case clause, where, depending on the provided integer, you can receive different output.
try...catch - JavaScript
block is skipped.
...block will always execute after the try-block and catch-block(s) have finished executing.
...lock and catch-block(s) have finished executing.
JavaScript OS.Constants
javascript module os.constants contains operating system-specific constants.
... os.constants.sys constants related to system configuration.
Unicode property escapes - JavaScript
ified, the value must correspond to the property type given.
...is the digit 2 in arabic-indic notation // while it is predominantly written within the arabic script // it can also be written in the thaana script "٢".match(/\p{script=thaana}/u); // null as thaana is not the predominant script super() "٢".match(/\p{script_extensions=thaana}/u); // ["٢", index: 0, input: "٢", groups: undefined] unicode property escapes vs.
Classes - JavaScript
constructor(height, width) { this.height = height; this.width = width; } } static (class-side) data properties and prototype data properties must be defined outside of the classbody declaration: rectangle.staticwidth = 20; rectangle.prototype.prototypewidth = 25; field declarations public and private field declarations are an experimental feature (stage 3) proposed at tc39, the
javascript standards committee.
...de of the classbody declaration: rectangle.staticwidth = 20; rectangle.prototype.prototypewidth = 25; field declarations public and private field declarations are an experimental feature (stage 3) proposed at tc39, the
javascript standards committee.
SyntaxError: invalid regular expression flag "x" - JavaScript
the
javascript exception "invalid regular expression flag" occurs when the flags, defined after the second slash in regular expression literal, are not one of g, i, m, s, u, or y.
... two slashes is interpreted as a regular expression literal.
Warning: String.x is deprecated; use String.prototype.x instead - JavaScript
the
javascript warning about string generics occurs in firefox versions prior to 68.
...: string.touppercase is deprecated; use string.prototype.touppercase instead warning: string.trim is deprecated; use string.prototype.trim instead warning: string.trimleft is deprecated; use string.prototype.trimleft instead warning: string.trimright is deprecated; use string.prototype.trimright instead error type warning.
ReferenceError: deprecated caller or arguments usage - JavaScript
the
javascript strict mode-only exception "deprecated caller or arguments usage" occurs when the deprecated function.caller or function.arguments properties are used.
... typeerror: 'arguments', 'callee' and 'caller' are restricted function properties and cannot be accessed in this context (edge) warning: referenceerror: deprecated caller usage (firefox) warning: referenceerror: deprecated arguments usage (firefox) typeerror: 'callee' and 'caller' cannot be accessed in strict mode.
Warning: expression closures are deprecated - JavaScript
the
javascript warning "expression closures are deprecated" occurs when the non-standard expression closure syntax (shorthand function syntax) is used.
... the
javascript warning "expression closures are deprecated" occurs when the non-standard expression closure syntax (shorthand function syntax) is used.
Warning: Date.prototype.toLocaleFormat is deprecated - JavaScript
the
javascript warning "date.prototype.tolocaleformat is deprecated; consider using intl.datetimeformat instead" occurs when the non-standard date.prototype.tolocaleformat method is used.
... the
javascript warning "date.prototype.tolocaleformat is deprecated; consider using intl.datetimeformat instead" occurs when the non-standard date.prototype.tolocaleformat method is used.
TypeError: "x" is not a constructor - JavaScript
the
javascript exception "is not a constructor" occurs when there was an attempt to use an object or a variable as a constructor, but that object or variable is not a constructor.
...ent wrong?
TypeError: "x" is read-only - JavaScript
the
javascript strict mode-only exception "is read-only" occurs when a global variable or object property that was assigned to is a read-only property.
...ct.defineproperty() or object.freeze().
SyntaxError: redeclaration of formal parameter "x" - JavaScript
the
javascript exception "redeclaration of formal parameter" occurs when the same variable name occurs as a function parameter and is then redeclared using a let assignment in a function body again.
...(edge) syntaxerror: redeclaration of formal parameter "x" (firefox) syntaxerror: identifier "x" has already been declared (chrome) error type syntaxerror what went wrong?
ReferenceError: assignment to undeclared variable "x" - JavaScript
the
javascript strict mode-only exception "assignment to undeclated variable" occurs when the value has been assigned to an undeclared variable.
...is not defined (chrome) referenceerror: variable undefined in strict mode (edge) error type referenceerror warning in strict mode only.
ReferenceError: reference to undefined property "x" - JavaScript
the
javascript warning "reference to undefined property" occurs when a script attempted to access an object property which doesn't exist.
... the
javascript warning "reference to undefined property" occurs when a script attempted to access an object property which doesn't exist.
TypeError: variable "x" redeclares argument - JavaScript
the
javascript strict mode-only exception "variable redeclares argument" occurs when the same variable name occurs as a function parameter and is then redeclared using a var assignment in a function body again.
... as a function parameter and is then redeclared using a var assignment in a function body again.
TypeError: 'x' is not iterable - JavaScript
the
javascript exception "is not iterable" occurs when the value which is given as the right hand-side of for…of or as argument of a function such as promise.all or typedarray.from, is not an iterable object.
...(chrome) error type typeerror what went wrong?
arguments.callee - JavaScript
(also called "anonymous functions").
...e major effect: it makes a large number of optimizations impossible, or much much more difficult.
Array.prototype.toString() - JavaScript
the tostring() method returns a string representing the specified array and its elements.
... description the array object overrides the tostring method of object.
DataView - JavaScript
licit control of how data is accessed, regardless of the executing computer's endianness.
... left + 2**32*right : 2**32*left + right; if (!number.issafeinteger(combined)) console.warn(combined, 'exceeds max_safe_integer.
Date.prototype[@@toPrimitive] - JavaScript
at is either of type number or of type string.
...perty does not exist, it tries to call the valueof method and if the valueof does not exist either, [@@toprimitive]() throws a typeerror.
Date() constructor - JavaScript
creates a
javascript date instance that represents a single moment in time in a platform-independent format.
...efault is 0 minutes past the hour.
Function.prototype.apply() - JavaScript
out equal to math.max(numbers[0], ...) // or math.max(5, 6, ...) let min = math.min.apply(null, numbers); // vs.
...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.
Math.fround() - JavaScript
ct, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...ffer a very high precision.
Number.MAX_SAFE_INTEGER - JavaScript
the number.max_safe_integer constant represents the maximum safe integer in
javascript (253 - 1).
.../mdn/interactive-examples and send us a pull request.
Number.MIN_SAFE_INTEGER - JavaScript
the number.min_safe_integer constant represents the minimum safe integer in
javascript (-(253 - 1)).
...eractive-examples and send us a pull request.
Number.MIN_VALUE - JavaScript
the number.min_value property represents the smallest positive numeric value representable in
javascript.
...o the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Number.isNaN() - JavaScript
uest.
...ison to the global isnan() function, number.isnan() doesn't suffer the problem of forcefully converting the parameter to a number.
Object.keys() - JavaScript
iption object.keys() returns an array whose elements are strings corresponding to the enumerable properties found directly upon object.
...dontenumbug) { for (i = 0; i < dontenumslength; 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.
Object.setPrototypeOf() - JavaScript
the object.setprototypeof() method sets the prototype (i.e., the internal [[prototype]] property) of a specified object to another object or null.
... the object.setprototypeof() method sets the prototype (i.e., the internal [[prototype]] property) of a specified object to another object or null.
Proxy - JavaScript
t value when the property name is not in the object.
...p, p.c); // false, 37 no-op forwarding proxy in this example, we are using a native
javascript object to which our proxy will forward all operations that are applied to it.
RegExp - JavaScript
the regexp object is used for matching text with a pattern.
...normal string escape rules (preceding special characters with \ when included in a string) are necessary.
String.prototype.charCodeAt() - JavaScript
string.
... or greater, for such characters, it is necessary to retrieve not only charcodeat(i), but also charcodeat(i+1) (as if manipulating a string with two letters), or to use codepointat(i) instead.
WebAssembly.Global() constructor - JavaScript
a webassembly.global() constructor creates a new global object representing a global variable instance, accessible from both
javascript and importable/exportable across one or more webassembly.module instances.
... instance.exports.getglobal(), 0); global.value = 42; asserteq("getting js-updated value from wasm", instance.exports.getglobal(), 42); instance.exports.incglobal(); asserteq("getting wasm-updated value from js", global.value, 43); }); note: you can see the example running live on github; see also the source code.
WebAssembly.Global - JavaScript
a webassembly.global object represents a global variable instance, accessible from both
javascript and importable/exportable across one or more webassembly.module instances.
... instance.exports.getglobal(), 0); global.value = 42; asserteq("getting js-updated value from wasm", instance.exports.getglobal(), 42); instance.exports.incglobal(); asserteq("getting wasm-updated value from js", global.value, 43); }); note: you can see the example running live on github; see also the source code.
WebAssembly.Table() constructor - JavaScript
object) .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.
... 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.
WebAssembly.Table.prototype.get() - JavaScript
the get() prototype method of the webassembly.table() object retrieves a function reference stored at a given index.
...tance.exports.tbl; console.log(tbl.get(0)()); // 13 console.log(tbl.get(1)()); // 42 }); note how you've got to include a second function invocation operator at the end of the accessor to actually retrieve the value stored inside the reference (e.g.
decodeURI() - JavaScript
) exception when encodeduri contains invalid character sequences.
...s each escape sequence in the encoded uri with the character that it represents, but does not decode escape sequences that could not have been introduced by encodeuri.
Iteration protocols - JavaScript
as a couple of additions to ecmascript 2015, iteration protocols aren't new built-ins or syntax, but protocols.
...with at least the following two properties: done (boolean) has the value false if the iterator was able to produce the next value in the sequence.
this - JavaScript
a function's this keyword behaves a little differently in
javascript compared to other languages.
...igned to the variable p doesn't have its own f property, it inherits it from its prototype.
block - JavaScript
yntax block statement { statementlist } labelled block statement labelidentifier: { statementlist } statementlist statements grouped within the block statement.
...tementlist } statementlist statements grouped within the block statement.
if...else - JavaScript
...
...tring (""), and any object, including a boolean object whose value is false, is considered truthy when used as the condition.
import.meta - JavaScript
the import.meta object exposes context-specific metadata to a
javascript module.
...he base url of the module.
let - JavaScript
ce for this interactive example is stored in a github repository.
...s://github.com/mdn/interactive-examples and send us a pull request.
var - JavaScript
part of the global lexical environment).
...to create a property named `foo` on the global object globalthis.hasownproperty('foo') // true in ecmascript 5, this behavior was changed for strict mode.
Transitioning to strict mode - JavaScript
) {} } obvious errors declaring twice the same name for a property name in an object literal {a: 1, b: 3, a: 7} this is no longer the case in ecmascript 2015 (bug 1041128).
...apply, if the value was a primitive value, this one was boxed into an object (or the global object for undefined and null).
JavaScript OS
the
javascript os module contains tools that allow chrome content (i.e.
javascript.options.showInConsole
the preference
javascript.options.showinconsole controls whether errors or warnings in chrome code are shown in the error console.
L20n Javascript API
l20n
javascript api var ctx = l20n.getcontext(); ctx.linkresource('./locales/strings.l20n'); ctx.requestlocales(); when you freeze the context by calling requestlocales, the resource files will be retrieved, parsed and compiled.
Running Automated JavaScript Tests
command-line argument, where pattern is a regexp pattern that is tested against file:///{path_to_obj_dir}/dist/test-stage/jsreftest/tests/jsreftest.html?test={relative_path_to_test_from_js/src/tests} string: ./mach jstestbrowser --filter=pattern running jstests on treeherder when viewing treeherder after a push to the mozilla repositories, jstests run in the browser are shown as r(j) meaning "
javascript reftests".
Places utilities for JavaScript
re we visit a url, we will use transition_bookmark as the transition for the visit to that url (if we don't have a referrer).
Equality comparisons and sameness - JavaScript
quality algorithms in es2015: abstract equality comparison (==) strict equality comparison (===): used by array.prototype.indexof, array.prototype.lastindexof, and case-matching samevaluezero: used by %typedarray% and arraybuffer constructors, as well as map and set operations, and also string.prototype.includes and array.prototype.includes since es2016 samevalue: used in all other places
javascript provides three different value-comparison operations: === - strict equality comparison ("strict equality", "identity", "triple equals") == - abstract equality comparison ("loose equality", "double equals") object.is provides samevalue (new in es2015).
RangeError: radix must be an integer - JavaScript
the
javascript exception "radix must be an integer at least 2 and no greater than 36" occurs when the optional radix parameter of the number.prototype.tostring() or the bigint.prototype.tostring() method was specified and is not between 2 and 36.
TypeError: can't access dead object - JavaScript
the
javascript exception "can't access dead object" occurs when firefox disallows add-ons to keep strong references to dom objects after their parent document has been destroyed to improve in memory usage and to prevent memory leaks.
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.
RegExp.lastParen ($+) - JavaScript
hand alias with the dot property accessor (regexp.$+), because the parser expects an expression with "+" in that case and a syntaxerror is thrown.
String.prototype.codePointAt() - JavaScript
first = string.charcodeat(index); var second; if ( // check if it’s the start of a surrogate pair first >= 0xd800 && first <= 0xdbff && // high surrogate size > index + 1 // there is a next code unit ) { second = string.charcodeat(index + 1); if (second >= 0xdc00 && second <= 0xdfff) { // low surrogate // https://mathiasbynens.be/notes/
javascript-encoding#surrogate-formulae return (first - 0xd800) * 0x400 + second - 0xdc00 + 0x10000; } } return first; }; if (defineproperty) { defineproperty(string.prototype, 'codepointat', { 'value': codepointat, 'configurable': true, 'writable': true }); } else { string.prototype.codepointat = codepointat; } }()); }...
String.fromCodePoint() - JavaScript
>>0) === codepoint clause handles decimals and negatives if (!(codepoint < 0x10ffff && (codepoint>>>0) === codepoint)) throw rangeerror("invalid code point: " + codepoint); if (codepoint <= 0xffff) { // bmp code point codelen = codeunits.push(codepoint); } else { // astral code point; split in surrogate halves // 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...
String.prototype.match() - JavaScript
= "nothing will come of nothing."; str.match(); // returns [""] a non-regexp object as the parameter when the regexp parameter is a string or a number, it is implicitly converted to a regexp by using new regexp(regexp).
WebAssembly.CompileError - JavaScript
age); // "hello" console.log(e.name); // "compileerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the code was run } specifications specification webassembly
javascript interfacethe definition of 'webassembly constructors' in that specification.
WebAssembly.Instance() constructor - JavaScript
nstance is through the asynchronous webassembly.instantiatestreaming() function, for example like this: const importobject = { imports: { imported_func: function(arg) { console.log(arg); } } }; webassembly.instantiatestreaming(fetch('simple.wasm'), importobject) .then(obj => obj.instance.exports.exported_func()); specifications specification webassembly
javascript interfacethe definition of 'instance' in that specification.
WebAssembly.LinkError() constructor - JavaScript
essage); // "hello" console.log(e.name); // "linkerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the code was run } specifications specification webassembly
javascript interfacethe definition of 'linkerror' in that specification.
WebAssembly.LinkError - JavaScript
essage); // "hello" console.log(e.name); // "linkerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the code was run } specifications specification webassembly
javascript interfacethe definition of 'linkerror' in that specification.
WebAssembly.Memory.prototype.grow() - JavaScript
e instance by one page like so: const bytesperpage = 64 * 1024; console.log(memory.buffer.bytelength / bytesperpage); // "1" console.log(memory.grow(1)); // "1" console.log(memory.buffer.bytelength / bytesperpage); // "2" note the return value of grow() here is the previous number of webassembly pages.
WebAssembly.Module() constructor - JavaScript
console.log(arg); } } }; function createwasmmodule(bytes) { return new webassembly.module(bytes); } fetch('simple.wasm').then(response => response.arraybuffer() ).then(bytes => { let mod = createwasmmodule(bytes); webassembly.instantiate(mod, importobject) .then(result => result.exports.exported_func() ); }) specifications specification webassembly
javascript interfacethe definition of 'webassembly.module()' in that specification.
WebAssembly.Module.exports() - JavaScript
dule received from main thread'); var mod = e.data; webassembly.instantiate(mod, importobject).then(function(instance) { instance.exports.exported_func(); }); var exports = webassembly.module.exports(mod); console.log(exports[0]); }; the exports[0] output looks like this: { name: "exported_func", kind: "function" } specifications specification webassembly
javascript interfacethe definition of 'exports()' in that specification.
WebAssembly.RuntimeError() constructor - JavaScript
age); // "hello" console.log(e.name); // "runtimeerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the code was run } specifications specification webassembly
javascript interfacethe definition of 'webassembly.runtimeerror constructor' in that specification.
WebAssembly.RuntimeError - JavaScript
age); // "hello" console.log(e.name); // "runtimeerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the code was run } specifications specification webassembly
javascript interfacethe definition of 'webassembly constructors' in that specification.
globalThis - JavaScript
ute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
null - JavaScript
the value null represents the intentional absence of any object value.
uneval() - JavaScript
the uneval() function creates a string representation of the source code of an object.
Conditional (ternary) operator - JavaScript
the conditional (ternary) operator is the only
javascript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy.
Object initializer - JavaScript
'foo' let o = { [prop]: 'hey', ['b' + 'ar']: 'there' } description an object initializer is an expression that describes the initialization of an object.
delete operator - JavaScript
the
javascript delete operator removes a property from an object; if no more references to the same property are held, it is eventually released automatically.
Function expression - JavaScript
erence between a function expression and a function declaration is the function name, which can be omitted in function expressions to create anonymous functions.
new operator - JavaScript
e of a user-defined object type or of one of the built-in object types that has a constructor function.
export - JavaScript
the export statement is used when creating
javascript modules to export live bindings to functions, objects, or primitive values from the module so they can be used by other programs with the import statement.
for...of - JavaScript
.log(entry); } // ['a', 1] // ['b', 2] // ['c', 3] for (const [key, value] of iterable) { console.log(value); } // 1 // 2 // 3 iterating over a set const iterable = new set([1, 1, 2, 2, 3, 3]); for (const value of iterable) { console.log(value); } // 1 // 2 // 3 iterating over the arguments object you can iterate over the arguments object to examine all of the parameters passed into a
javascript function: (function() { for (const argument of arguments) { console.log(argument); } })(1, 2, 3); // 1 // 2 // 3 iterating over a dom collection iterating over dom collections like nodelist: the following example adds a read class to paragraphs that are direct descendants of an article: // note: this will only work in platforms that have // implemented nodelist.prototype[symbol.itera...
for - JavaScript
offsetleft, ntop += oitnode.offsettop, oitnode = oitnode.offsetparent /* final-expression */ ); /* semicolon */ console.log('offset position of \'' + sid + '\' element:\n left: ' + nleft + 'px;\n top: ' + ntop + 'px;'); } /* example call: */ showoffsetpos('content'); // output: // "offset position of "content" element: // left: 0px; // top: 153px;" note: this is one of the few cases in
javascript where the semicolon is mandatory.
Index - Archive of obsolete content
cross-domain content scripts add-on sdk, add-ons, extensions no summary!
... add-on sdk learn how to contribute to the add-on sdk.
...xt-menu add-on sdk, add-ons, extensions, firefox, sdk adds items, submenus, and menu separators to the page's context menu.
...And 239 more matches
Index - Learn web development
# page tags and summary 1 learn web development beginner, css, html, index, intro, landing, learn, web welcome to the mdn learning area.
...pment beginner, css, html, index, intro, landing, learn, web welcome to the mdn learning area.
...vascript, landing, learn, module learning some html, css, and
javascript is useful if you want to become a web developer.
...And 191 more matches
LiveConnect Overview - Archive of obsolete content
this chapter describes using liveconnect technology to let java and
javascript code communicate with each other.
... this chapter describes using liveconnect technology to let java and
javascript code communicate with each other.
... this chapter describes using liveconnect technology to let java and
javascript code communicate with each other.
...And 146 more matches
Index
found 550 pages: # page tags and summary 1 spidermonkey: the mozilla
javascript runtime spidermonkey standalone source code releases can be found on the releases page.
... found 550 pages: # page tags and summary 1 spidermonkey: the mozilla
javascript runtime spidermonkey standalone source code releases can be found on the releases page.
... found 550 pages: # page tags and summary 1 spidermonkey: the mozilla
javascript runtime spidermonkey standalone source code releases can be found on the releases page.
...And 137 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
codingscripting, flash, glossary, infrastructure flash is an obsolescent technology developed by adobe for viewing expressive web applications, multimedia content, and streaming media.
... apple safari glossary, navigation, webmechanics safari is a web browser developed by apple and bundled with both macos and ios.
... as a robust medium to transmit sensitive military data and to connect leading research groups throughout the united states.
...And 112 more matches
Index - Web APIs
ontimeline.currenttime api, animation, animationtimeline, experimental, property, read-only, reference, web animations, currenttime, waapi, web animations api the currenttime read-only property of the web animations api's animationtimeline interface returns the timeline's current time in milliseconds, or null if the timeline is inactive.
...eb animations, currenttime, waapi, web animations api the currenttime read-only property of the web animations api's animationtimeline interface returns the timeline's current time in milliseconds, or null if the timeline is inactive.
...onds of processing latency incurred by the audiocontext passing the audio from the audiodestinationnode to the audio subsystem.
...And 111 more matches
JSAPI User Guide
this document explains how to embed spidermonkey, the mozilla
javascript engine, in your c++ program.
... this document explains how to embed spidermonkey, the mozilla
javascript engine, in your c++ program.
... this document explains how to embed spidermonkey, the mozilla
javascript engine, in your c++ program.
...And 68 more matches
Index - Game development
found 74 pages: # page tags and summary 1 game development apps, game development, gamedev, games, html5 games,
javascript games, web gaming is one of the most popular computer activities.
... tags and summary 1 game development apps, game development, gamedev, games, html5 games,
javascript games, web gaming is one of the most popular computer activities.
...g) to make.
...And 65 more matches
Index
found 1275 pages: # page tags and summary 1 xpcom add-ons, extensions, landing, mozilla, xpcom xpcom is a cross platform component object model, similar to microsoft com.
...terfaces and those interfaces can change between gecko versions.
...ct as one of the arguments to the window creation method.
...And 62 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
m level 1, dom level 2 and parts of dom level 3 mathematical markup language: mathml version 2.0 extensible markup language (xml): xml 1.0, namespaces in xml, associating style sheets with xml documents 1.0, fragment identifier for xml xsl transformations: xslt 1.0 xml path language: xpath 1.0 resource description framework: rdf simple object access protocol: soap 1.1 ecma-262, revision 3 (
javascript 1.5): ecma-262 general cross-browser coding tips even though web standards do exist, different browsers behave differently (in fact, the same browser may behave differently depending on the platform).
...v:1.5) gecko/20031016 while using the useragent to sniff the browser provides detailed information on the browser in use, code that handles useragents often can make mistakes when new browser versions arrive, thus requiring code changes.
...andard method, such as opera or safari, to work without any changes.
...And 53 more matches
JSAPI reference
the jsapi is the c++ api for the spidermonkey
javascript engine.
...rivate js_getsecondcontextprivate added in spidermonkey 17 js_setsecondcontextprivate added in spidermonkey 17 js_setinterruptcallback added in spidermonkey 31 js_getinterruptcallback added in spidermonkey 31 js_requestinterruptcallback added in spidermonkey 31 js_checkforinterrupt added in jsapi 45 js_destroycontextmaybegc obsolete since jsapi 14 js_setbranchcallback obsolete since
javascript 1.9.1 js_setoperationcallback obsolete since jsapi 30 js_getoperationcallback obsolete since jsapi 30 js_triggeroperationcallback obsolete since jsapi 30 js_clearoperationcallback obsolete since
javascript 1.9.1 js_getoperationlimit obsolete since
javascript 1.9.1 js_setoperationlimit obsolete since
javascript 1.9.1 js_max_operation_limit obsolete since
javascript 1.9.1 js_operation_weigh...
...ncallback obsolete since jsapi 30 js_getoperationcallback obsolete since jsapi 30 js_triggeroperationcallback obsolete since jsapi 30 js_clearoperationcallback obsolete since
javascript 1.9.1 js_getoperationlimit obsolete since
javascript 1.9.1 js_setoperationlimit obsolete since
javascript 1.9.1 js_max_operation_limit obsolete since
javascript 1.9.1 js_operation_weight_base obsolete since
javascript 1.9.1 js_setthreadstacklimit obsolete since jsapi 13 js_setscriptstackquota obsolete since
javascript 1.8.6 js_setoptions obsolete since jsapi 27 js_getoptions obsolete since jsapi 27 js_toggleoptions obsolete since jsapi 27 enum jsversion jsversion_ecma_3 jsversion_1_6 jsversion_1_7 jsversion_1_8 jsversion_ecma_5 jsversion_default jsversion_unknown jsversi...
...And 52 more matches
Introduction to client-side frameworks - Learn web development
overview: client-side
javascript frameworks next we begin our look at frameworks with a general overview of the area, looking at a brief history of
javascript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.
...client-side
javascript frameworks next we begin our look at frameworks with a general overview of the area, looking at a brief history of
javascript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.
...with a general overview of the area, looking at a brief history of
javascript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.
...And 42 more matches
JXON - Archive of obsolete content
jxon (lossless
javascript xml object notation) is a generic name by which is defined the representation of
javascript objects using xml.
... jxon (lossless
javascript xml object notation) is a generic name by which is defined the representation of
javascript objects using xml.
...sion, but some conventions begin to appear on the web.
...And 40 more matches
Scripting Java
this article shows how to use rhino to reach beyond
javascript into java.
...s that use it.
...lass java.io.file using just the name file: js> importpackage(java.io) js> file [javaclass java.io.file] here importpackage(java.io) makes all the classes in the java.io package (such as file) available at the top level.
...And 39 more matches
Understanding WebAssembly text format - WebAssembly
able webassembly to be read and edited by humans, there is a textual representation of the wasm binary format.
...rs, browser developer tools, etc.
... is related to the underlying bytecode it represents — and the wrapper objects representing wasm in
javascript.
...And 38 more matches
JSObject - Archive of obsolete content
summary the public final class netscape.
javascript.jsobject extends object.
... summary the public final class netscape.
javascript.jsobject extends object.
... summary the public final class netscape.
javascript.jsobject extends object.
...And 36 more matches
Index - Firefox Developer Tools
found 158 pages: # page tags and summary 1 firefox developer tools developing mozilla, guide, tools, web development, web development:tools, l10n:priority firefox developer tools is a set of web developer tools built into firefox.
...irefox, guide, manifest in this article we will look at inspecting app manifests using the firefox devtools application panel.
...sing the firefox devtools application panel.
...And 35 more matches
Working with JSON - Learn web development
previous overview: objects next
javascript object notation (json) is a standard text-based format for representing structured data based on
javascript object syntax.
...t object notation (json) is a standard text-based format for representing structured data based on
javascript object syntax.
...ding some data from the server to the client, so it can be displayed on a web page, or vice versa).
...And 33 more matches
JSAPI Cookbook
this article shows the jsapi equivalent for a tiny handful of common
javascript idioms.
...quivalent for a tiny handful of common
javascript idioms.
...ng(); bool isnumber = v.isnumber(); bool isint32 = v.isint32(); // note: internal representation, not numeric value bool isnull = v.isnull(); bool isboolean = v.isboolean(); bool isobject = v.isobject(); // note: not broken like typeof === "object" is :-) to set a value use a correspondingly named member mutator function, or assign the result of the correspondingly named standalone function: //
javascript var v; v = 0; v = 0.5; v = somestring; v = null; v = undefined; v = false; /* jsapi */ js::rootedvalue v(cx); js::rootedstring somestring(cx, ...); v.setint32(0); // or: v = js::int32value(0); v.setdouble(0.5); // or: v = js::doublevalue(0.5); v.setstring(somestring); // or: v = js::stringvalue(somestring); v.setnull(); // or: v = js::nullvalue(); v.setundefined();...
...And 32 more matches
Tutorials
@font-face feature from css3 allows you to use custom typefaces on the web in an accessible, manipulatable, and scalable way.
...e custom typefaces on the web in an accessible, manipulatable, and scalable way.
...ccessible, manipulatable, and scalable way.
...And 32 more matches
WebAssembly Concepts - WebAssembly
he web platform — it provides a way to run code written in multiple languages on the web at near-native speed, with client apps running on the web that previously couldn’t have done so.
...orm — it provides a way to run code written in multiple languages on the web at near-native speed, with client apps running on the web that previously couldn’t have done so.
...debugged by hand.
...And 31 more matches
Storing the information you need — Variables - Learn web development
previous overview: first steps next after reading the last couple of articles you should now know what
javascript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level.
... previous overview: first steps next after reading the last couple of articles you should now know what
javascript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level.
...ascript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level.
...And 27 more matches
Using XPCOM Components
ever a user accesses the cookie manager dialog to view, organize, or remove cookies that have been stored on the system, they are using the cookiemanager component behind the scenes.
...ions are private[private-xpcom-interfaces].
... list and then clicks the remove button, the remove method in the nsicookiemanager interface is called.
...And 27 more matches
Introduction to web APIs - Learn web development
overview: client-side web apis next first up, we'll start by looking at apis from a high level — what are they, how do they work, how to use them in your code, and how are they structured?
...t up, we'll start by looking at apis from a high level — what are they, how do they work, how to use them in your code, and how are they structured?
... don't try to wire it directly into the power supply — to do so would be really inefficient and, if you are not an electrician, difficult and dangerous to attempt.
...And 26 more matches
Introduction to Web development - Developer guides
basic concepts and fundamentals css reference guide — a complete guide to css with details on the level of gecko/firefox support for each.
...— a complete guide to css with details on the level of gecko/firefox support for each.
... css with details on the level of gecko/firefox support for each.
...And 26 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
ult/randomdir/prefs.js) we now use a centralized default set of preferences.
...ed preference file can lock preferences (lockpref) or initialize them (defaultpref) based on environment variables (user, home...) and/or ldap queries (fetch email address, common name , language, homepage etc...) from the enterprise directory.
...t/pref ( it used to be in /usr/lib/thunderbird-version#/default/pref as in /usr/lib/thunderbird-5/default/pref ) for the record/history purpose ...
...And 24 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
browser detection.
...a, and netscape browsers, far fewer are aware that these browsers are members of an entire family of user agents based upon the gecko layout engine which includes the commercial browser compuserve 7, and open source browsers such as epiphany, galeon, camino, kmeleon, and seamonkey.
...using mozilla/version to signal that they were compatible with a particular netscape version.
...And 24 more matches
Client-side storage - Learn web development
is modern web browsers support a number of ways for web sites to store data on the user's computer — with the user's permission — then retrieve it when necessary.
... web sites to store data on the user's computer — with the user's permission — then retrieve it when necessary.
...dynamic sites.
...And 24 more matches
Window.open() - Web APIs
f the developer has access only to its name (the name can be saved with cookies or local storage but not the window object handle).
...quest's referrer set to noreferrer; this prevents the request from sending the url of the page that initiated the request to the server where the request is sent.
...="this link will create a new window or will re-use an already opened one" >promote firefox adoption</a></p> the above code solves a few usability problems related to links opening secondary window.
...And 24 more matches
Mozilla DOM Hacking Guide
so important for the dom.
...tion or de facto standard".
...see that class info is mainly used to implement the dom level 0.
...And 23 more matches
Rhino overview
introduction most people who have used
javascript before have done so by adding scripts to their html web pages.
... introduction most people who have used
javascript before have done so by adding scripts to their html web pages.
... introduction most people who have used
javascript before have done so by adding scripts to their html web pages.
...And 23 more matches
Drawing graphics - Learn web development
previous overview: client-side web apis next the browser contains some very powerful graphics programming tools, from the scalable vector graphics (svg) language, to apis for drawing on html <canvas> elements, (see the canvas api and webgl).
...side web apis next the browser contains some very powerful graphics programming tools, from the scalable vector graphics (svg) language, to apis for drawing on html <canvas> elements, (see the canvas api and webgl).
...nguage, to apis for drawing on html <canvas> elements, (see the canvas api and webgl).
...And 22 more matches
Getting started with Svelte - Learn web development
previous overview: client-side
javascript frameworks next in this article we'll provide a quick introduction to the svelte framework.
...ee how svelte works and what sets it apart from the rest of the frameworks and tools we've seen so far.
...evelopment environment, create a sample app, understand the structure of the project, and see how to run it locally and build it for production.
...And 22 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
ument was authored by taiga (gomita) gomibuchi and was originally published in japanese for the firefox developers conference summer 2007.
...l_cache (not present in firefox 3.5+) ordinarily, firefox will cache xul documents after they have been read in once, to speed subsequent displays.
...x will cache xul documents after they have been read in once, to speed subsequent displays.
...And 21 more matches
Appendix D: Loading Scripts - Archive of obsolete content
most add-ons and xul runner applications provide their primary functionality by loading and executing
javascript code.
... most add-ons and xul runner applications provide their primary functionality by loading and executing
javascript code.
...ity: the simple, declarative nature of these tags make them easy to find and understand at a glance.
...And 21 more matches
Implementing feature detection - Learn web development
depending on whether it does (or doesn't), so that the browser can always provide a working experience rather than crashing/erroring in some browsers.
..., how to use a library to speed up implementation, and native features for feature detection such as @supports.
...t browser, and then conditionally run code to provide an acceptable experience both in browsers that do support the feature, and browsers that don't.
...And 21 more matches
How to build custom form controls - Learn web development
we will discuss how to build a custom control.
...ontrol's basic functionality has been decided upon, it's time to start building it.
...t with the form data --> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> note the use of class names; these identify each relevant part regardless of the actual underlying html elements used.
...And 20 more matches
Introduction to events - Learn web development
, if the user selects a button on a webpage, you might want to respond to that action by displaying an information box.
...hooses a key on the keyboard.
...un in response to an event, we say we are registering an event handler.
...And 19 more matches
Getting started with React - Learn web development
previous overview: client-side
javascript frameworks next in this article we will say hello to react.
...erview: client-side
javascript frameworks next in this article we will say hello to react.
...eact.
...And 19 more matches
Tutorial: Embedding Rhino
edder, the objects exposed to scripts can be customized further.
...code will be in green, java code will be in green, and shell logs will be in purple.
...in green, and shell logs will be in purple.
...And 19 more matches
Language bindings
s exist to access these modules.
...x using c or c++.
...ts object is actually a native instance of the nsixpccomponents interface which is reflected into
javascript as a top level object using xpconnect.components.classescomponents.classes is a read-only object whose properties are classes indexed by contractid.components.classesbyidcomponents.classesbyid is a read-only object whose properties are classes indexed by cid.components.constructorcreates a
javascript function which can be used to create or construct new instances of xpcom components.components.exceptioncomponents.exception is a
javascript constructor to create nsixpcexception objects.
...And 19 more matches
Framework main features - Learn web development
previous overview: client-side
javascript frameworks next each major
javascript framework has a different approach to updating the dom, handling browser events, and providing an enjoyable developer experience.
...ks next each major
javascript framework has a different approach to updating the dom, handling browser events, and providing an enjoyable developer experience.
... main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level, and the differences between them.
...And 18 more matches
TypeScript support in Svelte - Learn web development
previous overview: client-side
javascript frameworks next in the last article we learned about svelte stores and even implemented our own custom store to persist the app's information to web storage.
...e applications.
...ial.git then to get to the current app state, run cd mdn-svelte-tutorial/07-typescript-support or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/07-typescript-support remember to run npm install && npm run dev to start your app in development mode.
...And 18 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
ntinuity, precision and control.
...in which developers format text layouts into pages and link those pages to related content, is analogous to a book or a magazine: readers view pages, go to other pages for more information, and view resources listed as references on that page.
...ve a new page with the next block of message headers.
...And 17 more matches
Xray vision
xray vision helps
javascript running in a privileged security context safely access objects created by less privileged code, by showing the caller only the native version of the objects.
... xray vision helps
javascript running in a privileged security context safely access objects created by less privileged code, by showing the caller only the native version of the objects.
... xray vision helps
javascript running in a privileged security context safely access objects created by less privileged code, by showing the caller only the native version of the objects.
...And 17 more matches
Debugger.Source - Firefox Developer Tools
debugger.source a debugger.source instance represents either a piece of
javascript source code or the serialized text of a block of webassembly code.
...e property always being "wasm" and the former having its introductiontype property never being "wasm".
...ontype property never being "wasm".
...And 17 more matches
WAI-ARIA basics - Learn web development
previous overview: accessibility next following on from the previous article, sometimes making complex ui controls that involve unsemantic html and dynamic
javascript-updated content can be difficult.
...c
javascript-updated content can be difficult.
... to feature complex controls like date pickers for choosing dates, sliders for choosing values, etc.
...And 16 more matches
Client-side form validation - Learn web development
to ensure all required form controls are filled out, in the correct format.
... malformed input on the client-side, a malicious user can still alter the network request.
...lter the network request.
...And 16 more matches
Object prototypes - Learn web development
previous overview: objects next prototypes are the mechanism by which
javascript objects inherit features from one another.
... previous overview: objects next prototypes are the mechanism by which
javascript objects inherit features from one another.
...plain how prototype chains work and look at how the prototype property can be used to add methods to existing constructors.
...And 16 more matches
Handling common accessibility problems - Learn web development
previous overview: cross browser testing next next we turn our attention to accessibility, providing information on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues.
...y pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements; the focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused.
...ghlight each item on a webpage checkbox.
...And 15 more matches
Introducing a complete toolchain - Learn web development
s of building up a sample case study toolchain.
... apis) concerning potentially hazardous space objects that threaten our existence on earth!
...oolchain in this article we're going to use the following tools and features: jsx, a react-related set of syntax extensions that allow you to do things like defining component structures inside
javascript.
...And 15 more matches
Rhino Debugger
the rhino
javascript debugger is a gui that allows debugging of interpreted
javascript scripts run in rhino.
... the rhino
javascript debugger is a gui that allows debugging of interpreted
javascript scripts run in rhino.
... the rhino
javascript debugger is a gui that allows debugging of interpreted
javascript scripts run in rhino.
...And 15 more matches
Working with windows in chrome code
d parameter is the window's name; the name can be used in links or forms as the target attribute.
...element inside your document.
...ument to access that document and browser.contentwindow to access the window object of that document.
...And 15 more matches
Working with data
creating cdata objects data types for use with js-ctypes are represented by ctype objects.
...ject, the original object is simply duplicated directly into the new one.
...s new arraytype(type.elementtype, value).
...And 15 more matches
Mozilla
bug builds (--enable-debug) and non-optimized builds (--disable-optimize) are much slower.
...ed builds (--disable-optimize) are much slower.
... desirable to fully employ the kde wallet manager, rather than any secondary replacements of kdewallet.
...And 15 more matches
Debugger-API - Firefox Developer Tools
the debugger interface mozilla’s
javascript engine, spidermonkey, provides a debugging interface named debugger which lets
javascript code observe and manipulate the execution of other
javascript code.
... the debugger interface mozilla’s
javascript engine, spidermonkey, provides a debugging interface named debugger which lets
javascript code observe and manipulate the execution of other
javascript code.
... other
javascript code.
...And 15 more matches
Waterfall - Firefox Developer Tools
the waterfall gives you insight into the sorts of things the browser is doing as it runs your site or app.
...ecution.
...perations are color-coded and labeled.
...And 15 more matches
Using Web Workers - Web APIs
web workers are a simple means for web content to run scripts in background threads.
...t (although the responsexml and channel attributes are always null).
...awn new workers, as long as those workers are hosted within the same origin as the parent page.
...And 15 more matches
Compiling from Rust to WebAssembly - WebAssembly
ust code, you can compile it into webassembly (wasm).
... web app based in rust.
... } #[wasm_bindgen] pub fn greet(name: &str) { alert(&format!("hello, {}!", name)); } this is the contents of our rust project.
...And 15 more matches
Functions — reusable blocks of code - Learn web development
inside a defined block, and then call that code whenever you need it using a single short command — rather than having to type out the same code multiple times.
...mmand — rather than having to type out the same code multiple times.
...ple times.
...And 14 more matches
Silly story generator - Learn web development
view: first steps in this assessment you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stories.
...ndex.html in a new directory somewhere on your computer, and do the assessment locally to begin with.
...is also has the css to style the example contained within it.
...And 14 more matches
Getting started with Ember - Learn web development
previous overview: client-side
javascript frameworks next in our first ember article we will look at how ember works and what it's useful for, install the ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.
... previous overview: client-side
javascript frameworks next in our first ember article we will look at how ember works and what it's useful for, install the ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.
...will look at how ember works and what it's useful for, install the ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.
...And 14 more matches
Performance best practices for Firefox front-end engineers
which is as performant as possible—not just on its own, but in terms of its impact on other parts of firefox.
...y of this page from our friends at google, which itself is well worth the read.
...ot a good place to put queries for layout or style information.
...And 14 more matches
nsIJSON
dom/interfaces/json/nsijson.idlscriptable this interface provides a convenient way to encode and decode json strings from
javascript code.
... dom/interfaces/json/nsijson.idlscriptable this interface provides a convenient way to encode and decode json strings from
javascript code.
...tring str); deprecated since gecko 2.0 jsval legacydecodefromstream(in astring str); deprecated since gecko 2.0 jsval legacydecodetojsval(in astring str, in jscontext cx); native code only!
...And 14 more matches
Web Performance
atency by making the experience as available and interactive as possible, as soon as possible, while asynchronously loading in the longer tail parts of the experience.
..., <video>, animated gifs and even animated pngs and other image types.
...er struggles to hit a smooth frame rate.critical rendering paththe critical rendering path is the sequence of steps the browser goes through to convert the html, css, and
javascript into pixels on the screen.
...And 14 more matches
Venkman - Archive of obsolete content
venkman is the code name for mozilla's
javascript debugger.
... venkman is the code name for mozilla's
javascript debugger.
...netscape 7.x/9.x and seamonkey.
...And 13 more matches
JavaArray - Archive of obsolete content
summary core object a wrapped java array accessed from within
javascript code is a member of the type javaarray.
... of the type javaarray.
...rbitrary 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.
...And 13 more matches
Manipulating documents - Learn web development
lly done by using the document object model (dom), a set of apis for controlling html and styling information that makes heavy use of the document object.
...ument object model (dom), a set of apis for controlling html and styling information that makes heavy use of the document object.
...tml, css, and
javascript — including
javascript objects.
...And 13 more matches
Server-side web frameworks - Learn web development
ariable_name }}), which will be replaced by values passed in from the view function when a page is rendered.
... will be replaced by values passed in from the view function when a page is rendered.
...s.
...And 13 more matches
XPCOM changes in Gecko 2.0
w to update your code.
... and you can actually support both types of registration for backward compatibility.
...n for backward compatibility.
...And 13 more matches
Authoring MathML - MathML
ns, wysiwyg editors and other content management systems to help writing web pages.
... developing texzilla, a
javascript unicode latex-to-mathml converter that is intended to be used in many scenarios described here.
...over, a latex-to-mathml input box has also been integrated into seamonkey since version 2.28 and into thunderbird since version 31.
...And 13 more matches
Client-side tooling overview - Learn web development
overview: understanding client-side tools next in this article we provide an overview of modern web tooling, what kinds of tools are available and where you’ll meet them in the lifecycle of web app development, and how to find help with individual tools.
...ls.
...les will go beyond that, focusing on developer tools that help you produce web code more efficiently.
...And 12 more matches
Components object
y intended for code running with chrome privileges.
... object on your web page, your site might break at any time!
...nterfaces by interface name interfacesbyid array of interfaces by iid issuccesscode function to determine if a given result code is a success code lastresult result code of most recent xpconnect call manager the global xpcom component manager results array of known result codes by name returncode pending result for current call stack current
javascript call stack utils provides access to several useful features utils.atline provides access to the value of the atline property in the
javascript environment.
...And 12 more matches
Compiling a New C/C++ Module to WebAssembly - WebAssembly
ten sdk, using these instructions: https://emscripten.org/docs/getting_started/downloads.html compiling an example with the environment set up, let's look at how to use it to compile a c example to emscripten.
...mple with the environment set up, let's look at how to use it to compile a c example to emscripten.
...t to compile a c example to emscripten.
...And 12 more matches
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
ies widely used on the web.
...e interest of brevity, i will omit explanations of widely understood technologies, and focus instead on introducing new technologies you will need to understand in order to develop for firefox.
...better than it is when structural and stylistic markup are both embedded in html.
...And 11 more matches
Archived open Web documentation - Archive of obsolete content
ions (deprecated) firefox offers support for "desktop notifications"; these are notifications that are displayed to the user outside the context of the web content, using the standard notification system provided by the operating system.
...al is to provide an alternative, simpler syntax for accessing xml documents than via dom interfaces.
... the iterator function returns an object which implements legacy iterator protocol and iterates over enumerable properties of an object.
...And 11 more matches
What are browser developer tools? - Learn web development
every modern web browser includes a powerful suite of developer tools.
...you are inspecting uses css grid, this section allows you to view the grid details.
...ss grid, this section allows you to view the grid details.
...And 11 more matches
Dynamic behavior in Svelte: working with variables and props - Learn web development
previous overview: client-side
javascript frameworks next now that we have our markup and styles ready we can start developing the required features for our svelte to-do list app.
... now that we have our markup and styles ready we can start developing the required features for our svelte to-do list app.
...erequisites: at minimum, it is recommended that you are familiar with the core html, css, and
javascript languages, and have knowledge of the terminal/command line.
...And 11 more matches
Handling common HTML and CSS problems - Learn web development
lems you will come across in html and css code, and what tools can be used to prevent problems from happening, or fix problems that occur.
...wser problems, and use appropriate tools and techniques to fix them.
... linters another good option to choose is a so-called linter application, which not only points out errors, but can also flag up warnings about bad practices in your css, and other points besides.
...And 11 more matches
XPCOMUtils.jsm
the xpcomutils.jsm
javascript code module offers utility routines for
javascript components loaded by the
javascript component loader.
... the xpcomutils.jsm
javascript code module offers utility routines for
javascript components loaded by the
javascript component loader.
... the xpcomutils.jsm
javascript code module offers utility routines for
javascript components loaded by the
javascript component loader.
...And 11 more matches
Rhino shell
the
javascript shell provides a simple way to run scripts in batch mode or an interactive environment for exploratory programming.
... the
javascript shell provides a simple way to run scripts in batch mode or an interactive environment for exploratory programming.
... the
javascript shell provides a simple way to run scripts in batch mode or an interactive environment for exploratory programming.
...And 11 more matches
Building the WebLock UI
er can click to access the web lock interface.
...e web locking of the browser.
... to the lock and unlock methods of the weblock component must also adjust this variable accordingly: function wlock() { // check to see if locking is on or off weblock.lock(); wlocked = 1; } function wunlock() { // check to see if locking is on or off weblock.unlock(); wlocked = 0; } an important preliminary of these functions is that the weblock component be made available to the
javascript in the form of the weblock object being used in the snippets above.
...And 11 more matches
nsIPromptService
ast changed in gecko 1.7.5 you can define access keys (or keyboard shortcuts) for buttons by including an ampersand ("&") in front of the character that should be the access key for that button.
...s text, use two of them, like this: "&&".
... select(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, in pruint32 acount, [array, size_is(acount)] in wstring aselectlist, out long aoutselection); constants the following flags are combined to form the abuttonflags parameter passed to confirmex.
...And 11 more matches
nsIScriptError
js/xpconnect/idl/nsiscripterror.idlscriptable represents
javascript errors and warnings for use by the console service.
... unsigned long long the window id with which the error is associated.
...t() instead of initwithwindowid().
...And 11 more matches
Migrating from Firebug - Firefox Developer Tools
tools share the same shortcuts, but also provide shortcuts for the different panels.
...y wrapped event listeners (e.g.
...ors or xpaths firebug allows to search for elements within the html panel via css selectors or xpaths.
...And 11 more matches
<script>: The Script element - HTML: Hypertext Markup Language
the html <script> element is used to embed executable code or data; this is typically used to embed or refer to
javascript code.
... the html <script> element is used to embed executable code or data; this is typically used to embed or refer to
javascript code.
...hen the classic script will be fetched in parallel to parsing and evaluated as soon as it is available.
...And 11 more matches
WebAssembly
webassembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as c/c++, c# and rust with a compilation target so that they can run on the web.
... run on the web.
...to run alongside
javascript, allowing both to work together.
...And 11 more matches
Classes and Inheritance - Archive of obsolete content
efines one or more members, which are initialized to a given value when the class is instantiated.
...e and behavior from an existing classes, known as the base class.
...unt of boilerplate code.
...And 10 more matches
Practical positioning examples - Learn web development
"single page apps" are becoming very popular — especially for mobile web uis — because having everything served as a single file cuts down on the number of http requests required to view all the content, thereby improving performance.
... on the number of http requests required to view all the content, thereby improving performance.
...click on for displaying our content panels.
...And 10 more matches
HTML forms in legacy browsers - Learn web development
e always side effects.
...rrounding items.
...dget, you can check to see if the browser supports the features you plan on using using @supports: @supports (appearance: none) { input[type="search"] { appearance: none; /* restyle the search input */ } theappearance property can be used to display an element using platform-native styling, or, as is done with the value of none, remove default platform-native based styling.
...And 10 more matches
General asynchronous programming concepts - Learn web development
overview: asynchronous next in this article, we'll run through a number of important concepts relating to asynchronous programming, and how this looks in web browsers and
javascript.
... overview: asynchronous next in this article, we'll run through a number of important concepts relating to asynchronous programming, and how this looks in web browsers and
javascript.
...us programming, and how this looks in web browsers and
javascript.
...And 10 more matches
Package management basics - Learn web development
previous overview: understanding client-side tools next in this article we'll look at package managers in some detail to understand how we can use them in our own projects — to install project tool dependencies, keep them up-to-date, and more.
...man-readable text.
...ithout modern build tools, dependencies like this might be included in your project using a simple <script> element, but this might not work right out of the box and you will likely need some modern tooling to bundle your code and dependencies together when they are released on the web.
...And 10 more matches
SpiderMonkey Internals
this document is talking about partially obsolete things.
... talking about partially obsolete things.
...ious extensions, and a few public apis.
...And 10 more matches
SpiderMonkey 1.8
the mozilla
javascript team is pleased to announce the release of spidermonkey 1.8 release candidate 1.
... the mozilla
javascript team is pleased to announce the release of spidermonkey 1.8 release candidate 1.
...87e9724d964e).
...And 10 more matches
ctypes
nt16_t unsigned 16-bit integer.
...2_t unsigned 32-bit integer.
...ger.
...And 10 more matches
Index - XSLT: Extensible Stylesheet Language Transformations
your server needs to send both the source and the stylesheet with a xml mime type, text/xml or application/xml.
... index, reference, xslt found 54 pages: 4 pi parameters xslt no summary!
...an xml file and apply a xsl transformation on it.
...And 10 more matches
Index - WebAssembly
tags and summary 1 webassembly landing, webassembly, wasm webassembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as c/c++ with a compilation target so that they can run on the web.
...t can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as c/c++ with a compilation target so that they can run on the web.
...t format, wabt, wasm, wast2wasm, wat2wasm webassembly has an s-expression-based textual representation, an intermediate form designed to be exposed in text editors, browser developer tools, etc.
...And 10 more matches
LiveConnect - Archive of obsolete content
liveconnect provides
javascript with the ability to call methods of java classes and vice-versa using the existing java infrastructure.
... liveconnect provides
javascript with the ability to call methods of java classes and vice-versa using the existing java infrastructure.
...veconnect functionality is provided solely by the oracle's java plugin.
...And 9 more matches
Rhino serialization
beginning with rhino 1.5 release 3 it is possible to serialize
javascript objects, including functions and scripts.
...owever, serialization of code in compilation mode has some significant limitations.
...save the state of an object and write it out to a file or send it across a network connection.
...And 9 more matches
SpiderMonkey 1.8.5
note that version 1.8.5 is outdated.
... note that version 1.8.5 is outdated.
... is the
javascript engine that shipped in firefox 4.0.
...And 9 more matches
WebIDL bindings
ds of interface types in the webidl bindings.
...d on an attribute and indicates that another property with the specified name will also appear on the interface prototype object and will call the same underlying c++ implementation for the getter and setter.
...that doresolve might resolve.
...And 9 more matches
Debugger.Memory - Firefox Developer Tools
debugger.memory the debugger api can help tools observe the debuggee’s memory use in various ways: it can mark each new object with the
javascript call stack at which it was allocated.
... debugger.memory the debugger api can help tools observe the debuggee’s memory use in various ways: it can mark each new object with the
javascript call stack at which it was allocated.
...ompute a census of items belonging to the debuggee, categorizing items in various ways, and yielding item counts.
...And 9 more matches
Web applications and ARIA FAQ - Accessibility
including those who use assistive technologies such as screen readers or magnifiers.
...riven applications and widgets to interoperate with a variety of desktop-based assistive technologies.
... aria supported?
...And 9 more matches
Populating the page: how browsers work - Web Performance
rowser receives the first chunk of data, it can begin parsing the information received.
...he browser will begin parsing and attempting to render an experience based on the data it has.
...fer attribute—block rendering, and pause the parsing of html.
...And 9 more matches
Custom toolbar button - Archive of obsolete content
monkey.) you do not need any special technical skills or tools, and almost all the information you need is on this page.
...med button.xul.
...button" /> </overlay> optionally customize the file by changing the label and tooltiptext in the last section.
...And 8 more matches
Windows Media in Netscape - Archive of obsolete content
ltimedia experiences that script the windows media player in netscape 7.1, just as they do in internet explorer.
... also interact closely with the scripts in a web page.
...e embedding of the windows media player control using a java applet.
...And 8 more matches
Common causes of memory leaks in extensions - Extensions
windows.push(contentwindow); } this will keep the content window compartments alive until the browser window is closed.
...dow compartments alive until the browser window is closed.
...o ensure your code won't accidentally leak content windows.
...And 8 more matches
Front-end web developer - Learn web development
you go along.
...gned to test your knowledge of the subject matter.
...odules css first steps (10–15 hour read/exercises) css building blocks (35–45 hour read/exercises) styling text (15–20 hour read/exercises) css layout (30–40 hour read/exercises) additional resources css layout cookbook interactivity with
javascript time to complete: 135–185 hours prerequisites it is recommended that you have basic html knowledge before starting to learn
javascript.
...And 8 more matches
Tips for authoring fast-loading HTML pages - Learn web development
g page weight through the elimination of unnecessary whitespace and comments, commonly known as minimization, and by moving inline script and css into external files, can improve download performance with minimal need for other changes in the page structure.
...stance between the user and your website.
...dynamically, a little research on this subject is beneficial.
...And 8 more matches
What’s in the head? Metadata in HTML - Learn web development
let you know what such things are, in case you come across them while browsing other websites' source code.
...f your site uses a content security policy (csp) to enhance its security, the policy applies to the favicon.
... the <link> element should always go inside the head of your document.
...And 8 more matches
Choosing the right approach - Learn web development
ynchronous to finish this module off, we'll provide a brief discussion of the different coding techniques and features we've discussed throughout, looking at which one you should use when, with recommendations and reminders of common pitfalls where appropriate.
...acks aren't.
... ?
...And 8 more matches
Third-party APIs - Learn web development
arge websites and services such as google maps, twitter, facebook, paypal, etc.
...er, facebook, paypal, etc.
...t basics (see first steps, building blocks,
javascript objects), the basics of client-side apis objective: to learn how third-party apis work, and how to use them to enhance your websites.
...And 8 more matches
Ember interactivity: Events, classes and state - Learn web development
previous overview: client-side
javascript frameworks next at this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items.
... previous overview: client-side
javascript frameworks next at this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items.
...activity to our app, providing the ability to add and display new todo items.
...And 8 more matches
React interactivity: Events and state - Learn web development
previous overview: client-side
javascript frameworks next with our component plan worked out, it's now time to start updating our app from a completely static ui to one that actually allows us to interact and change things.
...worked out, it's now time to start updating our app from a completely static ui to one that actually allows us to interact and change things.
...an successfully add and delete tasks, and toggle tasks as completed.
...And 8 more matches
Creating our first Vue component - Learn web development
previous overview: client-side
javascript frameworks next now it's time to dive deeper into vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list.
... such as calling components inside other components, passing data to them via props, and saving data state.
...: if you need to check your code against our version, you can find a finished version of the sample vue app code in our todo-vue repository.
...And 8 more matches
Displaying Places information using views
port the stylesheet browser/components/places/content/places.css and overlay the file browser/components/places/content/placesoverlay.xul: <?xml-stylesheet href="chrome://browser/content/places/places.css" ?> <?xul-overlay href="chrome://browser/content/places/placesoverlay.xul" ?> it's this stylesheet that binds elements with the special type attribute to one of the views.
...ext menu and commands, which you may want to take advantage of in your own uses of the views.
...rresponding property via
javascript.
...And 8 more matches
Profiling with the Firefox Profiler
an click on timeline elements (the selected element gets darker when selected) and the tree view (see below) reflects the selected element.
...ice that the 'running time' decreases.
...this happens when a function has 2 or more non-trivial calls: the running time will be split between its children.
...And 8 more matches
Rhino Examples
examples have been provided that show how to control the
javascript engine and how to implement scriptable host objects.
... examples have been provided that show how to control the
javascript engine and how to implement scriptable host objects.
... examples have been provided that show how to control the
javascript engine and how to implement scriptable host objects.
...And 8 more matches
SpiderMonkey 1.8.7
draft in progress - this is a draft, and right now it's mostly just a copy of the 1.8.5 release notes.
... draft in progress - this is a draft, and right now it's mostly just a copy of the 1.8.5 release notes.
... is the
javascript engine that shipped in firefox 4.0.
...And 8 more matches
Components.utils
components.utils is a collection of various useful xpconnect features.
...created in specified compartment.
...spatch() dispatches a runnable to the current/main thread.
...And 8 more matches
XPIDL
le.
...4: basic interface attributes attribute interpretation uuid(12345678-fedc-ba98-7654-0123456789ab) this is the internal way this interface is accessed; it must be unique, and the uuid must be generated when creating the interface.
... way this interface is accessed; it must be unique, and the uuid must be generated when creating the interface.
...And 8 more matches
EventTarget.addEventListener() - Web APIs
); target.addeventlistener(type, listener [, usecapture, wantsuntrusted ]); // gecko/mozilla only parameters type a case-sensitive string representing the event type to listen for.
...ts that are bubbling upward through the tree will not trigger a listener designated to use capture.
... library like modernizr or detect it to do this test for you.
...And 8 more matches
WindowOrWorkerGlobalScope.setInterval() - Web APIs
onload="changecolor();"> <div id="my_box"> <p>hello world</p> </div> <button onclick="stoptextcolor();">stop</button> </body> </html> example 3: typewriter simulation the following example simulates typewriter by first clearing and then slowly typing content into the nodelist that matches a specified group of selectors.
...ass="intlink" onclick="otwexample1.terminate();">terminate</span> ]</p> <div id="info"> vivamus blandit massa ut metus mattis in fringilla lectus imperdiet.
...orer versions 9 and below do not support the passing of arguments to the callback function in either settimeout() or setinterval().
...And 8 more matches
Accessibility documentation index - Accessibility
a11y—as in "a" then 11 characters then "y") in web development means enabling as many people as possible to use web sites, even when those people's abilities are limited in some way.
... related to a part of a document under review).
... of the elements that describe the object.
...And 8 more matches
Getting Started - Developer guides
this article guides you through the ajax basics and gives you some simple hands-on examples to get you started.
...asynchronous" nature, which means it can communicate with the server, exchange data, and update the page without having to refresh the page.
...t) { // ie 6 and older httprequest = new activexobject("microsoft.xmlhttp"); } note: for illustration purposes, the above is a somewhat simplified version of the code to be used for creating an xmlhttp instance.
...And 8 more matches
Proxy Auto-Configuration (PAC) file - HTTP
a proxy auto-configuration (pac) file is a
javascript function that determines whether web browser requests (http, https, and ftp) go directly to the destination or are forwarded to a web proxy server.
... a proxy auto-configuration (pac) file is a
javascript function that determines whether web browser requests (http, https, and ftp) go directly to the destination or are forwarded to a web proxy server.
...host the hostname extracted from the url.
...And 8 more matches
Exported WebAssembly functions - WebAssembly
exported webassembly functions are how webassembly functions are represented in
javascript.
... exported webassembly functions are how webassembly functions are represented in
javascript.
... exported webassembly functions are how webassembly functions are represented in
javascript.
...And 8 more matches
The Joy of XUL - Archive of obsolete content
sults in their dhtml web applications but at the cost of complexity and performance and without any supporting standards.
...nfalls of most web applications is the tight coupling of user interface elements with client application logic.
...minating the original open source code with proprietary alterations.
...And 7 more matches
ECMAScript 5 support in Mozilla - Archive of obsolete content
ecmascript 5.1, an older version of the standard upon which
javascript is based, was approved in june 2011.
... ecmascript 5.1, an older version of the standard upon which
javascript is based, was approved in june 2011.
... ecmascript 5.1, an older version of the standard upon which
javascript is based, was approved in june 2011.
...And 7 more matches
Primitive - MDN Web Docs Glossary: Definitions of Web-related terms
in
javascript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods.
...ntation.
... array method mutates the array var foo = []; console.log(foo); // [] foo.push("plugh"); console.log(foo); // ["plugh"] // assignment gives the primitive a new (not a mutated) value bar = bar.touppercase(); // baz a primitive can be replaced, but it can't be directly altered.
...And 7 more matches
HTML: A good basis for accessibility - Learn web development
ity as you learn more about html — read more resources, look at more examples, etc.
...er (see bad-semantics.html), you'll not have a very good experience — the screen reader hasn't got anything to use as signposts, so you can't retrieve a useful table of contents, and the whole page is seen as a single giant block, so it is just read out in one go, all at once.
...y pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements.
...And 7 more matches
HTML: A good basis for accessibility - Learn web development
ity as you learn more about html — read more resources, look at more examples, etc.
...er (see bad-semantics.html), you'll not have a very good experience — the screen reader hasn't got anything to use as signposts, so you can't retrieve a useful table of contents, and the whole page is seen as a single giant block, so it is just read out in one go, all at once.
...y pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements.
...And 7 more matches
Script security
this page provides an overview of the script security architecture in gecko.
... policy, in which code gets full access to objects from its origin but highly restricted access to objects from a different origin.
... code gets full access to objects from its origin but highly restricted access to objects from a different origin.
...And 7 more matches
Rhino documentation
information on rhino for script writers and embedders.
...s what you must have to run rhino; what rhino cannot do.
...ve to run rhino; what rhino cannot do.
...And 7 more matches
SpiderMonkey compartments
a compartment is a new concept with spidermonkey 1.8.5.
... a compartment is a new concept with spidermonkey 1.8.5.
... a compartment is a new concept with spidermonkey 1.8.5.
...And 7 more matches
JS_InitClass
make a jsclass accessible to
javascript code by creating its prototype, constructor, properties, and functions.
...on.
...object.
...And 7 more matches
Components.utils.forceGC
components.utils.forcegc lets scripts force a garbage collection cycle.
... components.utils.forcegc lets scripts force a garbage collection cycle.
... components.utils.forcegc lets scripts force a garbage collection cycle.
...And 7 more matches
Storage
rg.
...this section demonstrates how you can execute sql statements on your database.
...mplesql("create temp table table_name (column_name integer)"); similarly, the c++ looks like this: rv = mdbconn->executesimplesql(ns_literal_cstring("create temp table table_name (column_name integer)")); ns_ensure_success(rv, rv); results to be returned however, if you need to get results back, you should create the statement with the mozistorageconnection.createstatement() api like this in
javascript: var statement = dbconn.createstatement("select * from table_name where column_name = :parameter"); this example uses a named placeholder called "parameter" to be bound later (described in binding parameters).
...And 7 more matches
XPCOM
xpcom is a cross platform component object model, similar to microsoft com.
...nd 1.9, for example).
...time a simple implementation of nsifactory is needed.
...And 7 more matches
Console messages - Firefox Developer Tools
riangle indicates that further information is available; clicking it displays or collapses that information.
...expect, copying the url into the clipboard open in network panel switches context to the network tab, selects the request and shows you the details resend request sends the network request again.
...witches context to the network tab, selects the request and shows you the details resend request sends the network request again.
...And 7 more matches
HTTP Index - HTTP
es the target of an http request is called a "resource", whose nature isn't defined further; it can be a document, a photo, or anything else.
...ted resources with the value of a validator.
...s a marker used by the server to advertise its support of partial requests.
...And 7 more matches
CSS Houdini
into the styling and layout process of a browser’s rendering engine.
...reating new css features without waiting for them to be implemented natively in browsers.
...posite processes — before applying any style updates found in scripts.
...And 7 more matches
Progressive loading - Progressive web apps (PWAs)
ad, the bigger the chance they will leave before waiting for everything to finish.
...of every version of the site: mobile, tablet, desktop, print only, etc.
...nd then manage other resources when needed.
...And 7 more matches
Index of archived content - Archive of obsolete content
elayed execution dialogs and prompts downloading files drag & drop embedding svg examples and demos from articles file i/o finding window handles forms related code snippets html in xul for rich tooltips html to dom isdefaultnamespace js xpcom
javascript debugger service
javascript timers
javascript daemons management label and description lookupnamespaceuri lookupprefix miscellaneous modules on page load page loading post data to window preferences ...
... common pitfalls communication between html and your extension creating custom firefox extensions with the mozilla build system custom about: urls default preferences deploying a plugin as an extension developing add-ons displaying web content in an extension without security issues downloading json and
javascript in extensions enhanced extension installation extension etiquette extension library extension packaging extension samples extension theming guidelines extension versioning, update and compatibility extensions support in seamonkey 2 firefox addons developer guide hiding browser chrome hotf...
... appendix d: loading scripts appendix e: dom building and insertion (html & xul) appendix f: monitoring dom changes connecting to remote content custom xul elements with xbl getting started with firefox extensions handling preferences intercepting page loads introduction
javascript object management local storage mozilla documentation roadmap observer notifications setting up a development environment the box model the essentials of an extension useful mozilla community sites user notifications and alerts xpcom objects ...
...And 6 more matches
Mozilla Application Framework in Detail - Archive of obsolete content
lla's philosophy of using "the right tool for the right job" is manifested most prominently in the design of the user interface.
...ment the latest w3c standards and enables developers to build rich, dynamic web pages and web-based applications that look and run as intended across a variety of platforms and devices.
...l makes virtually all of the functionality of gecko available as a series of components, or reusable cross-platform libraries, that can be accessed from the browser or scripted from any mozilla application.
...And 6 more matches
Archived Mozilla and build documentation - Archive of obsolete content
e as a way of manipulating a set of dom nodes corresonding to a visual representation of calievent and calitodo objects.
...ch allows java code to interact with xpcom objects.
... the error console is a tool available in most mozilla-based applications that is used for reporting errors in the application chrome and in web pages user opens.
...And 6 more matches
Packages - Archive of obsolete content
obsolete since gecko 16.0 (firefox 16.0 / thunderbird 16.0 / seamonkey 2.13)this feature is obsolete.
...seamonkey 2.13)this feature is obsolete.
... classes from within
javascript code.
...And 6 more matches
Anatomy of a video game - Game development
this article looks at the anatomy and workflow of the average video game from a technical point of view, in terms of how the main loop should run.
...implemented in something called a main loop.
...lse entirely.
...And 6 more matches
Building up a basic demo with A-Frame - Game development
web browsers, but the community is still waiting for tools and libraries to appear, to make this easier.
...nd android), and oculus rift, gear vr and htc vive.
...hould start off by: making sure you are using a modern browser with good webgl support (and webxr support if you have available vr or ar hardware) such as the latest firefox or chrome — download firefox nightly or chrome (v54 or higher).
...And 6 more matches
asm.js - Game development
asm.js is a specification defining a subset of
javascript that is highly optimizable.
... asm.js is a specification defining a subset of
javascript that is highly optimizable.
...e of it, and further resources and examples.
...And 6 more matches
Looping code - Learn web development
previous overview: building blocks next programming languages are very useful for rapidly completing repetitive tasks, from multiple basic calculations to just about any other situation where you've got a lot of similar items of work to complete.
...ocks next programming languages are very useful for rapidly completing repetitive tasks, from multiple basic calculations to just about any other situation where you've got a lot of similar items of work to complete.
...tive tasks, from multiple basic calculations to just about any other situation where you've got a lot of similar items of work to complete.
...And 6 more matches
Making decisions in your code — conditionals - Learn web development
ramming language, the code needs to make decisions and carry out actions accordingly depending on different inputs.
...ent inputs.
...a weather app, if it is being looked at in the morning, show a sunrise graphic; show stars and a moon if it is nighttime.
...And 6 more matches
Video and Audio APIs - Learn web development
previous overview: client-side web apis next html5 comes with elements for embedding rich media in documents — <video> and <audio> — which in turn come with their own apis for controlling playback, seeking, etc.
... previous overview: client-side web apis next html5 comes with elements for embedding rich media in documents — <video> and <audio> — which in turn come with their own apis for controlling playback, seeking, etc.
...oes have advantages.
...And 6 more matches
Object building practice - Learn web development
previous overview: objects next in previous articles we looked at all the essential
javascript object theory and syntax details, giving you a solid base to start from.
... previous overview: objects next in previous articles we looked at all the essential
javascript object theory and syntax details, giving you a solid base to start from.
... in previous articles we looked at all the essential
javascript object theory and syntax details, giving you a solid base to start from.
...And 6 more matches
Ember resources and troubleshooting - Learn web development
previous overview: client-side
javascript frameworks next our final ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.
... previous overview: client-side
javascript frameworks next our final ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.
... next our final ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.
...And 6 more matches
Introduction to automated testing - Learn web development
mes per day, can get tedious, and time-consuming.
...ately, there are tools to help us automate some of this pain away.
...: "index.js", "scripts": { "test": "test" }, "author": "chris mills", "license": "mit" } with this, you are ready to move on.
...And 6 more matches
Learn web development
le, which provides a practical introduction to web development.
...elopment.
...ction to html module and move on to our css first steps module.
...And 6 more matches
A bird's-eye view of the Mozilla framework
with the directory structure of the source tree.
...kit implementations provide a set of widgets for ui controls such as menus, command buttons, dialog boxes and scroll bars.
...plementation of the provider object in order to take advantage of its services.
...And 6 more matches
Emscripten
emscripten is an llvm to
javascript compiler.
... emscripten is an llvm to
javascript compiler.
...ten is an llvm to
javascript compiler.
...And 6 more matches
Hacking Tips
this page list a few tips to help you investigate issues related to spidermonkey.
... file /home/nicolas/mozilla/contrib-push/js/src/jit/ion.cpp, line 3196.
...date self-hosted:20:403-500 note: the line 3196, listed above, corresponds to the location of the jit spew inside jit::invalidate function.
...And 6 more matches
Property attributes
ditionally defines several non-standard property attributes.
...a property.
...enumerate the property is visible to
javascript for...in and for each ...
...And 6 more matches
SpiderMonkey 24
these release notes are an incomplete draft and were initially seeded from the spidermonkey 17 release notes, so they're not necessarily complete or fully accurate.
... incomplete draft and were initially seeded from the spidermonkey 17 release notes, so they're not necessarily complete or fully accurate.
...ance over previous spidermonkey releases, with a significantly improved garbage collector, a new jit compilation mode, and other features.
...And 6 more matches
Declaring and Using Callbacks
c functions occasionally take function pointers as arguments, which are generally used as callbacks.
... c functions occasionally take function pointers as arguments, which are generally used as callbacks.
...is no concurrency logic in js-ctypes, so invoking callbacks on other threads will cause things to crash.
...And 6 more matches
Web Audio API - Web APIs
familiar with music theory concepts, want to start building instruments, then you can go ahead and start building things with the advance tutorial and others as a guide (the above linked tutorial covers scheduling notes, creating bespoke oscillators and envelopes, as well as an lfo among other things.) if you aren't familiar with the programming basics, you might want to consult some beginner's
javascript tutorials first and then come back here — see our beginner's
javascript learning module for a great place to begin.
...nique person listening to the audio scene used in audio spatialization.
...node the pannernode interface represents the position and behavior of an audio source signal in 3d space, allowing you to create complex panning effects.
...And 6 more matches
List of Mozilla-Based Applications - Archive of obsolete content
ftware uses mozilla spidermonkey adobe flash player popular browser plug-in uses nss in linux version adwatch content management system uses xul and xpcom aicpcu/iia exam app exam delivery software aliwal geocoder geocoding & data on a map amarok xul remote remote control for amarok music player ample sdk
javascript gui-framework aol instant messenger im client uses nss apache web server doesn't use nss by default, but can be configured to use nss with mod_nss ssl module apicawatch site performance monitoring tool uses firefox as part of its monitoring package astyle css editor editing tool atmail webmail client aviva f...
... crowbar server tool cycloctopus screen scraping console cyclone3 content management system danger mobile platform uses gecko on the server side -- no longer active?
...agement system fully remote xul wcms (no need to install extensions).
...And 5 more matches
Making it into a static overlay - Archive of obsolete content
es, and that's how we'll distribute our extension.
...fore we package it up we need to separate the modifications into a different file and add them back in at run time via a dynamic xul overlay.
...nto a static overlay, we need to move all the code we added to navigator.xul into a new file tinderstatusoverlay.xul in the same directory: <?xml version="1.0"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/
javascript" src="chrome://navigator/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay> tinderstatusoverlay.xul starts with an xml processing instruction that identifies the file as xml (all xul files need to include this).
...And 5 more matches
Gecko Compatibility Handbook - Archive of obsolete content
accessibility.
...r netscape navigator 4.
...rence as discussed in mozilla's using web standards in your web pages, coding for cross-browser compatibility requires you write standard markup that gecko-based browsers, netscape 4, and ie browsers can render properly.
...And 5 more matches
JSException - Archive of obsolete content
summary the public class jsexception extends runtimeexception java.lang.object | +----java.lang.throwable | +----java.lang.exception | +----java.lang.runtimeexception | +----netscape.
javascript.jsexception description jsexception is an exception which is thrown when
javascript code returns an error.
...t | +----java.lang.throwable | +----java.lang.exception | +----java.lang.runtimeexception | +----netscape.
javascript.jsexception description jsexception is an exception which is thrown when
javascript code returns an error.
... +----netscape.
javascript.jsexception description jsexception is an exception which is thrown when
javascript code returns an error.
...And 5 more matches
Implementing game control mechanisms - Game development
this series of articles we will show you how you can approach building a game that can be played using touchscreen smartphones, mouse and keyboard, and also less common mechanisms such as gamepads.
...and keyboard, and also less common mechanisms such as gamepads.
...will show how to implement various different control mechanisms for captain rogers to support different platforms — from touch on mobile, through keyboard/mouse/gamepad on desktop, to more unconventional ones like tv remote, shouting to or waving your hand in front of the laptop, or squeezing bananas.
...And 5 more matches
Efficient animation for web games - Game development
this article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones.
....
...e things, as there is evidence to suggest (in popular and widely-used ui libraries, for example) that they aren’t necessarily common knowledge.
...And 5 more matches
Accessible multimedia - Learn web development
previous overview: accessibility next another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users.
...bbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video.
...ss="controls"> <button class="playpause">play</button> <button class="stop">stop</button> <button class="rwd">rwd</button> <button class="fwd">fwd</button> <div class="time">00:00</div> </div> </section>
javascript basic setup we've inserted some simple control buttons below our video.
...And 5 more matches
Making asynchronous programming easier with async and await - Learn web development
previous overview: asynchronous next more recent additions to the
javascript language are async functions and the await keyword, part of the so-called ecmascript 2017
javascript edition (see ecmascript next support in mozilla).
...see ecmascript next support in mozilla).
...hand such as hello().then(console.log) like we saw in the last article.
...And 5 more matches
Fetching data from the server - Learn web development
and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entire new page.
...from the server to update sections of a webpage without having to load an entire new page.
...lping to solve the problem described above.
...And 5 more matches
Useful string methods - Learn web development
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.
...ting one character in a string for another, and more.
...ecode(); }; test your skills!
...And 5 more matches
Componentizing our React app - Learn web development
previous overview: client-side
javascript frameworks next at this point, our app is a monolith.
...xt at this point, our app is a monolith.
...o show only eat being checked: if you change each <todo /> component’s completed prop, your browser will check or uncheck the equivalent rendered checkboxes accordingly.
...And 5 more matches
Deployment and next steps - Learn web development
previous overview: client-side
javascript frameworks in the previous article we learning about svelte's typescript support, and how to use it to make your application more robust.
...g about svelte's typescript support, and how to use it to make your application more robust.
...state, run cd mdn-svelte-tutorial/08-next-steps or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/08-next-steps remember to run npm install && npm run dev to start your app in development mode.
...And 5 more matches
Adding a new todo form: Vue events, methods, and models - Learn web development
previous overview: client-side
javascript frameworks next we now have sample data in place, and a loop that takes each bit of data and renders it inside a todoitem in our app.
...eally need next is the ability to allow our users to enter their own todo items into the app, and for that we'll need a text <input>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data.
...eed a text <input>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data.
...And 5 more matches
Introduction to cross browser testing - Learn web development
wser testing next this article starts the module off by providing an overview of the topic of (cross) browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?" prerequisites: familiarity with the core html, css, and
javascript languages.
...o make sure that not only do your projects work, but they work for all your users, no matter what browser, device, or additional assistive tools they are using.
...ross browser issues occur?
...And 5 more matches
Rhino scopes and contexts
rent roles.
...ontext.exit(); these calls will work properly even if there is already a context associated with the current thread.
...nd that a scope is independent of the context that created it.
...And 5 more matches
FOSS
dermonkey, providing the same api for both web and native platforms.
... getting started here.
...ibrary for extending & embedding spidermonkey; works with spidermonkey 1.8.5 and above, has lots of goodies spiderape - the oldest c++ bindings for spidermonkey trixul - (trixul cvs) - trixul xml-based gui toolkit embeds spidermonkey, using
javascript to implement logic behind its gui, supporting calls from
javascript to c++ objects rust mozjs - rust bindings used by servo gnome gjs -
javascript bindings to gnome (broadly, to any library using the gobject introspection mechanism) objective caml http://alain.frisch.fr/soft.html#spider - bindings to embed spidermonkey in ocaml applications perl http://jspl.msg.mx/ - bindings to cross-embed spidermonkey and perl.
...And 5 more matches
JS_DefineProperty
me of the new property.
...ame is null-terminated.
...same but takes a js::handleid for the property name.
...And 5 more matches
SpiderMonkey 1.8.8
these release notes are an incomplete draft and were initially seeded from the 1.8.5 release notes, so lots of the information here isn't actually new to spidermonkey 1.8.8 (nor is it even the case that the version number will be 1.8.8!).
... 1.8.5 release notes, so lots of the information here isn't actually new to spidermonkey 1.8.8 (nor is it even the case that the version number will be 1.8.8!).
...revious spidermonkey releases, with ongoing jit compilation work and with the introduction of type inference to enable faster jitted code.
...And 5 more matches
SpiderMonkey 17
these release notes are an incomplete draft and were initially seeded from the (now-defunct) 1.8.8 release notes, which were themselves seeded from the 1.8.5 release notes, so lots of the information here isn't actually new to spidermonkey 17.
...ase notes, which were themselves seeded from the 1.8.5 release notes, so lots of the information here isn't actually new to spidermonkey 17.
...revious spidermonkey releases, with ongoing jit compilation work and with the introduction of type inference to enable faster jitted code.
...And 5 more matches
SpiderMonkey 31
these release notes are incomplete.
... these release notes are incomplete.
... continues to improve performance over previous spidermonkey releases, with a significantly improved garbage collector and other features.
...And 5 more matches
SpiderMonkey 38
spidermonkey 38 is outdated and contains known security vulnerabilities.
... spidermonkey 38 is outdated and contains known security vulnerabilities.
...script engine that shipped in firefox 38.
...And 5 more matches
SpiderMonkey 45
spidermonkey 45 is outdated and contains known security vulnerabilities.
...ty vulnerabilities.
...idermonkey 45 is the
javascript engine that shipped in firefox 45.
...And 5 more matches
Shell global objects
these are the global objects that are set up automatically by the spidermonkey js command-line interpreter when you start the program.
... log evaluate and print expressions to stdout.
...enable or disable js caching.
...And 5 more matches
XPCOM guide
these articles provide tutorials and usage documentation for xpcom, including how to use it in your own projects and how to build xpcom components for your firefox add-ons and the like.
... these articles provide tutorials and usage documentation for xpcom, including how to use it in your own projects and how to build xpcom components for your firefox add-ons and the like.
... these articles provide tutorials and usage documentation for xpcom, including how to use it in your own projects and how to build xpcom components for your firefox add-ons and the like.
...And 5 more matches
XPConnect wrappers
they should be seeing a wrapper.
...ywrapper [object blah]]".
...e able to peek down inside them from the console.
...And 5 more matches
Building an Account Manager Extension
if (server.type == \"imap\") return true; return false; }, queryinterface: xpcomutils.generateqi([ components.interfaces.nsimsgaccountmanagerextension ]) } step 2: building a component we convert the interface to a xpcom component and register it in the component manager as account manager extension.
... panel has to be located in chrome://example@mozilla.org/content/am-devmo-account.xul.
...operty file needs to be in chrome://example@mozilla.org/locale/am-devmo-account.properties.
...And 5 more matches
Browser Console - Firefox Developer Tools
the browser console is like the web console, but applied to the whole browser rather than a single content tab.
... the browser console is like the web console, but applied to the whole browser rather than a single content tab.
... and warnings, and messages explicitly logged by
javascript code.
...And 5 more matches
UI Tour - Firefox Developer Tools
this article is a quick tour of the main sections of the
javascript debugger's user interface.
...is split vertically into three panels source list pane source pane the contents of the third pane depend on the current state of the debugger and may include the following sections: toolbar watch expressions breakpoints call stack scopes xhr breakpoints event listener breakpoints dom mutation breakpoints source list pane the source list pane lists all the
javascript source files loaded into the page, and enables you to select one to debug.
...s all files other than those within the selected directory to be skipped by the debugger.
...And 5 more matches
Debugger - Firefox Developer Tools
from the debuggee, regardless of what sort of events or handlers or “points” we add to the interface.
...reakpoints.
... available to debuggers running in privileged code (“chrome”, in firefox).
...And 5 more matches
Performance - Firefox Developer Tools
the performance tool gives you insight into your site's general responsiveness,
javascript and layout performance.
...eate a recording, or profile, of your site over a period of time.
...tool then shows you an overview of the things the browser was doing to render your site over the profile, and a graph of the frame rate over the profile.
...And 5 more matches
ARIA - Accessibility
accessible rich internet applications (aria) is a set of attributes that define ways to make web content and web applications (especially those developed with
javascript) more accessible to people with disabilities.
...set of attributes that define ways to make web content and web applications (especially those developed with
javascript) more accessible to people with disabilities.
...ia-valuemin="0" aria-valuemax="100"> </div> this progress bar is built using a <div>, which has no meaning.
...And 5 more matches
Live streaming web audio and video - Developer guides
from firewalls or proxy servers.
... the process of using the various protocols is reassuringly familiar if you are used to working with media over http.
...ormat"> <!-- fallback here --> </video> media source extensions (mse) media source extensions is a w3c working draft that plans to extend htmlmediaelement to allow
javascript to generate media streams for playback.
...And 5 more matches
DOM onevent handlers - Developer guides
d detecting pressed keys getting focus the onevent handler is usually named with the event it reacts to, like onclick, onkeypress, onfocus, etc.
...hr = new xmlhttprequest(); xhr.onprogress = function() { … }; html onevent attributes html elements have attributes named onevent which can be used to register a handler for an event directly within the html code.
...register a handler for an event directly within the html code.
...And 5 more matches
Overview of events and handlers - Developer guides
this overview of events and event handling explains the code design pattern used to react to incidents occurring when a browser accesses a web page, and it summarizes the types of such incidents modern web browsers can handle.
... to the event driven browser.
...g for and handling the incidence of new events follows painting.
...And 5 more matches
Constraint validation - Developer guides
is easy, checking whether each field has a valid and coherent value is more difficult, and informing the user about the problem may become a headache.
...ted using the constraint validation api.
...sic constraints are declared in two ways: by choosing the most semantically appropriate value for the type attribute of the <input> element, e.g., choosing the email type automatically creates a constraint that checks whether the value is a valid e-mail address.
...And 5 more matches
Index - Developer guides
found 43 pages: # page tags and summary 1 developer guides api, guide, landing, web these articles provide how-to information to help make use of specific web technologies and apis.
... found 43 pages: # page tags and summary 1 developer guides api, guide, landing, web these articles provide how-to information to help make use of specific web technologies and apis.
...
javascript and xml, while not a technology in itself, is a term coined in 2005 by jesse james garrett, that describes a "new" approach to using a number of existing technologies together 3 community ajax if you know of useful mailing lists, newsgroups, forums, or other communities related to ajax, please link to them here.
...And 5 more matches
Using HTTP cookies - HTTP
ecured http, and therefore can't easily be accessed by a man-in-the-middle attacker.
...he secure attribute.
...defence measure against session fixation.
...And 5 more matches
StringView - Archive of obsolete content
the aims of this library are: to create a c-like interface for strings (i.e., an array of character codes — an arraybufferview in
javascript) based upon the
javascript arraybuffer interface to create a highly extensible library that anyone can extend by adding methods to the object stringview.prototype to create a collection of methods for such string-like objects (since now: stringviews) which work strictly on arrays of numbers rather than on creating new immutable
javascript strings to work with unicode encodings other than
javascript's default utf-16 domstrings introduction as web applications become more and more powerful, adding features such as audio and video manipulation, access to raw data using websockets, and so forth, it has become clear that there are times when it wo...
... arrays of numbers rather than on creating new immutable
javascript strings to work with unicode encodings other than
javascript's default utf-16 domstrings introduction as web applications become more and more powerful, adding features such as audio and video manipulation, access to raw data using websockets, and so forth, it has become clear that there are times when it would be helpful for
javascript code to be able to quickly and easily manipulate raw binary data.
...be able to quickly and easily manipulate raw binary data.
...And 4 more matches
Code snippets - Archive of obsolete content
rse, write, manipulate, etc.
...com code used to define and call xpcom components in
javascript running applications code used to run other applications <canvas> related what wg canvas-related code signing a xpi how to sign an xpi with pki delayed execution performing background operations.
...com components in
javascript running applications code used to run other applications <canvas> related what wg canvas-related code signing a xpi how to sign an xpi with pki delayed execution performing background operations.
...And 4 more matches
Localizing an extension - Archive of obsolete content
« previousnext » this article expands upon the previous samples on extension writing by adding localization support to our stock watcher extension.
...shinformation()"/> do this for every string used in each xul file.
...his for every string used in each xul file.
...And 4 more matches
Error Console - Archive of obsolete content
error console is deprecated in firefox, and is now only made available if you set the devtools.errorconsole.enabled preference to true.
... for chrome content.
...pplication chrome and in web pages user opens.
...And 4 more matches
Adding Event Handlers - Archive of obsolete content
e haven't cleaned it up much but we have created a simple user interface easily.
...rs.
...ample, you may use urls of the following form: <script src="findfile.js"/> <script src="chrome://findfiles/content/help.js"/> <script src="http://www.example.com/js/items.js"/> this tutorial does not attempt to describe how to use
javascript (except as related to event handling) as this is a fairly large topic and there are plenty of other resources that are available for this.
...And 4 more matches
JavaObject - Archive of obsolete content
summary core object the type of a wrapped java object accessed from within
javascript code.
...struct a javaobject using the object's java constructor with the packages keyword: new packages.javaclass(parameterlist) javaclassis the fully-specified name of the object's java class.
...ied name of the object's java class.
...And 4 more matches
Examples - Archive of obsolete content
this page contains the source code of the examples related to the "properly using css and
javascript in xhtml documents" article.
...ension and will generate an error when parsed.
...t//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>problem 2 - comments in xhtml</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <style type="text/css"> <!-- body {background-color: blue; color: yellow; } --> </style> <script type="text/
javascript"> <!-- var i = 0; var sum = 0; for (i = 0; i < 10; ++i) { sum += i; } alert('sum = ' + sum); // --> </script> </head> <body> <h1>problem 2 - comments in xhtml</h1> <p> this document is valid xhtml 1.0 strict served as <code>application/xhtml+xml</code>.
...And 4 more matches
Create the Canvas and draw on it - Game development
nt, save it as index.html, in a sensible location, and add the following code to it: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>gamedev canvas workshop</title> <style> * { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; } </style> </head> <body> <canvas id="mycanvas" width="480" height="320"></canvas> <script> //
javascript code goes here </script> </body> </html> we have a charset defined, <title> and some basic css in the header.
... canvas { background: #eee; display: block; margin: 0 auto; } </style> </head> <body> <canvas id="mycanvas" width="480" height="320"></canvas> <script> //
javascript code goes here </script> </body> </html> we have a charset defined, <title> and some basic css in the header.
...pt> </body> </html> we have a charset defined, <title> and some basic css in the header.
...And 4 more matches
Polyfill - MDN Web Docs Glossary: Definitions of Web-related terms
a polyfill is a piece of code (usually
javascript on the web) used to provide modern functionality on older browsers that do not natively support it.
...e.
...ther times, polyfills are used to address issues where browsers implement the same features in different ways.
...And 4 more matches
Symbol - MDN Web Docs Glossary: Definitions of Web-related terms
in
javascript, symbol is a primitive value.
... in
javascript, symbol is a primitive value.
...wo symbols with the same description: let sym1 = symbol("sym") let sym2 = symbol("sym") console.log(sym1 === sym2) // returns "false" // symbols are guaranteed to be unique.
...And 4 more matches
Accessibility - Learn web development
learning some html, css, and
javascript is useful if you want to become a web developer.
... learning some html, css, and
javascript is useful if you want to become a web developer.
...ues on web pages.
...And 4 more matches
Image gallery - Learn web development
previous overview: building blocks now that we've looked at the fundamental building blocks of
javascript, we'll test your knowledge of loops, functions, conditionals and events by getting you to build a fairly common item you'll see on a lot of websites — a
javascript-powered image gallery.
...uilding blocks of
javascript, we'll test your knowledge of loops, functions, conditionals and events by getting you to build a fairly common item you'll see on a lot of websites — a
javascript-powered image gallery.
... objective: to test comprehension of
javascript loops, functions, conditionals, and events.
...And 4 more matches
Getting started with Vue - Learn web development
previous overview: client-side
javascript frameworks next now let's introduce vue, the third of our frameworks.
...s introduce vue, the third of our frameworks.
...how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.
...And 4 more matches
Gecko info for Windows accessibility vendors
seriously need to understand msaa, you'll need to read the docs on msdn and play with the sample apps and code that come with msaa sdk 1.3.
...occur on the main thread.
...s, rather than dom events.
...And 4 more matches
Embedding Tips
her service.
...n the specified style and hand back the nsiwebbrowserchrome interface to it.
...r); } i need the
javascript inside the browser window to talk to my embedding client.
...And 4 more matches
JNI.jsm
the jni.jsm
javascript code module abstracts all of the js-ctypes required for writing jni code.
... the jni.jsm
javascript code module abstracts all of the js-ctypes required for writing jni code.
...then afullyqualifiedname must be an array type.
...And 4 more matches
Scroll-linked effects
y style="height: 5000px" onscroll="document.getelementbyid('toolbar').style.top = math.max(100, window.scrolly) + 'px'"> <div id="toolbar" style="position: absolute; top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this implementation of sticky positioning relies on the scroll event listener to reposition the "toolbar" div.
...get" class="snaptarget" style="position: relative; top: 200px; width: 100%; height: 200px; background-color: green"></div> </body> in this example, there is a scroll event listener which detects if the scroll position is within 200 pixels of the top of the "snaptarget" div.
...0%; height: 200px; background-color: green"></div> </body> in this example, there is a scroll event listener which detects if the scroll position is within 200 pixels of the top of the "snaptarget" div.
...And 4 more matches
Index
generates encryption/mac keys and outputs public key as pkcs11 certificate signing request 172 encdecmac using token object - sample 3 encdecmac, html, ncc, ncc article, web, web development no summary!
... encrypt decrypt_mac_using token generates encryption/mac keys and uses token for storing.
...ord-file] modutil -dbdir sql:/home/my/sharednssdb -changepw "nss certificate db" enter old password: incorrect password, try again...
...And 4 more matches
JSVersion
the values of the jsversion enumerated type stand for particular versions of the
javascript run-time.
...
javascript run-time.
...sion, and js_versiontostring use these values.
...And 4 more matches
JS_SetFunctionCallback
obsolete since jsapi 37this feature is obsolete.
... obsolete since jsapi 37this feature is obsolete.
...g --enable-trace-jscalls.
...And 4 more matches
Parser API
recent builds of the standalone spidermonkey shell include a reflection of the spidermonkey parser, made available as a
javascript api.
... recent builds of the standalone spidermonkey shell include a reflection of the spidermonkey parser, made available as a
javascript api.
... recent builds of the standalone spidermonkey shell include a reflection of the spidermonkey parser, made available as a
javascript api.
...And 4 more matches
Mozilla Projects
compare-locales compare-locales is a python script that helps localizers to check their work without running firefox or another application.
...zers to check their work without running firefox or another application.
...anguage) and compiles that into
javascript, which can be run on the web.
...And 4 more matches
xpcshell
xpcshell is an xpconnect-enabled
javascript shell.
... xpcshell is an xpconnect-enabled
javascript shell.
...however, it might not be there if you have a non-debug version of firefox, mozilla, thunderbird, etc.) $ cd /opt/mozilla $ ./run-mozilla.sh ./xpcshell js> execute xpcshell from window the built xpcshell.exe can't be executed under the mozilla build shell(bash).
...And 4 more matches
nsILoginManager
earches for logins matching the specified criteria.
... an empty string ("") will match any value (except null).
...lled from
javascript like this: var logins = myloginmgr.findlogins({}, 'https://bugzilla.mozilla.org', '', '', {}); getalldisabledhosts() returns a list of all hosts for which login saving is disabled.
...And 4 more matches
Index
the advanced options panel, click on the general tab, and click on config editor.
... built on a set of technologies that can seem daunting to new developers.
...ng a thunderbird extension 4: chrome manifest extensions, thunderbird the file called chrome.manifest tells thunderbird what packages and overlays are provided by the extension.
...And 4 more matches
Plug-in Basics - Plugins
ndors who are creating new and innovative plug-ins.
...ns page.
...lifespan, you should be careful to isolate these from plug-in api calls.
...And 4 more matches
Debugger.Object - Firefox Developer Tools
erent routes (perhaps two functions are called on the same object), spidermonkey presents the same debugger.object instance to the debugger each time.
...operties are equal.
...was allocated by debuggee code, this is null.
...And 4 more matches
Video player styling basics - Developer guides
css alteration the previous article simply set the display property of the video controls to block in order to display them.
... this has now been changed to use a data-state attribute, which this code already uses to handle its fullscreen implementation.
...controls progress span { width:0%; height:100%; display:inline-block; background-color:#2a84cd; } a .data-state class is also used here when a <progress> element is being "faked"; when it's in this state the background colour needs to be set.
...And 4 more matches
Creating a cross-browser video player - Developer guides
<a href="video/tears-of-steel-battle-clip-medium.mp4">download mp4</a> </video> <figcaption>© blender foundation | <a href="http://mango.blender.org">mango.blender.org</a></figcaption> </figure> even though this player will define its own custom control set, the controls attribute is still added to the <video> element, and the player's default control set is switched off later with
javascript.
...oad mp4</a> </video> <figcaption>© blender foundation | <a href="http://mango.blender.org">mango.blender.org</a></figcaption> </figure> even though this player will define its own custom control set, the controls attribute is still added to the <video> element, and the player's default control set is switched off later with
javascript.
...ue="0" min="0"> <span id="progress-bar"></span> </progress> </li> <li><button id="mute" type="button">mute/unmute</button></li> <li><button id="volinc" type="button">vol+</button></li> <li><button id="voldec" type="button">vol-</button></li> <li><button id="fs" type="button">fullscreen</button></li> </ul> each button is given an id so it can be easily accessed with
javascript.
...And 4 more matches
Audio and Video Delivery - Developer guides
width="320" height="30" type="application/x-shockwave-flash" data="flashmediaelement.swf"> <param name="movie" value="flashmediaelement.swf" /> <param name="flashvars" value="controls=true&isvideo=false&file=audiofile.mp3" /> </object> </audio> the process is very similar with video — just remember to set isvideo=true in the flashvars value parameters.
...e browser supports, then set the play-head 5 seconds in and attempt to play it.
...t.createelement('audio'); audio.src = window.url.createobjecturl(new blob(data)); } settimeout(function() { rec.stop(); }, 5000); }) .catch(function onerror(error) { console.log(error.message); }); see mediarecorder api for more details.
...And 4 more matches
Rich-Text Editing in Mozilla - Developer guides
g.</span> internet explorer: <strong>i love geckos.</strong> <strong><em><u>dinosaurs are big.</u></em></strong> another difference between mozilla and ie is how to access the document object of an iframe, which is usually used in conjunction with designmode.
...ection of migrate apps from internet explorer to mozilla.
...s an html document setting its own designmode to "on".
...And 4 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
tted yyyy-mm-ddthh:mm.
...ll need to be escaped for inclusion in the url parameters, e.g.
...: absolute; right: -18px; } input:valid + span { position: relative; } input:valid + span:after { content: '✓'; position: absolute; right: -18px; } the best way to deal with dates in forms in a cross-browser way at the moment is to get the user to enter the day, month, year, and time in separate controls (<select> elements being popular — see below for an implementation), or use
javascript libraries such as jquery date picker, and the jquery timepicker plugin.
...And 4 more matches
HTML documentation index - HTML: Hypertext Markup Language
# page tags and summary 1 html: hypertext markup language html, html5, landing, web, l10n:priority html (hypertext markup language) is the most basic building block of the web.
...e, global attributes, html, reference the autocapitalize global attribute is an enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user.
...tribute values and its text node children should be translated when the page is localized, or whether to leave them unchanged.
...And 4 more matches
Performance fundamentals - Web Performance
ptimizations this section provides a brief overview of how firefox/gecko contributes to performance generally, below the level of all applications.
...opers to draw on.
... js file needed for an uncommon menu"; "fetch and decode the image for the high scores list", etc.
...And 4 more matches
Mobile first - Progressive web apps (PWAs)
templates contain a number of built-in features.
...ry means that narrow screen devices won't read that media query, so they will not waste their time and bandwidth downloading that image.
...ime and bandwidth downloading that image.
...And 4 more matches
Compiling an Existing C Module to WebAssembly - WebAssembly
vides most of these features, although there are some limitations.
...webp.c \ libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c note: this strategy will not work with every c project.
...ript> <script> module.onruntimeinitialized = async _ => { const api = { version: module.cwrap('version', 'number', []), }; console.log(api.version()); }; </script> and you will see the correct version number in the output: note: libwebp returns the current version a.b.c as a hexadecimal number 0xabc.
...And 4 more matches
dev/panel - Archive of obsolete content
refox 34.
...r tools are hosted in a ui component called the toolbox.
...l; }, onready: function() { // in this function you can communicate // with the panel document } }); // export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); panel document environment the panel document loaded from the url property can of course include css and
javascript just like a normal web page: <html> <head> <meta charset="utf-8"> <link href="./my-panel.css"rel="stylesheet"></link> <script src="resource://sdk/dev/volcan.js"></script> </head> <body> <div id="content"></div> </body> <script src="./my-panel.js"></script> </html> it doesn't have access to any privileged apis, including the add-on sdk apis.
...And 3 more matches
Examples and demos from articles - Archive of obsolete content
what follows is a brief list of examples and demos from our theoretical articles.
... determine if an element has been totally scrolled [html] this example shows how to determine whether a user has completely scrolled an element or not.
...seudo)<select> [html] this example shows how it's possible to simulate an editable <select> through a fieldset of radioboxes and textboxes.
...And 3 more matches
HTML in XUL for rich tooltips - Archive of obsolete content
this example demonstrates the dynamic injection of html into a xul element.
...ooltip insert the appropriate code from below into your xul overlay.
... tooltip="myhtmltip" /> <menuitem id="htmltip2" label="foo2" onmouseover="htmltip.onmousetooltip(event)" tooltip="myhtmltip" /> </popup> <popupset id="mainpopupset"> <tooltip id="myhtmltip"> <html:div id="myhtmltipdiv" type="content"/> </tooltip> </popupset> </overlay> insert your version of the following into the
javascript overlay.
...And 3 more matches
Miscellaneous - Archive of obsolete content
dth: 10em;"> this is the scrolling area.
...source/browser/base/content/browser.js#4674 discovering which element in the loaded document has focus // focusedcontrol stores the focused field, or null if there is none.
... 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.getelementbyid("example"), "the text to be inserted"); disabling
javascript programmatically // disable js in the currently active tab from the context of browser.xul gbrowser.docshell.allow
javascript = false; if this isn't your browser, you should save the value and restore it when finished.
...And 3 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
we look at the various interface objects, let's look at some of their common attributes, especially the frequently used ones.
...s example will only run correctly if it can run as firefox code itself or installed extension code.
... value="2"/> <menuitem label="item 3" value="3"/> </menupopup> </menulist> listing 17: a menulist example figure 14: output from listing 17 by adding editable="true" to the menulist element, you can accept arbitrary text input in addition to a list selection, as is often used on font selection menus in word processors.
...And 3 more matches
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
s fixme: we need to add a part about 'why and how to create your own component' c++/js this document was authored by hiroshi shimoda of clear code inc.
... part about 'why and how to create your own component' c++/js this document was authored by hiroshi shimoda of clear code inc.
... helpful to search on the source code for usage examples within firefox.
...And 3 more matches
Adding Events and Commands - Archive of obsolete content
« previousnext » event handlers just like with html, most
javascript code execution is triggered by event handlers attached to dom elements.
...ds information on the event.
...ewhat common problem: communication between window xul and web page content.
...And 3 more matches
The Essentials of an Extension - Archive of obsolete content
we used generic ids like container or input, they will likely conflict with ids used within firefox, or with ids from other extension overlays.
...s from other extension overlays.
... the dev tools section, above its end separator.
...And 3 more matches
Security best practices in extensions - Archive of obsolete content
e, you want a web page to send a notification to the add-on (or vice versa).
...d to take steps to ensure that the content can not call back into the web browser and run malicious code.
...n this document apply in this sphere, but here are some additional tips: api providers should use the https protocol, which provides better protection for data passed over the network.
...And 3 more matches
Creating a dynamic status bar extension - Archive of obsolete content
ts for details.
...eed to brush up, visit the chrome manifest section.
...n/
javascript" src="chrome://stockwatcher/content/stockwatcher.js"/> <!-- firefox --> <statusbar id="status-bar"> <statusbarpanel id="stockwatcher" label="loading..." tooltiptext="current value" onclick="stockwatcher.refreshinformation()" /> </statusbar> </overlay> also, notice that the definition of the status bar panel now includes a new property, onclick, which references the
javascript function that will be executed whenever the user clicks on the status bar panel.
...And 3 more matches
Using microformats - Archive of obsolete content
c data to the browser in order to make it possible to present summaries of the information on a page without having to know how to parse the document itself.
...formats api the microformats object is created using the new
javascript script loader added to firefox 3.
...on for a person.
...And 3 more matches
script.type - Archive of obsolete content
« xul reference home type type: language content type the language of the script.
... « xul reference home type type: language content type the language of the script.
... « xul reference home type type: language content type the language of the script.
...And 3 more matches
XPCOM Interfaces - Archive of obsolete content
« previousnext » in this section, we'll take a brief look at xpcom (cross-platform component object model), which is the object system that mozilla uses.
...lla uses.
...es are usually preceded by 'nsi' or 'mozi' so that they are easily recognized as interfaces.
...And 3 more matches
XUL Questions and Answers - Archive of obsolete content
</window> list box handlers can only check for listitems not listcells.
...nt, and building the menupopup using dom methods (such as document.createelementns).
...}; listobj.onsecuritychange = function() { return 0 }; listobj.onlinkiconavailable = function() { return 0 }; /* i use the progress listener to trap the end of a local html "template" file loading, and run xslt transormations.
...And 3 more matches
script - Archive of obsolete content
sing script tags.
...rmation is available in the xul tutorial.
...amples <script src="test.js"/> <script src="http://example.com/js/test.js"/> <script> function foo(){ // code } </script> attributes src type: uri the uri of the script.
...And 3 more matches
VBArray - Archive of obsolete content
her object.
... of each dimension can be different.
...ay; the lbound and ubound methods retrieve the range of indices used by each dimension.
...And 3 more matches
LiveConnect Reference - Archive of obsolete content
this section documents the java classes used for liveconnect, along with their constructors and methods.
... this section documents the java classes used for liveconnect, along with their constructors and methods.
... this section documents the java classes used for liveconnect, along with their constructors and methods.
...And 3 more matches
JavaPackage - Archive of obsolete content
summary core object a
javascript reference to a java package.
... created by a reference to the package name used with the packages keyword: packages.javapackage javapackageis the name of the object's java package.
... to the package name used with the packages keyword: packages.javapackage javapackageis the name of the object's java package.
...And 3 more matches
Old Proxy API - Archive of obsolete content
he spidermonkey proxy implementation is a prototype and the proxy api and semantics specifications are unstable.
...y api and semantics specifications are unstable.
...ect to change anytime.
...And 3 more matches
Archive of obsolete content
e same-origin policy.
...sing extending the browser navigation paradigm this article is the version from 2003 with slight modifications (no images and no links to samples).
...xulplanet's main tutorial.
...And 3 more matches
2D breakout game using Phaser - Game development
next » in this step-by-step tutorial, we create a simple mobile mdn breakout game written in
javascript, using the phaser framework.
...t the intermediate stages should look like.
... building together — are available on github: initialize the framework scaling load the assets and print them on screen move the ball physics bounce off the walls player paddle and controls game over build the brickfield collision detection the score win the game extra lives animations and tweens buttons randomizing gameplay as a note on learning paths — starting with pure
javascript is the best way to get a solid knowledge of web game development.
...And 3 more matches
Boolean - MDN Web Docs Glossary: Definitions of Web-related terms
in computer science, a boolean is a logical data type that can have only the values true or false.
... in computer science, a boolean is a logical data type that can have only the values true or false.
... in computer science, a boolean is a logical data type that can have only the values true or false.
...And 3 more matches
Debugging CSS - Learn web development
he rendered dom the browser may have corrected some badly-written html for you.
... your markup is dynamically generated — for example via a cms — make a static version of the output that shows the problem.
...hows the problem.
...And 3 more matches
Advanced form styling - Learn web development
="text"], input[type="datetime-local"], input[type="color"], select { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } label { margin-bottom: 5px; } button { width: 60%; margin: 0 auto; } note: if you want to test these examples across a number of browsers simultaneously, you can find it live here (also see here for the source code).
...akes things worse, not better.
...ave no choice but to rely on
javascript.
...And 3 more matches
Adding features to our bouncing balls demo - Learn web development
previous overview: objects in this assessment, you are expected to use the bouncing balls demo from the previous article as a starting point, and add some new and interesting features to it.
... objective: to test comprehension of
javascript objects and object-oriented constructs starting point to get this assessment started, make a local copy of index-finished.html, style.css, and main-finished.js from our last article in a new directory in your local computer.
...ting point to get this assessment started, make a local copy of index-finished.html, style.css, and main-finished.js from our last article in a new directory in your local computer.
...And 3 more matches
Web performance - Learn web development
building websites requires html, css, and
javascript.
...eb performance, and in this module you'll focus on the fundamentals of how to create performant websites.
...d applications is not a necessary pre-condition for understanding and measuring web performance.
...And 3 more matches
Routing in Ember - Learn web development
previous overview: client-side
javascript frameworks next in this article we learn about routing, or url-based filtering as it is sometimes referred to.
... previous overview: client-side
javascript frameworks next in this article we learn about routing, or url-based filtering as it is sometimes referred to.
...bout routing, or url-based filtering as it is sometimes referred to.
...And 3 more matches
React resources - Learn web development
previous overview: client-side
javascript frameworks next our final article provides you with a list of react resources that you can use to go further in your learning.
... previous overview: client-side
javascript frameworks next our final article provides you with a list of react resources that you can use to go further in your learning.
...t languages, knowledge of the terminal/command line.
...And 3 more matches
Working with Svelte stores - Learn web development
previous overview: client-side
javascript frameworks next in the last article we completed the development of our app, finished organizing it into components, and discussed some advanced techniques for dealing with reactivity, working with dom nodes, and exposing component functionality.
...om nodes, and exposing component functionality.
... all these cases we were dealing with communication between parent and child components.
...And 3 more matches
Vue conditional rendering: editing existing todos - Learn web development
previous overview: client-side
javascript frameworks next now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items.
...e ability to edit existing todo items.
...ies — namely v-if and v-else — to allow us to toggle between the existing todo item view, and an edit view where you can update todo item labels.
...And 3 more matches
Rendering a list of Vue components - Learn web development
previous overview: client-side
javascript frameworks next at this point we've got a fully working component; we're now ready to add multiple todoitem components to our app.
...cript frameworks next at this point we've got a fully working component; we're now ready to add multiple todoitem components to our app.
...tem components to our app.
...And 3 more matches
How to implement a custom autocomplete search component
an xpcom component that implements the nsiautocompletesearch interface.
...mpletesearch interface.
...our xpcom component follows the following form: "@mozilla.org/autocomplete/search;1?name=xxx", where "xxx" is the name of your autocomplete source.
...And 3 more matches
ISO8601DateUtils.jsm
the iso8601dateutils.jsm
javascript code module provides methods that make it easy to convert
javascript date objects into iso 8601 format date strings and back.
... the iso8601dateutils.jsm
javascript code module provides methods that make it easy to convert
javascript date objects into iso 8601 format date strings and back.
...ports.
...And 3 more matches
PopupNotifications.jsm
the popupnotifications.jsm
javascript code module provides a popup notification box service.
... the popupnotifications.jsm
javascript code module provides a popup notification box service.
...or the notification popup (that is, the element the arrow on the popup should point to).
...And 3 more matches
Sqlite.jsm
the sqlite.jsm
javascript code module is a promise-based wrapper around the storage/sqlite interface.
...ment.
...mory api that will minimize memory usage of the connection automatically.
...And 3 more matches
Basics
listic effects a 2 + b 2 = c 2 , or use color a 2 + b 2 = c 2 in very strange ways p(x) q(x) = a0 + a1x + a2 x2 + ...
...use color a 2 + b 2 = c 2 in very strange ways p(x) q(x) = a0 + a1x + a2 x2 + ...
...th class="inputmath" display="block"> <mrow> <mi>a</mi> <mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext><input id="input12" value="?" size="1"/></mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input id="input21" value="?" size="1"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <div style="text-align:center"> left size: <a class="control" href="
javascript:incrementinput('input21', 1);" title="increase input">+</a> <a class="control" href="
javascript:incrementinput('input21',-1);" title="decrease input">-</a> right size: <a class="control" href="
javascript:incrementinput('input12', 1);" title="increase input">+</a> <a class="control" href="
javascript:incrementinput('input12',-1);" title="decrease input"...
...And 3 more matches
MathML Demo: <mspace> - space
s been set to yellow for easier viewing.
... height ∫ x y and depth [ x y ] of mspace elements (click the math text to view the numeric values that are set).
...to view the numeric values that are set).
...And 3 more matches
Mozilla Web Developer FAQ
er and the unit (eg.
...laced inline elements such as (by default) <span>.
...mozilla.
...And 3 more matches
JS_SetOperationCallback
obsolete since jsapi 30this feature is obsolete.
...type description cx jscontext * pointer to a jscontext in which this callback was installed.
...on the amount of time a script may run.
...And 3 more matches
Packaging WebLock
ribution and installation.
...s, or individual components.
...er gecko-based applications are cross-platform, this database is abstracted above the operating system or any particular platform's registry.
...And 3 more matches
XPCOM Stream Guide
ri) method or its .newchannelfromuri(uri) method.
... .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.
...tream.writefrom(instream, instream.available()); } note this is an inefficient example: the only important part is how to feed the output stream.
...And 3 more matches
How to build a binary XPCOM component using Visual Studio
this is a simple tutorial for building xpcom objects in c++ using visual studio.
... this is a simple tutorial for building xpcom objects in c++ using visual studio.
... this is a simple tutorial for building xpcom objects in c++ using visual studio.
...And 3 more matches
Components.utils.Sandbox
components.utils.sandbox is used to create a sandbox object for use with evalinsandbox().
...t.
...en that zone goes away.
...And 3 more matches
IJSDebugger
js/ductwork/debugger/ijsdebugger.idlscriptable provides the
javascript debugger service.
... js/ductwork/debugger/ijsdebugger.idlscriptable provides the
javascript debugger service.
... js/ductwork/debugger/ijsdebugger.idlscriptable provides the
javascript debugger service.
...And 3 more matches
nsIXMLHttpRequestEventTarget
nt/base/public/nsixmlhttprequest.idlscriptable this interface provides access to the event listeners used when uploading data using the xmlhttprequest object.
...ing data using the xmlhttprequest object.
...rget last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) attributes attribute type description onabort nsidomeventlistener a
javascript function object that gets invoked if the operation is canceled by the user.
...And 3 more matches
Debugger.Object - Firefox Developer Tools
erent routes (perhaps two functions are called on the same object), spidermonkey presents the same debugger.object instance to the debugger each time.
...operties are equal.
...alue the promise has been fulfilled with.
...And 3 more matches
Aggregate view - Firefox Developer Tools
by:" located at the top of the panel: there's also a box labeled "filter" at the top-right of the pane.
...filter the contents of the snapshot that are displayed, so you can quickly see, for example, how many objects of a specific class were allocated.
...t objects: such as function or array dom elements: such as htmlspanelement or window strings: listed as "strings"
javascript sources: listed as "jsscript" internal objects: such as "js::shape".
...And 3 more matches
Firefox Developer Tools
firefox developer tools is a set of web developer tools built into firefox.
...per tools settings.
...s.
...And 3 more matches
ByteLengthQueuingStrategy - Web APIs
talchrome full support 59edge full support 16firefox full support 57disabled full support 57disabled disabled from version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the
javascript.options.streams preference (needs to be set to true).
... full support 59chrome android full support 59firefox android full support 57disabled full support 57disabled disabled from version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the
javascript.options.streams preference (needs to be set to true).
...talchrome full support 59edge full support 16firefox full support 57disabled full support 57disabled disabled from version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the
javascript.options.streams preference (needs to be set to true).
...And 3 more matches
Using the CSS Typed Object Model - Web APIs
the css typed object model api exposes css values as typed
javascript objects to allow their performant manipulation.
... the css typed object model api exposes css values as typed
javascript objects to allow their performant manipulation.
...ties and values — including custom properties — that are impacting an element.
...And 3 more matches
CountQueuingStrategy - Web APIs
talchrome full support 59edge full support 16firefox full support 57disabled full support 57disabled disabled from version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the
javascript.options.streams preference (needs to be set to true).
... full support 59chrome android full support 59firefox android full support 57disabled full support 57disabled disabled from version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the
javascript.options.streams preference (needs to be set to true).
...talchrome full support 59edge full support 16firefox full support 57disabled full support 57disabled disabled from version 57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the
javascript.options.streams preference (needs to be set to true).
...And 3 more matches
Boilerplate 1 - Web APIs
« previousnext » this example describes repeated pieces of code that will be hidden from now on, as well as defining a
javascript utility function to make webgl initialization easier.
... « previousnext » this example describes repeated pieces of code that will be hidden from now on, as well as defining a
javascript utility function to make webgl initialization easier.
...hat are most relevant for learning webgl.
...And 3 more matches
Using the Web Animations API - Web APIs
the web animations api lets us construct animations and control their playback with
javascript.
... the web animations api lets us construct animations and control their playback with
javascript.
...as designed to underlie implementations of both css animations and css transitions, and leaves the door open to future animation effects.
...And 3 more matches
Background audio processing using AudioWorklet - Web APIs
when the web audio api was first introduced to browsers, it included the ability to use
javascript code to create custom audio processors that would be invoked to perform real-time audio manipulations.
...se going on until it completed execution.
...addmodule() method.
...And 3 more matches
Window - Web APIs
the window interface represents a window containing a dom document; the document property points to the dom document loaded in that window.
...indow in which the script is running, is exposed to
javascript code.
...cts, and constructors which are not necessarily directly associated with the concept of a user interface window.
...And 3 more matches
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
ing the first button will set a timeout which calls an alert dialog after two seconds and stores the timeout id for use by cleartimeout().
...d it to work in browsers which don't support sending additional arguments using either settimeout() or setinterval() (e.g., internet explorer 9 and below), you can include this polyfill to enable the html5 standard arguments-passing functionality.
...rgumenttopass2, etc.
...And 3 more matches
An overview of accessible web applications and widgets - Accessibility
most
javascript libraries offer a library of client-side widgets that mimic the behavior of familiar desktop interfaces.
... most
javascript libraries offer a library of client-side widgets that mimic the behavior of familiar desktop interfaces.
.../> <div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">your first name is optional</div> </div> the css for this markup is shown in example 2b.
...And 3 more matches
Cross-browser audio basics - Developer guides
trols=true&isvideo=false&file=audiofile.mp3" /> </object> </audio> note: you should be aware that flash and silverlight code require that the user has the appropriate plugin installed, and that the browser cannot guarantee the security aspects of code running on those plugin platforms.
...n installed, and that the browser cannot guarantee the security aspects of code running on those plugin platforms.
...we need to set the point to play from separately if we don't want it to be 0.
...And 3 more matches
Audio and video manipulation - Developer guides
can set up our video player and <canvas> element like this: <video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <canvas id="my-canvas" width="480" height="270"></canvas>
javascript this code handles altering the frames.
...esents double speed.
...uted waveform oscillatornode an audio track from webrtc (such as the microphone input you can get using getusermedia().
...And 3 more matches
<template>: The Content Template element - HTML: Hypertext Markup Language
the html content template (<template>) element is a mechanism for holding html that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using
javascript.
...tion of the example.
...cluded here --> </tbody> </table> <template id="productrow"> <tr> <td class="record"></td> <td></td> </tr> </template> first, we have a table into which we will later insert content using
javascript code.
...And 3 more matches
Redirections in HTTP - HTTP
-readable choices are encouraged to be sent as link headers with rel=alternate.
... to the indicated url.
...tp-equiv="refresh" content="0; url=https://example.com/"> </head> the content attribute should start with a number indicating how many seconds the browser should wait before redirecting to the given url.
...And 3 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
s mentioned above, we used mozilla brick, a collection of ready-rolled mobile ui components, in the making of the mobile app layout.
...d to the markup unless we were looking at the mobile app view.
...g a separate <link> element with a media attribute: <link href="dist/brick.css" type="text/css" rel="stylesheet" media="all and (max-width: 480px)"> this says that the whole stylesheet will not be linked to the html unless the viewport width is 480px or less.
...And 3 more matches
SVG: Scalable Vector Graphics
getting started this tutorial will help get you started using svg.
...the need of a graphical editor to do so.
...alized on-the-fly.
...And 3 more matches
Same-origin policy - Web security
ner/another.html same origin only the path differs https://store.company.com/page.html failure different protocol http://store.company.com:81/dir/page.html failure different port (http:// is port 80 by default) http://news.company.com/dir/page.html failure different host inherited origins scripts executed from pages with an about:blank or
javascript: url inherit the origin of the document containing that url, since these types of urls do not contain information about an origin server.
... origins scripts executed from pages with an about:blank or
javascript: url inherit the origin of the document containing that url, since these types of urls do not contain information about an origin server.
...e preflight.
...And 3 more matches
2015 MDN Fellowship Program - Archive of obsolete content
ecifications to identify gaps between the documentation and current situation and refine existing tests to adapt to this cross-browser test harness.
...n available) the network.
...getting some cool new features in 2015 with the standardization efforts around the webgl 2.0 spec being published.
...And 2 more matches
ui/sidebar - Archive of obsolete content
experimental enables you to create sidebars.
...idebar").sidebar({ id: 'my-sidebar', title: 'my sidebar', url: require("sdk/self").data.url("sidebar.html") }); from firefox 34, you can use "./sidebar.html" as an alias for self.data.url("sidebar.html").
...").sidebar({ id: 'my-sidebar', title: 'my sidebar', url: "./sidebar.html" }); you can include
javascript and css from the html as you would with any web page, for example using <script> and <link> tags containing a path relative to the html file itself.
...And 2 more matches
HTML to DOM - Archive of obsolete content
.
...ecting remote content in a privileged context in your extension, so it can be desirable to parse the html safely.
...ame"); frame.setattribute("name", "sample-frame"); frame.setattribute("type", "content"); frame.setattribute("collapsed", "true"); document.getelementbyid("main-window").appendchild(frame); // or // document.documentelement.appendchild(frame); // set restrictions as needed frame.webnavigation.allowauth = false; frame.webnavigation.allowimages = false; frame.webnavigation.allow
javascript = false; frame.webnavigation.allowmetaredirects = true; frame.webnavigation.allowplugins = false; frame.webnavigation.allowsubframes = false; // listen for load frame.addeventlistener("load", function (event) { // the document of the html in the dom var doc = event.originaltarget; // skip blank page or frame if (doc.location.href == "about:blank" || doc.defaultview.frameel...
...And 2 more matches
Preferences - Archive of obsolete content
equivalent) where the default values are read from all mozilla-based applications read (application directory)/defaults/preferences/*.js in addition to that, recent versions of toolkit applications (firefox 1.0, thunderbird 1.0, and the like but not the mozilla suite) read extension defaults -- usually located in (profile folder)/extensions/(id)/defaults/preferences/ these files use simple
javascript-like syntax.
... to asubject) switch (adata) { case "pref1": // extensions.myextension.pref1 was changed break; case "pref2": // extensions.myextension.pref2 was changed break; } } } myprefobserver.register(); and next, here is a more evolved version of the previous code better fit for code reuse both within a project and across projects (for example, using
javascript code modules): /** * @constructor * * @param {string} branch_name * @param {function} callback must have the following arguments: * branch, pref_leaf_name */ function preflistener(branch_name, callback) { // keeping a reference to the observed preference branch or it will get // garbage collected.
...f the toolkit applications (firefox, thunderbird, nvu), you should provide default values for your extension's preferences (see above for information on how to do it).
...And 2 more matches
Displaying web content in an extension without security issues - Archive of obsolete content
one of the most common security issues with extensions is execution of remote code in privileged context.
...l the frames it loads (the "type" attribute is ignored at that point).
...false); request.send(null); frame.setattribute("src", "data:text/html," + encodeuricomponent(request.responsetext)); that way you can have the template in your extension but still strip it off all privileges when it is loaded in a frame.
...And 2 more matches
Adding windows and dialogs - Archive of obsolete content
« previousnext » opening windows and dialogs to open a new window, use the
javascript window.open function just like with html windows.
...ce of the window.
... localization, so you save yourself a lot of work and favor them.
...And 2 more matches
Connecting to Remote Content - Archive of obsolete content
you don't want users to be stuck waiting while a request is obtained and processed.
...s to be stuck waiting while a request is obtained and processed.
...ommon types of content you can use to communicate with remote servers.
...And 2 more matches
Java in Firefox Extensions - Archive of obsolete content
t has been removed in gecko 16.0, so this page is out of date.
...ontext of applets), "firefox and the java plug-in will continue to support the global java/packages keywords, in particular in the context of firefox extensions.").
...es keywords, in particular in the context of firefox extensions.").
...And 2 more matches
Complete - Archive of obsolete content
gistration data for firefox etc.
...h language (en) for the united states (us).
...depend on the locale in separate files in a separate directory.
...And 2 more matches
Building XULRunner with Python - Archive of obsolete content
make -f client.mk which will also checkout client.mk itself for build only, without checkouts, use make -f client.mk build and see client.mk for other options.
...ient.mk itself for build only, without checkouts, use make -f client.mk build and see client.mk for other options.
...listener('load', onload, false) one possible gotcha is that the default python path used to find modules that areimported explicitly includes the xulrunner executable directory and the directory that is current when xulrunner launches.
...And 2 more matches
Getting started with XULRunner - Archive of obsolete content
is the application root chrome.manifest: manifest chrome/chrome.manifest step 6: set up preferences the prefs.js file tells xulrunner the name of the xul file to use as the main window.
...st chrome/chrome.manifest step 6: set up preferences the prefs.js file tells xulrunner the name of the xul file to use as the main window.
...ple xul window, which is described in the file main.xul.
...And 2 more matches
2006-12-01 - Archive of obsolete content
announcements introducing rhinoloader a byproduct of helma that extends java applications with rhino/js.
... announcements introducing rhinoloader a byproduct of helma that extends java applications with rhino/js.
... reply was to add a method that does the deleting with a native implementation that releases the resources held by the object as seen in this database interface: var mydbase = new pgsqlconnection; mydbase.connect("database"); mydbase.exec("select * from mytable where ..."); // use the result data - (native implementation function) mydbase.close() spidermonkey for server side inquiry about why
javascript hasn't caught on for general server-side scripting.
...And 2 more matches
Sunbird Theme Tutorial - Archive of obsolete content
text files software for creating and editing images note: some zip tools only work with files whose names have <tt>.zip</tt> at the end.
... so that you have a clear design concept to implement.
...ne its interface.
...And 2 more matches
Using the W3C DOM - Archive of obsolete content
« previousnext » the document object has properties for accessing collections of elements, such as document.images and document.forms.
... inputname.value document.forms["formname"].inputname.value or document.forms["formname"].elements["inputname"].value formctrlname document.forms["formname"].formctrlname or document.forms["formname"].elements["formctrlname"] document.forms(0) document.forms[0] more on accessing forms and form elements: referencing forms and form controls by comp.lang.
javascript newsgroup faq notes dom 2 specification on accessing forms and form elements referencing forms and form elements correctly,
javascript best practices, by matt kruse for accessing a group of elements, the dom specification also includes getelementsbytagname, which returns a nodelist of all the elements with the given tag name in the order they appear in the document: var arrcollection_of_pargs...
...+ "px"; w3c dom2 reflection of an element's css properties keep in mind that according to the w3c recommendation, the values returned by the style property of an element reflect static settings in the element's style attribute only, not the total "computed style" that includes any inherited style settings from parent elements.
...And 2 more matches
E4X - Archive of obsolete content
could be removed at any time.
...a form that feels natural for ecmascript programmers.
...ascript programmers.
...And 2 more matches
Introduction - Archive of obsolete content
« previousnext » basic syntax with e4x enabled, basic xml elements are valid syntax for variables.
...le declarations are not limited to one element, and as with all
javascript, can span multiple lines.
...to provide an easier way for
javascript programmers to manipulate an xml document, without going through the dom interfaces.
...And 2 more matches
JavaClass - Archive of obsolete content
summary core object a
javascript reference to a java class.
... created by a reference to the class name used with the packages object: packages.javaclass javaclassis the fully-specified name of the object's java class.
... javaclassis the fully-specified name of the object's java class.
...And 2 more matches
3D collision detection - Game development
y–bmaxy, and bminz–bmaxz are the ranges of each axis of the aabb, we can calculate whether a collision has occurred between the two using the following formula: f(p,b)=(px>=bminx∧px<=bmaxx)∧(py>=bminy∧py<=bmaxy)∧(pz>=bminz∧pz<=bmaxz)f(p,b)= (p_x >= b_{minx} \wedge p_x <= b_{maxx}) \wedge (p_y >= b_{miny} \wedge p_y <= b_{maxy}) \wedge (p_z >= b_{minz} \wedge p_z <= b_{maxz}) or in
javascript: function ispointinsideaabb(point, box) { return (point.x >= box.minx && point.x <= box.maxx) && (point.y >= box.miny && point.y <= box.maxy) && (point.z >= box.minz && point.z <= box.maxz); } aabb vs.
...ther aabb is similar to the point test.
..., the point is inside the sphere.
...And 2 more matches
3D games on the Web - Game development
for rich gaming experiences on the web, the weapon of choice is webgl, which is rendered on html <canvas>.
... for rich gaming experiences on the web, the weapon of choice is webgl, which is rendered on html <canvas>.
...g is hitting something else.
...And 2 more matches
Tools for game development - Game development
on this page you can find links to our game development tools articles, which eventually aims to cover frameworks, compilers, and debugging tools.
... on this page you can find links to our game development tools articles, which eventually aims to cover frameworks, compilers, and debugging tools.
... our game development tools articles, which eventually aims to cover frameworks, compilers, and debugging tools.
...And 2 more matches
Gecko FAQ - Gecko Redirect 1
what is gecko?
...tent area, which is the blank area inside the browser window's chrome.
...rmation, see the dom in mozilla level 1 html dom 2 - most of it has already been implemented in gecko, including support for dom 2 events, the dom 2 style, and the dom2 core.
...And 2 more matches
First-class Function - MDN Web Docs Glossary: Definitions of Web-related terms
a programming language is said to have first-class functions when functions in that language are treated like any other variable.
..."); } // invoke it using the variable foo(); we assigned an anonymous function in a variable, then we used that variable to invoke the function by adding parentheses () at the end.
...ed, you can use the variable name to invoke it.
...And 2 more matches
Sloppy mode - MDN Web Docs Glossary: Definitions of Web-related terms
ecmascript 5 and later let scripts opt in to a new strict mode, which alters the semantics of
javascript in several ways to improve its resiliency and which make it easier to understand what's going on when there are problems.
... ecmascript 5 and later let scripts opt in to a new strict mode, which alters the semantics of
javascript in several ways to improve its resiliency and which make it easier to understand what's going on when there are problems.
... later let scripts opt in to a new strict mode, which alters the semantics of
javascript in several ways to improve its resiliency and which make it easier to understand what's going on when there are problems.
...And 2 more matches
Web forms — Working with user data - Learn web development
basic native form controls guide.
... some scripting knowledge is required to handle things like validation and creating custom form controls.
...ections listed below we'd recommend that you go away and learn some css and
javascript first.
...And 2 more matches
From object to iframe — other embedding technologies - Learn web development
unlikely that you'll come across any browser that doesn't support <iframe>s these days.
...ings on your website, therefore you should give embedded content only the permissions needed for doing its job.
...ely required, you can add permissions back one by one (inside the sandbox="" attribute value) — see the sandbox reference entry for all the available options.
...And 2 more matches
Client-side web APIs - Learn web development
when writing client-side
javascript for web sites or applications, you will quickly encounter application programming interfaces (apis).
...ll explore what apis are, and how to use some of the most common apis you'll come across often in your development work.
...s you'll come across often in your development work.
...And 2 more matches
Learning area release notes - Learn web development
se leave comments in our discourse forum.
... see our hacks post — introducing the mdn web docs front-end developer learning pathway — for more information about the rationale behind it.
...l 2020 our new understanding client-side web development tools module has been released!
...And 2 more matches
Focus management with Vue refs - Learn web development
previous overview: client-side
javascript frameworks next we are nearly done with vue.
...gement, or put another way, how we can improve our app's keyboard accessibility.
...andle this — an advanced feature that allows you to have direct access to the underlying dom nodes below the virtual dom, or direct access from one component to the internal dom structure of a child component.
...And 2 more matches
Strategies for carrying out testing - Learn web development
wser testing next this article starts the module off by providing an overview of the topic of (cross) browser testing, answering questions such as "what is cross-browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?" prerequisites: familiarity with the core html, css, and
javascript languages; an idea of the high level principles of cross-browser testing.
...y accurate, but they can give you an idea of broad trends.
...oad trends.
...And 2 more matches
Command line crash course - Learn web development
l undoubtedly be required to run some command in the terminal (or on the "command line" — these are effectively the same thing).
...tory called src, located inside a directory called project, located on the desktop, you could type these three commands to get there from your home folder: cd desktop cd project cd src but this a waste of time — instead, you can type one command, with the different items in the path separated by forward slashes, just like you do when specifying paths to images or other assets in css, html, or
javascript code: cd desktop/project/src note that including a leading slash on your path makes the path absolute, for example /users/your-user-name/desktop.
...balfetch/globalfetch.fetch() location: /docs/web/api/globalfetch/fetch location: /docs/web/api/windoworworkerglobalscope/fetch although contrived, we could take this result a little further and transform the location: line contents, adding the base origin to the start of each one so that we get complete urls printed out.
...And 2 more matches
Tools and testing - Learn web development
once you've started to become comfortable programming with core web technologies (like html, css, and
javascript), and you start to get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from
javascript frameworks, to testing and automation tools, and more besides.
... and have good industry support.
... includes all the essential information you need to work towards your goal.
...And 2 more matches
Accessibility Features in Firefox
input aids because there are far fewer keys to type to get the desired location.
...ed location.
...opy it to the clipboard.
...And 2 more matches
Interface Compatibility
t modified, except as a last resort when inherent security vulnerabilities or incompatibility with other browsers make it the only option.
...h standard interfaces in future releases of mozilla.
...s to the full power of the mozilla platform.
...And 2 more matches
Contributing to the Mozilla code base
mozilla is a large project and we are thrilled to have contributors with very diverse skills below is a table with our currently available projects to contribute to, along with the skills needs and links to their documentation.
...se skills below is a table with our currently available projects to contribute to, along with the skills needs and links to their documentation.
...ribute to, along with the skills needs and links to their documentation.
...And 2 more matches
PromiseWorker.jsm
summary a promiseworker is a chromeworker except instead of calling postmessage() to send a message, you call post(), which returns a promise.
... chromeworker.
...e a chromeworker, but want postmessage to return promises.
...And 2 more matches
Localization and Plurals
tput display 0.2: use pluralform.numforms() to get the number of forms instead of figuring out locally to better support future rules - requires build from 2007/01/27 or later 0.3: generate a list of what numbers fall into which plural form to minimize the sample output to at most 3 of each form developing with pluralform the functionality for getting the correct plural forms is provided by a
javascript module, pluralform.jsm.
...cript module, pluralform.jsm.
... plural rule.
...And 2 more matches
JS::PerfMeasurement
ad and even modify.
...rs, not timers; that is, there is no defined relation between the numbers you get from this interface, and wall-clock time.
...ck time.
...And 2 more matches
JSNative
jsnative is the type of many jsapi callbacks.
... jsnative is the type of many jsapi callbacks.
...ative callbacks provided by the application, written in c/c++ code.
...And 2 more matches
JS_GetStringBytes
obsolete since jsapi 1.8.5this feature is obsolete.
...tax char * js_getstringbytes(jsstring *str); const char * js_getstringbytesz(jscontext *cx, jsstring *str); // added in jsapi 1.8.2 name type description cx jscontext * (js_getstringbytesz and js_encodestring only) a context.
...urned string is utf-8, and the conversion is lossless.
...And 2 more matches
JS_MakeStringImmutable
obsolete since
javascript 1.8.5this feature is obsolete.
...ntext * a context.
... a dependent string (see js_newdependentstring) is a substring of another (growable, dependent, or immutable) string.
...And 2 more matches
JS_NewExternalString
a request on this jscontext.
... first element of an array of char16_ts.
...s long as the
javascript engine needs to hold on to it.
...And 2 more matches
JS_THREADSAFE
note: js_threadsafe is now permanently on.
...as a compile-time option that enables support for running multiple threads of
javascript code concurrently as long as no objects or strings are shared between them.
...n a js_threadsafe build, the caller must be in a request on this jscontext.
...And 2 more matches
XML Extras
the xml extras module contains several features that allow developers to treat xml as data i.e.
...ilds, passing strings to send() works only in chrome, see post.html sample.
...s.
...And 2 more matches
Starting WebLock
enable and disable the web locking functionality, see what sites are in the whitelist, and add or remove sites from that list.
...functionality.
...terfaces in xpcom effective contracts between services and clients.
...And 2 more matches
Components.returnCode
components.returncode is a property which can hold an xpcom return code additionally to the value returned by the return statement.
... returned by the return statement.
...ional due to bug 287107.
...And 2 more matches
XPCShell Reference
-f arguments, and the scripts will be executed in the order encountered.
...directory (gredir) to use for xpcom.
... "interactive" mode -s this option toggles the
javascript strict option on and off.
...And 2 more matches
XPConnect
xpconnect is a bridge between
javascript and xpcom.
... xpconnect is a bridge between
javascript and xpcom.
... xpconnect is a bridge between
javascript and xpcom.
...And 2 more matches
nsIDOMWindow
localstorage nsidomstorage local storage for the current browsing context.
...his attribute is "replaceable" in
javascript.
...or if the parent is of a different type, this is the current window.
...And 2 more matches
nsIDOMWindowUtils
1 one of values of aadditionalflags of sendquerycontentevent().
...line breaks (e.g., "\r\n" on windows) selection_set_flag_use_xp_line_break 0x0001 one of values of aadditionalflags of sendselectionsetevent().
....
...And 2 more matches
nsISessionStore
gettabvalue( in nsidomnode atab, in astring akey ); parameters atab the tab on which to get the value.
...ow awindow, in astring akey ); parameters awindow the window from which the value is to be retrieved.
... on the tab, such as one returned by gettabstate().
...And 2 more matches
CData
ta objects cdata address() string tosource() string tostring() properties properties of all cdata objects property type description constructor ctype the data type of the cdata object, as a ctype.
... to by the object.
...tended to represent the type of the cdata object and its value, respectively.
...And 2 more matches
Frame rate - Firefox Developer Tools
o do in order to update and repaint the screen.
... healthy, but there are three spots where frame rate collapses for tens of milliseconds.
...e frame rate graph is correlated with the waterfall summary directly above it, and there we can see that the first two drops in the frame rate are correlated with orange bars, which denote time spent executing
javascript.
...And 2 more matches
Web Console remoting - Firefox Developer Tools
e errors come from the nsiconsoleservice.
... actor grips if the string is very long.
... down the page scripts - the debugger deoptimizes
javascript execution in the target page.
...And 2 more matches
Using dynamic styling information - Web APIs
arding css.
...tyle objects from the document, you can use the document.stylesheets property and access the individual objects by index (e.g., document.stylesheets[0] is the first stylesheet defined for the document, etc.).
... modify a stylesheet rule with cssom <html> <head> <title>modifying a stylesheet rule with cssom</title> <style type="text/css"> body { background-color: red; } </style> <script type="text/
javascript"> var stylesheet = document.stylesheets[0]; stylesheet.cssrules[0].style.backgroundcolor="blue"; </script> </head> <body> the stylesheet declaration for the body's background color is modified via
javascript.
...And 2 more matches
Manipulating video using canvas - Web APIs
by combining the capabilities of the video element with a canvas, you can manipulate video data in real time to incorporate a variety of visual effects to the video being displayed.
...der :1px solid #444444; padding:10px; margin: 10px; background:#3b3b3b; } </style> </head> <body> <div> <video id="video" src="media/video.mp4" controls="true" crossorigin="anonymous"/> </div> <div> <canvas id="c1" width="160" height="96"></canvas> <canvas id="c2" width="160" height="96"></canvas> </div> <script type="text/
javascript" src="processor.js"></script> </body> </html> the key bits to take away from this are: this document establishes two canvas elements, with the ids c1 and c2.
...cript> </body> </html> the key bits to take away from this are: this document establishes two canvas elements, with the ids c1 and c2.
...And 2 more matches
Binary strings - Web APIs
javascript strings are utf-16 encoded strings.
...the string "ÀÈÌÒÙ" does not.
...stead of limiting the range to 127, it allows code points until 255.
...And 2 more matches
A basic 2D WebGL animation example - Web APIs
1.0.
...t computation shortly.
... is exceptionally simple: <script id="fragment-shader" type="x-shader/x-fragment"> #ifdef gl_es precision highp float; #endif uniform vec4 uglobalcolor; void main() { gl_fragcolor = uglobalcolor; } </script> this starts by specifying the precision of the float type, as required.
...And 2 more matches
ARIA live regions - Accessibility
using
javascript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction.
...hat can be announced by assistive technologies.
...rs</option> </select> <button id="renderplanetinfobutton">go</button> </fieldset> <div role="region" id="planetinfo" aria-live="polite"> <h2 id="planettitle">no planet selected</h2> <p id="planetdescription">select a planet to view its description</p> </div> <p><small>information courtesy <a href="https://en.wikipedia.org/wiki/solar_system#inner_solar_system">wikipedia</a></small></p>
javascript const planets_info = { mercury: { title: 'mercury', description: 'mercury is the smallest and innermost planet in the solar system.
...And 2 more matches
ARIA: checkbox role - Accessibility
element and adding aria.
...e of three possible values: true the checkbox is checked false the checkbox is not checked mixed the checkbox is partially checked, or indeterminate tabindex="0" used to make it focusable so the assistive technology user can tab to it and start reading right away.
...of the checkbox so it appears checked or unchecked to the sighted user onkeypress handle the case where the user presses the space key to change the state of the checkbox by changing the value of the aria-checked attribute and the appearance of the checkbox so it appears checked or unchecked to the sighted user examples the following example creates a simple checkbox element using css and
javascript to handle the checked or unchecked status of the element.
...And 2 more matches
Alerts - Accessibility
must be met in order to pass validation.
..., the field’s aria-invalid attribute will be given a value of “true”.
... “true”.
...And 2 more matches
Accessibility
ls different people use to interact with the web, and how we can make accessibility part of our web development workflow.
... and how we can make accessibility part of our web development workflow.
...ct html elements are used for the correct purpose at all times.
...And 2 more matches
Detecting CSS animation support - CSS: Cascading Style Sheets
css animations make it possible to do creative animations of content using nothing but css.
...new firefox, the property will be mozanimation and the keyframe prefix -moz- and with chrome it'll be webkitanimation and -webkit-.
...}'+ '}'; 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.
...And 2 more matches
Ajax - Developer guides
getting started an introduction to ajax.
... getting started an introduction to ajax.
...bject.
...And 2 more matches
<input type="month"> - HTML: Hypertext Markup Language
to note is that the displayed date format differs from the actual value; most user agents display the month and year in a locale-appropriate form, based on the set locale of the user's operating system, whereas the date value is always formatted yyyy-mm.
...lement fails constraint validation.
...tent: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the best way to deal with dates in forms in a cross-browser way (until all of the major browsers have supported them for a while) is to get the user to enter the month and year in separate controls (<select> elements being popular; see below for an implementation), or use
javascript libraries such as the jquery date picker plugin.
...And 2 more matches
Preloading content with rel="preload" - HTML: Hypertext Markup Language
css example source, and also live): <head> <meta charset="utf-8"> <title>js and css preload example</title> <link rel="preload" href="style.css" as="style"> <link rel="preload" href="main.js" as="script"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>bouncing balls</h1> <canvas></canvas> <script src="main.js" defer></script> </body> here we preload our css and
javascript files so they will be available as soon as they are required for the rendering of the page later on.
...for the rendering of the page later on.
...e: audio: audio file, as typically used in <audio>.
...And 2 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
resource sharing (cors) is a mechanism that uses additional http headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin.
... the request, soliciting supported methods from the server with the http options request method, and then, upon "approval" from the server, sending the actual request.
...pt, accept-language, and content-language request headers for simple cors switch to a blacklist model for restricted accept headers in simple cors requests no other browsers implement these extra restrictions, because they’re not part of the spec.
...And 2 more matches
Progressive web app structure - Progressive web apps (PWAs)
be achieved with the streams api.
.../ content inserted in here </section> </main> <footer> <p>© js13kgames 2012-2018, created and maintained by <a href="http://end3r.com">andrzej mazur</a> from <a href="http://enclavegames.com">enclave games</a>.</p> </footer> </body> </html> the <head> section contains some basic info like title, description and links to css, web manifest, games content js file, and app.js — that's where our
javascript application is initialized.
...e point is to have something simple so we can focus on the implementation of the actual pwa features.
...And 2 more matches
Structural overview of progressive web apps - Progressive web apps (PWAs)
be achieved with the streams api.
... </section> </main> <footer> <p>© js13kgames 2012-2018, created and maintained by <a href="http://end3r.com"> andrzej mazur</a> from <a href="http://enclavegames.com">enclave games</a>.</p> </footer> </body> </html> the <head> section contains basic information about the app, including its title, description, and the needed references to its css file, web manifest, the main application
javascript file (app.js, in which the app is initialized) as well as an additional
javascript code file.
... we can use to examine the implementation of its actual pwa features.
...And 2 more matches
Example - SVG: Scalable Vector Graphics
in this example, we use xhtml, svg,
javascript, and the dom to animate a swarm of "motes".
... in this example, we use xhtml, svg,
javascript, and the dom to animate a swarm of "motes".
...cursor' cx='200' cy='150' r='7' fill='#0000ff' fill-opacity='0.5'/> </svg:svg> <p>a swarm of motes, governed by two simple principles.
...And 2 more matches
Using templates and slots - Web Components
ve to reuse the same markup structures repeatedly on a web page, it makes sense to use some kind of a template rather than repeating the same structure over and over again.
...ible before, but it is made a lot easier by the html <template> element (which is well-supported in modern browsers).
...ild nodes that do not have the slot attribute.
...And 2 more matches
XPath
n-xml syntax so that it can be used in uris and xml attribute values.
...of xpath.
...l document that it wishes to transform.
...And 2 more matches
Module structure of the SDK - Archive of obsolete content
commonjs is the underlying infrastructure for both the sdk and the add-ons you build using the sdk.
...
javascript: it exports certain objects which are thus made available to dependent code.
...hich contains all the objects which a commonjs module wants to make available to other modules a function called require which a module can use to import the exports object of another module.
...unction called require which a module can use to import the exports object of another module.
loader/sandbox - Archive of obsolete content
experimental create
javascript sandboxes and execute scripts in them.
...ate function that lets you execute code in the given sandbox: evaluate(scope, 'var a = 5;'); evaluate(scope, 'a + 2;'); //=> 7 more details about evaluated script may be passed via optional arguments that may improve exception reporting: // evaluate code as if it was loaded from 'http://foo.com/bar.js' and // start from 2nd line.
...: string|window|null an object that determines the privileges that will be given to the sandbox.
...ox, code, uri, line, version) evaluate code in sandbox, and return the result.
places/history - Archive of obsolete content
: "visitcount" } ).on("end", function (results) { // results is an array of objects containing // data about visits to any site on developers.mozilla.org // ordered by visit count }); // complex query // the query objects are or'd together // let's say we want to retrieve all visits from before a week ago // with the query of 'ruby', but from last week onwards, we want // all results with '
javascript' in the url or title.
... week ago // with the query of 'ruby', but from last week onwards, we want // all results with '
javascript' in the url or title.
...ry of 'ruby', but from last week onwards, we want // all results with '
javascript' in the url or title.
...ter last week with '
javascript' { query: "
javascript", from: lastweek }], // we want to order chronologically by visit date { sort: "date" } ).on("end", function (results) { // results is an array of objects containing visit data, // sorted by visit date, with all entries from more than a week ago // that contain 'ruby', *in addition to* entries from this last week // that contain '
javascript' }); globals functions search(queries, options) queries can be performed on history entries by passing in one or more query options.
ui/frame - Archive of obsolete content
experimental create html iframes, using bundled html, css and
javascript, that can be added to a designated area of the firefox user interface.
...supply it to the toolbar's constructor, and the content is then displayed inside the toolbar.
... of <span> elements, and includes a css file to style the content and a
javascript script to implement behavior: <!doctype html> <html> <head> <link href="city-info.css" rel="stylesheet"></link> </head> <body> <select name="city" id="city-selector"></select> <span id="time" class="info-element"></span> <span id="weather" class="info-element"></span> <script type="text/
javascript" src="city-info.js"></script> </body> </html> if we save this document as "city-info.html" under the add-on's "data" directory, we can create a frame hosting it and add the frame to a toolbar like this: var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url: "./city-info.html" }); var toolbar = toolbar({ name: "city-info", ti...
...ioned between the address bar and the content window.
Localization - Archive of obsolete content
the sdk supports localization of strings appearing in: your main add-on's
javascript code html files packaged with your add-on the title, description and homepage fields of your add-on's metadata the title and description fields of your add-on's preferences.
...ains a single localizable string, represented in english as "hello!", and you want to supply us english and french french localizations.
...tting its value with l10n-id.attributename in the properties file like: hello_id.accesskey= h the following attributes are supported: accesskey alt label title placeholder further the localization of the aria attributes aria-label, aria-valuetext and aria-moz-hint are supported with the same aliases as on firefox os: arialabel ariavaluetext ariamozhint using localized strings in
javascript to reference localized strings from your main add-on code, you do this: var _ = require("sdk/l10n").get; console.log(_("hello_id")); assigning to "_" in particular is not required, but is a convention from the gettext tools and will make it possible to work with existing tools that expect "_" to indicate localizable strings.
...utton and you'll be prompted for a new .properties file for that add-on.
Finding window handles - Archive of obsolete content
tnativedata(ns_native_window).
... it should be a lot better.
...ces.nsiinterfacerequestor) .getinterface(components.interfaces.nsibasewindow); then in c++ part, a function take nsibasewindow as param hwnd getparentwindowhwnd(nsibasewindow *window) { nativewindow hwnd; nsresult rv = window->getparentnativewindow(&hwnd); if (ns_failed(rv)) return null; return (hwnd)hwnd; } that's it; use with caution!
...d.tostring(), uneval(browserwindow_madeintoxid)); // the code to focus the window is soon to come, its long and messy it needs to be made into a simple readable good for example.
Rosetta - Archive of obsolete content
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 ?
...oscript.getattribute("type").tolowercase())) { oscript.hasattribute("src") ?
... public it for our rosetta script !
...to include rosetta.js and your compiler within your html page and you will be able to execute scripts written in c together with scripts written in ecmascript: example.html: html example <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>rosetta c example</title> <script type="text/
javascript" src="rosetta.js"></script> <script type="text/
javascript" src="rosetta_c.js"></script> <script type="text/x-csrc"> #include <stdio.h> int main () { printf("hello world number 1!\n"); return 0; } </script> <script type="text/x-c" src="example.c"></script> </head> <body> <p>lorem ipsum</p> <script type="text/
javascript"> rosetta.translateall(); </script> </body> </html> example.c: c example #include <stdio.h> int main () { printf("hello wo...
How to convert an overlay extension to restartless - Archive of obsolete content
, stable version, or nightly is generally a better idea if given the option, but some users take forever to upgrade.
... firefox will attempt to autodetect and fail, resulting in an error message in the console.
... data type to get one from your xmlhttprequest.
...is a generic location for icons and the icon may still be in use by a different profile.
Jetpack Processes - Archive of obsolete content
jetpack.unregisterreceiver(), this function unregisters a callback previously registered with registerreceiver().
...terreceivers(amessagename) similar to nsijetpack.unregisterreceivers(), this function unregisters all callbacks for the given message name.
...tesandbox() this creates a new
javascript sandbox and returns its global scope.
...context can be provided for messages; for instance, if the handle is meant to represent a network request, an xmlhttprequest instance can be attached to the handle on the chrome process.
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
using eval in add-ons is almost always unnecessary, and many times even a security vulnerability.
... possible another person with malicious intentions takes over your domain.
...onymous function to pass around instead.
...menu").docommand(); alternative: just hard-code what should happen if you know that the current version of the application will call { executesomething(); executesomethingelse();} then just do the same in your code.
XPCOM Objects - Archive of obsolete content
« previousnext » xpcom xpcom is a cross platform component object model, similar to microsoft com.
...bserver.
...nsigned long, print32, pruint32 print32 is the equivalent to long.
...better to use those.
Overlay extensions - Archive of obsolete content
this page contains links to documentation for the approach to developing extensions for gecko-based applications which uses: xul overlays to specify the interface apis available to privileged code, such as tabbrowser and
javascript modules, to interact with the application and content.
...rlays to specify the interface apis available to privileged code, such as tabbrowser and
javascript modules, to interact with the application and content.
...plication for extension development.
...evelopment.
Simple Storage - Archive of obsolete content
longer under active development.
...d the blog post announcing the first sdk release for what we're up to next!
...starts.
...rbs = { bar: "baz" }; and this code -- pretend it's in the same jetpack as the code above -- simply uses that data: mystorage.fribblefrops.foreach(function (elt) console.log(elt));var bar = mystorage.heimelfarbs.bar;jetpack.notifications.show(bar.baz); that's all there is to it!
Simple Storage - Archive of obsolete content
the jetpack.storage.simple namespace provides an easy way to persist data across browser restarts.
... the jetpack.storage.simple namespace provides an easy way to persist data across browser restarts.
...starts.
...= { bar: "baz" }; and this code -- pretend it's in the same jetpack as the code above -- simply uses that data: mystorage.fribblefrops.foreach(function (elt) console.log(elt)); var bar = mystorage.heimelfarbs.bar; jetpack.notifications.show(bar.baz); that's all there is to it!
jspage - Archive of obsolete content
gator.plugins["shockwave flash"].description; },function(){return new activexobject("shockwaveflash.shockwaveflash").getvariable("$version");})||"0 r0").match(/\d+/g);return{version:parseint(a[0]||0+"."+a[1],10)||0,build:parseint(a[2],10)||0}; })();function $exec(b){if(!b){return b;}if(window.execscript){window.execscript(b);}else{var a=document.createelement("script");a.setattribute("type","text/
javascript"); a[(browser.engine.webkit&&browser.engine.version<420)?"innertext":"text"]=b;document.head.appendchild(a);document.head.removechild(a);}return b;}native.uid=1; var $uid=(browser.engine.trident)?function(a){return(a.uid||(a.uid=[native.uid++]))[0];}:function(a){return a.uid||(a.uid=native.uid++);};var window=new native({name:"window",legacy:(browser.engine.trident)?null:window.window,initialize:...
...irstchild;},replaces:function(a){a=document.id(a,true);a.parentnode.replacechild(this.toelement(),a); return this;},inject:function(a){document.id(a,true).appendchild(this.toelement());return this;},remote:function(){return swiff.remote.apply(swiff,[this.toelement()].extend(arguments)); }});swiff.callbacks={};swiff.remote=function(obj,fn){var rs=obj.callfunction('<invoke name="'+fn+'" returntype="
javascript">'+__flash__argumentstoxml(arguments,2)+"</invoke>"); return eval(rs);};var fx=new class({implements:[chain,events,options],options:{fps:50,unit:false,duration:500,link:"ignore"},initialize:function(a){this.subject=this.subject||this; this.setoptions(a);this.options.duration=fx.durations[this.options.duration]||this.options.duration.toint();var b=this.options.wait;if(b===false){this.options.link=...
...ow((11-6*d-11*f)/4,2); break;}}return e;},elastic:function(b,a){return math.pow(2,10*--b)*math.cos(20*b*math.pi*(a[0]||1)/3);}});["quad","cubic","quart","quint"].each(function(b,a){fx.transitions[b]=new fx.transition(function(c){return math.pow(c,[a+2]); });});var request=new class({implements:[chain,events,options],options:{url:"",data:"",headers:{"x-requested-with":"xmlhttprequest",accept:"text/
javascript, text/html, application/xml, text/xml, */*"},async:true,format:false,method:"post",link:"ignore",issuccess:null,emulation:true,urlencoded:true,encoding:"utf-8",evalscripts:false,evalresponse:false,nocache:false},initialize:function(a){this.xhr=new browser.request(); this.setoptions(a);this.options.issuccess=this.options.issuccess||this.issuccess;this.headers=new hash(this.options.headers);},onsta...
...exobject("microsoft.xmldom"); g.async=false;g.loadxml(d);}else{g=new domparser().parsefromstring(d,"text/xml");}d=g.getelementsbytagname("root")[0];if(!d){return null;}for(var f=0,e=d.childnodes.length; f<e;f++){var h=element.clone(d.childnodes[f],true,true);if(h){a.grab(h);}}return a;})||a.set("html",c);},success:function(d){var c=this.options,b=this.response; b.html=d.stripscripts(function(e){b.
javascript=e;});var a=this.processhtml(b.html);b.tree=a.childnodes;b.elements=a.getelements("*");if(c.filter){b.tree=b.elements.filter(c.filter); }if(c.update){document.id(c.update).empty().set("html",b.html);}else{if(c.append){document.id(c.append).adopt(a.getchildren());}}if(c.evalscripts){$exec(b.
javascript); }this.onsuccess(b.tree,b.elements,b.html,b.
javascript);}});element.properties.load={set:function...
Microsummary XML grammar reference - Archive of obsolete content
es: none.
...ith the caret (^) to ensure they do not inadvertently match urls which merely contain the urls they intend to match.
... for the details of the regular expression syntax valid for generators and the tutorial creating regular expressions for a microsummary generator for step by step instructions to writing regular expressions that match urls.
...s able to summarize.
Creating XPI Installer Modules - Archive of obsolete content
uncompressed files by default, a new way to aggregate and distribute the files has improved performance, made the ui components more portable and easier to install, and made the installation process a much easier one.
...ke itself a piece of self-contained and redistributable software.
...rizontal" autostretch="never"> <button label="barley corn" /> <button label="show aphids" oncommand="bar();" /> </box> </window> the other files that the window imports are defined in dark blue.
...ckage, it can be grabbed from here.
Mozilla E4X - Archive of obsolete content
presentation view online download summary "ecmascript for xml" (ecma-357), a new standard for writing and processing xml directly in
javascript (ecma-262, iso-16262).
... presentation view online download summary "ecmascript for xml" (ecma-357), a new standard for writing and processing xml directly in
javascript (ecma-262, iso-16262).
... presentation view online download summary "ecmascript for xml" (ecma-357), a new standard for writing and processing xml directly in
javascript (ecma-262, iso-16262).
... presentation view online download summary "ecmascript for xml" (ecma-357), a new standard for writing and processing xml directly in
javascript (ecma-262, iso-16262).
XTech 2005 Presentations - Archive of obsolete content
web 1.6: a rope of sand - opening keynote, mike shaver mozilla e4x - brendan eich "ecmascript for xml" (ecma-357), a new standard for writing and processing xml directly in
javascript (ecma-262, iso-16262).
... web 1.6: a rope of sand - opening keynote, mike shaver mozilla e4x - brendan eich "ecmascript for xml" (ecma-357), a new standard for writing and processing xml directly in
javascript (ecma-262, iso-16262).
... web 1.6: a rope of sand - opening keynote, mike shaver mozilla e4x - brendan eich "ecmascript for xml" (ecma-357), a new standard for writing and processing xml directly in
javascript (ecma-262, iso-16262).
... web 1.6: a rope of sand - opening keynote, mike shaver mozilla e4x - brendan eich "ecmascript for xml" (ecma-357), a new standard for writing and processing xml directly in
javascript (ecma-262, iso-16262).
Index - Archive of obsolete content
des template query processors for rdf, xml and sql (mozstorage).
...ge).
...e nsixultemplatequeryprocessor interface and follow some conventions for when registering the component.
... applications can modify the way command line parameters are handled by writing a component that implements the nsicommandlinehandler interface and registering it in a category.
XML - Archive of obsolete content
, and in this respect it does a great job.
...n interpreting what it is you want.
...de flexibility to you as adesigner of interfaces, xul offers no flexibility to you as acoder.
...o build any interface.
Windows and menus in XULRunner - Archive of obsolete content
s is used to apply formatting to elements, just as it would in html.
...it would in html.
...edo();"/> </menupopup> </menu> </menubar> <toolbar id="main-toolbar"> <toolbarbutton id="open" label="&file.open;" oncommand="dofileopen();"/> <toolbarbutton id="save" label="&file.save;" oncommand="dofilesave();"/> </toolbar> </toolbox> ...
... </menubar> <toolbar id="main-toolbar"> <toolbarbutton id="open" label="&file.open;" oncommand="dofileopen();"/> <toolbarbutton id="save" label="&file.save;" oncommand="dofilesave();"/> </toolbar> </toolbox> ...
NPVariant - Archive of obsolete content
doublevalue; npstring stringvalue; npobject *objectvalue; } value; } npvariant; fields the data structure has the following fields: type a member of the npvarianttype enumeration specifying the data type contained in the npvariant.
...iant; fields the data structure has the following fields: type a member of the npvarianttype enumeration specifying the data type contained in the npvariant.
...ype a member of the npvarianttype enumeration specifying the data type contained in the npvariant.
... data type contained in the npvariant.
Scratchpad - Archive of obsolete content
scratchpad is deprecated as of firefox 70 (bug 1565380), and will be removed as of firefox 72 (bug 1519103).
... scratchpad is deprecated as of firefox 70 (bug 1565380), and will be removed as of firefox 72 (bug 1519103).
...alternative, starting in firefox 71, you can use the multi-line mode of the
javascript console input.
...lable in the toolbox, alongside other tools like the page inspector and the web console.
VBArray.dimensions - Archive of obsolete content
the vbarray.dimensions method returns the number of dimensions in a vbarray.
...ay to retrieve the number of dimensions in a specified vbarray.
...ad> section of an html page.
...xt createvbarray = a end function --> </script> <script type="text/
javascript"> <!-- function vbarraytest(vba) { var i; var a = new vbarray(vba); var s = ""; for (i = 1; i <= a.dimensions(); i++) { s += "the upper bound of dimension "; s += i + " is "; s += a.ubound(i); s += ".<br />"; } return(s); } --> </script> </head> <body> <script type="text/
javascript"> document.write(vbarraytest(createvbarray())); </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
VBArray.getItem - Archive of obsolete content
safearray.getitem(dimension1[, dimension2, ...], dimensionn) parameters safearray a vbarray object.
...f the vbarray.
...pt code that goes in the <body> section to run the other two parts.
... = k + 1 next document.writeln("<br>") next createvbarray = a end function --> </script> <script type="text/
javascript"> <!-- function getitemtest(vbarray) { var i, j; var a = new vbarray(vbarray); for (i = 0; i <= 2; i++) { for (j =0; j <= 2; j++) { document.writeln(a.getitem(i, j)); } } } --> </script> </head> <body> <script type="text/
javascript"> <!-- getitemtest(createvbarray()); --> </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
VBArray.lbound - Archive of obsolete content
e, the method generates a "subscript out of range" error.
...rts.
...ad> section of an html page.
...xt createvbarray = a end function --> </script> <script type="text/
javascript"> <!-- function vbarraytest(vba){ var i; var a = new vbarray(vba); var s = ""; for (i = 1; i <= a.dimensions(); i++) { s += "the lower bound of dimension "; s += i + " is "; s += a.lbound(i); s += ".<br />"; } return (s); } --> </script> </head> <body> <script type="text/
javascript"> document.write(vbarraytest(createvbarray())); </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
VBArray.ubound - Archive of obsolete content
omitted, ubound behaves as if a 1 was passed.
...the method generates a "subscript out of range" error.
...ad> section of an html page.
...t createvbarray = a end function --> </script> <script type="text/
javascript"> <!-- function vbarraytest(vba) { var i; var a = new vbarray(vba); var s = ""; for (i = 1; i <= a.dimensions(); i++) { s += "the upper bound of dimension "; s += i + " is "; s += a.ubound(i); s += ".<br />"; } return (s); } --> </script> </head> <body> <script type="text/
javascript"> document.write(vbarraytest(createvbarray())); </script> </body> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
GLSL Shaders - Game development
sl (opengl shading language), a special opengl shading language with syntax similar to c.
...he width and height of the <canvas> element that three.js will insert on the page to be the full size of the viewport.
...plain how the shaders work.
...thub.io/mdn-games-3d/shaders/js/three.min.js"></script> <script id="vertexshader" type="x-shader/x-vertex"> void main() { gl_position = projectionmatrix * modelviewmatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0); } </script> <script id="fragmentshader" type="x-shader/x-fragment"> void main() { gl_fragcolor = vec4(0.0, 0.58, 0.86, 1.0); } </script>
javascript var width = window.innerwidth; var height = window.innerheight; var renderer = new three.webglrenderer({antialias:true}); renderer.setsize(width, height); renderer.setclearcolor(0xdddddd, 1); document.body.appendchild(renderer.domelement); var scene = new three.scene(); var camera = new three.perspectivecamera(70, width/height); camera.position.z = 50; ...
Audio for Web games - Game development
and start playback then.
...6</button> <button data-start="4" data-stop="5">7</button> <button data-start="2" data-stop="3">8</button> <button data-start="0" data-stop="1">9</button> now we have buttons with start and stop times in seconds.
...e more advanced web audio api.
... <span id="clavi-play-label">play</span> </button> </li> </ul> <p class="sourced">all tracks sourced from <a href="http://jplayer.org/">jplayer.org</a></p> </section> all of these tracks are the same tempo and are designed to be synchronized with each other, so we need to make sure they are loaded and available to the api before we are able to play them.
Desktop gamepad controls - Game development
previous overview: control mechanisms next now we'll look at adding something extra — support for gamepad controls, via the gamepad api.
...ssfully control the user interface and gameplay.
...tus, browser and hardware support the gamepad api is still in working draft status, although browser support is already quite good — around 63% global coverage, according to caniuse.com.
...stead of checking out if gamepadbuttonpressedhandler(3) is pressed, you could do a more descriptive check: gamepadbuttonpressedhandler('dpad-right').
Unconventional controls - Game development
y watching this video.
...script developers visiting demo booths at conferences around the world.
...nd shooting the bullets.
...e is lower than the threshold's negative value, then the ship is moved right.
2D maze game with device orientation - Game development
in this tutorial we’ll go through the process of building an html5 mobile game that uses the device orientation and vibration apis to enhance the gameplay and is built using the phaser framework.
...cyber orb source code on github.
...add('boot', ball.boot); game.state.add('preloader', ball.preloader); game.state.add('mainmenu', ball.mainmenu); game.state.add('howto', ball.howto); game.state.add('game', ball.game); game.state.start('boot'); })(); </script> </body> </html> so far we have a simple html website with some basic content in the <head> section: charset, title, css styling and the inclusion of the
javascript files.
...called boot to the game: game.state.add('boot', ball.boot); the first value is the name of the state and the second one is the object we want to assign to it.
Constructor - MDN Web Docs Glossary: Definitions of Web-related terms
a constructor belongs to a particular class object that is instantiated.
...pplied to most object-oriented programming languages.
...the constructor of the class in
javascript, use a new operator to assign a new object reference to a variable.
...ascript, use a new operator to assign a new object reference to a variable.
Tree shaking - MDN Web Docs Glossary: Definitions of Web-related terms
tree shaking is a term commonly used within a
javascript context to describe the removal of dead code.
... tree shaking is a term commonly used within a
javascript context to describe the removal of dead code.
... tree shaking is a term commonly used within a
javascript context to describe the removal of dead code.
... tree shaking is a term commonly used within a
javascript context to describe the removal of dead code.
Common questions - Learn web development
u host your website on google app engine?
...bility.
... this article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.
...her such things.
Basic native form controls - Learn web development
input> fields are the most basic form widgets.
...mp to the server stating when an order was placed.
...n, despite its name; let's move on and look at actual buttons!
...e attribute that were added in html5.
Using data attributes - Learn web development
data().
...element whose attribute name starts with data- is a data attribute.
...(data-parent); } you can also use the attribute selectors in css to change styles according to the data: article[data-columns='3'] { width: 400px; } article[data-columns='4'] { width: 600px; } you can see all this working together in this jsbin example.
...10 and under you need to access data attributes with getattribute() instead.
Adding vector graphics to the Web - Learn web development
using various graphics tools, and create approximations of photos (for example inkscape's trace bitmap feature.) svg has some additional advantages besides those described so far: text in vector images remains accessible (which also benefits your seo).
...ght="87" width="100" /> pros quick, familiar image syntax with built-in text equivalent available in the alt attribute.
...css background images, as shown below.
...idth="500" height="500" sandbox> <img src="triangle.png" alt="triangle with three unequal sides" /> </iframe> this is definitely not the best method to choose: cons iframes do have a fallback mechanism, as you can see, but browsers only display the fallback if they lack support for iframes altogether.
Responsive images - Learn web development
nly 63kb — a saving of 65kb.
...s example), and a fallback for browsers that don't support the <picture> element.
...splays, as shown below: note: you should use the media attribute only in art direction scenarios; when you do use media, don't also offer media conditions within the sizes attribute.
...s to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's css and
javascript.
Video and audio content - Learn web development
ar for handling such content.
...k, but it had a number of problems, including not working well with html/css features, security issues, and accessibility issues.
... way as for the <img> element, the src (source) attribute contains a path to the video you want to embed.
...e.webm" type="video/webm"> <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> </video> this will result in a video that has subtitles displayed, kind of like this: for more details, please read adding captions and subtitles to html5 video.
Graceful asynchronous programming with Promises - Learn web development
previous overview: asynchronous next promises are a comparatively new feature of the
javascript language that allow you to defer further actions until after a previous action has completed, or respond to its failure.
...ript language that allow you to defer further actions until after a previous action has completed, or respond to its failure.
...ises do not fail on 404 or 500 errors — only on something catasrophic like a network failure.
... about promises, you'll come across further features and techniques.
Build your own function - Learn web development
previous overview: building blocks next with most of the essential theory dealt with in the previous article, this article provides practical experience.
...plain a few more useful associated details.
...ming conventions.
...hing as it stands.
Ember app structure and componentization - Learn web development
previous overview: client-side
javascript frameworks next in this article we'll get right on with planning out the structure of our todomvc ember app, adding in the html for it, and then breaking that html structure into components.
... previous overview: client-side
javascript frameworks next in this article we'll get right on with planning out the structure of our todomvc ember app, adding in the html for it, and then breaking that html structure into components.
... in this article we'll get right on with planning out the structure of our todomvc ember app, adding in the html for it, and then breaking that html structure into components.
......
Accessibility in React - Learn web development
previous overview: client-side
javascript frameworks next in our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in react, which can improve usability and reduce confusion for both keyboard-only and screenreader users.
... previous overview: client-side
javascript frameworks next in our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in react, which can improve usability and reduce confusion for both keyboard-only and screenreader users.
...ef, useeffect } from "react"; then declare a new ref inside the app() function.
...without them!
React interactivity: Editing, filtering, conditional rendering - Learn web development
previous overview: client-side
javascript frameworks next as we near the end of our react journey (for now at least), we'll add the finishing touches to the main areas of functionality in our todo list app.
...near the end of our react journey (for now at least), we'll add the finishing touches to the main areas of functionality in our todo list app.
... completed, and incomplete.
...y complete.
Beginning our React todo list - Learn web development
previous overview: client-side
javascript frameworks next let's say that we’ve been tasked with creating a proof-of-concept in react – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them.
...tyling in place, ready for individual component definition and interactivity, which we'll add later.
...ttribute corresponds to the for attribute used in html.
...0; background: transparent; } .c-cb > input[type="checkbox"]:checked + label::after { opacity: 1; } save and look back at your browser, and your app should now have reasonable styling.
Componentizing our Svelte app - Learn web development
previous overview: client-side
javascript frameworks next in the last article we started developing our todo list app.
...rticle we started developing our todo list app.
... remember to run npm install && npm run dev to start your app in development mode.
... passing information from child to parent using the bind directive.
Using Vue computed properties - Learn web development
previous overview: client-side
javascript frameworks next in this article we'll add a counter that displays the number of completed todo items, using a feature of vue called computed properties.
... previous overview: client-side
javascript frameworks next in this article we'll add a counter that displays the number of completed todo items, using a feature of vue called computed properties.
...e we'll add a counter that displays the number of completed todo items, using a feature of vue called computed properties.
...ow if you check a todoitem, you should see the summary update appropriately!
Vue resources - Learn web development
previous overview: client-side
javascript frameworks next now we'll round off our study of vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.
... previous overview: client-side
javascript frameworks next now we'll round off our study of vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.
...previous overview: client-side
javascript frameworks next now we'll round off our study of vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.
... api.
Styling Vue components with CSS - Learn web development
previous overview: client-side
javascript frameworks next the time has finally come to make our app look a bit nicer.
... previous overview: client-side
javascript frameworks next the time has finally come to make our app look a bit nicer.
... previous overview: client-side
javascript frameworks next the time has finally come to make our app look a bit nicer.
...ass.
Cross browser testing - Learn web development
pes of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.
...ow look specifically at the common cross-browser problems you will come across in html and css code, and what tools can be used to prevent problems from happening, or fix problems that occur.
...u will come across in html and css code, and what tools can be used to prevent problems from happening, or fix problems that occur.
...dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.
Debugging on Windows
run two instances of mozilla (e.g.
... (e.g.
..., starting with firefox 2 and other gecko 1.8.1-based applications, you can use the -no-remote command-line switch instead (implemented in bug 325509).
...u can use the -no-remote command-line switch instead (implemented in bug 325509).
Adding APIs to the navigator object
starting with gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6), you can easily add new apis to the window.navigator object by using the category manager.
...can easily add new apis to the window.navigator object by using the category manager.
...s to the navigator object requires that the new object is a registered xpcom component.
...contract_id.
Error codes returned by Mozilla APIs
the following tables list errors that can occur when calling various mozilla apis.
...ion_refused (0x804b0048) ns_error_already_opened (0x804b0049) returned from nsichannel.asyncopen() when trying to open the channel again (reopening is not supported).
...ed from nsichannel.asyncopen() when trying to open the channel again (reopening is not supported).
...(0x80570017) ns_error_xpc_bad_iid (0x80570018) ns_error_xpc_cant_create_wn (0x80570019) ns_error_xpc_js_threw_exception (0x8057001a) ns_error_xpc_js_threw_native_object (0x8057001b) ns_error_xpc_js_threw_js_object (0x8057001c) ns_error_xpc_js_threw_null (0x8057001d) ns_error_xpc_js_threw_string (0x8057001e) ns_error_xpc_js_threw_number (0x8057001f) ns_error_xpc_
javascript_error (0x80570020) ns_error_xpc_
javascript_error_with_details (0x80570021) ns_error_xpc_cant_convert_primitive_to_array (0x80570022) ns_error_xpc_cant_convert_object_to_array (0x80570023) ns_error_xpc_not_enough_elements_in_array (0x80570024) ns_error_xpc_cant_get_array_info (0x80570025) ns_error_xpc_not_enough_chars_in_string (0x80570026) ns_error_xpc_security_manager...
Following the Android Toasts Tutorial from a JNI Perspective
h the following java code, which invokes a toast and says "hello, firefox!".
...licationcontext(); 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.
...g used.
... text = 'hello toast!'; // int duration = toast.length_short; var duration = toast.length_short; // toast toast = toast.maketext(context, text, duration); var toast = toast.maketext(context, text, duration); // toast.show(); toast.show(); notice that the charsequence was not created with a constructor.
NetUtil.jsm
the netutil.jsm
javascript code module provides easy-to-use apis for performing common network related tasks.
... the netutil.jsm
javascript code module provides easy-to-use apis for performing common network related tasks.
...ng at the first zero byte.
...ns ); parameters ainputstream the input stream from which to read the data.
source-editor.jsm
this component has been removed from the platform in firefox 28.
... this component has been removed from the platform in firefox 28.
... these constants are used to set the syntax highlighting mode for the editor by calling its setmode() method, or in the configuration object when first initializing the editor using its init() method.
...sed to set the syntax highlighting mode for the editor by calling its setmode() method, or in the configuration object when first initializing the editor using its init() method.
Mozilla projects on GitHub
ts not listed below.
... important mozilla projects on github.
...r bugs.
...ools used by the localization drivers.
Leak-hunting strategies and tips
ect many large object graphs that leak go through xpconnect.
... leak go through xpconnect.
...the leaked objects, but it doesn't mean it's xpconnect's fault (although that has been known to happen, it's rare).
...ct requires a basic understanding of what xpconnect does.
about:memory
.12%) ++ storage ├────2.74 mb (01.43%) ++ startup-cache └────2.16 mb (01.12%) ++ xpconnect some expertise is required to understand the full details here, but there are various things worth pointing out.
...it calls to allocation functions.
...ng more memory than the techcrunch.com tab, which is using more than the arstechnica.com tab.
...%) ++ treestyletab@piro.sakura.ne.jp/js-non-window/zones/zone(0x100496800) more things worth pointing out are as follows.
Performance
oft's xperf tool to profile mozilla code.
...la code.
...ng performance using the perfmeasurement.jsm code module using perfmeasurement.jsm to measure performance data in your
javascript code.
...gs such as wakeups.
Preference reference
slash behind domain name (if the open page is exactly the domain name) are hidden.dom.event.clipboardevents.enableddom.event.clipboardevents.enabled lets websites get notifications if the user copies, pastes, or cuts something from a web page, and it lets them know which part of the page had been selected.
...xactly the domain name) are hidden.dom.event.clipboardevents.enableddom.event.clipboardevents.enabled lets websites get notifications if the user copies, pastes, or cuts something from a web page, and it lets them know which part of the page had been selected.
... get notifications if the user copies, pastes, or cuts something from a web page, and it lets them know which part of the page had been selected.
...sed.nglayout.debug.disable_xul_cacheto improve performance, mozilla caches chrome xul documents the first time they load for faster loading later.
NSS tools : signtool
files from the jar archive in the local system after smartupdate has validated the digital signature.
... details, see the description of -m that follows.
...including issuing cas.
...es are generally case sensitive.
Small Footprint
f rhino for embeddings where space is at a premium.
...arious changes js.jar size can be reduced to 204,689 bytes corresponding to 424,774 bytes of uncompressed classes.
...es in org.mozilla.
javascript.tools or any of its sub-packages.
...mozilla.
javascript.javaadapter will disable this functionality, but rhino will otherwise run correctly.
Rhino history
rhino gets its name from the animal on the cover of the o'reilly book about
javascript.
... rhino gets its name from the animal on the cover of the o'reilly book about
javascript.
...ava.
...rgot" it existed).
Bytecodes
background spidermonkey bytecodes are the canonical form of code representation that is used in the
javascript engine.
... background spidermonkey bytecodes are the canonical form of code representation that is used in the
javascript engine.
...rce text, then emits stack-based bytecodes from that ast as a part of the jsscript data structure.
... bytecodes can reference atoms and objects (typically by array index) which are also contained in the jsscript data structure.
Statistics API
data: the environment variable moz_gctimer controls text dumping of gc stats.
...lename.
... to an observer interface.
... - the number of compartments that were present in the system at the end of the gc.
JS::CompileOptions
ingcompileoptions(jscontext *cx); // added in spidermonkey 31 js::compileoptions(jscontext *cx, jsversion version = jsversion_unknown); name type description cx jscontext * pointer to a js context from which to derive runtime information.
...r.
...the following are used in browser: "worker" - code loaded by calling the web worker constructor—the worker's main script.
...s all dynamically allocated resources (principals; elements; strings) that it refers to.
JS::GetSelfHostedFunction
this article covers features introduced in spidermonkey 31 create a new
javascript function that is implemented in self-hosted
javascript.
...edfunction(jscontext* cx, const char* selfhostedname, js::handle<jsid> id, unsigned nargs); name type description cx jscontext* the context from which to get the function.
....
...in a request on this jscontext.
JSClass
a jsclass describes a class of
javascript objects.
...solete since jsapi 36 the jsclass_new_resolve flag instructs spidermonkey to call this as a jsnewresolveop.
... if objects of your class shouldn't be callable this way, use null.
... js_setprivate.
JSFastNative
obsolete since
javascript 1.8.5this feature is obsolete.
...e it could be removed at any time.
...rm "native" here refers to c/c++ code as opposed to
javascript code.
... be returned to the caller.
JSPropertyOp
js::mutablehandlevalue vp); typedef bool (* jsstrictpropertyop)(jscontext *cx, js::handleobject obj, js::handleid id, bool strict, js::mutablehandlevalue vp); // added in spidermonkey 1.9.3 name type description cx jscontext * the context in which the property access is taking place.
... operation then fails, and the error is propagated to the caller.
...'s value is accessed via jsapi functions such as js_getproperty or (less obviously) js_callfunctionname.
...vp after the setter is called.
JS_DefinePropertyWithTinyId
ription js_definepropertywithtinyid defines an object property with a tiny id.
...the id value passed to certain callbacks.
...ny ids are helpful for getters and setters that are shared by several different properties.
...er, tiny ids can cause confusion when used with jsclass callbacks.
JS_GetFunctionFlags
obsolete since jsapi 19this feature is obsolete.
... some browsers, its use is discouraged since it could be removed at any time.
...uld be removed at any time.
...gned int, the bitwise or of zero or more of the jsfun flags described below.
JS_GetVersion
retrieves the
javascript version number used within a specified executable script context.
... retrieves the
javascript version number used within a specified executable script context.
...ion js_getversion(jscontext *cx); name type description cx jscontext * the context to query.
...jscontext * the context to query.
JS_NewObject
creates a new
javascript object.
... js::handle<jsobject*> parent); // added in spidermonkey 1.8 name type description cx jscontext * the context in which to create the new object.
...__parent__ property will be a reference to this object.
...cuting.
JS_NewStringCopyN
h to derive runtime information.
... number of characters to copy from s into the new string.
...copy from s into the new string.
...strings, and all
javascript strings are made up of 16-bit characters.
JS_NewStringCopyZ
create a new
javascript string based on a null-terminated c string.
...ription cx jscontext * pointer to a js context from which to derive runtime information.
...t.
...haracter array containing the text for the js string to create; or null.
JS_ReportErrorNumber
name type description cx jscontext * the context in which to report the error.
... be in a request on this jscontext.
... errorcallback(userref, errornumber) is called.
...ay we ignore the .exntype, actually, but surely i'm just missing something.) otherwise, if any
javascript code is running in cx (for example, if the caller is a jsnative that was called from a script), then an error object is created and becomes the pending exception.
JS_SetBranchCallback
obsolete since
javascript 1.9.1this feature is obsolete.
...yntax jsbool (*jsbranchcallback)(jscontext *cx, jsscript *script); name type description cx jscontext * pointer to a jscontext which the callback may use to call into jsapi functions.
...equest()).
...n enabled for the context cx using js_setoptions().
SpiderMonkey 52
these release notes are incomplete.
... these release notes are incomplete.
...idermonkey 52 is the
javascript engine that shipped in firefox 52.
...ntains new language and api features described in detail below.
Accessing the Windows Registry Using XPCOM
introduction when implementing windows-specific functionality, it is often useful to access the windows registry for information about the environment or other installed programs.
...ervice().
...st first open the key you are interested in.
...defined as named constants on the interface as follows: type_none — probably not useful type_string — a unicode string value type_binary — binary data type_int — a 32 bit integer type_int64 — a 64 bit integer each of these types (except type_none) has a corresponding method to read the value data: readstringvalue() readbinaryvalue() readintvalue() readint64value() since
javascript is a dynamically-typed language, you may wish to use the following code to handle all types of data.
An Overview of XPCOM
e interface, which is crucial for interfaces used in the non c++ world.
...pe library to access the interface, learn what methods it supports, and call those methods.
...to xpcom components from languages such as
javascript.
...ll.
Making cross-thread calls using runnables
in the mozilla platform, most activities such as layout, dom operations, content
javascript, and chrome
javascript run on the main thread.
...ions, content
javascript, and chrome
javascript run on the main thread.
...ver, it may be useful for c++ code in the mozilla platform to run tasks on another thread.
...) { // in case of failure, call back immediately with an empty string which indicates failure callback(emptycstring()); return; } nscomptr<nsirunnable> r = new picalculatetask(callback, digits); mythread->dispatch(r, nsieventtarget::dispatch_normal); // the result callback will shut down the worker thread, we can let it go here...
Mozilla internal string guide
ng utf-16 string.
...es.
... wrapping character buffers nsdependentstring nsdependentcstring wrap const char* / const char16_t* buffers.
...tor) equals(string[, comparator]) first() last() countchar() left(outstring, length) mid(outstring, position, length) right(outstring, length) findchar(character) methods that modify the string.
Components.Constructor
summary creates a
javascript function which can be used to create or construct new instances of xpcom components.
...called on the newly-created instance, using the arguments provided to the created function when called description components.constructor() is a handy shortcut for creating instances of xpcom components.
... also gives creation of xpcom objects more
javascript-like syntax.
...createinstance(components.interfaces.nsibinaryinputstream); bis.setinputstream(someinputstream); // assumes binaryinputstream was initialized previously var bis = new binaryinputstream(someinputstream); components.constructor() is purely syntactic sugar (albeit speedy and pretty syntactic sugar) for actions that can be accomplished using other common methods.
Components.utils.reportError
components.utils.reporterror reports a
javascript error object to the error console, and returns.
... components.utils.reporterror reports a
javascript error object to the error console, and returns.
...rmal severity, unlike reporterror.
...nsoleservice;1"] .getservice(components.interfaces.nsiconsoleservice); consoleservice.logstringmessage("my component: " + amessage); } firefox 3: the error console will not display chrome errors by default.
Architecture basics
xpcom is like com, for windows.
... xpcom is like com, for windows.
... xpcom is like com, for windows.
...t pointers to components inside mozilla, and it lets you talk about their interfaces as well.
mozIJSSubScriptLoader
js/xpconnect/idl/mozijssubscriptloader.idlscriptable this interface can be used from privileged
javascript to load and run
javascript code from the given url at runtime.
...ged in gecko 28 (firefox 28 / thunderbird 28 / seamonkey 2.25 / firefox os 1.3) implemented by: @mozilla.org/moz/jssubscript-loader;1.
...y top-level functions or variables created by the loaded script via var are created as properties of the targetobj target object (but things declared via let and const are not).
... searched for variables that cannot be resolved in the subscript scope.
mozIStorageStatement
step(); boolean step(); void execute(); attributes attribute type description columncount unsigned long number of columns returned.
...gned long number of columns returned.
... specified index.
...view document.
nsIJetpack
ng amessagename); void evalscript(in astring ascript); nsivariant createhandle(); void destroy(); methods sendmessage() this method asynchronously sends a message to the jetpack process.
...receiver() this registers a callback to be triggered whenever the jetpack process sends a particular message.
...tpack process via callmessage(), then the return value of this function is passed back to the jetpack process.
...iggered.
nsIPlacesImportExportService
ents/places/nsiplacesimportexportservice.idlscriptable provides methods for exporting places data.
...aves the current bookmarks hierarchy to a bookmarks.html file.
...importhtmlfromfile( in nsilocalfile afile, in boolean aisinitialimport ); parameters afile the html file to import into places.
...the bookmarks.
nsIProgrammingLanguage
xpcom/base/nsiprogramminglanguage.idlscriptable this interface provides an enumeration of programming language identifiers.
... xpcom/base/nsiprogramminglanguage.idlscriptable this interface provides an enumeration of programming language identifiers.
...ge identifiers.
...nherits from: nsisupports last changed in gecko 0.9.5 constants identifiers for programming languages.
nsIScriptableInputStream
ed.
...aximum number of bytes to read.
...ream_would_block if reading from the input stream would block the calling thread (non-blocking mode only).
...de only).
nsIXULBrowserWindow
ternals of the browser area to tell the containing xul window to update its user interface.
...to update its user interface.
...ptab ); parameters originaltarget the specified target for the link.
...node in which the link is located.
Using the clipboard
w where it's already loaded.
...vor is added to the transferable.
... conversion from an available flavor is possible.
...ndow might accept html and image data.
XSLT 2.0
although xslt 2.0 is not natively supported in firefox, it is possible via saxon-b (java) or, more recently, saxon-ce (
javascript) to perform xslt 2.0.
... although xslt 2.0 is not natively supported in firefox, it is possible via saxon-b (java) or, more recently, saxon-ce (
javascript) to perform xslt 2.0.
...on-b the xsl results extension uses the new incarnation of liveconnect (handled by java 1.6v12+ instead of mozilla-specific code) to connect with the java-based saxon-b library, and adds support for having xslt performed automatically when visiting a page with the appropriate xslt processing instruction (and which isn't processed by firefox's own xslt 1.0 processor).
... processed by firefox's own xslt 1.0 processor).
Mozilla technologies
code for all mozilla projects hosted in the mercurial repositories can be searched and viewed online using searchfox, a fast indexed search engine that runs on aws.xml extrasthe xml extras module contains several features that allow developers to treat xml as data i.e.
...mponent and exposes its xml-as-data features both to
javascript and c++/xpcom users.
...ed in the browser installers so it is available in the nightly builds.xpcomxpcom is a cross platform component object model, similar to microsoft com.
...d and implemented in
javascript, java, and python in addition to c++.xpidlxpidl is an interface description language used to specify xpcom interface classes.xray visiongecko runs
javascript from a variety of different sources and at a variety of different privilege levels.xslt 2.0although xslt 2.0 is not natively supported in firefox, it is possible via saxon-b (java) or, more recently, saxon-ce (
javascript) to perform xslt 2.0.xtfthe extensible tag framework (xtf) allows adding support for new namespaces using xpcom components to mozilla (written in
javascript or c++).
Building a Thunderbird extension 1: introduction
thunderbird is a community managed open-source email application.
...ll show you how to build your own.
...ial has the following pages: introduction (this page) the extension filesystem (setting up your local system) install manifest (the install.rdf file that contains meta-information about the extension) chrome manifest (list of packages and overlays) xul (the xml user interface language that is used to modify the thunderbird user interface) adding
javascript (explains how to add some simple
javascript to your thunderbird extension) installing locally (enabling the extension on your local thunderbird instance) packaging (making a distribution package that contains the extension) distributing (from your own site or from http://addons.mozilla.org/) this tutorial is compatible with thunderbird versions 2,3 and 5.
...mized for writing code (also known as an integrated development environment).
customDBHeaders Preference
in the latest code!
...threadcols"> <splitter class="tree-splitter" /> <treecol id="colsuperfluous" persist="hidden ordinal width" currentview="unthreaded" flex="1" label="superfluous" tooltiptext="click to sort by superfluous" /> </treecols> </tree> </overlay> you should insure that whatever id you use for the treecol you're adding matches the reference from your
javascript code (i.e.
...s" persist="hidden ordinal width" currentview="unthreaded" flex="1" label="superfluous" tooltiptext="click to sort by superfluous" /> </treecols> </tree> </overlay> you should insure that whatever id you use for the treecol you're adding matches the reference from your
javascript code (i.e.
...ex="1" label="superfluous" tooltiptext="click to sort by superfluous" /> </treecols> </tree> </overlay> you should insure that whatever id you use for the treecol you're adding matches the reference from your
javascript code (i.e.
Add to iPhoto
this extension for mac os x serves as a demonstration of how to use js-ctypes to call mac os x carbon, core foundation, and other system frameworks from an extension written entirely in
javascript.
...rom three system frameworks.
...sic cftype routines handle memory management, dumping cftype objects to the console, comparing cftype values, and so forth.
... callback routines exported by core foundation using the syntax corefoundation.kcftypearraycallbacks.address().
Using C struct and pointers
in this example, we show how to use c structs and pointers with js-ctypes.
...eter of this method is the name of the type, which corresponds to the name of the c struct.
...second parameter is an array of field descriptors.
... must be specified.
Introduction to DOM Inspector - Firefox Developer Tools
er binding, the binding menulist will list them in descending order to to "root" binding.
...ing.
...css rules that are applied to the node.
...pages and interfaces were exactly the aspects of your own application development that were missing.
Call Tree - Firefox Developer Tools
the call tree tells you which
javascript functions the browser spent the most time in.
...ells you which
javascript functions the browser spent the most time in.
...ame program - the same profile, in fact - in the documentation page for the flame chart.
...rm data cost is coming from repeated calls to console.log(): function sort(unsorted) { console.log(bubblesort(unsorted)); console.log(selectionsort(unsorted)); console.log(quicksort(unsorted)); } it would certainly be worthwhile considering more efficient ways of implementing this.
Background Tasks API - Web APIs
(also referred to as the background tasks api or simply the requestidlecallback() api) provides the ability to queue tasks to be executed automatically by the user agent when it determines that there is free time to do so.
... pending updates to the document currently being displayed, runs any
javascript code the page needs to run, accepts events from input devices, and dispatches those events to the elements that should receive them.
...fer the new requestidlecallback() and cancelidlecallback() methods.
...bel { display: inline-block; } .counter { text-align: right; padding-top: 4px; float: right; } .button { padding-top: 2px; padding-bottom: 4px; width: 100px; display: inline-block; float: left; border: 1px solid black; cursor: pointer; text-align: center; margin-top: 0; color: white; background-color: darkgreen; } #progress { width: 100%; padding-top: 6px; }
javascript content now that the document structure is defined, construct the
javascript code that will do the work.
CanvasRenderingContext2D.arcTo() - Web APIs
e way to think about arcto() is to imagine two straight segments: one from the starting point to a first control point, and another from there to a second control point.
...oint one ctx.arc(50, 20, 5, 0, 2 * math.pi); // control point two ctx.fill(); result in this example, the path created by arcto() is thick and black.
...point(p2); ctx.stroke(); result result of a large radius if you use a relatively large radius, the arc may appear in a place you didn't expect.
...180,130, 110,130, 130); ctx.lineto(110, 130); ctx.stroke(); result live demo more sophisticated demo of the method.
Canvas API - Web APIs
the canvas api provides a means for drawing graphics via
javascript and the html <canvas> element.
... among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.
...ays simple to use.
...ctor graphics scripting framework that runs on top of the html5 canvas.
console.assert() - Web APIs
sertion is false.
... obj1 [, obj2, ..., objn]); console.assert(assertion, msg [, subst1, ..., substn]); // c-like message formatting parameters assertion any boolean expression.
...// c-like message formatting parameters assertion any boolean expression.
...epresentations of each of these objects are appended together in the order listed and output.
console.log() - Web APIs
the console method log() outputs a message to the web console.
... the console method log() outputs a message to the web console.
...ch of these objects are appended together in the order listed and output.
...warned that if you log objects in the latest versions of chrome and firefox what you get logged on the console is a reference to the object, which is not necessarily the 'value' of the object at the moment in time you call console.log(), but it is the value of the object at the moment you open the console.
Using files from web applications - Web APIs
const fileselect = document.getelementbyid("fileselect"), fileelem = document.getelementbyid("fileelem"); fileselect.addeventlistener("click", function (e) { if (fileelem) { fileelem.click(); } }, false); you can style the new button for opening the file picker as you wish.
... css: .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* separate rule for compatibility, :focus-within is required on modern firefox and chrome */ input.visually-hidden:focus + label { outline: thin dotted; } input.visually-hidden:focus-within + label { outline: thin dotted; } there is no need to add
javascript code to call fileelem.click().
... we're using a generic mime type; you may or may not need to set the mime type at all depending on your use case.
...on the client side, demonstrates asynchronous uploading of a file.
Working with the History API - Web APIs
tate event.
...s one important exception: after using history.pushstate(), calling history.back() does not raise a popstate event.
... through gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2), the passed object is serialized using json.
...f objects to be safely passed.
Basic concepts - Web APIs
ables representing collections of rows and columns.
...an be generated using a generator.
...after the key has been generated, it can then be stored in the value using the key path or it can also be used as a key.
...ed.
Checking when a deadline is due - Web APIs
e current moment.
...break; case "february": var monthnumber = 1; break; // other lines removed from listing for brevity case "december": var monthnumber = 11; break; default: alert('incorrect month entered in database.'); } the first thing we do is convert the month names we have stored in the database into a month number that
javascript will understand.
...hnumber = 1; break; // other lines removed from listing for brevity case "december": var monthnumber = 11; break; default: alert('incorrect month entered in database.'); } the first thing we do is convert the month names we have stored in the database into a month number that
javascript will understand.
...e current time and date segments that we want to check against the indexeddb stored values all assembled, it is time to perform the checks.
Timing element visibility with the Intersection Observer API - Web APIs
yle: solid; border-width: 1px; } .ad:not(:last-child) { margin-bottom: 8px; } .ad h2 { margin-top: 0; } .ad div { position: relative; float: right; padding: 0 4px; height: 20px; width: 120px; font-size: 14px; bottom: 30px; border: 1px solid black; background-color: rgba(255, 255, 255, 0.5); } there's nothing magic in here.
... .ad:not(:last-child) { margin-bottom: 8px; } .ad h2 { margin-top: 0; } .ad div { position: relative; float: right; padding: 0 4px; height: 20px; width: 120px; font-size: 14px; bottom: 30px; border: 1px solid black; background-color: rgba(255, 255, 255, 0.5); } there's nothing magic in here.
...e ad last became visible.
...tstarted is non-zero—meaning the timer is currently running, we compute the difference between the current time and the start time to determine the number of milliseconds the timer has been visible since the last time it became visible.
PromiseRejectionEvent - Web APIs
the promiserejectionevent interface represents events which are sent to the global script context when
javascript promises are rejected.
...-baseline="middle">promiserejectionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor promiserejectionevent() creates a promiserejectionevent event, given the type of event (unhandledrejection or rejectionhandled) and other details.
... also inherits properties from its parent event.
...serejectionevent.reason read only a value or object indicating why the promise was rejected, as passed to promise.reject().
Using Service Workers - Web APIs
lication cache is a douchebag for more details.
...(its argument is the request.response contained inside the promise’s resolve method); in the rejected case we return an error to the console.
...access the resolved promise values, we then access this function as you’d then expect (see app.js lines 60-64).
... succeeded.
Streams API concepts - Web APIs
the streams api adds a very useful set of tools to the web platform, providing objects allowing
javascript to programmatically access streams of data received over the network and process them as desired by the developer.
... a very useful set of tools to the web platform, providing objects allowing
javascript to programmatically access streams of data received over the network and process them as desired by the developer.
... may change over time.
... in a serviceworker if you want to fetch a response from the server and stream it to the browser, but also stream it to the serviceworker cache.
Streams API - Web APIs
the streams api allows
javascript to programmatically access streams of data received over the network and process them as desired by the developer.
...cepts and usage streaming involves breaking a resource that you want to receive over a network down into small chunks, then processing it bit by bit.
...etimes you'll see images display gradually as more is loaded.
...never been available to
javascript before.
Data in WebGL - Web APIs
shader programs have access to three kinds of data storage, each of which has a specific use case.
...ble.
...storage available in glsl, each of which with its own purpose and use cases: attributes, varyings, and uniforms.
...ertexattribarray( vcolor ); //glsl attribute vec4 vcolor; void main() { fcolor = vcolor; } varyings varyings are variables that are declared by the vertex shader and used to pass data from the vertex shader to the fragment shader.
WebGL: 2D and 3D graphics for the web - Web APIs
webgl (web graphics library) is a
javascript api for rendering high-performance interactive 3d and 2d graphics within any compatible web browser without the use of plug-ins.
... that introduces the basics of webgl.
...l fundamentals a basic tutorial with fundamentals of webgl.
...2d webgl renderer.
Web Authentication API - Web APIs
only intended to provide an overview.
... data associated with each action.
...2 - similar to figure 1, a diagram showing the sequence of actions for a web authentication and the essential data associated with each action.
...account during the registration call.
XMLHttpRequest - Web APIs
r method calls.
...nd authentication headers.
...request.
...theader() sets the value of an http request header.
ARIA: alert role - Accessibility
s are assertive live regions.
...he message.
...ger an alert is by adding role="alert" to an element that has display: none; by default.
...een reader to read out the content.
ARIA: figure role - Accessibility
taining reference text serving as a caption.
...ption.
...l, you can add the label directly as a value on the aria-label on the element with the figure role or on the <figure> element.
... order — music, cats, nature, and ice cream"> <pre><code> let awesome = ['music', 'cats', 'nature', 'ice cream']; </code></pre> <p id="figure-1">figure 1: the four layers of awesome.</p> </div> best practices only use role="figure" if you have to — for example if you don't have control over your html but are able to improve accessibility dynamically after the fact with
javascript.
ARIA: tab role - Accessibility
s and optionally activates the next tab in the tab list.
...ast tab in the tab list it activates the first tab.
...with our tablist having an aria-label to label it for assistive technology.
...x solid grey; border-bottom: 0; padding: 0.2em; } [role="tab"][aria-selected="true"] { z-index: 3; } [role="tabpanel"] { position: relative; padding: 0 0.5em 0.5em 0.7em; border: 1px solid grey; border-radius: 0 0 5px 5px; background: white; z-index: 2; } [role="tabpanel"]:focus { border-color: orange; outline: 1px solid orange; } there are two things we need to do with
javascript: we need to change focus and tab index of our tab elements with the right and left arrows, and we need to change the active tab and tabpanel when we click on a tab.
CSS Animations tips and tricks - CSS: Cascading Style Sheets
he "box" class is the basic description of the box's appearance, without any animation information included.
...the box's appearance, without any animation information included.
...cut to its next state.
...e: make your animation as self-contained as possible.
Using CSS transitions - CSS: Cascading Style Sheets
av> then we build the css to implement the look and feel of our menu.
...dding the element to the dom using .appendchild() removing an element's display: none; property.
...state had never occurred and the element was always in its final state.
...y a window.settimeout() of a handful of milliseconds before changing the css property you intend to transition to.
Printing - Developer guides
red.
...atically close a popup window when finished if you want to be able to automatically close a popup window (for example, the printer-friendly version of a document) after the user prints its contents, you can use code like this: <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>
javascript window close example </title> <script type="text/
javascript"> function popuponclick() { my_window = window.open('', 'mywindow', 'status=1,width=350,height=150'); my_window.document.write('<html><head><title>print me</title></head>'); my_window.document.write('<body onafterprint="self.close()">'); my_window.document.write('<p>when you print this window, it will close afterward.</p>'); my_window.document.write('</body></htm...
...ose()">'); my_window.document.write('<p>when you print this window, it will close afterward.</p>'); my_window.document.write('</body></html>'); } </script> </head> <body> <p>to try out the <code>afterprint</code> event, click the link below to open the window to print.
...to print an external page without opening it, you can utilize a hidden <iframe> (see: htmliframeelement), automatically removing it after the user prints its contents.
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
ou know what css properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color.
...r.
...hich we'll output some text from our
javascript code.
...t"></p> </div> css the css simply establishes a size for the box and some basic styling for appearances.
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
s only supported by mozilla-based browsers; use the standardized canvas.getcontext('2d', { alpha: false }) instead.
...vas using css versus html the displayed size of the canvas can be changed using css, but if you do this the image is scaled during rendering to fit the styled size, which can make the final graphics rendering end up being distorted.
... note: exceeding the maximum dimensions or area renders the canvas unusable — drawing commands will not work.
...imum dimensions or area renders the canvas unusable — drawing commands will not work.
<input type="file"> - HTML: Hypertext Markup Language
<input> elements with type="file" let the user choose one or more files from their device storage.
... value a file input's value attribute contains a domstring that represents the path to the selected file(s).
...d in fact is defined in the spec.
...7f9ccb; padding: 5px 10px; border-radius: 5px; border: 1px ridge black; font-size: 0.8rem; height: auto; } form label:hover, form button:hover { background-color: #2d5ba3; color: white; } form label:active, form button:active { background-color: #0d3f8f; color: white; } this is similar to what we've seen before — nothing special to comment on.
<input type="password"> - HTML: Hypertext Markup Language
ed, or an invalid value is specified, the password input has no minimum length.
...laceholder attribute if you can.
..."pin">pin:</label> <input id="pin" type="password" inputmode="numeric" minlength="4" maxlength="8" size="8"> selecting text as with other textual entry controls, you can use the select() method to select all the text in the password field.
...uire that the value be at least nine and no more than 12 characters (the former without separating characters between the groups of digits and the latter with them).
<input type="time"> - HTML: Hypertext Markup Language
pup().
... a look at the html.
...above.
...position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the best way to deal with times in forms in a cross-browser way, for the time being, is to get the user to enter the hours and minutes (and seconds if required) in separate controls (<select> elements are popular; see below for an example), or use
javascript libraries such as the jquery timepicker plugin.
<input type="week"> - HTML: Hypertext Markup Language
o start?</label> <input id="week" type="week" name="week" value="2017-w01"> one thing to note is that the displayed format may differ from the actual value, which is always formatted yyyy-www.
... if the value of the element is less than this, the element fails constraint validation.
...ing the input (and it's certainly not intuitive).
...week">week:</label> <select id="fallbackweek" name="week"> </select> </span> <span> <label for="year">year:</label> <select id="year" name="year"> <option value="2017" selected>2017</option> <option value="2018">2018</option> </select> </span> </div> </div> </form> the week values are dynamically generated by the
javascript code below.
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
warning: avoid giving form elements a name that corresponds to a built-in property of the form, since you would then override the predefined property or method with this reference to the corresponding input.
... to render.
...default form elements that are the default in a group of related elements.
...case letters): </label> <input type="text" name="name" id="name" required pattern="[a-za-z]+"> <button>submit</button> </form> the basic html form validation features will cause this to produce a default error message if you try to submit the form with either no valid filled in, or a value that does not match the pattern.
CSP: form-action - HTTP
filesystem from source directives.
...lar methods for creating code from strings.
... in the violation report.
...'"> apache configuration <ifmodule mod_headers.c> header set content-security-policy "form-action 'none'; </ifmodule> nginx configuration add_header content-security-policy "form-action 'none';" violation case using a <form> element with an action set to inline
javascript will result in a csp violation.
CSP: navigate-to - HTTP
filesystem from source directives.
...lar methods for creating code from strings.
..., any allow-list or source expressions such as 'self' or 'unsafe-inline' are ignored.
...ample' requires a sample of the violating code to be included in the violation report.
CSP: style-src - HTTP
filesystem from source directives.
...lar methods for creating code from strings.
...heet" type="text/css" /> <style> #inline-style { background: red; } </style> <style> @import url("https://not-example.com/styles/print.css") print; </style> as well as styles loaded using the link header: link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet inline style attributes are also blocked: <div style="display:none">foo</div> as well as styles that are applied in
javascript by setting the style attribute directly, or by setting csstext: document.queryselector('div').setattribute('style', 'display:none;'); document.queryselector('div').style.csstext = 'display:none;'; however, styles properties that are set directly on the element's style property will not be blocked, allowing users to safely manipulate styles via
javascript: document.queryselector('div').style.di...
...ryselector('div').setattribute('style', 'display:none;'); document.queryselector('div').style.csstext = 'display:none;'; however, styles properties that are set directly on the element's style property will not be blocked, allowing users to safely manipulate styles via
javascript: document.queryselector('div').style.display = 'none'; these types of manipulations can be prevented by disallowing
javascript via the script-src csp directive.
Index - HTTP
r the accept-ranges response http header is a marker used by the server to advertise its support of partial requests.
...x for the requested resource similar to the <iframe> sandbox attribute.
...is a way to say that the webmasters knew what they were doing.
...ection http, reference, security, xss, header the http x-xss-protection response header is a feature of internet explorer, chrome and safari that stops pages from loading when they detect reflected cross-site scripting (xss) attacks.
Web media technologies
cle lists the various apis with links to documentation you may find helpful in mastering them.
...e from
javascript as htmlaudioelement objects.
...d as a way to link media apis with other html and dom technologies, including <canvas> (for frame grabbing and manipulation), for example.
...eo> element to provide a reference to a webvtt format subtitle or caption track to be used when playing the media.
Animation performance and frame rate - Web Performance
animation on the web can be done via svg,
javascript, including <canvas> and webgl, css animation, <video>, animated gifs and even animated pngs and other image types.
...rom one property to another, and animating expensive css properties can result in jank as the browser struggles to hit a smooth frame rate.
...se tools you can measure an application's animation frame rate, and diagnose performance bottlenecks if any are found.
...t the elements to the screen.
Using custom elements - Web Components
ow custom elements are created in more detail.
...name, and then the class name that defines its functionality: customelements.define('popup-info', popupinfo); it is now available to use on our page.
... object that details what element our custom element inherits from: customelements.define('expanding-list', expandinglist, { extends: "ul" }); using the built-in element in a web document also looks somewhat different: <ul is="expanding-list"> ...
...re when an attribute changes, you have to observe the attributes.
Introduction - XSLT: Extensible Stylesheet Language Transformations
introduction with modern browsers supporting xslt, developers can now use
javascript to access the power that xslt provides.
... introduction with modern browsers supporting xslt, developers can now use
javascript to access the power that xslt provides.
...sting document.
... information without any presentation data, it can load quickly even on dialup.
Setting Parameters - XSLT: Extensible Stylesheet Language Transformations
setting parameters while running transformations using precoded .xsl and .xml files is quite useful, configuring the .xsl file from
javascript may be even more useful.
... setting parameters while running transformations using precoded .xsl and .xml files is quite useful, configuring the .xsl file from
javascript may be even more useful.
...ns using precoded .xsl and .xml files is quite useful, configuring the .xsl file from
javascript may be even more useful.
...removeparameter().
Loading and running WebAssembly code - WebAssembly
to use webassembly in
javascript, you first need to pull your module into memory before compilation/instantiation.
...t statements, thus there is not a path to have the browser fetch modules for you using imports.
...case we want to cache it, share it with another worker or window via postmessage(), or simply create more instances.
...nstance.exports.exported_func(); // or access the buffer contents of an exported memory: var i32 = new uint32array(obj.instance.exports.memory.buffer); // or access the elements of an exported table: var table = obj.instance.exports.table; console.log(table.get(0)()); }) note: for more information on how exporting from a webassembly module works, have a read of using the webassembly
javascript api, and understanding webassembly text format.
Interacting with page scripts - Archive of obsolete content
by default, content scripts loaded by add-ons and scripts loaded by web pages are insulated from each other: content scripts can't interact directly with page scripts or access
javascript objects they create page scripts can't interact directly with content scripts or access objects they create.
... and page scripts sharing objects with page scripts there are two possible cases here: a content script might want to access an object defined by a page script a content script might want to expose an object to a page script access objects defined by page scripts to access page script objects from content scripts, you can use the global unsafewindow object.
...ata.url("page.html") var pagemod = mod.pagemod({ include: pageurl, contentscriptfile: self.data.url("content-script.js"), contentscriptwhen: "ready" }) tabs.open(pageurl); the target web page "page.html" includes a button and a page script: <html> <head> <meta charset="utf-8"> </head> <body> <input id="message" type="button" value="send a message"/> <script type="text/
javascript" src="page-script.js"></script> </body> </html> the content script "content-script.js" adds an event listener to the button, that sends a custom event containing a message: var messenger = document.getelementbyid("message"); messenger.addeventlistener("click", sendcustomevent, false); function sendcustomevent() { var greeting = {"greeting" : "hello world"}; var event = new customevent("a...
Content Scripts - Archive of obsolete content
entscriptfile: [data.url("jquery.min.js"), data.url("my-content-script.js")] }); if you do this, the scripts can interact directly with each other, just like scripts loaded by the same web page.
....alert(self.options.message);', contentscriptoptions: {"message" : "hello world"} }); }); any kind of jsonable value (object, array, string, etc.) can be used here.
...s the dom of a page, of course, just like any scripts that the page has loaded (page scripts).
Modules - Archive of obsolete content
a module is a self-contained unit of code, which is usually stored in a file, and has a well defined interface.
... provided by the sdk.
...ded using cuddlefish by default.
Private Properties - Archive of obsolete content
a private property is a property that is only accessible to member functions of instances of the same class.
... too restrictive: since there is no way to access variables in one closure from within another closure, there is no way for objects of the same class to access each other's private properties.
...instance of point and its internal namespace.
Two Types of Scripts - Archive of obsolete content
on the web,
javascript executes in the context of a web page, and has access to that page's dom content.
...b page, and has access to that page's dom content.
...ate files you should store them under the data directory under your add-on's root.
Guides - Archive of obsolete content
ing the code, opening/taking a bug, filing a patch, getting reviews, and getting help.
...w sandboxes and compartments can be used to improve security, and about the built-in sdk module loader, known as cuddlefish.
...es the sdk was designed to work in an environment where the code to manipulate web content runs in a different process from the main add-on code.
ui - Archive of obsolete content
icon gets a "pressed" look when the button is checked.
... or its show() method: frame a frame enables you to create an html iframe, using bundled html, css and
javascript.
...}); var toolbar = ui.toolbar({ title: "player", items: [previous, next, play, frame] }); the toolbar appears just above the content window: sidebar a sidebar gives you a vertical strip of space for presenting complex user interfaces.
frame/utils - Archive of obsolete content
reate(window.document); optionally create can be passed set of options to configure created frame even further.
...possible values see documentation on mdn uri string uri of the document to be loaded into the new frame.
... uri string uri of the document to be loaded into the new frame.
JS XPCOM - Archive of obsolete content
here are a few useful snippets of code for dealing with xpcom components in
javascript.
...ntract ids a contract id is a unique name for an xpcom object.
...e interface on it.
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
p(this, document, window); } }, null ] ]; var capturednodes = {}; var toolbox = doc.getelementbyid("navigator-toolbox"); var palette = toolbox.palette; var domfragment = jsontodom(jsontemplatebtn, document, capturednodes); palette.appendchild(domfragment); alert("capturednodes contains any created nodes that have optionally been captured (for later convenient
javascript access) by giving them a 'key' attribute; for example: " + capturednodes.mytestbutton123); another example this here is another example of using jsontodom but in the html scope, a complex form is created with ease.
...) + "(" + [string.quote(href), uneval(otherstuff)] + ")"; } safely using remote html in the above cases, we're working with text content that needs to appear in generated dom.
... for webextensions the most simple way is sanitize the output about
javascript inline declaration and other wrong content.
XUL user interfaces - Archive of obsolete content
l (xml user-interface language, usually pronounced like "zool").
...l document as a plain text file, doc7.xul.
... status.removeattribute("warning") status.setattribute("label", adate.tolocaledatestring()) } } to see the result exactly as intended, use the default theme in your browser.
Case Sensitivity in class and id Names - Archive of obsolete content
summary: although css is itself case-insensitive, class and id names are defined to be case-sensitive in html 4.01.
...known as dhtml) routines, it is a near-certainty that class and id names will be used to identify elements.
...warning and warning are two different identifiers, because html 4.01 defines class and id names to be case-sensitive.
DTrace - Archive of obsolete content
e-dtrace (on mac os x you also have to use at least the 10.5 sdk for --with-macos-sdk, unlike the common configuration that uses the 10.4 sdk).
...st the 10.5 sdk for --with-macos-sdk, unlike the common configuration that uses the 10.4 sdk).
... your code.
Dehydra Function Reference - Archive of obsolete content
ollowing functions are provided by dehydra and may be called by the user: print(msg) print a string to stdout (or stderr if the compiler is piping output).
... included file into the _includedarray in the current namespace.
...ath used by include().
Firefox Sync - Archive of obsolete content
components and services sync refers to a family of related components and services which provide synchronization of data between mozilla application instances.
... for these specifications is http://docs.services.mozilla.com/.
... status for information on the current development status of sync including how to get involved, see https://wiki.mozilla.org/services/sync.
Introducing the Audio API extension - Archive of obsolete content
lable, it triggers a loadedmetadata event.
...it's important to note that the samples are not separated by channels; they are all delivered together.
....]; var numbersampleswritten = audiooutput.mozwriteaudio(samples); // write samples using a typed array var samples = new float32array([0.242, 0.127, 0.0, -0.058, -0.242, ...]); var numbersampleswritten = audiooutput.mozwriteaudio(samples); in the following example, we create an audio pulse: <!doctype html> <html> <head> <title>generating audio in real time</title> <script type="text/
javascript"> function playtone() { var output = new audio(); output.mozsetup(1, 44100); var samples = new float32array(22050); for (var i = 0; i < samples.length ; i++) { samples[i] = math.sin( i / 20 ); } output.mozwriteaudio(samples); } </script> </head> <body> <p>this demo plays a one second tone when you click the button below.<...
generateCRMFRequest() - Archive of obsolete content
sizen, "keyparamsn", "keygenalgn"); this method will generate a sequence of crmf requests that has n requests.
...d.
..." "ec-dual-use" "ec-sign" "ec-sign-nonrepudiation" "ec-nonrepudiation" the generatecrmfrequest() method will cause the user to be presented with a key generation dialog.
Priority Content - Archive of obsolete content
he mirror and see anything there that you think should be migrated to devmo that isn't on this list, feel free to add it below.
... think should be migrated to devmo that isn't on this list, feel free to add it below.
...on this list, feel free to add it below.
RDF Datasource How-To - Archive of obsolete content
this article is at least partially outdated.
...t is used to build content from the graph.
...tree element, http://foo.bar.com/, the graph will be traversed and content will be constructed using the pattern specified within the template tags.
File object - Archive of obsolete content
warning: this section describes the file component of the spidermonkey
javascript interpreter.
... warning: this section describes the file component of the spidermonkey
javascript interpreter.
...le = new file("myfile.txt"); file.open("write,create", "text"); file.writeln("the quick brown fox jumped over the lazy dogs"); file.close(); example: reading from a file var data; var file = new file("myfile.txt"); file.open("read", "text"); data = file.readln(); file.close(); example: sending mail through a pipeline var mail = new file("|/usr/lib/sendmail foo@bar.com"); mail.writeln("i love
javascript.\npipe support is especially good!"); mail.close(); ...
Tamarin - Archive of obsolete content
tamarin is a
javascript engine written in c++.
... tamarin is a
javascript engine written in c++.
...he changes, and what can be done to adapt source code to the changes.
Treehydra Manual - Archive of obsolete content
introduction treehydra is meant to be used for analyses that need more detail than dehydra's flattened asts.
... dehydra, treehydra relies on gimple, the gcc internals "middle-end" intermediate representation.
..._function(fn)) { // fn has a body print(fn); let cfg = function_decl_cfg(fn); } } gimple reference for a detailed description of gimple see gcc/tree.def and gcc/cp/operators.def see also treehydra.js, gcc_compat.js, gcc_util.js, and gcc_print.js in the treehydra libs directory, which have many ports of gcc macros and other functions for conveniently accessing gimple data in
javascript.
A XUL Bestiary - Archive of obsolete content
springs.
... description above that event handlers can be written for events that are fired somewhere below them in the hierarchy.
...ices of an object without knowing anything about implementation.
Building accessible custom components in XUL - Archive of obsolete content
n cells.) that means that we don't want to make every label and description element focusable.
...t_click, true); } function spreadsheet_focus(e) { if (e.target.tagname == 'grid') { if (!gfocuscell) { gfocuscell = e.target.getelementsbytagname('label')[0]; } gfocuscell.focus(); } else { gfocuscell = e.target; } } function spreadsheet_click(e) { e.target.focus(); } </code> finally, we'll add two lines to our .xul file to link in the
javascript file (accjax.js) and call the install_handlers function when the spreadsheet is loaded.
...dow id="accjax" title="accjax spreadsheet" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:x2="http://www.w3.org/tr/xhtml2" xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/guiroletaxonomy#" xmlns:waistate="http://www.w3.org/2005/01/wai-rdf/guistatetaxonomy#" onload="install_handlers()" > <script src="accjax.js"/> </code> by adding this
javascript code and these css rules, we can tab to the spreadsheet see which cell, row header, or column header has focus click on other cells or headers to change focus within the spreadsheet tab off the spreadsheet by pressing tab once tab back to the spreadsheet and automatically set focus to the previously focused cell or header inspect32 confirms that all of this really works; it's not just visual sm...
Creating a Window - Archive of obsolete content
window as opposed to a new window, but this is often sufficient during the early stages of development.
... has.
...ontains the flag "chrome" as in this example window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300"); if you are using firefox, try below: window.open("chrome://browser/content/places/places.xul", "bmarks", "chrome,width=600,height=300"); you can test lines of
javascript like these in the error console.
XUL Structure - Archive of obsolete content
files, access preferences and bookmarks and perform other privileged operations.
...de xul code in a similar way, but, of course, the xul for the application will be included as part of the installation, instead of having to be installed separately as an extension.
...onvention to make the parts of a package clearer.
tree - Archive of obsolete content
t.
...e the dom element corresponding to a given a row index and vice versa.
... #eeeeee; } treechildren::-moz-tree-row(odd, selected) { background-color: #ffffaa; } treechildren::-moz-tree-cell-text(selected) { color: #000000; } treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; } treechildren::-moz-tree-row(hover) {background-color: #ffffaa !important;} treechildren:-moz-tree-column { border-right:1px solid rgb(220,220,220) !important; } the
javascript to get the text for the selected row/rows: function getrowcellvalues() { var tree = document.getelementbyid('mytree'); for (var i = 0; i < tree.view.rowcount; i++) { if (tree.view.getcellvalue(i, tree.columns.getcolumnat(0)) == 'true'){ alert(tree.view.getcelltext(i, tree.columns.getnamedcolumn("name"))); } } } this way, you can get the tree cell values of the selected ch...
Dialogs in XULRunner - Archive of obsolete content
ve dialogs are good examples of these.
... my eye about dialog is the button-related attributes on the element.
...log; see also creating dialogs at mozillazine knowledge base: buttons a comma separated list of buttons to show on dialog (accept, cancel, help, extra1, and extra2).
XULRunner Hall of Fame - Archive of obsolete content
rams and gui prototyping that everyone can use.
... patches lotus notes / sametime the latest version of ibm lotus notes and sametime can embed xul application.
...ython-hulahop is required python-hulahop from the olpc sugarlabs a python gtk widget with xulrunner embedded, providing full access to nsi dom and all other xulrunner interfaces, in a gtk window.
XULRunner tips - Archive of obsolete content
.in as in browser/fuel/src/makefile.in rebuild...
...tions above through "unzip the package." create a file in the extensions directory of your application with the same name as the dom inspector id (inspector@mozilla.org) containing one line of text -- the exact path to the root directory of dom inspector (where the install.rdf is) like this one: /home/username/.mozilla/firefox/numbersandletters/extensions/inspector@mozilla.org/ now create a
javascript file with the following code and include it in the main window of your application: function startdomi() { // load the window datasource so that browser windows opened subsequent to dom // inspector show up in the dom inspector's window list.
...ozilla extensions, and each application (firefox, thunderbird) simply contains a few small, one line files pointing to the location of the extensions.
nsIContentPolicy - Archive of obsolete content
supports aextra, in nsiprincipal arequestprincipal); constants content types constant value description type_other 1 indicates content whose type is unknown, or is not interesting outside a limited use case.
...nters of this method must not do any of the following: modify the dom in any way (e.g., setting attributes is a no-no).
...e notifications, you must register your plugin with nsicategorymanager.
JS-Engine FAQ - Archive of obsolete content
ser which makes it available to script in the browser using xpconnect.
...en rhino js and native java rhino js is significantly slower in run-time than native java.
...ower in run-time than native java.
2006-12-08 - Archive of obsolete content
summary: mozilla.dev.tech.xpcom - dec 02- dec 08, 2006 announcements none during this week.
... summary: mozilla.dev.tech.xpcom - dec 02- dec 08, 2006 announcements none during this week.
...ith trying to call back from c++ to a
javascript object using an interface the developer created with an idl.
Settings - Archive of obsolete content
debugger has its own settings menu, which you can access from an icon in the toolbar: each setting is a simple on/off switch: auto prettify minified sources with this option enabled, the debugger will automatically detect minified js files and pretty-print them.
...e behavior you want.
...properties.
E4X for templating - Archive of obsolete content
t in firefox 16, disabled by default for chrome in firefox 17, and removed in firefox 18.
...ng the power and readability of templating languages such as smarty for php (though admittedly without the currently wider cross-browser support of xslt or the strictly-xml approach of phptal or seethrough templating).
... ret += item; } else if (typeof item === 'string') { ret += new xml(item); } else { var ser = (new xmlserializer()).serializetostring(item); ret += new xml(ser); } }); return ret; } example: var fruits = <fruits> <item>pear</item> <item>banana</item> <item>grapes</item> </fruits>; alert( // using a
javascript 1.8 expression closure <output> {sort(fruits.*, function (a, b) a.text() > b.text() /* text() call may not be necessary */ )} </output>.toxmlstring() ); /* <output> <item>banana</item> <item>grapes</item> <item>pear</item> </output> */ the above utility also works if the input is an htmlcollection, an array of strings, an array of dom objects, or an array of e4x objects (assuming the...
Troubleshooting XForms Forms - Archive of obsolete content
introduction the idea of this page is to collect some solutions to some of the common errors typically made when creating an xforms form.
... of this page is to collect some solutions to some of the common errors typically made when creating an xforms form.
... </table> the xhtml modularization does not allow this.
Async scripts for asm.js - Game development
every medium or large game should compile asm.js code as part of an async script to give the browser the maximum flexibility to optimize the compilation process.
...m.js code as part of an async script to give the browser the maximum flexibility to optimize the compilation process.
...ompilation allows the
javascript engine to compile the asm.js off the main thread when the game is loading and cache the generated machine code so that the game doesn't need to be compiled on subsequent loads (starting in firefox 28).
Mobile touch controls - Game development
me development process — in the modern world, this generally also involves implementing touch controls.
...me, and enjoy playing on a mobile touch-enabled device.
...rt is fired when the user puts a finger on the screen.
BigInt - MDN Web Docs Glossary: Definitions of Web-related terms
in
javascript, bigint is a numeric data type that can represent integers in the arbitrary precision format.
... in
javascript, bigint is a numeric data type that can represent integers in the arbitrary precision format.
... in
javascript, bigint is a numeric data type that can represent integers in the arbitrary precision format.
Method - MDN Web Docs Glossary: Definitions of Web-related terms
a method is a function which is a property of an object.
... methods: instance methods which are built-in tasks performed by an object instance, or static methods which are tasks that are called directly on an object constructor.
...ich are tasks that are called directly on an object constructor.
NaN - MDN Web Docs Glossary: Definitions of Web-related terms
nan (not a number) is a numeric data type that means an undefined value or value that cannot be represented, especially results of floating-point calculations.
...ned value or value that cannot be represented, especially results of floating-point calculations.
... part of a much larger algorithm, it would be really painful to figure out where the error actually occurs.
Number - MDN Web Docs Glossary: Definitions of Web-related terms
in
javascript, number is a numeric data type in the double-precision 64-bit floating point format (ieee 754).
... in
javascript, number is a numeric data type in the double-precision 64-bit floating point format (ieee 754).
... in
javascript, number is a numeric data type in the double-precision 64-bit floating point format (ieee 754).
Object - MDN Web Docs Glossary: Definitions of Web-related terms
object refers to a data structure containing data and instructions for working with the data.
... object refers to a data structure containing data and instructions for working with the data.
... structure containing data and instructions for working with the data.
Parse - MDN Web Docs Glossary: Definitions of Web-related terms
parsing means analyzing and converting a program into an internal format that a runtime environment can actually run, for example the
javascript engine inside browsers.
..., but <script> tags—particularly those without an async or defer attribute—blocks rendering, and pauses parsing of html.
...or defer attribute—blocks rendering, and pauses parsing of html.
Signature (functions) - MDN Web Docs Glossary: Definitions of Web-related terms
a function signature (or type signature, or method signature) defines input and output of functions or methods.
...ignature (or type signature, or method signature) defines input and output of functions or methods.
...back information about the availability of the method in an object-oriented program (such as the keywords public, static, or prototype).
Truthy - MDN Web Docs Glossary: Definitions of Web-related terms
in
javascript, a truthy value is a value that is considered true when encountered in a boolean context.
... in
javascript, a truthy value is a value that is considered true when encountered in a boolean context.
... in
javascript, a truthy value is a value that is considered true when encountered in a boolean context.
Assessment: Accessibility troubleshooting - Learn web development
previous overview: accessibility in the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix.
... objective: to test basic knowledge of accessibility fundamentals.
...reable editor (as mentioned in step 1 above).
UI pseudo-classes - Learn web development
s: input[type="text"]:disabled { background: #eee; border: 1px solid #ccc; } .disabled-label { color: #aaa; } we've directly selected the inputs we want to disable using input[type="text"]:disabled, but we also wanted to gray out the corresponding text labels.
...their choices.
...rent — client-side form validation.
Getting started with the Web - Learn web development
you, html basics provides enough information to make you familiar with html.
...ovides enough information to make you familiar with html.
...background images and colors should be used to decorate your website?
HTML text fundamentals - Learn web development
is software provides ways to get fast access to given text content.
...e various techniques used, they provide an outline of the document by reading out the headings, allowing their users to find the information they need quickly.
...le by search engines and screen readers (as mentioned above).
Test your skills: Events - Learn web development
load the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... out the answer (or into the browser's
javascript console, in the case of the downloadable version).
...ou to do some research into what dom apis you need to successfully answer the questions.
Arrays - Learn web development
in the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name.
... data items under a single variable name.
... test your skills!
What is web performance? - Learn web development
le start after it has started loading is called time to interactive.
...ing the performance, to ensure that what you've optimized stays optimized.
...e'll look at perceived performance, and how you can use some clever techniques to make some unavoidable performance hits appear less severe to the user, or disguise them completely.
Client-Server Overview - Learn web development
for success, "404 not found" if the resource cannot be found, "403 forbidden" if the user isn't authorised to see the resource, etc).
...t location.
...ion returns the generated html to the web browser (via the web server), along with an http status code of 200 ("success").
Starting our Svelte Todo list app - Learn web development
previous overview: client-side
javascript frameworks next now that we have a basic understanding of how things work in svelte, we can start building our example app: a todo list.
...l go on to in subsequent articles.
...to start your app in development mode.
Accessibility API cross-reference
alert_low n/a n/a n/a this object is changing or moving rapidly animated n/a n/a n/a indicates that the user input is currently directed to that object and it is "armed for selection." example: a highlighted menu item or a pressed push button.
...for anything that's not a menu is poor n/a n/a aria-haspopup the item can get the keyboard focus focusable focusable focusable tabindex attribute with value of 0 or more the item has focus for text input.
...ed n/a aria-disabled=true disabled (boolean attribute) especially used for sliders and scrollbars n/a vertical vertical aria-orientation=vertical accessible events msaa event (event_object_*, event_system_*) java accessibility event gnome accessibility signals mac os x accessibility event description & notes
javascript relevant xul focus focus, focusin blur, focusout selection select state_change change (not sure if this is the same thing?) ...
Browser chrome tests
the browser chrome test suite is an automated testing framework designed to allow testing of application chrome windows using
javascript.
... the browser chrome test suite is an automated testing framework designed to allow testing of application chrome windows using
javascript.
...ould be: ./mach mochitest -f browser browser/base/content/test/ or without mach test_path=<path_to_the_tests> make -c <objdir> mochitest-browser-chrome to run tests in debugger the following should work ./mach mochitest -f browser --debugger gdb browser/base/content/test/ run ./mach help mochitest-browser for more options.
Choosing the right memory allocator
pr_smprintf_free() pl_strdup(), pl_strndup() must be freed with pl_strfree() nscrt::strdup/nscrt::strndup must be freed with nscrt::free allocating memory within plugins there are special memory allocation routines specifically intended for use from plugins, which must not be used from within mozilla itself.
...:strdup/nscrt::strndup must be freed with nscrt::free allocating memory within plugins there are special memory allocation routines specifically intended for use from plugins, which must not be used from within mozilla itself.
...ot be used from within mozilla itself.
Chrome registration
uttons to the files that describe the text, content, and appearance of the window itself.
...faces component/mycomponent.xpt [flags] instructs mozilla to load interface information from a typelib file produced by xpidl.
...d-on depends upon xbl bindings attached to content objects (that is, it needs to be able to call functions or get and set properties created by the xbl binding), you'll need to use the object's wrappedjsobject property to obtain a wrapped object.
Configuring Build Options
lt ac_add_options --enable-optimize=-o2 chooses particular compiler optimization options.
...ns in c++ and
javascript, plus other debug-only code.
... significantly slow a build, but it is invaluable when writing patches.
How Mozilla's build system works
y.
...lows the variable definition to be continued on the next line.
...fix) \ $(dist)/lib/$(lib_prefix)gkxulgrid_s.$(lib_suffix) \ $(null) include $(topsrcdir)/config/rules.mk shared_library_libs is set to a list of static libraries, which should be linked into this shared library.
Limitations of chrome scripts
ve in the content process, so they are also inaccessible: gbrowser.docshell; // null gbrowser.selectedbrowser.docshell; // null with the shim the shim will give you a cpow for the content object in these situations.
...omponents.utils.sandbox) then we'll actually make it in the content process.
...cess.
Using the Browser API
by a malicious web site.
...eb content.
...the iframe, there are some basic controls: <button> elements, a simple <form> to implement the browser controls, and a search bar.
ChromeWorker
le:// urls must first register a resource replacement path, using code like this: var fileuri = services.io.newfileuri(file); services.io.getprotocolhandler('resource').
...acement path, using code like this: var fileuri = services.io.newfileuri(file); services.io.getprotocolhandler('resource').
... setsubstitution('my-cool-addon', fileuri); var worker = new worker('resource://my-cool-addon/worker.js'); more references: you can use chromeworker from
javascript code modules.
Embedding the editor
ted the editor in a composer window is current owned by the nseditorshell, which in turn is created, owned and destroyed by the nseditorboxobject.
...elf containing an <html:iframe>).
...r; ensure that focus changes update state move editor ownership to docshell, creating nsieditorframe created the editing session api which copes with collections of editors (or make editor refocussable) open questions where should file open and save logic live?
Dict.jsm
introduced in firefox 5, this is now obsolete and has been removed in firefox 40: use es2015 map.
... introduced in firefox 5, this is now obsolete and has been removed in firefox 40: use es2015 map.
....utils.import("resource://gre/modules/dict.jsm"); creating a dictionary you can create a new, empty dictionary by simply calling the dict() constructor: var newdict = new dict(); if you wish, you may also pass in an object literal of key/value pairs with which to initialize the dictionary: var someobj = {}; var newdict = new dict({key1: "foo", key2: someobj}); note that values may be any
javascript object type.
OS.File.Info
the false is a symbolic link, false otherwise.
... on mac os x by macbirthdate.
...s per filesystem, bugzilla :: bug 1167143 explores implementing solutions for all these different filesystems) lastaccessdate the date at which the file was last accessed, as a
javascript date object.
OSFile.jsm
javascript module os.file contains primitives for manipulating files out of the main thread.
...
javascript module os.file contains primitives for manipulating files out of the main thread.
...
javascript module os.file contains primitives for manipulating files out of the main thread.
Services.jsm
the services.jsm
javascript code module offers a wide assortment of lazy getters that simplify the process of obtaining references to commonly used services.
... the services.jsm
javascript code module offers a wide assortment of lazy getters that simplify the process of obtaining references to commonly used services.
...rvice observer service perms nsipermissionmanager permission manager service ppmm nsimessagebroadcaster nsiprocessscriptloader global parent process message manager3 prefs nsiprefbranch nsiprefbranch2 nsiprefservice preferences service prompt nsipromptservice prompt service scriptloader mozijssubscriptloader
javascript subscript loader service scriptsecuritymanager nsiscriptsecuritymanager script security manager search nsibrowsersearchservice browser search service startup nsiappstartup application startup service storage mozistorageservice storage api service strings nsistringbundleservice string bundle service sysinfo nsip...
TraceMalloc
589 66478 3.67 nshtmldocument.mreferrer 177 21550 691 85460 514 63910 3.53 nshtmlvalue 139 7846 1215 68734 1076 60888 3.36 htmlcontentsink 6 4816 12 57782 6 52966 2.92 uncategorized.pl, which lists all the void* allocations (the ones that couldn't be categorized by type), sorted by size.
...can also use the leakstats program to analyze a log for shutdown leaks.
...ill produce a report like the following.
NSS Tools modutil
, and the cipher flags.
... including the pkcs #11 module library file and other files such as documentation.
...ename [-slot slotname] enabling or disabling fips 140-2 compliance within the netscape communicator internal module: -fips [true | false] disabling interactive prompts for the security module database tool, to support scripted operation: -force jar installation file when a jar file is run by a server, by the security module database tool, or by any program that does not interpret
javascript, a special information file must be included in the format described below.
Getting SpiderMonkey source code
ub.com/mozilla/gecko-dev.git cd gecko-dev/js/src if you want a faster (about 5 times as of january 2015) download, try doing a shallow clone (no version control history).
...rver:anonymous@cvs-mirror.mozilla.org:/cvsroot login when prompted, enter the password anonymous.
..., you need to check out js/src from branch but check out editline and config from trunk: cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co -l -r branch_name mozilla/js/src mozilla/js/src/fdlibm cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co -l mozilla/js/src/config mozilla/js/src/editline change branch_name to the name of the branch you want to check out.
Self-hosted builtins in SpiderMonkey
since firefox 17, spidermonkey has the ability to self-host built-in functions in
javascript.
... since firefox 17, spidermonkey has the ability to self-host built-in functions in
javascript.
...("foreach", "arrayforeach", 1,0) this causes the self-hosted function arrayforeach to be installed as the host object's method foreach.
JSExtendedClass.wrappedObject
obsolete since
javascript 1.8.5this feature is obsolete.
...text *cx, jsobject *obj); name type description cx jscontext * the context in which the object is being unwrapped.
...rappedobject.
JSObjectOps.defaultValue
obsolete since
javascript 1.8.5this feature is obsolete.
...5this feature is obsolete.
...t store the converted value here.
JSPropertyDescriptor
owing key values field name description getter the get syntax binds an object property to a function that will be called when that property is looked up.
...es an object's properties.
...y under an object in a
javascript via a descriptor.
JSRuntime
in the jsapi, jsruntime is the top-level object that represents an instance of the
javascript engine.
... in the jsapi, jsruntime is the top-level object that represents an instance of the
javascript engine.
... in the jsapi, jsruntime is the top-level object that represents an instance of the
javascript engine.
JSVAL_IS_BOOLEAN
obsolete since jsapi 32this feature is obsolete.
... obsolete since jsapi 32this feature is obsolete.
...is feature is obsolete.
JSVAL_IS_NUMBER
obsolete since jsapi 32this feature is obsolete.
... obsolete since jsapi 32this feature is obsolete.
...t may still work in some browsers, its use is discouraged since it could be removed at any time.
JSVAL_IS_VOID
obsolete since jsapi 32this feature is obsolete.
... obsolete since jsapi 32this feature is obsolete.
...eature is obsolete.
JS_ConvertValue
obsolete since jsapi 38this feature is obsolete.
... obsolete since jsapi 38this feature is obsolete.
...value to convert.
JS_EncodeString
this article covers features introduced in spidermonkey 1.8 convert a
javascript string to a c string.
...utf8(jscontext *cx, js::handlestring str); // added in spidermonkey 24 name type description cx jscontext * a context.
...destringtoutf8 encode the string to utf-8.
JS_FS
y 31 #define js_self_hosted_sym_fn(symbol, selfhostedname, nargs, flags) ...
... info, nargs, flags, selfhostedname) ...
...symbol for the function.
JS_GetFunctionArity
get the number of arguments a function expects.
...jsfunction * a
javascript function.
... as the function object's arity property, if that property has not been overwritten.
JS_GetFunctionObject
retrieves the object for a specified function.
... description js_getfunctionobject returns the
javascript function object for a specified function pointer, fun.
...oncepts: a jsobject is what is exposed to scripts and has properties and can be stored in variables; and the corresponding jsfunction contains the code of a function.
JS_GetPropertyAttrsGetterAndSetter
out parameter.
...e only difference is that on success, these functions also get the getter and setter functions for the property.
...ascript function, not a c/c++ function.
JS_GetReservedSlot
llback, then objects of that class have n reserved slots in which the application may store data.
...rved slots may contain any js::value, and the garbage collector will hold the value alive as long as the object itself is alive.
...ain private values to store pointer values (whose lowest bit is 0) or uint32_t, when non-
javascript values must be stored; the garbage collector ignores such values when it sees them.
JS_GetScopeChain
obsolete since
javascript 1.8.7this feature is obsolete.
... obsolete since
javascript 1.8.7this feature is obsolete.
...1.8.7 with no identical replacement.
JS_New
this article covers features introduced in spidermonkey 1.8 create an object as though by using the new keyword and a
javascript function.
...of arguments to pass to the constructor.
...inter to the element 0 of an array of argument values to pass to the constructor.
JS_NewDependentString
create a new
javascript string containing a range of characters from an existing string.
...equest.
... js::handlestring the string containing the characters for the new string.
JS_NewFunction
create a new
javascript function that is implemented in c/c++ as a jsnative.
... parent object for this function.
... obsolete since jsapi 39 name const char * name to assign to the new function.
JS_NewUCString
th); // obsolete since jsapi 1.8.5 name type description cx jscontext * the context in which to create the new string.
...vascript engine adopts the buffer.
...rns a new string, using the memory starting at buf and ending at buf + length as the character storage.
JS_PSGS
and js_initclass.
... the property.
...c++ implementation of the getter function.
JS_SetGCCallback
r listed.
....
...cur very early when something triggers garbage collection—before the
javascript engine has even determined whether gc should actually be done at the moment.
JS_SetProperty
cters; or -1 to indicate that name is null-terminated.
...addproperty hook is called with the arguments (cx, obj, id, &v).
...id, &v).
JS_SetVersion
obsolete since jsapi 25this feature is obsolete.
...discouraged since it could be removed at any time.
...context to use a specific version of the
javascript language.
JS_SetVersionForCompartment
this article covers features introduced in spidermonkey 31 configure a jscompartment to use a specific version of the
javascript language.
... this article covers features introduced in spidermonkey 31 configure a jscompartment to use a specific version of the
javascript language.
...ific version of the
javascript language.
JS_ValueToECMAInt32
obsolete since jsapi 28this feature is obsolete.
...ontext *cx, jsval v, int32 *ip); jsbool js_valuetoecmauint32(jscontext *cx, jsval v, uint32 *ip); jsbool js_valuetouint16(jscontext *cx, jsval v, uint16 *ip); name type description cx jscontext * the context in which to perform the conversion.
... context in which to perform the conversion.
JS_ValueToObject
converts any
javascript value to an object.
... cx jscontext * the context in which to convert the value.
...r null or a pointer to the resulting object in *objp and returns true.
JS_ValueToSource
convert a js::value to a
javascript source.
...ng * js_valuetosource(jscontext *cx, js::handle<js::value> v); name type description cx jscontext * the context in which to perform the conversion.
...ntext *cx, js::handle<js::value> v); name type description cx jscontext * the context in which to perform the conversion.
jschar
obsolete since jsapi 35this feature is obsolete.
... be removed at any time.
...will be removed in jsapi 38.
Places Developer Guide
ent covers the toolkit places services.
...as removed in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11).
...ar from_visit; try { // here we can't use the "executeasync" method since have to return a // result right-away.
FUEL
fuel is deprecated as of firefox 40 and removed as of firefox 47.
...precated as of firefox 40 and removed as of firefox 47.
...xticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage fueliapplication objects fueliannotations fueliapplication fuelibookmark fuelibookmarkfolder fuelibookmarkroots fuelibrowsertab fueliwindow xpcom although the fuel application object is preloaded into xul scripts, it is not preloaded into
javascript xpcom code.
SMILE
this article covers features introduced in seamonkey 2 smile is a
javascript library designed to help developers build extensions using terminology and interfaces that are familiar to them.
... this article covers features introduced in seamonkey 2 smile is a
javascript library designed to help developers build extensions using terminology and interfaces that are familiar to them.
...d ("steel").
extIPreferenceBranch
aname the name of a preference adefaultvalue the default value of a preference.
...e given default value if preference does not exists.
...xists.
Bundling multiple binary components
stub ("krealcomponent" in the sample).
...e).
...t 2 gecko versions on three platforms, you need seven components (6 real components + 1 stub).
Component Internals
r if you access the nsiservicemanager at that point, for example, so you may have to keep a reference-counted pointer to the service you are interested in using during this notification.
...int, for example, so you may have to keep a reference-counted pointer to the service you are interested in using during this notification.
...rary.
Components.Exception
summary components.exception is a
javascript constructor to create nsixpcexception objects.
... summary components.exception is a
javascript constructor to create nsixpcexception objects.
...in other developer-facing locations, defaulting to 'exception' result the nsresult value of the exception, which defaults to components.results.ns_error_failure stack an xpcom stack to be set on the exception (defaulting to the current stack chain) data any additional data you might want to store, defaulting to null example throw components.exception("i am throwing an exception from a
javascript xpcom component."); ...
Components.utils.schedulePreciseGC
this method lets scripts schedule a garbage collection cycle.
... this method lets scripts schedule a garbage collection cycle.
...is executed in once the scheduled garbage collection has been completed: components.utils.scheduleprecisegc( function() { // this code is executed when the garbage collection has completed } ); since the garbage collection doesn't occur until some time in the future (unlike, for example, components.utils.forcegc(), which causes garbage collection immediately but isn't able to collect all
javascript-related memory), the callback lets you know when that's been finished.
HOWTO
r script is finished, i.e.
...llbacks, put: gscriptdone = true; if you forget some condition where your script should exit but you don't add this statement, your script will hang (busy wait).
...d exit but you don't add this statement, your script will hang (busy wait).
mozIStorageConnection
hat opened the connection.
...reateasyncstatement() creates a mozistorageasyncstatement for the given sql expression.
...en in sql.
nsIDocShell
s because it can act as a password trojan.
... allowdnsprefetch boolean attribute that determines whether dns prefetch is allowed for this subtree of the docshell tree.
....0 by the way is the default of zoom.
nsIScriptError2
js/src/xpconnect/idl/nsiscripterror.idlscriptable represents
javascript errors and warnings for use by the console service; augments nsiscripterror by adding a way to initialize the error with the window id of the outer window with which the error is associated.
...twithwindowid() void init( in wstring message, in wstring sourcename, in wstring sourceline, in pruint32 linenumber, in pruint32 columnnumber, in pruint32 flags, in string category, in unsigned long long innerwindowid ); parameters message the text of the message to add to the log.
...to the log.
nsISupports proxies
owsers, its use is discouraged since it could be removed at any time.
...r.
...object which enables a method of any class which is derived from nsisupports and has a typelib to be called on any in-process thread.
nsIWindowsRegKey
ues defined above.
...rs recurse indicates whether or not to also watch child keys.
...g(); parameters none.
nsIXPConnect
l_js_exceptions environment variable will override the value passed here.
...ng description ajsobj missing description aiid missing description result missing description exceptions thrown missing exception missing description wrapnative() wrapnative() will create a new jsobject or return an existing one.
...t for the cases: 1) the xpcom object has already been wrapped for use in the same scope as an nsixpconnectwrappednative.
Troubleshooting XPCOM components registration
often the first time you create an xpcom component, it may fail to register correctly.
...tivemoduleloader:5 set nspr_log_file=c:\path\to\logfile "c:\program files\mozilla firefox\firefox.exe" examining this log for warning and errors may provide valuable clues why the component failed to load.
...s\mozilla firefox\firefox.exe" examining this log for warning and errors may provide valuable clues why the component failed to load.
Using nsIClassInfo
what is nsiclassinfo good for?
... what is nsiclassinfo good for?
... what is nsiclassinfo good for?
wrappedJSObject
wrappedjsobject is a property sometimes available on xpconnect wrappers.
...which hide any properties or methods on the component that are not part of the supported interfaces as declared in xpidl.
...nt;1"].getservice(); if we try to call the hello() method we defined in our component implementation, we get: > comp.hello(); typeerror on line 1: comp.hello is not a function this happens because, as we mentioned earlier, comp is not the helloworld js object itself, but an xpconnect wrapper around it: > dump(comp); [xpconnect wrapped nsisupports] the idea of these wrappers is to make the
javascript-implemented xpcom components look just like any other xpcom component to the user.
Mail and RDF
datasources and the ui mail does not link the ui to datasources in a "traditional" manner.
...aditional" manner.
...e is the rational behind this design: it keeps all rdf datasource-related code in one place and out of the messages and folders themselves.
Main Windows
its main focus is on handling the folderpane, threadpane, and the message preview sections shown above.
... this is the red sections shown in the interface above (where?), including the toolbars, notification bars, and the status bar, but also includes most of the commands, keysets, and context menus of thunderbird, along with a whole lot of
javascript.
...cks the folder and threadpanes normally shown.
Using Mozilla code in other projects
there are several ways you can use mozilla code in your own project.
... mozilla provides a development platform for desktop applications, called xul, atop which you can build applications.
...r a mozilla runtime package that can be used to bootstrap xul and xpcom applications with ease.
Zombie compartments
this page tells you how to detect and avoid zombie compartments, which are a particular kind of memory leak.
... this page tells you how to detect and avoid zombie compartments, which are a particular kind of memory leak.
...o detect and avoid zombie compartments, which are a particular kind of memory leak.
Examples
objective-c from js-ctypes an example how to use objective-c from js-ctypes, by converting objective-c code into c code.
... objective-c code into c code.
...orks from
javascript, js-macosx transparently handles definition of cocoa api, both c and objective-c, and provides automatic declarations for framework functions, structures, constants and enumerations, as well as allows creating and subclassing cocoa classes.
Declaring types
() function, which returns a char * and accepts a pointer to a tm structure.
...b.declare("asctime", ctypes.default_abi, ctypes.char.ptr, struct_tm.ptr); var thetime = new struct_tm; thetime.tm_hour = 3; thetime.tm_min = 15; ...
...pes.structtype("anotherstruct", [ {field1: opaque.ptr} ]); somestructure.define([ { ptrtoanotherstruct: anotherstruct.ptr } ]); as you see here, the two structure types here contain pointers to each other; by making one of them opaque at first, you can declare the fields on the other one, then define the fields on the first one afterward.
Using js-ctypes
before you can use js-ctypes, you need to import the ctypes.jsm code module.
... ctypes.char.ptr, /* primary text */ ctypes.char.ptr, /* secondary text */ ctypes.uint32_t, /* alert param */ 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.
...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)); // cfusernotificationdisplaynotice does not block till user clicks dialog, it will return immediately if (rez.tostring() == '0') { console.log('notification was succesfully shown!!'); } else { ...
ArrayType
ld contain.
...ach element in the array can be referenced by index using standard bracket notation, such as myarray[index].
...) string tostring() arraytype cdata methods addressofelement() returns a new cdata object of the appropriate pointer type, whose value points to the specified array element on which the method was called.
CType
e types, find out information about them, and so forth.
...type representing an array of elements of the type on which it was called.
... in the declared array type.
Int64
because
javascript doesn't currently include standard support for 64-bit integer values, js-ctypes offers the int64 and uint64 objects to let you work with c functions and data that need (or may need) values represented using a 64-bit data type.
... a 32-bit value), another 64-bit integer object (either signed or unsigned), or as a string, which may consist of an optional minus sign, followed by either a decimal number or "0x" or "0x" followed by a hexadecimal number.
...fied high and low order 32-bit values.
StructType
ethod to assign it a non-opaque type later.
...type cdata properties every struct object has a getter and a setter for each member field of the structure.
... structure on which the method was called.
UInt64
as
javascript doesn't currently include standard support for 64-bit integer values, js-ctypes offers the int64 and uint64 objects to let you work with c functions and data that need (or may need) to use data represented using a 64-bit data type.
... a 32-bit value), another 64-bit integer object (either signed or unsigned), or as a string, which may consist of an optional minus sign, followed by either a decimal number or "0x" or "0x" followed by a hexadecimal number.
...ied high and low order 32-bit values.
Flash Activation: Browser Comparison - Plugins
authoring tips if a flash element is very small, hidden, or covered by other content, users will probably not notice that flash is required and will become confused.
...h="300" height="300"> <param name="callback" value="plugincreated()"> </object> the callback parameter defined in the html can be called in flash using its flash.external.externalinterface api.
...g a script callback to determine when a plugin is activated similarly, a site's script shouldn't attempt to script a plugin immediately upon creation.
URLs - Plugins
pecific filenames) locates files on a specific host computer rather than an internet resource.
...tes files on a specific host computer rather than an internet resource.
... or individual usenet articles; alternate to news.
Use a source map - Firefox Developer Tools
the
javascript sources executed by the browser are often transformed in some way from the original sources created by a developer.
... the
javascript sources executed by the browser are often transformed in some way from the original sources created by a developer.
...the source map include a comment in the transformed file, that points to the source map.
Debugger.Environment - Firefox Developer Tools
function, which receives var definitions) for a call to a functionf, then this property’s value is a debugger.object instance referring tof.
...of strings giving the names of the identifiers bound by this environment.
...e bound toname in this environment, or undefined if this environment does not bindname.name must be a string that is a valid ecmascript identifier name.
Debugger.Frame - Firefox Developer Tools
at was accessible to the debuggee, but any further calls that function makes are treated as internal details, and omitted from the stack trace.
...he debugger.frame prototype object a debugger.frame instance inherits the following accessor properties from its prototype: type a string describing what sort of frame this is: "call": a frame running a function call.
...o eval.
Debugger.Script - Firefox Developer Tools
is represented by a single jsscript object: the body of a function—that is, all the code in the function that is not contained within some nested function.
...: the body of a function—that is, all the code in the function that is not contained within some nested function.
... name.
Deprecated tools - Firefox Developer Tools
arning message, as in the following image, when trying to activate a deprecated panel: in addition, if you open the panel for one of these tools, you will also see a warning message about its removal.
...so see a warning message about its removal.
...g, the input isn't cleared, which makes it possible to quickly iterrate over a snippet of code.
Dominators - Firefox Developer Tools
this article provides an introduction to the concepts of reachability, shallow versus retained size, and dominators, as they apply in garbage-collected languages like
javascript.
...n garbage-collected languages like
javascript.
... you can see the dominators in a page using the dominators view in the memory tool.
Allocations - Firefox Developer Tools
g us that, of the 8904 allocations seen in signallater(), all but three came through the removeinner() branch.
...itself useful information to know.
...c).
Flame Chart - Firefox Developer Tools
the flame chart shows you the state of the
javascript stack for your code at every millisecond during the performance profile.
... the flame chart shows you the state of the
javascript stack for your code at every millisecond during the performance profile.
...t shows you the state of the
javascript stack for your code at every millisecond during the performance profile.
UI Tour - Firefox Developer Tools
ust the part selected.
...rowser is doing during the recording: executing
javascript, updating the css, updating the page layout, and performing repaints.
...css, updating the page layout, and performing repaints.
Shader Editor - Firefox Developer Tools
note: this tool has been deprecated and will soon be removed from firefox.
...alled shaders which are called at the appropriate stages of the opengl rendering pipeline: a vertex shader, which computes the clip space coordinates of each vertex to be drawn, and a fragment shader, which determines the color for each pixel to be drawn.
...h computes the clip space coordinates of each vertex to be drawn, and a fragment shader, which determines the color for each pixel to be drawn.
Tips - Firefox Developer Tools
split console; useful when debugging, or inspecting nodes in the command line: $0 references the currently selected node.
...it as well.
...gle the display of css preprocessor files.
Web Console - Firefox Developer Tools
the web console: logs information associated with a web page: network requests,
javascript, css, security errors and warnings as well as error, warning and informational messages explicitly logged by
javascript code running in the page context enables you to interact with a web page by executing
javascript expressions in the context of the page user interface of the web console parts of the web console ui.
...ormation associated with a web page: network requests,
javascript, css, security errors and warnings as well as error, warning and informational messages explicitly logged by
javascript code running in the page context enables you to interact with a web page by executing
javascript expressions in the context of the page user interface of the web console parts of the web console ui.
...uting
javascript expressions in the context of the page user interface of the web console parts of the web console ui.
Blob - Web APIs
the blob object represents a blob, which is a file-like object of immutable, raw data; they can be read as text or binary data, or converted into a readablestream so its methods can be used for processing the data.
...ntire contents of the blob interpreted as utf-8 text.
...cript typed array and creates a new blob containing the typed array's data.
Using the CSS properties and values API - Web APIs
r property type checking, default values, and properties that do or do not inherit their value.
...values, and properties that do or do not inherit their value.
...se of that, it can't set up a transition from one value to another.
CanvasRenderingContext2D.fillText() - Web APIs
f quality), or scale down to a smaller font size in order to fit the text in the specified width.
...cale down to a smaller font size in order to fit the text in the specified width.
...ce to its 2d graphics context.
CanvasRenderingContext2D.stroke() - Web APIs
de.
....getcontext('2d'); ctx.rect(10, 10, 150, 100); ctx.stroke(); result re-stroking paths typically, you'll want to call beginpath() for each new thing you want to stroke.
... ctx.moveto(20, 140); ctx.lineto(280, 140); ctx.stroke(); result stroking and filling if you want to both stroke and fill a path, the order in which you perform these actions will determine the result.
CanvasRenderingContext2D.strokeText() - Web APIs
ality), or scale down to a smaller font size in order to fit the text in the specified width.
... down to a smaller font size in order to fit the text in the specified width.
... to its 2d graphics context.
Basic animations - Web APIs
« previousnext » since we're using
javascript to control <canvas> elements, it's also very easy to make (interactive) animations.
...ional image if (x > (canvasxsize-imgw)) { ctx.drawimage(img, x - imgw + 1, y, imgw, imgh); } } // draw image ctx.drawimage(img, x, y,imgw, imgh); // amount to move x += dx; } below is the <canvas> in which the image is scrolled.
...w; height: 100vh; top: 0; left: 0; display: flex; flex-wrap: wrap; justify-content: space-around; opacity: 1; user-select: none } .keypress>div:hover { opacity: 1 } .touch { background: #8bc34a } .off { background: #f44336 } .hide { opacity: 0 } </style> </html>
javascript function tmz() { var e = new date(t), i = new date, n = math.abs(i.getminutes() - e.getminutes()), o = math.abs(i.getseconds() - e.getseconds()); return n + " : " + o } function coll(t, e) { return t.x < e.x + e.w && t.x + t.w > e.x && t.y < e.y + e.h && t.h + t.y > e.y } function snake() { this.w = 15, this.h ...
Canvas tutorial - Web APIs
<canvas> is an html element which can be used to draw graphics via scripting (usually
javascript).
...clear ideas about what you can do with canvas, and will provide code snippets that may get you started in building your own content.
...very difficult, but you do need a basic understanding of html and
javascript.
console.debug() - Web APIs
the console method debug() outputs a message to the web console at the "debug" log level.
...er if the console is configured to display debug output.
...]); console.debug(msg [, subst1, ..., substn]); parameters obj1 ...
Console.dir() - Web APIs
the console method dir() displays an interactive list of the properties of the specified
javascript object.
... the console method dir() displays an interactive list of the properties of the specified
javascript object.
...is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects.
Console.error() - Web APIs
message to the web console.
... [, subst1, ..., substn]); console.exception(obj1 [, obj2, ..., objn]); console.exception(msg [, subst1, ..., substn]); note: console.exception() is an alias for console.error(); they are functionally identical.
...ption(msg [, subst1, ..., substn]); note: console.exception() is an alias for console.error(); they are functionally identical.
Console.info() - Web APIs
the console.info() method outputs an informational message to the web console.
...small "i" icon is displayed next to these items in the web console's log.
...s feature is available in web workers.
Console.warn() - Web APIs
outputs a warning message to the web console.
...web workers.note: in chrome and firefox, warnings have a small exclamation point icon next to them in the web console log.
...n next to them in the web console log.
console - Web APIs
nsole if the first argument is false.
...unter with the given label.
...d: 5 }; console.info("my first car was a", car, ".
Document.cookie - Web APIs
omain=domain (e.g., 'example.com' or 'subdomain.example.com').
...t always be the origin.
... web application, will lead to hijacking the authenticated user's session.
Document.querySelector() - Web APIs
lector(selectors); parameters selectors a domstring containing one or more selectors to match.
...t, the first element with that id is returned.
... elements, as specified in the selectors api.
Document.querySelectorAll() - Web APIs
atch against.
...th property is 0), then no matches were found.
...ryselectorall(".highlighted"); highlighteditems.foreach(function(useritem) { deleteuser(useritem); }); user notes queryselectorall() behaves differently than most common
javascript dom libraries, which might lead to unexpected results.
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
margin on the list items: li { display: inline-block; width: 2rem; height: 2rem; margin-right: -0.25rem; } you can also solve this problem by putting your list items all on the same line in the source, which causes the whitespace nodes to not be created in the first place: <li></li><li></li><li></li><li></li><li></li> dom traversal and whitespace when trying to do dom manipulation in
javascript, you can also encounter problems because of whitespace nodes.
... element you want to affect.
...but again, if any target elements contain text nodes, you could end up with false results.
Element.getClientRects() - Web APIs
t render anything themselves, display:none elements, and generally any elements that are not directly rendered, an empty list is returned.
...the css draws borders around the paragraph and the <span> inside each <div> block for the first example, around the <ol> and <li> for the second example, and around <table>, <th>, and <td> elements for the third example.
...rders around the paragraph and the <span> inside each <div> block for the first example, around the <ol> and <li> for the second example, and around <table>, <th>, and <td> elements for the third example.
Element.querySelectorAll() - Web APIs
atch against.
...ement, such as: var highlighteditems = userlist.queryselectorall(".highlighted"); highlighteditems.foreach(function(useritem) { deleteuser(useritem); }); note: nodelist is not a genuine array, that is to say it doesn't have the array methods like slice, some, map etc.
...have the array methods like slice, some, map etc.
Using Fetch - Web APIs
the fetch api provides a
javascript interface for accessing and manipulating parts of the http pipeline, such as requests and responses.
...oded', }, redirect: 'follow', // manual, *follow, error referrerpolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url body: json.stringify(data) // body data type must match "content-type" header }); return response.json(); // parses json response into native
javascript objects } postdata('https://example.com/answer', { answer: 42 }) .then(data => { console.log(data); // json data parsed by `data.json()` call }); note that mode: "no-cors" only allows a limited set of headers in the request: accept accept-language content-language content-type with a value of application/x-www-form-urlencoded, multipart/form-data, or text/plain sending a reques...
...u'll use are: response.status — an integer (default value 200) containing the response status code.
Using FormData Objects - Web APIs
ou can build a formdata object yourself, instantiating it then appending fields to it by calling its append() method, like this: var formdata = new formdata(); formdata.append("username", "groucho"); formdata.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456" // html file input, chosen by user formdata.append("userfile", fileinputelement.files[0]); //
javascript file-like object var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
... file, the value is converted to a string).
...fter the entry list representing the form's data is constructed.
GlobalEventHandlers.onkeypress - Web APIs
dler has been deprecated.
...<p id="log"></p>
javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.onkeypress = logkey; function logkey(e) { log.textcontent += ` ${e.code}`; } result filter keys with a regular expression this example filters the characters typed into a form field using a regular expression.
...: <input> </label>
javascript function numbersonly(event) { return event.charcode === 0 || /\d/.test(string.fromcharcode(event.charcode)); } const input = document.queryselector('input'); input.onkeypress = numbersonly; // prevent pasting (since pasted content might include non-number characters) input.onpaste = event => false; result capture the typing of a hidden word the following
javascript function will do something after the user types the word "exit" in any point of a page.
HTMLCollection - Web APIs
document is changed.
...he specific node whose id or, as a fallback, name matches the string specified by name.
..., name matches the string specified by name.
HTMLElement.focus() - Web APIs
following property: preventscroll optional a boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view.
... preventscroll is set to true, no scrolling will occur.
...lick="focusmethod()">click me to focus on the text field!</button> result focus on a button
javascript focusmethod = function getfocus() { document.getelementbyid("mybutton").focus(); } html <button type="button" id="mybutton">click me!</button> <p></p> <button type="button" onclick="focusmethod()">click me to focus on the button!</button> result focus with focusoption
javascript focusscrollmethod = function getfocus() { document.getelementbyid("mybutton").focus({preventscroll:false}); } focusnoscrollmethod = function getfocuswithoutscrolling() { document.getelementbyid("mybutton").focus({preventscroll:true}); } html <button type="button" onclick="focusscrollmethod()">click me to focus on the button!</button> <button type="button" onclick="foc...
HTMLScriptElement - Web APIs
html <script> elements expose the htmlscriptelement interface, which provides special properties and methods for manipulating the behavior and execution of <script> elements (beyond the inherited htmlelement interface).
... html <script> elements expose the htmlscriptelement interface, which provides special properties and methods for manipulating the behavior and execution of <script> elements (beyond the inherited htmlelement interface).
...dl attribute.
HTMLTableElement.createCaption() - Web APIs
ethod creates it, and then returns it.
...eateelement() had been used to create the new <caption> element.
...ionelement example this example uses
javascript to add a caption to a table that initially lacks one.
History.replaceState() - Web APIs
the history.replacestate() method modifies the current history entry, replacing it with the stateobj, title, and url passed in the method parameters.
...gh they may use it in the future.
...rows an exception.
MouseEvent.pageX - Web APIs
of the document at which the mouse was clicked, regardless of any scrolling or viewport positioning that may be in effect.
...ta type.
...x = document.queryselector(".box"); var pagex = document.getelementbyid("x"); var pagey = document.getelementbyid("y"); function updatedisplay(event) { pagex.innertext = event.pagex; pagey.innertext = event.pagey; } box.addeventlistener("mousemove", updatedisplay, false); box.addeventlistener("mouseenter", updatedisplay, false); box.addeventlistener("mouseleave", updatedisplay, false); the
javascript code uses addeventlistener() to register the function updatedisplay() as the event handler for the mousemove, mouseenter, and mouseleave events.
ParentNode.querySelectorAll() - Web APIs
atch against.
...ument.queryselectorall("iframe[data-src]"); here, an attribute selector is used to return a list of the list items contained within a list whose id is userlist which have a data-active attribute whose value is 1: var container = document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-active=1]"); user notes queryselectorall() behaves differently than most common
javascript dom libraries, which might lead to unexpected results.
...ner = document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-active=1]"); user notes queryselectorall() behaves differently than most common
javascript dom libraries, which might lead to unexpected results.
ShadowRoot.mode - Web APIs
the mode property of the shadowroot specifies its mode — either open or closed.
... the mode property of the shadowroot specifies its mode — either open or closed.
...fies its mode — either open or closed.
Matrix math for the web - Web APIs
the webxr (vr and ar) api, and glsl shaders.
...4 grid.
...lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> </div> finally, for each of the examples we will generate a 4x4 matrix, then update the <div>'s style to have a transform applied to it, set to a matrix3d.
Adding 2D content to a WebGL context - Web APIs
his const shaderprogram = initshaderprogram(gl, vssource, fssource); after we've created a shader program we need to look up the locations that webgl assigned to our inputs.
... positionbuffer as the one to apply buffer // operations to from here out.
...ns), gl.static_draw); return { position: positionbuffer, }; } this routine is pretty simplistic given the basic nature of the scene in this example.
WebGL tutorial - Web APIs
webgl enables web content to use an api based on opengl es 2.0 to perform 3d rendering in an html <canvas> in browsers that support it without the use of plug-ins.
...und.
... and will provide code snippets that may get you started in building your own content.
WebGL model view projection - Web APIs
= point[0]; let y = point[1]; let z = point[2]; let w = point[3]; return [x/w, y/w, z/w]; } as previously mentioned and shown in the functions above, the w component divides the x, y, and z components.
... every surface of the model as well.
... 'model'); and finally the uniform is set to that location.
Web Animations API Concepts - Web APIs
the web animations api (waapi) provides
javascript developers access to the browser’s animation engine and describes how animations should be implemented across browsers.
...be implemented across browsers.
...our ui animations are running correctly.
Functions and classes available to Web Workers - Web APIs
in addition to the standard
javascript set of functions (such as string, array, object, json, etc), there are a variety of functions available from the dom to workers.
...ents timing-related performance information for the given page.
... workers can use the static methods url.createobjecturl and url.revokeobjecturl with blob objects accesible to the worker.
Window.devicePixelRatio - Web APIs
ally low resolution displays or, more often, when a screen has a higher pixel depth than simply double the standard resolution of 96 or 76 dpi.
...'; ctx.textalign = 'center'; ctx.textbaseline = 'middle'; var x = size / 2; var y = size / 2; var textstring = "i love mdn"; ctx.filltext(textstring, x, y); monitoring screen resolution or zoom level changes in this example, we'll set up a media query and watch it to see when the device resolution changes, so that we can check the value of devicepixelratio to handle any updates we need to.
... = 'center'; ctx.textbaseline = 'middle'; var x = size / 2; var y = size / 2; var textstring = "i love mdn"; ctx.filltext(textstring, x, y); monitoring screen resolution or zoom level changes in this example, we'll set up a media query and watch it to see when the device resolution changes, so that we can check the value of devicepixelratio to handle any updates we need to.
Window.openDialog() - Web APIs
window.opendialog() is an extension to window.open().
...indow.opendialog() is an extension to window.open().
...o access these extra parameters from within dialog code, use the following scheme: var food = window.arguments[0]; var price = window.arguments[1]; note that you can access this property from within anywhere in the dialog code.
window.postMessage() - Web APIs
o provide a specific target discloses the data you send to any interested malicious site.
...ost names only, the value of the origin property is not consistently unicode or punycode; for greatest compatibility check for both the idn and punycode values when using this property if you expect messages from idn sites.
... values when using this property if you expect messages from idn sites.
XMLHttpRequest.response - Web APIs
the xmlhttprequest response property returns the response's body content as an arraybuffer, blob, document,
javascript object, or domstring, depending on the value of the request's responsetype property.
... yet complete or was unsuccessful, with the exception that when reading text data using a responsetype of "text" or the empty string (""), the response can contain the response so far while the request is still in the loading readystate (3).
... "text", the default type.
ARIA: switch role - Accessibility
the switch role, and is treated as false.
...is initially checked courtesy of its aria-checked attribute being set to "true".
...ked courtesy of its aria-checked attribute being set to "true".
ARIA: button role - Accessibility
le, if clicking the button opens a dialog, the focus should move to the dialog.
...l> <input type="text" id="newname"> <span role="button" tabindex="0" onclick="handlecommand()" onkeydown="handlecommand()">add name</span> css [role="button"] { padding: 2px; background-color: navy; color: white; cursor: default; } [role="button"]:hover, [role="button"]:focus, [role="button"]:active { background-color: white; color: navy; } ul { list-style: none; }
javascript function handlecommand(event) { // handles both mouse clicks and keyboard // activate with enter or space // get the new name value from the input element let newnameinput = document.getelementbyid('newname'); let name = newnameinput.value; newnameinput.value = ''; // clear the text field newnameinput.focus(); // give the text field focus to enable entering and addi...
...eydown="handlebtnkeydown(event)"> mute audio </span> <audio id="audio" src="https://udn.realityripple.com/samples/41/191d072707.mp3"> your browser does not support the <code>audio</code> element.
Using CSS animations - CSS: Cascading Style Sheets
ns consist of two components, a style describing the css animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.
... end states of the animation’s style, as well as possible intermediate waypoints.
...rames, the width and margin-left are manipulated to make the element slide across the screen.
Media queries - CSS: Cascading Style Sheets
n the <link> element's media attribute, they define the media to which a linked resource (typically css) should be applied.
...ement's media attribute, they define the media to which a linked resource (typically css) should be applied.
...rientation, or state.
Adding captions and subtitles to HTML5 video - Developer guides
heir videos, but they're usually in the subrip text (srt) format.
...he extra button, but these are relatively straightforward.
...height:85%; text-indent:0; font-size:16px; font-size:1rem; font-weight:bold; color:#666; background:#000; border-radius:2px; } there are also other css changes that are specific to some extra
javascript implementation, but these will be mentioned at the appropriate place below.
Challenge solutions - Developer guides
he lines between /* print only */ and /* end print only */ into a file named style4_print.css.
...turn blue when the mouse pointer is over them.
...owing rule achieves the desired result: h1:hover { color: blue; }
javascript move box to the right challenge change the script so that the square jumps to the right by 20 em when its color changes, and jumps back afterwards.
Making content editable - Developer guides
in html, any element can be editable.
...andard argument, br, for defaultparagraphseparator since firefox 55.
...y.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org"); user_pref("capability.policy.allowclipboard.clipboard.cutcopy", "allaccess"); user_pref("capability.policy.allowclipboard.clipboard.paste", "allaccess"); example: a simple but complete rich text editor <!doctype html> <html> <head> <title>rich text editor</title> <script type="text/
javascript"> var odoc, sdeftxt; function initdoc() { odoc = document.getelementbyid("textbox"); sdeftxt = odoc.innerhtml; if (document.compform.switchmode.checked) { setdocmode(true); } } function formatdoc(scmd, svalue) { if (validatemode()) { document.execcommand(scmd, false, svalue); odoc.focus(); } } function validatemode() { if (!document.compform.switchmode.checked) { return true ; } al...
HTML5 - Developer guides
5 text api for <canvas> elements the html5 text api is now supported by <canvas> elements.
... performance and integration web workers allows delegation of
javascript evaluation to background threads, allowing these activities to prevent slowing down interactive events.
...s allows delegation of
javascript evaluation to background threads, allowing these activities to prevent slowing down interactive events.
<input type="date"> - HTML: Hypertext Markup Language
and time formats used in html.
...ncorrect formats.
...months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year (see the code comments below for detailed explanations of how these functions work.) span { padding-left: 5px; } input:invalid + span::after { content: '✖'; } input:valid + span::after { content: '✓'; }
javascript the other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <input type="date">.
<input type="search"> - HTML: Hypertext Markup Language
put supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, required, size.
...r an invalid value is specified, the search input has no minimum length.
... placeholder attribute if you can.
<input type="tel"> - HTML: Hypertext Markup Language
s specified, the telephone number input has no minimum length.
... placeholder attribute if you can.
... aria-label="first part of number"> <span class="validity"></span> </span> <span class="number2div"> <input id="number2" name="number2" type="tel" required placeholder="second part" pattern="[0-9]{4}" aria-label="second part of number"> <span class="validity"></span> </span> </div> <div> <button>submit</button> </div> </form> the
javascript is relatively simple — it contains an onchange event handler that, when the <select> value is changed, updates the <input> element's pattern, placeholder, and aria-label to suit the format of telephone numbers in that country/territory.
<input type="text"> - HTML: Hypertext Markup Language
orted common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value methods select(), setrangetext() and setselectionrange().
....
... placeholder attribute if you can.
<video>: The Video Embed element - HTML: Hypertext Markup Language
p4">link to the video</a> instead.</p> </video> we offer a substantive and thorough guide to media file types and the guide to the codecs supported for video.
...e events let you monitor the progress of both download and playback of the media, as well as the playback state and position.
...ide more specific information using the codecs parameter as part of the file's type string.
HTML elements reference - HTML: Hypertext Markup Language
elements and one <img> element to offer alternative versions of an image for different display/device scenarios.
...canvas scripting api or the webgl api to draw graphics and animations.
...omponents technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate dom trees and present them together.
x-ms-acceleratorkey - HTML: Hypertext Markup Language
is feature is non-standard and is not on a standards track.
...tivated via
javascript when the key(s) are pressed on a keyboard.
...e, for screen readers and other assistive technologies, that an accelerator key exists for that element.
Access-Control-Allow-Credentials - HTTP
the access-control-allow-credentials response header tells browsers whether to expose the response to frontend
javascript code when the request's credentials mode (request.credentials) is include.
... the access-control-allow-credentials response header tells browsers whether to expose the response to frontend
javascript code when the request's credentials mode (request.credentials) is include.
...eader is not returned with the resource, the response is ignored by the browser and not returned to web content.
CSP: child-src - HTTP
ilesystem from source directives.
...ods for creating code from strings.
... an example.
CSP: script-src-attr - HTTP
the http content-security-policy (csp) script-src-attr directive specifies valid sources for
javascript inline event handlers.
...filesystem from source directives.
...lar methods for creating code from strings.
CSP: script-src-elem - HTTP
the http content-security-policy (csp) script-src-elem directive specifies valid sources for
javascript <script> elements, but not inline script event handlers like onclick.
...filesystem from source directives.
...lar methods for creating code from strings.
CSP: script-src - HTTP
the http content-security-policy (csp) script-src directive specifies valid sources for
javascript.
...filesystem from source directives.
...lar methods for creating code from strings.
Content-Security-Policy - HTTP
re perhaps coincidentally considered legacy html elements and are not receiving new standardized features (such as the security attributes sandbox or allow for <iframe>).
...nd are not receiving new standardized features (such as the security attributes sandbox or allow for <iframe>).
...es sandbox or allow for <iframe>).
Set-Cookie - HTTP
the set-cookie http response header is used to send a cookie from the server to the user agent, so the user agent can send it back to the server later.
...e optional a secure cookie is only sent to the server when a request is made with the https: scheme.
...cookies, as the entire mechanism is inherently insecure and doesn't encrypt any information.) note: insecure sites (http:) can't set cookies with the secure attribute (since chrome 52 and firefox 52).
Web technology reference
ments.
...nce they are used to interpret the content of the page.
...per guide | element reference | reference css — styling the web cascading style sheets are used to describe the appearance of web content.
Web Components
o render custom ui controls, and how using them multiple times can turn your page into a mess if you are not careful.
...ems — it consists of three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions.
...rd dom (true), or not (false).
Index - XPath
he true function returns a boolean value of true.
...of true.
...arsed entity with the given name.
XPath snippets - XPath
this article provides some xpath code snippets—simple examples of how to a few simple utility functions based on standard interfaces from the dom level 3 xpath specification that expose xpath functionality to
javascript code.
...nue" city="denver" state="co" country="usa"/> </person> </people> you can now "query" the document with xpath expressions.
...space-uri()='"+(el.namespaceuri===null?'':el.namespaceuri)+"']["+pos+']'+'/'+xpath; el = el.parentnode; } xpath = '/*'+"[name()='"+xml.documentelement.nodename+"' and namespace-uri()='"+(el.namespaceuri===null?'':el.namespaceuri)+"']"+'/'+xpath; xpath = xpath.replace(/\/$/, ''); return xpath; } resources xpath forum discussion on this topic see also introduction to using xpath in
javascript ...
/loader - Archive of obsolete content
create commonjs module loaders.
... regular script tag in documents that have system principals (note: this does not appear to work as of 02.2016 due to "use strict" being added to the file): <script type='application/
javascript' src='resource://gre/modules/commonjs/toolkit/loader.js'></script> this will expose a single loader object containing all of the api functions described in this document.
lang/type - Archive of obsolete content
value is an instance of type.
...configurable enumerable id: 100, // writable configurable enumerable text: "what happens to you if you break the monad laws?", "__proto__": { // [object object] } }, { // [object object] // writable configurable enumerable id: 101, // writable configurable enumerable text: "
javascript dubstep generator", "__proto__": { // [object object] } } ], "__proto__": { // [object object] } } */ parameters value : mixed the source object to create a textual representation of.
Tutorials - Archive of obsolete content
ing some pointers for fixing common problems and getting more help.
...ad and unload get notifications when your add-on is loaded or unloaded by firefox, and pass arguments into your add-on from the command line.
Forms related code snippets - Archive of obsolete content
here are some <form> related code snippets.
...> </td> <td class="zdp-empty-cell"> </td> <td class="zdp-empty-cell"> </td> <td class="zdp-empty-cell"> </td> </tr> </tbody> </table> editable <select> fields the content of the <select> element is actually static and not editable.
QuerySelector - Archive of obsolete content
return this.queryselector(selector); }; example: <h1>test!</h1> <script> htmldocument.prototype.$ = function (selector) { return this.queryselector(selector); }; alert(document.$('h1')); // [object htmlheadingelement] </script> xuldocument.prototype.$ = function (selector) { // only for xul return this.queryselector(selector); }; example: <label value="test!"/> <script type="text/
javascript"><![cdata[ xuldocument.prototype.$ = function (selector) { // only for xul return this.queryselector(selector); }; alert(document.$('label')); // [object xulelement] ]]></script> document.prototype.$ = function (selector) { // only for plain xml return this.queryselector(selector); }; var foo = document.implementation.createdocument('somens', 'foo', null); // create an xml document <foo...
...// gives 'bar' element.prototype.$ = function (selector) { // works for html, xul, and plain xml return this.queryselector(selector); }; html example: <h1><a>test!<a/></h1> <script> element.prototype.$ = function (selector) { return this.queryselector(selector); }; alert(document.getelementsbytagname('h1')[0].$('a').nodename); // 'a' xul example: <hbox><vbox/></hbox> <script type="text/
javascript"><![cdata[ element.prototype.$ = function (selector) { return this.queryselector(selector); }; var xulns = 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'; alert(document.getelementsbytagnamens(xulns, 'hbox')[0].$('vbox').nodename); // vbox ]]></script> xml example: <foo xmlns="somens"><bar/></foo> in document earlier var foo = document.getelementsbytagnamens('somens', 'foo')...
Tree - Archive of obsolete content
to collapse all tree nodes just change the condition: var treeview = tree.treeboxobject.view; for (var i = 0; i < treeview.rowcount; i++) { if (treeview.iscontainer(i) && treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } getting the text from the selected row assuming the given <tree>: <tree id="my-tree" seltype="single" onselect="ontreeselected()"> use the following
javascript: function ontreeselected(){ var tree = document.getelementbyid("my-tree"); var cellindex = 0; var celltext = tree.view.getcelltext(tree.currentindex, tree.columns.getcolumnat(cellindex)); alert(celltext); } getting the tree item from the focused row assuming <tree id="my-tree">, you can use the following to get the tree item: var view = document.getelementbyid("my-tree").view; ...
... choice is likely to try <treecell onclick="yourfunc();"/> or something similar.
Observer Notifications - Archive of obsolete content
object to pass to those observers (can be null), the second parameter is the notification topic and the last parameter is an additional string to pass to those observers (can be null).
...notification topic and the last parameter is an additional string to pass to those observers (can be null).
Extensions support in SeaMonkey 2 - Archive of obsolete content
thunderbird 3 gfolderdisplay api seamonkey 2.0 only supports a reduced set of methods: selectedcount selectedmessage selectedmessageisfeed selectedmessageisimap selectedmessageisnews selectedmessageisexternal selectedindices selectedmessages selectedmessageuris messagedisplay gmessagedisplay api seamonkey 2.0 only supports a reduced set of methods: displayedmessage visible
javascript tweaks firefox supports some shorthand in various places.
...d in custom code.
Getting Started - Archive of obsolete content
* /chrome.manifest /install.rdf /icon.png /preview.png make sure not to just zip up the my_theme parent directory since that will cause the drag and drop install in the next section to fail without error messages.
...nstall.rdf /icon.png /preview.png make sure not to just zip up the my_theme parent directory since that will cause the drag and drop install in the next section to fail without error messages.
Creating a Microsummary - Archive of obsolete content
include> </pages> </generator> if you're unfamiliar with regular expressions, see creating regular expressions for a microsummary generator for a tutorial on writing them.
...xml, and we wanted users to be able to install it from http://people.mozilla.com/~myk/micro...ial/index.html, we might add the following code to the index.html page: <button onclick="window.sidebar.addmicrosummarygenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">install the spread firefox home page microsummary!</button> clicking that button will generate a
javascript error on browsers that don't support microsummaries, however, so to improve the experience for those users, we should check to see if the user is using a microsummaries-enabled browser and display an explanatory message if not.
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
/contents.rdf /install.rdf /icon.png /preview.png make sure not to just zip up the my_theme parent directory since that will cause the drag and drop install in the next section to fail without error messages.
....rdf /icon.png /preview.png make sure not to just zip up the my_theme parent directory since that will cause the drag and drop install in the next section to fail without error messages.
Creating a Help Content Pack - Archive of obsolete content
tents file (and therefore exactly like creating an index file), so follow the instructions there to create additional data sources as you need them.
...elp viewer with your content pack, you need to have chrome://help/content/contexthelp.js loaded into the xul file that provides the ui to open the help viewer: <script type="application/
javascript" src="chrome://help/content/contexthelp.js"/> this will allow you to access all of the viewer functions.
Metro browser chrome tests - Archive of obsolete content
the metro browser chrome test suite is an automated testing framework designed to allow testing of the immersive version of firefox for windows 8 and above using
javascript.
... the metro browser chrome test suite is an automated testing framework designed to allow testing of the immersive version of firefox for windows 8 and above using
javascript.
PyDOM - Archive of obsolete content
introduction this is the documentation for the binding of python and the mozilla dom.
...d (b) in all cases (e.g., event handler and top-level script), the dom node needs to be explicitly specified - the globals are the window itself.
Table Layout Regression Tests - Archive of obsolete content
="0 0 4 -1 1 " /> <tableborder data="1 null null 0 2 " /> <content data="0 0 0 null " /> <quotes data="0 " /> <ui data="3 0 0 1 " /> <uireset data="7 0 4" /> <xul data="0 0 0 0 0 1 <svg data="0 1.000000 1.000000 0 1.000000" /> </stylecontext> the baseline log will look like: type manifest file: e:\moz_src\mozilla\obj-i586-pc-msvc\dist\bin\components\xpti.dat +++
javascript debugging hooks installed.
...html\tests\block\base\baseline\pre1_html.rgd the second verify run creates first the frame dumps in the verify subdirectories (verify) and compares each frame dump with the corresponding reference frame dump.
Writing textual data - Archive of obsolete content
.createinstance(components.interfaces.nsiconverteroutputstream); // this assumes that fos is the nsioutputstream you want to write to os.init(fos, charset, 0, 0x0000); os.writestring("umlaute: \u00fc \u00e4\n"); os.writestring("hebrew: \u05d0 \u05d1\n"); // etc.
... also specify any unicode character u+abcd directly as 0xabcd.
Event Handlers - Archive of obsolete content
the object the handler is attached to and if that event matches all of the criteria specified by the handler.
...ecifies the event to listen for and an action to take when the handler fires.
Example Sticky Notes - Archive of obsolete content
ffffff" stroke-width="1px"> <svg:circle cx="25px" cy="12px" r="12" fill="#ff0000" transform="translate(0,0)"/> <svg:circle cx="25px" cy="12px" r="12" fill="#00ff00" transform="translate(7,12)"/> <svg:circle cx="25px" cy="12px" r="12" fill="#0000ff" transform="translate(-7,12)"/> </svg:g> </svg:svg> <children/> </content> <implementation> <!-- here and futher cdata wrappers around
javascript code are not mandatory but recommended.
... the code below will be called one time only before * binding is unbound.
Providing Command-Line Options - Archive of obsolete content
extensions and xul applications can modify the way command line parameters are handled by writing a component that implements the nsicommandlinehandler interface and registering it in a category.
...e commandline.js file into the components directory and add the following lines to your chrome.manifest file: component {2991c315-b871-42cd-b33f-bfee4fcbf682} components/commandline.js contract @mozilla.org/commandlinehandler/general-startup;1?type=myapp {2991c315-b871-42cd-b33f-bfee4fcbf682} category command-line-handler m-myapp @mozilla.org/commandlinehandler/general-startup;1?type=myapp the
javascript code const cc = components.classes; const ci = components.interfaces; components.utils.import("resource://gre/modules/xpcomutils.jsm"); components.utils.import("resource://gre/modules/services.jsm"); // changeme: to the chrome uri of your extension or application const chrome_uri = "chrome://myapp/content/"; /** * utility functions */ /** * opens a chrome window.
Template Guide - Archive of obsolete content
l condition tests multiple queries using multiple queries to generate more results building trees with templates building trees building hierarchical trees template modifications template builder interface template and tree listeners rdf modifications additional topics sorting results additional template attributes template logging xml namespaces alternative approaches
javascript templates xuljsdatasource: a component for extensions, which bring a "
javascript template syntax".
... trees building hierarchical trees template modifications template builder interface template and tree listeners rdf modifications additional topics sorting results additional template attributes template logging xml namespaces alternative approaches
javascript templates xuljsdatasource: a component for extensions, which bring a "
javascript template syntax".
XUL - Archive of obsolete content
ul online live editor (copy & paste snippets from here and run them) xul explorer (a lightweight xul ide) xulexplorer (patched version of xul explorer) extension developer's extension (featuring a live xul editor) xulref sidebar firebug dom inspector spket ide, ide for xul/xbl ample sdk, (cross-browser xul renderer in
javascript/html) view all...
... xulexplorer (patched version of xul explorer) extension developer's extension (featuring a live xul editor) xulref sidebar firebug dom inspector spket ide, ide for xul/xbl ample sdk, (cross-browser xul renderer in
javascript/html) view all...
2006-11-03 - Archive of obsolete content
announcements developer chat with
javascript developer brendan eich on tuesday, november 7th at 10am pst (utc-8) brendan eich and some special guests will be hosting a developer chat about new technologies comming to mozilla 2.
... announcements developer chat with
javascript developer brendan eich on tuesday, november 7th at 10am pst (utc-8) brendan eich and some special guests will be hosting a developer chat about new technologies comming to mozilla 2.
Plugins - Archive of obsolete content
writing a plugin for mac os x learn how to write a plugin for mac os x; a template xcode project is provided.
...gins use an observer service notification to monitor the amount of time spent executing calls in plugins.
References - Archive of obsolete content
r connection mozilla web author faq from henri sivonen making your web page compatible with mozilla from nicolás lichtmaier complete css guide from westciv.com css lessons and tutorials from alsacreations html and css lessons and tutorials from htmldog.com preparing for standard-compliant browsers, part 1 from makiko itoh preparing for standard-compliant browsers, part 2 from makiko itoh
javascript best practices lists 15 of the most frequent coding practices which create problems for
javascript and dhtml-driven webpages.
...g for standard-compliant browsers, part 1 from makiko itoh preparing for standard-compliant browsers, part 2 from makiko itoh
javascript best practices lists 15 of the most frequent coding practices which create problems for
javascript and dhtml-driven webpages.
-ms-scroll-translation - Archive of obsolete content
ks, will take place when appropriate.
...g the -ms-scroll-translation property to vertical-to-horizontal, you are specifying that vertical scroll events should be interpreted as their corresponding horizontal scroll events.
Object.prototype.eval() - Archive of obsolete content
the object.eval() method used to evaluate a string of
javascript code in the context of an object, however, this method has been removed.
... the object.eval() method used to evaluate a string of
javascript code in the context of an object, however, this method has been removed.
Window.importDialog() - Archive of obsolete content
necessarily appropriate, the firefox mobile team designed the importdialog() method to replace window.opendialog().
.../dialog.xul", myobject); notes the xul passed to importdialog() is very similar to xul passed to window.opendialog(), with some limitations and caveats: only <dialog> top level elements are permitted.
RDF in Mozilla FAQ - Archive of obsolete content
tasource("http://www.mozilla.org/some-rdf-file.rdf"); // now see if it's loaded or not...
...ent model!) the xul template builder uses the rules to automatically keep all content models in sync with your changes.
Game distribution - Game development
on of the game itself — usually adding a manifest file containing necessary information in a zipped package containing all the resources is enough.
... packages are usually pretty reliable, but you should still test them and be on the lookout for small issues or bugs to fix.
2D collision detection - Game development
rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y) { // collision detected!
...ircle collision another simple shape for collision detection is between two circles.
Building up a basic demo with Babylon.js - Game development
babylon.js is one of the most popular 3d game engines used by developers.
...l use: <!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: babylon.js demo</title> <style> html,body,canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; } </style> </head> <body> <script src="babylon.js"></script> <canvas id="render-canvas"></canvas> <script> var canvas = document.getelementbyid("render-canvas"); /* all our
javascript code goes here */ </script> </body> </html> it contains some basic information like the document <title>, and some css to set the width and height of the <canvas> element (which babylon.js will use to render the content on) to fill the entire available viewport space.
Building up a basic demo with the PlayCanvas engine - Game development
ctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: playcanvas demo</title> <style> body { margin: 0; padding: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="playcanvas-latest.js"></script> <canvas id="application-canvas"></canvas> <script> var canvas = document.getelementbyid("application-canvas"); /* all our
javascript code goes here */ </script> </body> </html> it contains some basic information like the document <title>, and some css to set the width and height of the <canvas> element that playcanvas will use to 100% so that it will fill the entire available viewport space.
...ere's the code we have created so far: you can also check it out on github.
WebVR — Virtual Reality for the Web - Game development
the concept of virtual reality in itself isn't new, but now we have the technology to have it working as it should be, and a
javascript api to make use of it in web applications.
...- you have to feel you're "inside" the experience.
Tutorials - Game development
this page contains multiple tutorial series that highlight different workflows for effectively creating different types of web games.
... this page contains multiple tutorial series that highlight different workflows for effectively creating different types of web games.
Visual-js game engine - Game development
full name : visual-js gui for windows multiplatform 2d game engine creator : nikola lukic 2017 2018 open source visual-js project parts : -2d part : this is
javascript game engine (server part node.js / client part js) js framework with windows gui editor and game instance creator.
... in no event shall the author of this software be held liable for data loss, damages, loss of profits or any other kind of loss while using or misusing this software.
Visual JS GE - Game development
visual-js gameengine is a small but comprehensive canvas/websocket-based game engine with gui source editor only for windows.
....
Game development
esources for web developers wanting to develop games.
... the web draws on a number of core web technologies such as html, css, and
javascript.
Plug-in Development Overview - Gecko Plugin API Reference
part of the the browser user interface, your plug-in can emulate the browser behavior by providing status line messages.
... plug-ins that have been extended to provide methods that can be called from
javascript and the dom when accessed through the object or embed element.
Dynamic typing - MDN Web Docs Glossary: Definitions of Web-related terms
dynamically-typed languages are those (like
javascript) where the interpreter assigns variables a type at runtime based on the variable's value at the time.
... dynamically-typed languages are those (like
javascript) where the interpreter assigns variables a type at runtime based on the variable's value at the time.
Gecko - MDN Web Docs Glossary: Definitions of Web-related terms
gecko is the layout engine developed by the mozilla project and used in many apps/devices, including firefox and firefox os.
... a layout engine to interpret html, css,
javascript, and embedded content (like images) and draw everything to your screen.
IIFE - MDN Web Docs Glossary: Definitions of Web-related terms
an iife (immediately invoked function expression) is a
javascript function that runs as soon as it is defined.
...; it is a design pattern which is also known as a self-executing anonymous function and contains two major parts: the first is the anonymous function with lexical scope enclosed within the grouping operator ().
OOP - MDN Web Docs Glossary: Definitions of Web-related terms
oop (object-oriented programming) is an approach in programming in which data is encapsulated within objects and the object itself is operated on, rather than its component parts.
... oop (object-oriented programming) is an approach in programming in which data is encapsulated within objects and the object itself is operated on, rather than its component parts.
MDN Web Docs Glossary: Definitions of Web-related terms
ife imap immutable index indexeddb information architecture inheritance input method editor instance internationalization internet intrinsic size ip address ipv4 ipv6 irc iso isp itu j jank java
javascript jpeg jquery json k key keyword l latency layout viewport lazy load lgpl ligature local scope local variable locale localization long task loop lossless compression lossy compression ltr (left to r...
...ceholder names plaintext png polyfill polymorphism pop3 port prefetch preflight request prerender presto primitive privileged privileged code progressive enhancement progressive web apps promise property property (css) property (
javascript) protocol prototype prototype-based programming proxy server pseudo-class pseudo-element pseudocode public-key cryptography python q quality values quaternion quic r rail random number generator raster image rdf re...
About Scriptable Interfaces - Interfaces
ponents scriptable interfaces interfaces allow xpcom components to expose their functionality to the outside world while hiding the inner details of the component implementation.
...in an interface description language.
Mobile accessibility - Learn web development
lity next with web access on mobile devices being so popular and renowned platforms such as ios and android having full-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms.
...age.
Styling web forms - Learn web development
beyond some basic styling (such as changing the width or margin of the control) you generally don't have the ability to style the controls' internal components (such as the date picker calendar, or the button on the <select> that causes the options list to display) making up those widgets.
...into the "bad" and "ugly" categories.
Publishing your website - Learn web development
you need to build a multi-tiered web application from scratch or host a static website.
...deploy a website: a nice tutorial from codecademy that goes a bit further and shows some additional techniques.
Advanced text formatting - Learn web development
that don't require paragraph breaks.</q></p> browser default styling will render this as normal text put in quotes to indicate a quotation, like so: citations the content of the cite attribute sounds useful, but unfortunately browsers, screenreaders, etc.
...am.
Debugging HTML - Learn web development
ing any programming language or code is familiarity with both the language and the tools.
...etimes fixing an earlier error will also get rid of other error messages — several errors can often be caused by a single problem, in a domino effect.
Test your skills: Math - Learn web development
this aim of this skill test is to assess whether you've understood our basic math in
javascript — numbers and operators article.
...load the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
Test your skills: Strings - Learn web development
this aim of this skill test is to assess whether you've understood our handling text — strings in
javascript and useful string methods articles.
...load the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
Deploying our app - Learn web development
previous overview: understanding client-side tools in the final article in our series, we take the example toolchain we built up in the previous article and add to it so that we can deploy our sample app.
...ing happening.
Add-ons
add-ons allow developers to extend and modify the functionality of firefox.
... add-ons allow developers to extend and modify the functionality of firefox.
Command line options
illa.org -inspector url start with the dom inspector, if installed, and inspect the given url (where url is optional).
... not reset on startup, this clears it.
Creating Sandboxed HTTP Connections
introduction starting with gecko 1.8.1 (firefox 2), it is possible to create sandboxed http connections which don't affect the user's cookies.
... - the request has finished.
Debugging
ject as large as mozilla can be a daunting task.
...daunting task.
Makefile - variables
exports a list of exported header files and sources to install for external use.
...gs for enabling or overriding compiler optimizations(-o2).
The Firefox codebase: CSS Guidelines
the overriding css section contains more information about this.
...se the selector of the rule you are adding as it can easily become hard to understand.
Message manager overview
in multiprocess firefox there are (at least) two processes: the chrome process, also called the parent process, runs the browser ui (chrome) code and code inserted by extensions one or more content processes, also called child processes.
...ultiprocess firefox there are (at least) two processes: the chrome process, also called the parent process, runs the browser ui (chrome) code and code inserted by extensions one or more content processes, also called child processes.
Message manager overview
parent process message manager lives in the implements nsimessagelistenermanager nsimessagebroadcaster child process message manager implements nsimessagelistenermanager nsimessagesender loading scripts per child process since the process message managers do not support script loading the only way to implement per-child process code is to use a frame script which imports a custom
javascript module (jsm).
...lives in the implements nsimessagelistenermanager nsimessagebroadcaster child process message manager implements nsimessagelistenermanager nsimessagesender loading scripts per child process since the process message managers do not support script loading the only way to implement per-child process code is to use a frame script which imports a custom
javascript module (jsm).
IME handling guide
editor has not been destroyed yet too, textcomposition dispatches an ecompositionend event which will cause a dom compositionend event.
...position dispatches an ecompositionend event which will cause a dom compositionend event.
Assert.jsm
the assert.jsm
javascript code module implements the commonjs unit testing specification version 1.1, which provides a basic, standardized interface for performing in-code logical assertions with optional, customizable error reporting.
... the assert.jsm
javascript code module implements the commonjs unit testing specification version 1.1, which provides a basic, standardized interface for performing in-code logical assertions with optional, customizable error reporting.
AsyncShutdown.jsm
escription profilebeforechange read only phase the profile is about to be unmounted.
... unmounted.
DeferredTask.jsm
firefox 28 note interface was changed in firefox 28, and old methods were removed.
... firefox 28 note interface was changed in firefox 28, and old methods were removed.
DownloadLastDir.jsm
the downloadlastdir.jsm
javascript code module lets you retrieve the path of the last directory into which a download occurred.
... the downloadlastdir.jsm
javascript code module lets you retrieve the path of the last directory into which a download occurred.
Downloads.jsm
the downloads.jsm
javascript code module provides a single entry point to interact with the downloading capabilities of the platform, including starting new downloads, controlling ongoing downloads, and retrieving download-related configuration.
... the downloads.jsm
javascript code module provides a single entry point to interact with the downloading capabilities of the platform, including starting new downloads, controlling ongoing downloads, and retrieving download-related configuration.
FileUtils.jsm
the fileutils.jsm
javascript code module offers utility routines dealing with files.
... the fileutils.jsm
javascript code module offers utility routines dealing with files.
Geometry.jsm
the geometry.jsm
javascript code module provides routines for performing common geometry operations on points and rectangles.
... the geometry.jsm
javascript code module provides routines for performing common geometry operations on points and rectangles.
Log.jsm
this module is still under development.
..., including different interfaces and behavior in different versions of the platform.
PerfMeasurement.jsm
the perfmeasurement.jsm
javascript code module lets you take detailed performance measurements of your code.
... the perfmeasurement.jsm
javascript code module lets you take detailed performance measurements of your code.
Promise.jsm
the promise.jsm
javascript code module implements the promises/a+ proposal as known in april 2013.
...013.
PromiseUtils.jsm
the promiseutils.jsm
javascript code module offers some useful functions related to dom promise.
... the promiseutils.jsm
javascript code module offers some useful functions related to dom promise.
Task.jsm
the task.jsm
javascript code module implements a subset of task.js to make sequential, asynchronous operations simple, using the power of
javascript's yield operator.
... the task.jsm
javascript code module implements a subset of task.js to make sequential, asynchronous operations simple, using the power of
javascript's yield operator.
openLocationLastURL.jsm
this component has been removed from the platform in firefox 29.
... this component has been removed from the platform in firefox 29.
DMD
--debug to run under gdb.
...visit about:memory and click the dmd button (depending on how old your build is, it might be labelled "save" or "analyze reports" or "dmd").
GC and CC logs
n about why various js and c++ objects are alive in the heap.
...fault, the file is created in some temp directory, and the path to the file is printed to the error console.
TimerFirings logging
period, measured in milliseconds.
...46880[7f46c365ba00]: [6775] fn timer (one_shot 0 ms): [content] chrome://browser/content/tabbrowser.xml:1816:0 711637568[7f3219c48000]: [6835] fn timer (one_shot 100 ms): [content] http://edition.cnn.com/:5:7231 711637568[7f3219c48000]: [6835] fn timer (one_shot 100 ms): [content] http://a.visualrevenue.com/vrs.js:6:9423 these js timers are annotated with [content] and show the
javascript source location where they were created.
JSHydra
jshydra is a static analysis tool that is capable of performing analysis of general
javascript code.
... jshydra is a static analysis tool that is capable of performing analysis of general
javascript code.
Localization Use Cases
20n, the english string could be as simple as: <availablesize "{{ $size }} {{ $unit }} available"> on the other hand, the italian translation would make use of proper pluralization rules: <plural($n) { $n == 1 ?
...yteunit-kb = kb byteunit-mb = mb byteunit-gb = gb byteunit-tb = tb for example in french, the unit abbreviations are as follows: byteunit-b = o byteunit-kb = ko byteunit-mb = mo byteunit-gb = go byteunit-tb = to solution in l20n, the french localizer could provide the translation of unit abbreviations locally in the localization file, without impacting the english localization file.
L20n
note: this document is in draft form/out-of-date — for current documentation please see our documentation on github.
...ve: "firefoxu", instrumental: "firefoxom" }> <about "o {{ brandname.locative }}"> for developers documentation for developers wanting to implement localization functionality on their web apps using l20n.
Leak And Bloat Tests
this will run the tests and produce some result files.
...on on what to do with this data.
Rhino FAQ
frequently asked questions about rhino how do i create a java array from
javascript?
...s slightly different: you must use the type field.
Performance Hints
nyway (what if you called another function that had a loop like the one in sum!).
...e var a = new array(); for (var i=0; i < n; i++) a[i] = i; could be sped up by changing the constructor call to new array(n).
Rhino requirements and limitations
class loaders.
...dmethod = 5; var field = javaobj.fieldandmethod; javaobj.fieldandmethod = 7; // now, field == 7 you can work around this by forcing the field value to be converted to a
javascript type when you take its value: javaobj.fieldandmethod = 5; var field = javaobj.fieldandmethod + 0; // force conversion now javaobj.fieldandmethod = 7; // now, field == 5 jsobject rhino does not support the netscape.
javascript.jsobject class.
Shumway
means for the community of developers currently creating the adobe flash platform.
...ut flash is no longer supported by adobe.
Functions
there are several flavors of
javascript function.
... there are several flavors of
javascript function.
JS::FalseValue
this article covers features introduced in spidermonkey 24 create a js::value that represents the
javascript value false.
... this article covers features introduced in spidermonkey 24 create a js::value that represents the
javascript value false.
JS::NullHandleValue
this article covers features introduced in spidermonkey 24 the js::value that represents the
javascript value null.
... this article covers features introduced in spidermonkey 24 the js::value that represents the
javascript value null.
JS::NullValue
this article covers features introduced in spidermonkey 24 create a js::value that represents the
javascript value null.
... this article covers features introduced in spidermonkey 24 create a js::value that represents the
javascript value null.
JS::PersistentRooted
; typedef persistentrooted<jsscript*> persistentrootedscript; typedef persistentrooted<jsstring*> persistentrootedstring; typedef persistentrooted<js::symbol*> persistentrootedsymbol; // added in spidermonkey 38 typedef persistentrooted<value> persistentrootedvalue; } example following example allocates persistentrootedvalue, and provides two functions for setting and getting it from
javascript.
...v[]) { // initialize runtime // ...
JS::ToBoolean
this article covers features introduced in spidermonkey 17 convert any
javascript value to a boolean.
... this article covers features introduced in spidermonkey 17 convert any
javascript value to a boolean.
JS::ToInt32
this article covers features introduced in spidermonkey 17 convert any
javascript value to a signed 32bit integer.
... type description cx jscontext * the context in which to perform the conversion.
JS::ToInt64
this article covers features introduced in spidermonkey 17 convert any
javascript value to a signed 64bit integer.
... type description cx jscontext * the context in which to perform the conversion.
JS::ToNumber
this article covers features introduced in spidermonkey 17 convert any
javascript value to a double.
... type description cx jscontext * the context in which to perform the conversion.
JS::ToPrimitive
this article covers features introduced in spidermonkey 45 converts a
javascript object to a primitive value, using the semantics of toprimitive.
...t jstype the hint to pass to the toprimitive and @@toprimitive method when converting the object.
JS::ToString
this article covers features introduced in spidermonkey 31 convert any
javascript value to a string.
...pi.h jsstring* js::tostring(jscontext *cx, js::handlevalue v) name type description cx jscontext * the context in which to perform the conversion.
JS::ToUint16
this article covers features introduced in spidermonkey 17 convert any
javascript value to an unsigned 16bit integer.
... type description cx jscontext * the context in which to perform the conversion.
JS::ToUint32
this article covers features introduced in spidermonkey 17 convert any
javascript value to an unsigned 32bit integer.
... type description cx jscontext * the context in which to perform the conversion.
JS::ToUint64
this article covers features introduced in spidermonkey 17 convert any
javascript value to an unsigned 64bit integer.
... type description cx jscontext * the context in which to perform the conversion.
JS::TrueHandleValue
this article covers features introduced in spidermonkey 38 the js::value that represents the
javascript value true.
... this article covers features introduced in spidermonkey 38 the js::value that represents the
javascript value true.
JS::TrueValue
this article covers features introduced in spidermonkey 24 create a js::value that represents the
javascript value true.
... this article covers features introduced in spidermonkey 24 create a js::value that represents the
javascript value true.
JS::UndefinedHandleValue
this article covers features introduced in spidermonkey 24 the js::value that represents the
javascript value undefined.
... this article covers features introduced in spidermonkey 24 the js::value that represents the
javascript value undefined.
JS::UndefinedValue
this article covers features introduced in spidermonkey 24 create a js::value that represents the
javascript value undefined.
... this article covers features introduced in spidermonkey 24 create a js::value that represents the
javascript value undefined.
JS::Value
js::value is the type of
javascript values in the jsapi.
... js::value is the type of
javascript values in the jsapi.
JSExtendedClass
obsolete since
javascript 1.8.5this feature is obsolete.
...t; jsiteratorop iteratorobject;// added in spidermonkey 1.8 jsobjectop wrappedobject; // added in spidermonkey 1.8 ...and additional reserved fields.
JSFUN_BOUND_METHOD
obsolete since
javascript 1.8.5this feature is obsolete.
...gh it may still work in some browsers, its use is discouraged since it could be removed at any time.
JSFunction
jsfunction is a type in the jsapi.
...s - that is, functions returned by the apis listed above-there is a simple one-to-one relationship between the jsfunction and the corresponding
javascript function object.
JSNewResolveOp
erty is being used in code like "if (o.p)...", or a similar idiom where the apparent purpose of the property access is to detect whether the property exists.
...se of the property access is to detect whether the property exists.
JSObject
jsobject is the type of
javascript objects in the jsapi.
...ascript objects in the jsapi.
JSObjectPrincipalsFinder
palsfinderjsapi 1.8 and earlier or js_setruntimesecuritycallbacksadded in spidermonkey 1.8.1.
...escription the
javascript engine calls this callback to obtain principals for a jsprincipals.subsume check.
JSProtoKey
this article covers features introduced in spidermonkey 24 possible standard object prototype types.
... jsproto_shareduint8clampedarray shareduint8clampedarray (nightly only) mxr search for jsproto_shareduint8clampedarray jsproto_typedarray typedarray added in spidermonkey 38 mxr search for jsproto_typedarray jsproto_atomics atomics (nightly only) mxr search for jsproto_atomics description each of these types corresponds to standard objects in
javascript.
JSString
a jsstring represents a primitive
javascript string in the jsapi.
... a jsstring represents a primitive
javascript string in the jsapi.
JSType
the values of the jstype enumeration represent the types of
javascript values.
... the values of the jstype enumeration represent the types of
javascript values.
JSVAL_IS_INT
obsolete since jsapi 32this feature is obsolete.
...nteger.
JSVAL_IS_NULL
determine if a given jsval is null.
... determine if a given jsval is null.
JSVAL_NULL
obsolete since jsapi 42this feature is obsolete.
... obsolete since jsapi 42this feature is obsolete.
JSVAL_TRUE
obsolete since jsapi 42this feature is obsolete.
... obsolete since jsapi 42this feature is obsolete.
JSVAL_VOID
obsolete since jsapi 42this feature is obsolete.
... obsolete since jsapi 42this feature is obsolete.
JS_CompareStrings
estrings compares two js strings, str1 and str2.
...f the strings are identical in content and length, js_comparestrings stores 0 in *result.
JS_ConstructObject
*clasp, jsobject *proto, jsobject *parent, unsigned int argc, jsval *argv); name type description cx jscontext * the context in which to create the new object.
...n which to create the new object.
JS_DefaultValue
obsolete since jsapi 44this feature is obsolete.
... hint jstype the hint to pass to the [[defaultvalue]] hook when converting the object.
JS_DefineFunction
pidermonkey 17 call jsnative the native c/c++ function to be wrapped by the new function.
... as though by calling js_defineproperty.
JS_DeleteElement
) receives the result of the operation.
...nces an element belonging to a prototype, the element reference is removed from the object, but the prototype's element is not deleted.
JS_DeleteElement2
rototype, the element reference is removed from the object, but the prototype's element is not deleted.
...element2 stores true to *succeeded and returns true.
JS_DeleteProperty2
the length of name in characters; or -1 to indicate that name is null-terminated.
...error is propagated.
JS_EncodeStringToBuffer
this article covers features introduced in spidermonkey 1.8.5 convert a
javascript string to a c string.
... description cx jscontext * a context.
JS_Enumerate
ust be in a request on this jscontext.
...ss, js_enumerate returns a pointer to the first element of an array of property ids.
JS_GetGlobalObject
obsolete since jsapi 24this feature is obsolete.
...d out in future versions of spidermonkey.
JS_GetInstancePrivate
for which to retrieve private data.
...l * optional argument vector, used for error reporting.
JS_GetNaNValue
::value.
...value of type js::value that represents an ieee floating-point quiet not-a-number (nan).
JS_GetProperty
ly) the length of name, in characters; or -1 to indicate that name is null-terminated.
...objects, including objects of standard classes such as object and array, this hook does nothing and returns true, so the property get succeeds and undefined is left in *vp.
JS_HasInstance
jsapi method equivalent to the instanceof operator in
javascript.
...ntext.
JS_HasOwnProperty
this article covers features introduced in spidermonkey 45 determine whether a
javascript object has a specified own property.
...r id const char * or js::handleid name of the property to look up.
JS_HasProperty
determine whether a
javascript object has a specified property.
...me in characters, or -1 to indicate that name is null-terminated.
JS_LookupElement
d, the caller must be in a request on this jscontext.
...dleobject the object to search.
JS_LooselyEqual
this article covers features introduced in spidermonkey 1.8.1 determine whether two
javascript values are equal in the sense of the == operator.
... cx jscontext * the context in which to perform the conversion.
JS_NewContext
create a new jscontext.
...ich most users should not adjust.
JS_NewNumberValue
l js_newnumbervalue(jscontext *cx, jsdouble d, jsval *rval); name type description cx jscontext * the context in which to create the new number.
...ch to create the new number.
JS_NewPropertyIterator
differs from longstanding for..in loop order, which uses the order in which obj's properties were defined.
... obj's properties were defined.
JS_NewRuntime
initializes the
javascript runtime.
... maxbytes uint32 maximum number of allocated bytes after which garbage collection is run.
JS_NewScriptObject
obsolete since jsapi 8this feature is obsolete.
...e protected from garbage collection; when the script object is collected, the jsscript and its contents are freed.
JS_ReportError
create a formatted error or warning message to pass to a user-defined error reporting function.
...insert into the format string.
JS_ReportOutOfMemory
rts a memory allocation error.
...allocation fails, it reports an error as though by calling this function.
JS_SetInterruptCallback
this article covers features introduced in spidermonkey 31 set a callback function that is automatically called periodically while
javascript code runs.
... type description cx jscontext * pointer to a jscontext in which this callback was installed.
JS_SetPrivate
cially useful for storing c/c++ data that should not be directly visible to scripts.
... obj must be an instance of a class that has the jsclass_has_private flag.
JS_SetPrototype
set a
javascript object's prototype.
...time, you can later call js_setprototype to do so.
JS_StrictlyEqual
this article covers features introduced in spidermonkey 1.8.1 determine whether two
javascript values are equal in the sense of the === operator.
...scontext * the context in which to perform the conversion.
JS_ThrowStopIteration
rmonkey js1.8 throw a stopiteration exception.
... name type description cx jscontext * the context in which to throw the stopiteration object.
JS_ValueToBoolean
obsolete since jsapi 28this feature is obsolete.
...ame type description cx jscontext * the context in which to perform the conversion.
JS_ValueToFunction
; jsfunction * js_valuetoconstructor(jscontext *cx, js::handlevalue v); name type description cx jscontext * the context in which to perform the conversion.
....
JS_ValueToNumber
obsolete since jsapi 24this feature is obsolete.
... name type description cx jscontext * the context in which to perform the conversion.
JS_ValueToString
jsval to a jsstring.
... cx jscontext * the context in which to perform the conversion.
jsdouble
o 13 jsdouble has been removed, and instead it is possible to use the default c/c++ type double.
..., and instead it is possible to use the default c/c++ type double.
Split object
n that tab.
... checks between them automatically succeed.
TPS Tests
s is an end to end test for sync.
... have them).
Thread Sanitizer
able-debug-symbols ac_add_options --disable-install-strip # settings for an opt build ac_add_options --enable-optimize="-o2 -gline-tables-only" ac_add_options --disable-debug starting the build process now you start the build process using the regular make -f client.mk command.
...all-strip # settings for an opt build ac_add_options --enable-optimize="-o2 -gline-tables-only" ac_add_options --disable-debug starting the build process now you start the build process using the regular make -f client.mk command.
Secure Development Guidelines
e [a-za-z0-9], enforce it cross site scripting (xss) xss is a type of code injection attack typically occurs in web applications injection of arbitrary data into an html document from another site victim’s browser executes those html instructions could be used to steal user credentials think: webmail, online auction, cms, online banking...
... > " → " ' → ' url encoding % encoding java/vbscript escaping depends on the context; in a single-quoted string, escaping ' would suffice sql injection occurs when un-trusted input is mixed with a sql string sql is a language used to interact with databases code injection attack that is similar to xss but targeted at sql rather than html and
javascript if input is mixed with sql, it could itself become an sql instruction and be used to: query data from the database (passwords) insert value into the database (a user account) change application logic based on results returned by the database sql injection: example snprintf(str, sizeof(str), "select * from account where name ='%s'", name); sqlite3_exec(db, str, null...
Using the Places annotation service
ems in the places database: setitemannotationstring(aitemid, aname, avalue, aflags, aexpiration); setitemannotationint32(aitemid, aname, avalue, aflags, aexpiration); setitemannotationint64(aitemid, aname, avalue, aflags, aexpiration); setitemannotationdouble(aitemid, aname, avalue, aflags, aexpiration); setitemannotationbinary(aitemid, aname, avalue, adatalen, aflags, aexpiration); from
javascript there are two simple function to perform all of these operations: setpageannotation(auri, aname, avalue, aflags, aexpiration); setitemannotation(aitemid, aname, avalue, aflags, aexpiration); these annotations all take similar parameters: uri or itemid: this is the nsiuri of the page to annotate, or for items in the places database, the id of the item.
..., aname); getpageannotationint64(auri, aname); getpageannotationdouble(auri, aname); getpageannotationbinary(auri, aname, adata, adatalen, amimetype); getitemannotationstring(aitemid, aname); getitemannotationint32(aitemid, aname); getitemannotationint64(aitemid, aname); getitemannotationdouble(aitemid, aname); getitemannotationbinary(aitemid, aname, adata, adatalen, amimetype); from
javascript: getpageannotation(auri, aname); getitemannotation(aitemid, aname); these functions will return/throw ns_error_not_available if the annotation requested does not exist.
The Publicity Stream API
is a mozilla-hosted activity stream generated by a user's application usage.
... purpose of notifying a user's friends of the applications which their friends are using.
Creating a Python XPCOM component
creating applications with mozilla already provides a tutorial for making a simple
javascript or c++ component (implementing the nsisimple interface).
...nsisupports.idl" [scriptable, uuid(2b324e9d-a322-44a7-bd6e-0d8c83d94883)] interface nsipysimple : nsisupports { attribute string yourname; void write( ); void change(in string avalue); }; this is the same as the nsisimple interface used here.
XPCOM array guide
learray usage nsiarray is useful if you need to pass arrays of com objects through interfaces or require a scriptable array.
...ay;1".
Preface
build a component and you will know something about the framework for these components in gecko, which is xpcom.
... along as a c programmer, the component implementation code is written in c++, and much of the discussion of how to make your codeinto an xpcom component starts from c++.
Components.ID
iid a string of the format '{00000000-0000-0000-0000-000000000000}' giving the interface id of the interface description components.id creates interface ids for use in implementing methods like queryinterface, getinterfaces, and other methods that take interface ids as parameters.
...e description components.id creates interface ids for use in implementing methods like queryinterface, getinterfaces, and other methods that take interface ids as parameters.
Components.classes
as only registered with their cid, use components.classesbyid instead of components.classes to retrieve it.
... of components.classes to retrieve it.
Components.interfaces
es.
...h have been designated in their .idl description as scriptable, that is the interfaces which xpconnect is capable of reflecting into
javascript.
Components.isSuccessCode
successcode() may be used to determine whether an xpcom return code (an nsresult) indicates success or failure.
...bit is 0, and it indicates failure if its high-order bit is 1.
Components.utils.evalInSandbox
the evalinsandbox() function enables you to evaluate
javascript code inside a sandbox you've previously created using the components.utils.sandbox constructor.
... denied" error components.utils.evalinsandbox("foo.classes", mysandbox); optional arguments you can optionally specify the js version, filename, and line number of the code being evaluated.
Components.utils.import
components.utils.import was introduced in firefox 3 and is used for sharing code between different scopes easily.
... components.utils.import was introduced in firefox 3 and is used for sharing code between different scopes easily.
Components.utils.unload
components.utils.unload was introduced in firefox 7 and is used to unload
javascript code modules.
...efox 7 and is used to unload
javascript code modules.
PyXPCOM
ws for communication between python and xpcom, such that a python application can access xpcom objects, and xpcom can access any python class that implements an xpcom interface.
...provides pyxpcom samples - demo applications using pyxpcom community python-xpcom bindings mailing list (activestate) #pyxpcom on irc.mozilla.org source code the pyxpcom code is available here: http://hg.mozilla.org/pyxpcom/ to build pyxpcom, see building pyxpcom.
nsIAccessibleHyperLink
e link is invalid via the aria-invalid='true' attribute.
... the case of an image map there is more than one link represented by this accessible.
nsIAppShellService
oid enterlastwindowclosingsurvivalarea(); parameters none.
...ication hidden window as an nsidomwindow, and, the corresponding
javascript context pointer.
nsIAppStartup
id enterlastwindowclosingsurvivalarea(); parameters none.
...ons when all application windows will be closed but we don't want to take this as a signal to quit the application.
nsIClassInfo
ricfactory and can be set in nsmodulecomponentinfo::mflags.
...obsolete since gecko 2.0 methods gethelperforlanguage() get a language mapping specific helper object that may assist in using objects of this class in a specific lanaguage.
nsIFile
sing a platform specific path string or by using cross-platform locations retrieved from the directory service.
...pe and lang environment variables (with the precedence the same as the order they're enumerated).
nsIMsgCustomColumnHandler
ane for extensions to overlay their own columns.
... nsitreeview.getcellproperties() nsitreeview.getimagesrc() nsitreeview.getcelltext() nsitreeview.cyclecell() nsimsgcustomcolumnhandler.getsortstringforrow() nsimsgcustomcolumnhandler.getsortlongforrow() nsimsgcustomcolumnhandler.isstring() and optionally: nsitreeview.getrowproperties() from c++ you must implement all of nsitreeview and nsimsgcustomcolumnhandler.
Component; nsIPrefBranch
ult value to use if the preference does not exist (instead of throwing an exception).
...g preference.
nsIPushSubscription
the shared authentication secret, used as the salt in the hkdf invocation.
...keylen), retval] out uint8_t key ); parameters name the encryption key name.
nsIScriptableUnicodeConverter
this legacy api represents binary data using the lower haft of each 16-bit code unit in a
javascript string.
... this legacy api represents binary data using the lower haft of each 16-bit code unit in a
javascript string.
nsIXPCException
js/src/xpconnect/idl/xpcexception.idlscriptable these exception objects are the preferred types of exceptions when implementing xpcom interfaces in
javascript.
... string aname, in nsistackframe alocation, in nsisupports adata, in nsiexception ainner ); parameters amessage aresult aname alocation adata ainner native code only!stealjsval xpcexjsval stealjsval(); parameters none.
nsIZipReader
tfile ); parameters zipentry the zip entry to extract.
... openinner() opens a zip file inside a zip file for reading.
Setting HTTP request headers
d also remember to unregister the observer at shutdown: httprequestobserver.unregister(); and that's it.
...xpcom components you need to register a single http-on-modify-request observer per application (and not one per window).
Using IndexedDB in chrome
the indexeddb api is typically used to store data in the user's browser from content
javascript.
... the indexeddb api is typically used to store data in the user's browser from content
javascript.
Working with out parameters
( in string aflavor, out nsisupports adata, out unsigned long adatalen ) ; ...
...voke gettransferdata() as follows: var adata = {}; var adatalen = {}; transferable.gettransferdata("text/unicode", adata, adatalen); var data = adata.value; var datalen = adatalen.value; as you can see, after the call to gettransferdata(), the out values are then contained in the value properties of adata and adatalen.
XPCOM ABI
xpcom abi is the binary interface of xpcom components.
...piler ibmc - ibm c++ compiler for example: firefox built with the gnu c++ compiler 4.0.0 for the intel pentium processor would have xpcom abi of x86-gcc3 the xpcom abi string can be retrieved programmatically by using the nsixulruntime interface.
xptcall FAQ
unt, nsxptcvariant* params); nsxptcvariant is a discriminated union of the types that can be passed as parameters to the target function (including void* to represent arbitrary pointer types).
...iant* params); nsxptcvariant is a discriminated union of the types that can be passed as parameters to the target function (including void* to represent arbitrary pointer types).
XUL Overlays
group of similar items in the base file.
...menuitem above had been in an overlay and the other items were defined in the base file, the overlayed menuitem would still appear at the top of the parent menu.
Address Book examples
g the propertieschromeuri means that the different implementations can call up their own dialog.
...ry object implementing nsiabdirfactory a directory object implementing nsiabdirectory if you are using c++, you can inherit from nsabdirproperty and override functions for your specific implementation to save implementing all the functions on nsiabdirectory yourself.
Creating a Custom Column
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="threadtree"> <treecols id="threadcols"> <splitter class="tree-splitter" /> <treecol id="colreplyto" persist="hidden ordinal width" currentview="unthreaded" flex="2" label="reply-to" tooltiptext="click to sort by the reply-to header" /> </treecols> </tree> <!-- include our
javascript file --> <script type="text/
javascript" src="chrome://replyto_col/content/replyto_col.js"/> </overlay> that's it!
...at the column will be sorted by isstring(): return true / false warning!
Filter Incoming Mail
filter incoming mail to filter incoming mail, the first step is to detect new messages inconming.
...pped // let get a
javascript string object from the subject property // querying mime conversion interface var mimeconvert = components.classes["@mozilla.org/messenger/mimeconverter;1"] .getservice(components.interfaces.nsimimeconverter); var subject = mimeconvert.decodemimeheader(amsghdr.subject, null, false, true); // here with have a string to modify with
javascript.
Using Objective-C from js-ctypes
uinteger nsstringencoding; so, our function call can be converted into the following js-ctypes code: let text = objc_msgsend(tmp2, initwithcstring_encoding, ctypes.char.array()("hello, firefox!"), ctypes.unsigned_long(nsutf8stringencoding)); converted js-ctypes code finally, we have our converted code.
...s.html var _nsconcreteglobalblock = ctypes.open(ctypes.libraryname('objc')).declare('_nsconcreteglobalblock', ctypes.voidptr_t); // //github.com/realityripple/uxp/blob/master/js/src/ctypes/library.cpp?offset=0#271 /** * the "block descriptor" is a static singleton struct.
Declaring and Calling Functions
e: multiple input parameters this example declares the libc asctime() function, which converts a time structure into a string.
...t asctime = lib.declare("asctime", ctypes.default_abi, ctypes.char.ptr, struct_tm.ptr); for a more complete version of this example (including the implementation of the struct_tm type), see the structures example.
Memory Management
it's important to note that getting direct access to the contents of a cdata object using address(), addressofelement(), or contents, will result in a cdata object that does not hold its referent alive.
...referent object doesn't get into garbage collection, before you're done using it.
Standard OS Libraries
ctypes.default_abi, ctypes.void_t, cgeventref); let event = cgeventcreate(null); let cursor = cgeventgetlocation(event); cfrelease(event); components.utils.reporterror(cursor); coregraphics.close(); corefoundation.close(); resources for core foundation github :: philikon - osxtypes -
javascript modules are auto-generated from the os x header files githubgists :: noitidart / search · corefoundation - corefoundation js-ctypes snippets that can be copied and pasted to scratchpad cocoa see using objective-c from js-ctypes for more info.
...l, "..."); // loc = [nsevent mouselocation] let nsevent = objc_getclass("nsevent"); let mouselocation = sel_registername("mouselocation"); let loc = objc_msgsend_nspoint(nsevent, mouselocation); components.utils.reporterror(loc); objc.close(); resources for cocoa googlecode :: js-macosx - lightweight bridge for calling cocoa frameworks from mozilla
javascript unmht blog :: js-ctypes and objc - blog entries on using objective-c from js-ctypes githubgists :: noitidart / search · objc - objective-c js-ctypes snippets that can be copied and pasted to scratchpad android android runs on java and can be used by js-ctypes through the jni libraries.
FunctionType
ypes.void_t.size is undefined.
...g() functiontype cdata functiontype cdata cannot be constructed.
Library
thods let you declare symbols exported by the library, and to manage the library.
...u're done using the library.
js-ctypes reference
sion surrounding js-ctypes.
...the arguments and return value of a native function with ctype objects.
Plug-in Development Overview - Plugins
part of the the browser user interface, your plug-in can emulate the browser behavior by providing status line messages.
... plug-ins that have been extended to provide methods that can be called from
javascript and the dom when accessed through the object or embed element.
Debugging service workers - Firefox Developer Tools
) { navigator.serviceworker .register('sw.js') .then(function() { console.log('service worker registered'); }); } if you get the path wrong, for example, you'll get an error in the web console giving you a hint as to what's wrong, which depends on what exactly is wrong with the code.
...l using the old service worker.
Browser Toolbox - Firefox Developer Tools
the browser toolbox enables you to debug add-ons and the browser's own
javascript code rather than just web pages like the normal toolbox.
... you can also open it with the ctrl + alt +shift + i key combination ( cmd + opt +shift + i on a mac).
Debug worker threads - Firefox Developer Tools
the debugger shows the source code for all running worker threads — web workers, service workers, etc.
... the debugger shows the source code for all running worker threads — web workers, service workers, etc.
Set event listener breakpoints - Firefox Developer Tools
starting with firefox 69, debugging an application that includes event handlers is simplified because the debugger now includes the ability to automatically break when the code hits an event handler.
...steners are hit, check the boxes next the events you are interested in.
Tree map view - Firefox Developer Tools
entation of the snapshot, that helps you quickly get an idea of which objects are using the most memory.
...lays "hierarchical (tree-structured) data as a set of nested rectangles".
Web Console Helpers - Firefox Developer Tools
the commands the
javascript command line provided by the web console offers a few built-in helper functions that make certain tasks easier.
...t can be an xpathresult constant, or a corresponding string: "number", "string", "bool", "node", or "nodes"; if not provided, any_type is used.
AudioParam.value - Web APIs
syntax var curvalue = audioparam.value; audioparam.value = newvalue; value a floating-point number indicating the parameter's value as of the current time.
...node(...); const rate = 5.3; source.playbackrate.value = rate; console.log(source.playbackrate.value === rate); the log output will be false, because the playback rate parameter, rate, was converted to the 32-bit floating-point number closest to 5.3, which yields 5.300000190734863.
AudioTrack.enabled - Web APIs
unction above finds within the audio tracks of the <video> element "main-video" the audio tracks whose kind values are "main" and "commentary".
...ose kind values are "main" and "commentary".
BaseAudioContext - Web APIs
font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">baseaudiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties baseaudiocontext.audioworklet read only secure context returns the audioworklet object, which can be used to create and manage audionodes in which
javascript code implementing the audioworkletprocessor interface are run in the background to process audio data.
...context.createpanner() creates a pannernode, which is used to spatialise an incoming audio stream in 3d space.
CSSStyleDeclaration.setProperty() - Web APIs
nal is a domstring allowing the "important" css priority to be set.
... div button { flex: 1; margin: 20px; height: 30px; line-height: 30px; } .box { display: flex; justify-content: center; align-items: center; height: calc(100% - 70px); } .box p { width: 50%; text-align: center; font-weight: bold; font-size: 40px; height: 150px; line-height: 150px; background: red; border: 5px solid purple; color: white; transition: all 1s; }
javascript const borderbtn = document.queryselector('.border'); const bgcolorbtn = document.queryselector('.bgcolor'); const colorbtn = 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) + ', ' + rand...
CSS Painting API - Web APIs
the css painting api — part of the css houdini umbrella of apis — allows developers to write
javascript functions that can draw directly into an element's background, border, or content.
...mplements a subset of the canvasrenderingcontext2d api.
CSS Properties and Values API - Web APIs
roperties and values api — part of the css houdini umbrella of apis — allows developers to explicitly define their css custom properties, allowing for property type checking, default values, and properties that do or do not inherit their value.
...ues, and properties that do or do not inherit their value.
CSS Typed Object Model API - Web APIs
the css typed object model api simplifies css property manipulation by exposing css values as typed
javascript objects rather than strings.
... the css typed object model api simplifies css property manipulation by exposing css values as typed
javascript objects rather than strings.
CanvasRenderingContext2D.bezierCurveTo() - Web APIs
point.
....fillstyle = 'red'; ctx.beginpath(); ctx.arc(cp1.x, cp1.y, 5, 0, 2 * math.pi); // control point one ctx.arc(cp2.x, cp2.y, 5, 0, 2 * math.pi); // control point two ctx.fill(); result in this example, the control points are red and the start and end points are blue.
CanvasRenderingContext2D.clip() - Web APIs
ero winding rule.
...fillstyle = 'orange'; ctx.fillrect(0, 0, 100, 100); result specifying a path and a fillrule this example saves two rectangles to a path2d object, which is then made the current clipping region using the clip() method.
CanvasRenderingContext2D.closePath() - Web APIs
ectly.
...ner ctx.lineto(220, 140); // line to bottom-right corner ctx.closepath(); // line to bottom-left corner ctx.stroke(); result closing just one sub-path this example draws a smiley face consisting of three disconnected sub-paths.
CanvasRenderingContext2D.createPattern() - Web APIs
pattern an opaque object describing a pattern.
...n.realityripple.com/samples/04/aaeaf9aac4.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 300, 300); }; creating a pattern from a canvas in this example we create a pattern from the contents of an offscreen canvas.
CanvasRenderingContext2D.drawImage() - Web APIs
age is not loaded yet.
...oad an image and specify the optional size parameters in its constructor, you will have to use the naturalwidth and naturalheight properties of the created instance to properly calculate things like crop and scale regions, rather than element.width and element.height.
CanvasRenderingContext2D.ellipse() - Web APIs
boolean which, if true, draws the ellipse anticlockwise (counter-clockwise).
...d'); // draw the ellipse ctx.beginpath(); ctx.ellipse(100, 100, 50, 75, math.pi / 4, 0, 2 * math.pi); ctx.stroke(); // draw the ellipse's line of reflection ctx.beginpath(); ctx.setlinedash([5, 5]); ctx.moveto(0, 200); ctx.lineto(200, 0); ctx.stroke(); result various elliptical arcs this example creates three elliptical paths with varying properties.
CanvasRenderingContext2D.fill() - Web APIs
illrule]); parameters fillrule the algorithm by which to determine if a point is inside or outside the filling region.
...ctx.rect(10, 10, 150, 100); ctx.fill(); result specifying a path and a fillrule this example saves some intersecting lines to a path2d object.
CanvasRenderingContext2D.filter - Web APIs
erts the drawing to sepia.
...; ctx.font = '48px serif'; ctx.filltext('hello world', 50, 100); result applying multiple filters you can combine as many filters as you like.
CanvasRenderingContext2D.isPointInPath() - Web APIs
fied, the current path is used.
....getcontext('2d'); const result = document.getelementbyid('result'); ctx.rect(10, 10, 100, 100); ctx.fill(); result.innertext = ctx.ispointinpath(30, 70); result checking a point in the specified path whenever you move the mouse, this example checks whether the cursor is in a circular path2d path.
CanvasRenderingContext2D.isPointInStroke() - Web APIs
s used.
... = document.getelementbyid('result'); ctx.rect(10, 10, 100, 100); ctx.stroke(); result.innertext = ctx.ispointinstroke(50, 10); result checking a point in the specified path whenever you move the mouse, this example checks whether the cursor is in the stroke of an elliptical path2d path.
CanvasRenderingContext2D.lineTo() - Web APIs
ender anything.
...(30, 50) ctx.lineto(150, 100); // draw a line to (150, 100) ctx.stroke(); // render the path result drawing connected lines each call of lineto() (and similar methods) automatically adds to the current sub-path, which means that all the lines will all be stroked or filled together.
CanvasRenderingContext2D.putImageData() - Web APIs
to the height of the image data.
...100, 100); // use the putimagedata function that illustrates how putimagedata works putimagedata(ctx, imagedata, 150, 0, 50, 50, 25, 25); result data loss due to browser optimization due to the lossy nature of converting to and from premultiplied alpha color values, pixels that have just been set using putimagedata() might be returned to an equivalent getimagedata() as different values.
CanvasRenderingContext2D.quadraticCurveTo() - Web APIs
curve.
...(50, 100, 5, 0, 2 * math.pi); // end point ctx.fill(); // control point ctx.fillstyle = 'red'; ctx.beginpath(); ctx.arc(230, 30, 5, 0, 2 * math.pi); ctx.fill(); result in this example, the control point is red and the start and end points are blue.
CanvasRenderingContext2D.resetTransform() - Web APIs
the canvasrenderingcontext2d.resettransform() method of the canvas 2d api resets the current transform to the identity matrix.
...n matrix to the identity matrix ctx.resettransform(); result continuing with a regular matrix whenever you're done drawing transformed shapes, you should call resettransform() before rendering anything else.
CanvasRenderingContext2D.setLineDash() - Web APIs
array is odd, the elements of the array get copied and concatenated.
...); const ctx = canvas.getcontext('2d'); // dashed line ctx.beginpath(); ctx.setlinedash([5, 15]); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); // solid line ctx.beginpath(); ctx.setlinedash([]); ctx.moveto(0, 100); ctx.lineto(300, 100); ctx.stroke(); result some common patterns this example illustrates a variety of common line dash patterns.
CanvasRenderingContext2D.setTransform() - Web APIs
newer type consists of a single parameter, matrix, representing a 2d transformation matrix to set (technically, a dommatrixinit object; any object will do as long as it contains the above components as properties).
...and draw a square on it, then retrieve the matrix from it using canvasrenderingcontext2d.gettransform().
CanvasRenderingContext2D.shadowColor - Web APIs
r a domstring parsed as a css <color> value.
...gle ctx.fillrect(20, 20, 100, 100); // stroked rectangle ctx.linewidth = 6; ctx.strokerect(170, 20, 100, 100); result shadows on translucent shapes a shadow's opacity is affected by the transparency level of its parent object (even when shadowcolor specifies a completely opaque value).
CanvasRenderingContext2D.textAlign - Web APIs
ight-aligned for right-to-left locales).
...gned', x, 85); ctx.textalign = 'right'; ctx.filltext('right-aligned', x, 130); result direction-dependent text alignment this example demonstrates the two direction-dependent values of the textalign property: "start" and "end".
Basic usage of canvas - Web APIs
code here } else { // canvas-unsupported code here } a skeleton template here is a minimalistic template, which we'll be using as a starting point for later examples.
...s been loaded first.
Using images - Web APIs
de.
...="frame" src="https://udn.realityripple.com/samples/57/952c634159.png" width="132" height="150"> </body> </html> and here'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);...
Console.dirxml() - Web APIs
displays an interactive tree of the descendant elements of the specified xml/html element.
... displays an interactive tree of the descendant elements of the specified xml/html element.
DOMTokenList - Web APIs
the domtokenlist interface represents a set of space-separated tokens.
...terator, allowing you to go through all values of the key/value pairs contained in this object.
DedicatedWorkerGlobalScope - Web APIs
the dedicatedworkerglobalscope object (the worker global scope) is accessible through the self keyword.
...methods from the workerglobalscope interface, and its parent eventtarget, and therefore implements methods from windowtimers, windowbase64, and windoweventhandlers.
Detecting device orientation - Web APIs
their orientation; that is, they can report data indicating changes to their orientation with relation to the pull of gravity.
...ing orientation change is to listen to the deviceorientation event: note: gyronorm.js is a polyfill for normalizing the accelerometer and gyroscope data on mobile devices.
Device Memory API - Web APIs
capabilities of the client devices largely depend on the amount of available ram.
...nt devices largely depend on the amount of available ram.
DocumentOrShadowRoot.getSelection() - Web APIs
t selected by the user, or the current position of the caret.
... expecting a string (like window.alert()), the object's tostring() method is called and the returned value is passed to the function.
Events and the DOM - Web APIs
and have a look at the event object // always print arguments in case of overlooking any other arguments console.log('greet:', arguments) alert('hello world') } this is the method you should use in modern web pages.
...this is the method you should use in modern web pages.
Examples of web and XML development using the DOM - Web APIs
this chapter provides some longer examples of web and xml development using the dom.
...); } </script> </head> <body onload="load();"> <table id="t-daddy" onclick="alert('hi');"> <tr id="tbl1"> <td id="c1">one</td> </tr> <tr> <td id="c2">two</td> </tr> </table> </body> </html> example 6: getcomputedstyle this example demonstrates how the window.getcomputedstyle method can be used to get the styles of an element that are not set using the style attribute or with
javascript (e.g., elt.style.backgroundcolor="rgb(173, 216, 230)").
How to create a DOM tree - Web APIs
this page describes how to use the dom core api in
javascript to create and modify dom objects.
...state": "co", "@country": "usa" }], "@first-name": "jed", "@last-name": "brown" }] } } so what?
Document Object Model (DOM) - Web APIs
the document object model (dom) connects web pages to scripts or programming languages by representing the structure of a document—such as the html representing a web page—in memory.
... the document object model (dom) connects web pages to scripts or programming languages by representing the structure of a document—such as the html representing a web page—in memory.
EffectTiming.fill - Web APIs
x; height: 200px; left: 50px; top: 50px; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; } all this does is specify the size, border, and color information, as well as indicate that the box should be centered both vertically and horizontally inside its container.
...x; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; } all this does is specify the size, border, and color information, as well as indicate that the box should be centered both vertically and horizontally inside its container.
Element.attachShadow() - Web APIs
h3> <h4> <h5> <h6> <header> <main> <nav> <p> <section> <span> syntax var shadowroot = element.attachshadow(shadowrootinit); parameters shadowrootinit a shadowrootinit dictionary, which can contain the following fields: mode a string specifying the encapsulation mode for the shadow dom tree.
...hich can contain the following fields: mode a string specifying the encapsulation mode for the shadow dom tree.
Element: blur event - Web APIs
bbles while blur does not.
...entlistener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the focusout event, or by setting the usecapture parameter of addeventlistener() to true.
Element: focus event - Web APIs
les while focus does not.
...ventlistener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the focusin event, or by setting the usecapture parameter of addeventlistener() to true.
Element.getAttributeNS() - Web APIs
for non-existent attributes.
...vg> in an html5 document the attribute has to be accessed with test:foo since namespaces are not supported.
Element.innerHTML - Web APIs
ng 'el' is an html dom element el.innerhtml = name; // harmless in this case // ...
...if your project is one that will undergo any form of security review, using innerhtml most likely will result in your code being rejected.
Element.outerHTML - Web APIs
.
...html property: html <div id="d"> <p>content</p> <p>further elaborated</p> </div>
javascript var d = document.getelementbyid("d"); console.log(d.outerhtml); // the string '<div id="d"><p>content</p><p>further elaborated</p></div>' // is written to the console window replacing a node by setting the outerhtml property: html <div id="container"> <div id="d">this is a div.</div> </div>
javascript var container = document.getelementbyid("container"); var d = document.getelementbyid("d"); console.log(container.firstchild.nodename); // logs "div" d.outerhtml = "<p>this paragraph replaced the original div.</p>"; console.log(container.firstchild.nodename); // logs "p" // the #d div is no longer part of the document tree, // the new paragraph replaced it.
Event.defaultPrevented - Web APIs
ault() canceled the event.
...boolean, where true indicates that the default user agent action was prevented, and false indicates that it was not.
Event.preventDefault() - Web APIs
ion at once.
...ass="container"> <p>please enter your name using lowercase letters only.</p> <form> <input type="text" id="my-textbox"> </form> </div> css we use a little bit of css for the warning box we'll draw when the user presses an invalid key: .warning { border: 2px solid #f39389; border-radius: 2px; padding: 10px; position: absolute; background-color: #fbd8d4; color: #3b3c40; }
javascript and here's the
javascript code that does the job.
FileReader.readAsDataURL() - Web APIs
without first removing the data-url declaration preceding the base64-encoded data.
...put[type=file]').files[0]; const reader = new filereader(); reader.addeventlistener("load", function () { // convert image file to base64 string preview.src = reader.result; }, false); if (file) { reader.readasdataurl(file); } } live result example reading multiple files html <input id="browse" type="file" onchange="previewfiles()" multiple> <div id="preview"></div>
javascript function previewfiles() { var preview = document.queryselector('#preview'); var files = document.queryselector('input[type=file]').files; function readandpreview(file) { // make sure `file.name` matches our extensions criteria if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new filereader(); reader.addeventlistener("load", function () { var ima...
Using the Frame Timing API - Web APIs
rate and the minimum and maximum rates (for a specific recording session).
... of where a site might be having frame related performance problems (for example, by correlating the recording's minimum rates with their respective waterfall events).
GlobalEventHandlers.onanimationiteration - Web APIs
animation: 2s ease-in-out 0s infinite alternate both paused slidebox; } the animation's keyframes are defined next; they describe an animation which causes the box to migrate from the top-left corner of the container to the bottom-right corner.
...ease-in-out 0s infinite alternate both paused slidebox; } the animation's keyframes are defined next; they describe an animation which causes the box to migrate from the top-left corner of the container to the bottom-right corner.
GlobalEventHandlers.onclick - Web APIs
gument.
...vascript document.getelementbyid('demo').onclick = function changecontent() { document.getelementbyid('demo').innerhtml = "help me"; document.getelementbyid('demo').style = "color: red"; } result getting the coordinates of clicks this example displays the coordinates at which the most recent mouse button click occurred.
GlobalEventHandlers.oncontextmenu - Web APIs
ole argument.
...yframes spin { from { transform: rotate(0); } to { transform: rotate(1turn); } } .shape { width: 8em; height: 8em; display: flex; align-items: center; justify-content: center; animation: spin 18s linear infinite; background: lightsalmon; border-radius: 42%; margin: 1em; } .paused { background-color: #ddd; } .paused .shape { animation-play-state: paused; }
javascript function pause(e) { body.classlist.add('paused'); note.removeattribute('hidden'); } function play(e) { body.classlist.remove('paused'); note.setattribute('hidden', ''); } const body = document.queryselector('body'); const note = document.queryselector('.note'); window.oncontextmenu = pause; window.onpointerdown = play; result specifications specification status com...
GlobalEventHandlers.onpointerdown - Web APIs
get.onpointerdown = downhandler; var downhandler = target.onpointerdown; value a function to handle the pointerdown event for the target element, document, or window.
... downhandler = target.onpointerdown; value a function to handle the pointerdown event for the target element, document, or window.
GlobalEventHandlers.ontransitioncancel - Web APIs
0px; font: bold 1.6em "helvetica", "arial", sans-serif; -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s; transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s; } .box:hover { background-color: #ffcccc; color: #000000; width: 200px; height: 200px; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.
...= window.settimeout(appear, 2000); function appear() { box.style.display = 'block'; } } box.ontransitioncancel = function(event) { console.log('transitioncancel fired after ' + event.elapsedtime + ' seconds.'); } result the resulting content looks like this: notice what happens when you hover your mouse cursor over the box, then move it away.
HTMLElement: change event - Web APIs
ice-cream" name="ice-cream"> <option value="">select one …</option> <option value="chocolate">chocolate</option> <option value="sardine">sardine</option> <option value="vanilla">vanilla</option> </select> </label> <div class="result"></div> body { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; }
javascript const selectelement = document.queryselector('.ice-cream'); selectelement.addeventlistener('change', (event) => { const result = document.queryselector('.result'); result.textcontent = `you like ${event.target.value}`; }); result text input element for some elements, including <input type="text">, the change event doesn't fire until the control loses focus.
...yselector('.result'); result.textcontent = `you like ${event.target.value}`; }); result text input element for some elements, including <input type="text">, the change event doesn't fire until the control loses focus.
HTMLElement.hidden - Web APIs
ers elements that are not hidden must not link to elements which are.
... class="panel"> <h1>welcome to foobar.com!</h1> <p>by clicking "ok" you agree to be awesome every day!</p> <button class="button" id="okbutton">ok</button> </div> this html creates a panel (in a <div> block) that welcomes the user to a site and tells them what they're agreeing to by clicking the ok button.
HTMLFormControlsCollection.namedItem() - Web APIs
the htmlformcontrolscollection.nameditem() method returns the radionodelist or the element in the collection whose name or id match the specified name, or null if no node matches.
...ke that one, in
javascript, using the array bracket syntax with a string, like collection["value"] is equivalent to collection.nameditem("value").
HTMLFormElement - Web APIs
ose which are descendants of the <form> and those which are made members of the form using their form attributes.
..."action"> or <input name="post">.
HTMLImageElement.height - Web APIs
ifically, for viewports up to 400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 300px.
...ewports up to 400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 300px.
HTMLImageElement.width - Web APIs
cifically, for viewports up to 400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 400px.
...iewports up to 400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 400px.
HTMLSelectElement.form - Web APIs
eturns a htmlformelement representing the form that this element is associated with.
...e="q"></label> <input type="submit" value="search..."> </form>
javascript a property available on all form elements, "type" returns the type of the calling form element.
HTMLSelectElement.item() - Web APIs
the htmlselectelement.item() method returns the element corresponding to the htmloptionelement whose position in the options list corresponds to the index given in the parameter, or null if there are none.
...long, like selectelt[index] is equivalent to selectelt.nameditem(index).
HTMLSelectElement.namedItem() - Web APIs
the htmlselectelement.nameditem() method returns the htmloptionelement corresponding to the htmloptionelement whose name or id match the specified name, or null if no option matches.
...et syntax with a string, like selectelt["value"] is equivalent to selectelt.nameditem("value").
HTMLSelectElement.selectedOptions - Web APIs
ption> <option value="4">pepperoni pizza</option> <option value="5">taco</option> </select> <br> <button name="order" id="order"> order now </button> <p id="output"> </p> the <select> element is set to allow multiple items to be selected, and it is 7 rows tall.
... value="4">pepperoni pizza</option> <option value="5">taco</option> </select> <br> <button name="order" id="order"> order now </button> <p id="output"> </p> the <select> element is set to allow multiple items to be selected, and it is 7 rows tall.
HTMLTableElement.deleteRow() - Web APIs
ecial index -1 can be used to remove the very last row of a table.
...not equal to the special index -1, representing the last row of the table, the exception index_size_err is thrown.
HTMLTableElement.deleteTFoot() - Web APIs
the htmltableelement.deletetfoot() method removes the <tfoot> element from a given <table>.
... the htmltableelement.deletetfoot() method removes the <tfoot> element from a given <table>.
HTMLTableElement.deleteTHead() - Web APIs
the htmltableelement.deletethead() removes the <thead> element from a given <table>.
... the htmltableelement.deletethead() removes the <thead> element from a given <table>.
HTMLTextAreaElement - Web APIs
efined on htmltextareaelement in dom level 2 html and earlier specifications.
... } } css textarea.noscrollbars { overflow: hidden; width: 300px; height: 100px; } html <form> <fieldset> <legend>your comments</legend> <p><textarea class="noscrollbars" onkeyup="autogrow(this);"></textarea></p> <p><input type="submit" value="send" /></p> </fieldset> </form> insert html tags example insert some html tags or smiles or any custom text in a textarea.
The HTML DOM API - Web APIs
ation pagetransitionevent popstateevent web components interfaces these interfaces are used by the web components api to create and manage the available custom elements.
...on, are used by the websockets_api.
History.pushState() - Web APIs
in an html document, the history.pushstate() method adds a state to the browser's session history stack.
...rent hash isn't #foo.
History - Web APIs
is method silently has no effect.
...s opaque by the dom; you may specify any
javascript object that can be serialized.
IDBCursor.continuePrimaryKey() - Web APIs
or nextunique.
...an iteration of all articles tagged with "
javascript" since your last visit: let request = articlestore.index("tag").opencursor(); let count = 0; let unreadlist = []; request.onsuccess = (event) => { let cursor = event.target.result; if (!cursor) { return; } let lastprimarykey = getlastiteratedarticleid(); if (lastprimarykey > cursor.primarykey) { cursor.continueprimarykey("
javascript", lastprimarykey); return; } // update lastiteratedarticleid setlastiteratedarticleid(cursor.primarykey); // preload 5 articles into the unread list; unreadlist.push(cursor.value); if (++count < 5) { cursor.continue(); } }; specifications specification status comment indexed database api draftthe definition of 'continueprimarykey()...
IDBFactory.cmp() - Web APIs
the cmp() method of the idbfactory interface compares two values as keys to determine equality and ordering for indexeddb operations, such as storing and iterating.
... the cmp() method of the idbfactory interface compares two values as keys to determine equality and ordering for indexeddb operations, such as storing and iterating.
IDBObjectStore.createIndex() - Web APIs
the createindex() method of the idbobjectstore interface creates and returns a new idbindex object in the connected database.
...tions performed on the data via key ranges will then obey sorting rules of that locale (see locale-aware sorting.) you can specify its value in one of three ways: string: a string containing a specific locale code, e.g.
KeyboardEvent.code - Web APIs
t.key property instead.
...ml <p>use the wasd (zqsd on azerty) keys to move and steer.</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world"> <polygon id="spaceship" points="15,0 0,30 30,30"/> </svg> <script>refresh();</script> css .world { margin: 0px; padding: 0px; background-color: black; width: 400px; height: 400px; } #spaceship { fill: orange; stroke: red; stroke-width: 2px; }
javascript the first section of the
javascript code establishes some variables we'll be using.
MSSiteModeEvent - Web APIs
cancels the default action of an event.
... description actionurl gets the url of a jump list item that is removed.
MediaQueryList.media - Web APIs
the media read-only property of the mediaquerylist interface is a domstring representing a serialized media query.
...lized media query.
MediaStreamConstraints.audio - Web APIs
oplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; }
javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: true }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": ...
...oplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; }
javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: { samplesize: 8, echocancellation: true } }).then(stream => audioelement.src...
MediaStreamConstraints.video - Web APIs
th="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; }
javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: true }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + "...
...th="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; }
javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 120, framerate: 15 } }).then(stream =>...
Media Source API - Web APIs
the media source api, formally known as media source extensions (mse), provides functionality enabling plugin-free web-based streaming media.
... live profile content can introduce latency due to its transcoding and broadcasting, so dash is not suitable for real time communication like webrtc is.
Navigator - Web APIs
r.requestmediakeysystemaccess() returns a promise for a mediakeysystemaccess object.
...romise for a mediakeysystemaccess object.
Node.isSameNode() - Web APIs
he issamenode() method for node objects tests whether two nodes are the same (that is, whether they reference the same object).
...he second is different.
PromiseRejectionEvent() - Web APIs
the promiserejectionevent() constructor returns a newly created promiserejectionevent, which represents events fired when a
javascript promise is rejected.
...nt() constructor returns a newly created promiserejectionevent, which represents events fired when a
javascript promise is rejected.
PromiseRejectionEvent.promise - Web APIs
the promiserejectionevent interface's promise read-only property indicates the
javascript promise which was rejected.
... the promiserejectionevent interface's promise read-only property indicates the
javascript promise which was rejected.
RTCPeerConnection.peerIdentity - Web APIs
the read-only rtcpeerconnection property peeridentity returns a
javascript promise that resolves to an rtcidentityassertion which contains a domstring identifying the remote peer.
... the read-only rtcpeerconnection property peeridentity returns a
javascript promise that resolves to an rtcidentityassertion which contains a domstring identifying the remote peer.
Range.setStart() - Web APIs
le uses the range.setstart() and range.setend() methods to add part of an address to a range.
...et); range.setend(address, endoffset); const mark = document.createelement('mark'); range.surroundcontents(mark); result get characters from a text node this example uses the range.setstart() and range.setend() methods to define the contents of a range.
ServiceWorkerContainer.register() - Web APIs
scope.
...', error); }); } else { console.log('service workers are not supported.'); } the following code, if included in example.com/index.html, at the root of a site, would apply to exactly the same pages as the example above.
Service Worker API - Web APIs
eation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the server.
...that it is associated with, intercepting and modifying navigation and resource requests, and caching resources in a very granular fashion to give you complete control over how your app behaves in certain situations (the most obvious one being when the network is not available).
Using readable streams - Web APIs
as a
javascript developer, programmatically reading and manipulating streams of data received over the network, chunk by chunk, is very useful!
... via a syntax that looks complex at first, but actually isn’t too bad.
Using writable streams - Web APIs
as a
javascript developer, programmatically writing data to a stream is very useful!
...tructor; the syntax looks complex at first, but actually isn’t too bad.
Getting started with WebGL - Web APIs
next » webgl enables web content to use an api based on opengl es 2.0 to perform 2d and 3d rendering in an html canvas in browsers that support it without the use of plug-ins.
...ies, making it easier to build 3d applications and games, such as three.js and babylon.js.
WebGL best practices - Web APIs
highlights dos and don'ts, but also details why.
...esktop) webgl_compressed_texture_etc (mobile) webgl_compressed_texture_astc has both higher quality and/or higher compression, but is only supported on newer hardware.
Writing WebSocket servers - Web APIs
pplication listening on any port of a tcp server that follows a specific protocol.
..., read the next 4 octets (32 bits); this is the masking key.
Window.getSelection() - Web APIs
an <iframe> that is not displayed (eg.
...(like window.alert() or document.write()), the object's tostring() method is called and the returned value is passed to the function.
Window.matchMedia() - Web APIs
ered to the object.
...a query (max-width: 600px) and displays the value of the resulting mediaquerylist's matches property in a <span>; as a result, the output will say "true" if the viewport is less than or equal to 600 pixels wide, and will say "false" if the window is wider than that.
Window.pageYOffset - Web APIs
nce that's done, the vertical scroll position is checked by looking at the value of pageyoffset in the frame's contentwindow.
...> </iframe> <div id="info"> </div>
javascript var frame = document.getelementbyid("frame"); var framedoc = frame.contentdocument; var info = document.getelementbyid("info"); var target = framedoc.getelementbyid("overview"); framedoc.scrollingelement.scrolltop = target.offsettop; info.innertext = "y offset after scrolling: " + frame.contentwindow.pageyoffset + " pixels"; the
javascript code begins by getting into frame and info the <iframe> element that contains our content as well as the <div> element into which we'll output the result of our scroll position check.
Window.window - Web APIs
rwise, you'd have to do a manual var window = this; assignment at the top of your script.
...r script.
WindowEventHandlers.onbeforeunload - Web APIs
firefox prompt will always be shown // chrome requires returnvalue to be set e.returnvalue = ''; }); guarantee the browser unload by removing the returnvalue property of the event window.addeventlistener('beforeunload', function (e) { // the absence of a returnvalue property on the event will guarantee the browser unload happens delete e['returnvalue']; }); notes when your page uses
javascript to render content, the
javascript may stop when leaving and then navigating back to the page.
...er('beforeunload', function (e) { // the absence of a returnvalue property on the event will guarantee the browser unload happens delete e['returnvalue']; }); notes when your page uses
javascript to render content, the
javascript may stop when leaving and then navigating back to the page.
Worklet.addModule() - Web APIs
the addmodule() method of the worklet interface loads the module in the given
javascript file and adds it to the current worklet.
... the addmodule() method of the worklet interface loads the module in the given
javascript file and adds it to the current worklet.
Sending and Receiving Binary Data - Web APIs
receiving binary data using
javascript typed arrays the responsetype property of the xmlhttprequest object can be set to change the expected response type from the server.
...on-the-fly and uses the post method to send the "file" to the server.
XMLHttpRequestResponseType - Web APIs
the xmlhttprequestresponsetype type is an enumerated set of strings which are used to specify the type of data contained in the response of an xmlhttprequest.
... "text", the default type.
XRInputSourceArray.keys() - Web APIs
the keys() method in the xrinputsourcearray interface returns a
javascript iterator which can then be used to iterate over the keys used to reference each item in the array of input sources.
... the keys() method in the xrinputsourcearray interface returns a
javascript iterator which can then be used to iterate over the keys used to reference each item in the array of input sources.
XRInputSourceArray.values() - Web APIs
the xrinputsourcearray method values() returns a
javascript iterator that can walk over the list of xrinputsource objects contained in the array, from first to last.
... the xrinputsourcearray method values() returns a
javascript iterator that can walk over the list of xrinputsource objects contained in the array, from first to last.
Using the link role - Accessibility
vate link” or “move to link”, should perform the same as they do with ordinary links.
...l <h1>role="link" example</h1> <span data-href="https://mozilla.org" tabindex="0" id="link1" role="link" class="link"> fake accessible link created using a span </span> <p><a href="https://mozilla.org" target="_blank">actual real link</a></p> css span[role="link"] { color: blue; text-decoration: underline; cursor: pointer; } span[role="link"]:focus { outline: 1px dotted black; }
javascript const spanelem = document.queryselector('span'); //handles clicks and keydowns on the link function navigatelink(e) { if (e.type === 'click' || e.key === 'enter') { let ref = e.target != null ?
ARIA: timer role - Accessibility
uctions for navigating or operating this element.
...tes, e-commerce sites, and event countdowns (see https://countingdownto.com/).
ARIA: banner role - Accessibility
t each page should be limited to only one header with the role of banner.
...src="images/w3c.png" alt="w3c logo"> <h1>aria landmarks</h1> <p>identifying page subsections for easy navigation</p> </header> best practices while it is best to use the header element and ensure it is not a descendant of any subsection of the page, sometimes you don't have access to the underlying html.
ARIA: form role - Accessibility
form" to identify a region of the page; do not use it to identify every form field.
...ike button, input, select, and textarea associated wai-aria roles, states, and properties no role specific states or properties.
ARIA: grid role - Accessibility
serif; } table { margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; } tbody th, tbody td { padding: 5px; } tbody td { border: 1px solid #000; text-align: right; color: #767676; } tbody 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.
...dy> </table> css table { margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; } tbody th, tbody td { padding: 5px; } tbody td { border: 1px solid #000; text-align: right; color: #767676; } tbody 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.
ARIA: List role - Accessibility
associated wai-aria roles, states, and properties listitem a single item in a list or directory.
...o have their own place in a pages table of contents.
ARIA: Listitem role - Accessibility
h role list must have one or more elements with the role listitem as children, a one or more elements with the role of group that have one or more elements with the listitem role as children.
...o have their own place in a pages table of contents.
ARIA: textbox role - Accessibility
div role="textbox" contenteditable="true" aria-placeholder="5-digit zipcode" aria-labelledby="txtboxlabel"></div> <!-- multi-line text area --> <div id="txtboxmultilinelabel">enter the tags for the article</div> <div role="textbox" contenteditable="true" aria-multiline="true" aria-labelledby="txtboxmultilinelabel" aria-required="true"></div> semantic elements are more concise and require no
javascript to support textbox features.
... a value must be provided for the field before it is submitted.
Basic form hints - Accessibility
id="wine-3" type="checkbox" value="pinot-grigio"/> <label for="wine-3">pinot grigio</label> </li> <li> <input id="wine-4" type="checkbox" value="gewurztraminer"/> <label for="wine-4">gewürztraminer</label> </li> </ul> </form> labeling with aria the html <label> element is appropriate for form-related elements, but many form controls are implemented as a dynamic
javascript widget, using <div>s or <span>s.
... applied, to indicate to an at which data fields have incorrect data, so that the user knows they have entered invalid data.
Web accessibility for seizures and physical reactions - Accessibility
essibile for those with vestibular disorders, and how to measure and prevent content leading to seizures and / or other physical reactions.
...red by content that flashes at certain frequencies for more than a few flashes” and goes on to note, very specifically that: “people are even more sensitive to red flashing than to other colors, so a special test is provided for saturated red flashing”.
Understandable - Accessibility
nform to the criteria practical resource 3.3.1 error identification (a) when a user is filling out a form or choosing between options, any error that is detected should be clearly reported to the user, along with the form control that the error relates to.
... correction are known, provide these to the user (e.g.
-moz-image-rect - CSS: Cascading Style Sheets
d="box2" style="left:133px;top:0px;">top right</div> <div id="box3" style="left:0px;top:136px;">bottom left</div> <div id="box4" style="left:133px;top:136px;">bottom right</div> </div> this places the four segments of our image in a two-by-two box grid.
...33px;top:0px;">top right</div> <div id="box3" style="left:0px;top:136px;">bottom left</div> <div id="box4" style="left:133px;top:136px;">bottom right</div> </div> this places the four segments of our image in a two-by-two box grid.
:disabled - CSS: Cascading Style Sheets
css pseudo-class represents any disabled element.
...g address</legend> <label for="billing-checkbox">same as shipping address:</label> <input type="checkbox" id="billing-checkbox" checked> <br> <input type="text" placeholder="name" disabled> <input type="text" placeholder="address" disabled> <input type="text" placeholder="zip code" disabled> </fieldset> </form> css input[type="text"]:disabled { background: #ccc; }
javascript // wait for the page to finish loading document.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 ...
:indeterminate - CSS: Cascading Style Sheets
ave their html indeterminate attribute set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate <progress> elements.
...eckbox & radio button this example applies special styles to the labels associated with indeterminate form fields.
:scope - CSS: Cascading Style Sheets
y to explicitly establish a scoped element.
...); if (paragraph.matches(":scope")) { output.innertext = "yep, the element is its own scope as expected!"; } html <p id="para"> this is a paragraph.
@media - CSS: Cascading Style Sheets
the @media css at-rule can be used to apply part of a style sheet based on the result of one or more media queries.
... prefers-reduced-motion the user prefers less motion on the page added in media queries level 5.
CSS Properties Reference - CSS: Cascading Style Sheets
common css properties reference the following is a basic list of the most common css properties with the equivalent of the dom notation which is usually accessed from
javascript: note: this list is incomplete.
... common css properties reference the following is a basic list of the most common css properties with the equivalent of the dom notation which is usually accessed from
javascript: note: this list is incomplete.
float - CSS: Cascading Style Sheets
table-row block table-row-group block table-column block table-column-group block table-cell block table-caption block table-header-group block table-footer-group block inline-flex flex inline-grid grid other unchanged note: if you're referring to this property from
javascript as a member of the htmlelement.style object, modern browsers support float, but in older browsers you have to spell it as cssfloat, with internet explorer versions 8 and older using stylefloat.
...to this property from
javascript as a member of the htmlelement.style object, modern browsers support float, but in older browsers you have to spell it as cssfloat, with internet explorer versions 8 and older using stylefloat.
Demos of open web technologies
mozilla supports a wide variety of exciting open web technologies, and we encourage their use.
...urce code) loader with blend modes text reveal with clip-path ambient shadow with custom properties luminiscent vial css-based single page application (source code) transformations impress.js (source code) games ioquake3 (source code) kai 'opua (source code) web apis notifications api html5 notifications (source code) web audio api web audio fireworks oscope.js -
javascript oscilloscope html5 web audio showcase (source code) html5 audio visualizer (source code) graphical filter editor and visualizer (source code) file api slide my text - presentation from plain text files web workers web worker fractals photo editor coral generator raytracer hotcold touch typing ...
EXSLT
that are supported by firefox are listed below: common (exsl)the exslt common package provides basic functions that expand upon the capabilities of xslt.math (math)the exslt math package provides functions for working with numeric values and comparing nodes.regular expressions (regexp)the exslt regular expressions package provides functions that allow testing, matching, and replacing text using
javascript style regular expressions.sets (set)the exslt sets package offers functions that let you perform set manipulation.strings (str)the exslt strings package provides functions that allow the manipulation of strings.
...l:node-set() exsl:object-type() math the exslt math package provides functions for working with numeric values and comparing nodes.
Media buffering, seeking, and time ranges - Developer guides
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="300" height="20"> </canvas> </p> and a little bit of
javascript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var mycanvas = document.getelementbyid('my-canvas'); var context = mycanvas.getcontext('2d'); context.fillstyle = 'lightgray'; context.fillrect(0, 0, mycanvas.width, mycanvas.height); context.fillstyle = 'red'; context.strokestyle = 'white'; var inc = mycanvas.width / myaudio.dura...
...ring display: .buffered { height: 20px; position: relative; background: #555; width: 300px; } #buffered-amount { display: block; height: 100%; background-color: #777; width: 0; } .progress { margin-top: -20px; height: 20px; position: relative; width: 300px; } #progress-amount { display: block; height: 100%; background-color: #595; width: 0; } and the following
javascript provides our functionality: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); myaudio.addeventlistener('progress', function() { var duration = myaudio.duration; if (duration > 0) { for (var i = 0; i < myaudio.buffered.length; i++) { if (myaudio.buffered.start(myaudio.buffered.length - 1 - i) < myaudio.currenttime) { do...
HTML5 Parser - Developer guides
nt handlers settimeout() setinterval() <script async src="..."> <script defer src="..."> if you use the same mechanism for loading script libraries for all browsers including ie, then your code probably will not be affected by this change.
...ng </script> by surrounding it with comment markers, while supported by html5, is problematic in cases where the closing comment marker is omitted (see preceding point).
Using HTML sections and outlines - Developer guides
eateelement("article"); document.createelement("aside"); document.createelement("footer"); document.createelement("header"); document.createelement("nav"); document.createelement("section"); document.createelement("time"); </script> <![endif]--> as a last precaution, you could also add an explicit <noscript> element inside the <head> element to warn any users that have
javascript disabled that your page relies on
javascript: <noscript> <p><strong>this web page requires
javascript to be enabled.</strong></p> <p>
javascript is an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p> <p><a href="https://goo.gl/koeeaj">how to enable
javascript?</a></p> </noscript> this leads to the following code to allo...
...is configured not to use scripting: <!--[if lt ie 9]> <script> document.createelement("article"); document.createelement("aside"); document.createelement("footer"); document.createelement("header"); document.createelement("nav"); document.createelement("section"); document.createelement("time"); </script> <![endif]--> <noscript> <p><strong>this web page requires
javascript to be enabled.</strong></p> <p>
javascript is an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p> <p><a href="https://goo.gl/koeeaj">how to enable
javascript?</a></p> </noscript> note: this code will also cause the html validator to return errors.
Writing forward-compatible websites - Developer guides
this page explains how to write websites that do not break when new browser versions are released.
...e has been called'); } </script> <div onclick="window.localname()">clicking me should show an alert<div> don't concatenate scripts you don't control the "use strict;" directive in ecmascript, when used on the file level, applies to everything in the file.
Developer guides
es a group of technologies allowing web applications to make quick, incremental updates to the user interface without reloading the entire browser page.
...f technologies allowing web applications to make quick, incremental updates to the user interface without reloading the entire browser page.
Identifying resources on the Web - HTTP
rs also know how to handle other protocols such as mailto: (to open a mail client) or ftp: to handle file transfer, so don't be surprised if you see such protocols.
...other protocols such as mailto: (to open a mail client) or ftp: to handle file transfer, so don't be surprised if you see such protocols.
Common MIME types - HTTP
e application/gzip .gif graphics interchange format (gif) image/gif .htm .html hypertext markup language (html) text/html .ico icon format image/vnd.microsoft.icon .ics icalendar format text/calendar .jar java archive (jar) application/java-archive .jpeg .jpg jpeg images image/jpeg .js
javascript text/
javascript, per the following specifications: https://html.spec.whatwg.org/multipage/#scriptinglanguages https://html.spec.whatwg.org/multipage/#dependencies:willful-violation https://datatracker.ietf.org/doc/draft-ietf-dispatch-
javascript-mjs/ .json json format application/json .jsonld json-ld format application/ld+json ...
...criptinglanguages https://html.spec.whatwg.org/multipage/#dependencies:willful-violation https://datatracker.ietf.org/doc/draft-ietf-dispatch-
javascript-mjs/ .json json format application/json .jsonld json-ld format application/ld+json .mid .midi musical instrument digital interface (midi) audio/midi audio/x-midi .mjs
javascript module text/
javascript .mp3 mp3 audio audio/mpeg .mpeg mpeg video video/mpeg .mpkg apple installer package application/vnd.apple.installer+xml .odp opendocument presentation document application/vnd.oasis.opendocument.presentation .ods opendocument spreadsheet document application/vnd.oasis.opendocument.spreadsheet ...
HTTP caching - HTTP
ivate cache-control: public expiration the most important directive here is "max-age=<seconds>" which is the maximum amount of time a resource will be considered fresh.
... expiration times as far in the future as possible.
Feature Policy - HTTP
al factors.
...or web developers to detect or handle the case when the feature is disabled.
CSP: base-uri - HTTP
filesystem from source directives.
...lar methods for creating code from strings.
CSP: img-src - HTTP
filesystem from source directives.
...lar methods for creating code from strings.
DNT - HTTP
privacy rather than personalized content.
...ype request header forbidden header name yes syntax dnt: 0 dnt: 1 dnt: null directives 0 the user prefers to allow tracking on the target site.
MathML
for writing mathml, including suggested mathml editors and how to integrate their output into web content.
...butors w3c math home www-math w3.org mail archive tools w3c validator mathzilla firefox add-on collection texzilla —
javascript latex to mathml converter (live demo, firefox os webapp, firefox add-on, using in a web page, js program etc) latexml - convert latex documents into html+mathml web pages web equation - turn handwritten equations into mathml or latex mathjax - cross-browser
javascript display engine for mathematics.
Critical rendering path - Web Performance
the critical rendering path is the sequence of steps the browser goes through to convert the html, css, and
javascript into pixels on the screen.
... rendering path is the sequence of steps the browser goes through to convert the html, css, and
javascript into pixels on the screen.
textLength - SVG: Scalable Vector Graphics
displayed elements contained inside a grouping <div>: <div class="controls"> <input type="range" id="widthslider" min="80" max="978"> <span id="widthdisplay"></span> </div> the <input> element, of type "range", is used to create the slider control the user will manipulate to change the width of the text.
...g <div>: <div class="controls"> <input type="range" id="widthslider" min="80" max="978"> <span id="widthdisplay"></span> </div> the <input> element, of type "range", is used to create the slider control the user will manipulate to change the width of the text.
SVG documentation index - SVG: Scalable Vector Graphics
svg viewers prior to the release of firefox 1.5 unfortunately paid scant attention to namespaces, but they are essential to multi-xml dialect supporting user agents such as gecko-based browsers which must be very strict.
... as the use of shadow, blur effects or even merging the results of different filters.
SVG In HTML Introduction - SVG: Scalable Vector Graphics
overview this article and its associated example shows how to use inline svg to provide a background picture for a form.
...00%; position:absolute; top:0; left:0; z-index:-1;"> <lineargradient id="gradient"> <stop class="begin" offset="0%"/> <stop class="end" offset="100%"/> </lineargradient> <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> </svg> </body> </html> discussion the page is mainly regular html, css and
javascript.
Mixed content - Web security
the behavior of the https page and potentially steal sensitive data from the user.
...mixed display content can be blocked by setting a preference).
Using shadow DOM - Web Components
own custom elements.
...orking through a simple example now let's walk through a simple example to demonstrate the shadow dom in action inside a custom element — <popup-info> (see a live example also).
Caching compiled WebAssembly modules - WebAssembly
.
...l)).then(results => { storeindatabase(db, results.module); return results.instance; }); }) }, note: it is for this kind of usage that webassembly.instantiate() returns both a module and an instance: the module represents the compiled code and can be stored/retrieved in idb or shared between workers via postmessage(); the instance is stateful and contains the callable
javascript functions, therefore it cannot be stored/shared.
Communicating With Other Scripts - Archive of obsolete content
ata.url("page.html") var pagemod = mod.pagemod({ include: pageurl, contentscriptfile: self.data.url("content-script.js"), contentscriptwhen: "ready" }) tabs.open(pageurl); the target web page "page.html" includes a button and a page script: <html> <head> <meta charset="utf-8"> </head> <body> <input id="message" type="button" value="send a message"/> <script type="text/
javascript" src="page-script.js"></script> </body> </html> the content script "content-script.js" adds an event listener to the button, that sends a custom event containing a message: var messenger = document.getelementbyid("message"); messenger.addeventlistener("click", sendcustomevent, false); function sendcustomevent() { var greeting = {"greeting" : "hello world"}; var event = document.createeve...
Cross-domain Content Scripts - Archive of obsolete content
ement.textcontent = summary; }; request.send(); }); function getsummary(forecast) { return forecast.regionalfcst.fcstperiods.period[0].paragraph[0].$; } finally, we need to add the "cross-domain-content" key to "package.json": "permissions": { "cross-domain-content": ["http://datapoint.metoffice.gov.uk"] } content permissions and unsafewindow if you use "cross-domain-content", then
javascript values in content scripts will not be available from pages.
SDK and XUL Comparison - Archive of obsolete content
advantages of the sdk simplicity the sdk provides high-level
javascript apis to simplify many common tasks in add-on development, and tool support which greatly simplifies the process of developing, testing, and packaging an add-on.
console - Archive of obsolete content
you're developing your add-on using the extension auto-installer, then the add-on is installed in firefox, meaning that messages will appear in the browser console.
View Source for XUL Applications - Archive of obsolete content
importing gviewsourceutils xul applications wanting to show the source code for documents should import the viewsourceutils.js script instead of attempting to open the viewsource.xul window themselves: <script type="application/
javascript" src="chrome://global/content/viewsourceutils.js"/> viewsourceutils.js exposes a gviewsourceutils global into the scope of the window that imports that script.
Windows - Archive of obsolete content
t.screeny - startpos[1]; window.moveto(newx, newy); } } function mouseup(event) { startpos = null; } window.addeventlistener("mousedown", mousedown, false); window.addeventlistener("mouseup", mouseup, false); window.addeventlistener("mousemove", mousemove, false); xul titlebar element xul applications can take advantage of the titlebar element to achieve a similar result without extra
javascript code.
XML-related code snippets - Archive of obsolete content
how to create a dom tree using xmlhttprequest parsing and serializing xml using xpath jxon (lossless
javascript xml object notation) xsl transforms xlink xinclude xml:id xml:base support in old browsers xpointer svg namespaces, or why http://www.mozilla.org/keymaster/gat...re.is.only.xul is at the top of every xul document.
XPath - Archive of obsolete content
tnode should be the same object, if context is a ajax xml object (example: returnedxml) this should be used as : returnedxml.evaluate(xpathexpression,returnedxml,namespaceresolver,returntype,result); //contextnode should be used in the one in which it was created //add by mooring 2008-11-15 16:00 china var xhr = new ajax('post','demo.xml',parsexml,'xml'); //ajax 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...
Default Preferences - Archive of obsolete content
ost of an extension's directories can be named arbitrarily and mapped using a chrome manifest, default preferences must be in very particular spot: | extension root +--|content +--|skin +--|defaults +--|preferences to add preferences simply drop a .js file into that directory and mozilla will read it and set the appropriate preferences.
Inline options - Archive of obsolete content
var doc = asubject; var control = doc.getelementbyid("myaddon-pref-control"); control.value = "test"; } } }; services.obs.addobserver(observer, "addon-options-displayed", false); // don't forget to remove your observer when your add-on is shut down.
Custom XUL Elements with XBL - Archive of obsolete content
rom the js code in your binding, we use the getanonymouselementbyattribute dom method: let namelabel = document.getanonymouselementbyattribute( this, "anonid", "xulshoolhello-name-label"); implementation the implementation section defines most of the scripting side of your element.
Making it into a dynamic overlay and packaging it up for distribution - Archive of obsolete content
ome urls in the copy of tinderstatusoverlay.xul to point to the new locations the files will be in when they get installed via the xpi: <?xml version="1.0"?> <?xml-stylesheet href="chrome://tinderstatus/content/tinderstatus.css" type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/
javascript" src="chrome://tinderstatus/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay> we also need to change the urls in the copy of tinderstatus.css: statusbarpanel#tinderbox-status { list-style-image: url("chrome:/...
Prerequisites - Archive of obsolete content
in order to complete this tutorial you need to have and know how to use the following programs on your computer: an installation of mozilla; zip and unzip utilities; a text editor.
Creating a hybrid CD - Archive of obsolete content
'jpeg' "jpeg file" .pl ascii 'mcpl' 'text' "perl file" .pm ascii 'mcpl' 'text' "perl module file" .xml ascii 'r*ch' 'text' "xml file" .xul ascii 'r*ch' 'text' "xul file" .xbl ascii 'r*ch' 'text' "xbl file" .css ascii 'r*ch' 'text' "css file" .dtd ascii 'r*ch' 'text' "dtd file" .js ascii 'r*ch' 'text' "
javascript file" .mp3 raw 'tvod' 'mpg3' "mpeg file" .mpg raw 'tvod' 'mpeg' "mpeg file" .mpeg raw 'tvod' 'mpeg' "mpeg file" .au raw 'tvod' 'ulaw' "audio file" * ascii 'ttxt' 'text' "text file" for more information about recording cds, see the cd-recordable faq.
Embedding FAQ - Archive of obsolete content
{ nsidomdocument doc = browser.getdocument(); system.out.println(doc); } }); while (!shell.isdisposed()) { if (!display.readanddispatch()) { display.sleep(); } } } how to map a
javascript function to a c++ function define an xpcom class defining the function you'll be doing in
javascript.
XML in Mozilla - Archive of obsolete content
us and/or further documentation xml 1.0 w3c recommendation namespaces in xml w3c recommendation associating stylesheets with xml documents w3c recommendation styling xml documents with css manipulating xml documents with scripts through dom serializing xml dom trees to
javascript object trees (jxon) other supported xml w3c recommendations specification or technology documentation xhtml w3c recommendation xml base w3c recommendation xlink (simple xlinks only) obsolete since gecko 2.0 w3c recommendation fixptr obsolete since gecko 1.9.1 w3c "proposal...
Learn XPI Installer Scripting by Example - Archive of obsolete content
sely: as you will see in the installation script, the contents of the archive are installed onto the file system in much the same way that they are stored in the archive itself, though it's possible to rearrange things arbitrarily upon installation--to create new directories, to install files in system folders and other areas.
CommandLine - Archive of obsolete content
o the observer: chrome/content/window.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="main" title="&window.title;" windowtype="xulmine" style="width: 300px; height: 350px;" persist="screenx screeny width height sizemode"> <script type="application/
javascript" src="cmdline.js" /> ...
MacFAQ - Archive of obsolete content
icommandline try/catch can be removed, all you need is the window.arguments[0]) <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="myxul_hidden" windowtype="myxul:hiddenwindow" title="" width="0" height="0" persist="screenx screeny width height sizemode" > <!-- load the mozilla helpers --> <script type="application/
javascript" src="chrome://global/content/nsusersettings.js" /> <script><![cdata[ function debug(alogstring) { var mconsoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice) mconsoleservice.logstringmessage("myxul: " + alogstring + "\n"); } function checkotherwindows() { var single...
xulauncher - Archive of obsolete content
le ############################################################################## echo " content $xulname file:$xulname/ ">$xulmanifest # create prefs.js file ############################################################################## echo " pref(\"toolkit.defaultchromeuri\", \"chrome://$xulname/content/$xulfile\"); /* debugging prefs */ pref(\"browser.dom.window.dump.enabled\", true); pref(\"
javascript.options.showinconsole\", true); pref(\"
javascript.options.strict\", true); pref(\"nglayout.debug.disable_xul_cache\", true); pref(\"nglayout.debug.disable_xul_fastload\", true); ">$xulprefs # copy xul file to right location and run it ############################################################################## cp $xulfile $xuldir xulrunner $xulappini $@ ...
2006-10-13 - Archive of obsolete content
summary: mozilla.dev.platform - october 7th to october 13th 2006 announcements no announcments this week other traffic
javascript package system for 1.9/ff3 on sun, oct 8 2006 robert sayre inquires about the
javascript package system for 1.9 for firefox 3, robert would like to know if there is any chance we'll get this?
2006-11-17 - Archive of obsolete content
summary: mozilla.dev.platform - november 11th - november 17th, 2006 announcements no announcements this week traffic xulrunner: <browser> not allowing
javascript popup windows b notes that when using xul elements <browser/> and <tabbrowser/> the
javascript popup windows don't work out of the box and asks what needs to be implement.
2006-18-24 - Archive of obsolete content
summary: mozilla.dev.platform - november 18th - november 24th, 2006 announcements no announcements this week traffic xulrunner: <browser> not allowing
javascript popup windows b notes that when using xul elements <browser/> and <tabbrowser/> the
javascript popup windows don't work out of the box and asks what needs to be implement.
2006-11-10 - Archive of obsolete content
discussion spidermonkey for the server side a user frusturated by the difference in programming languages between client and server asks if there is a
javascript server-side framework.
NPN_GetValue - Archive of obsolete content
ariable: npnvxdisplay =1: unix only: returns the current display npnvxtappcontext: unix only: returns the application's xtappcontext npnvnetscapewindow: ms windows and unix/x11 only: ms windows: gets the native window on which plug-in drawing occurs; returns hwnd unix/x11: gets the browser toplevel window in which the plug-in is displayed; returns window npnv
javascriptenabledbool: tells whether
javascript is enabled; true=
javascript enabled, false=not enabled npnvasdenabledbool: tells whether smartupdate (former name: asd) is enabled; true=smartupdate enabled, false=not enabled npnvisofflinebool: tells whether offline mode is enabled; true=offline mode enabled, false=not enabled npnvtoolkit: npnvsupportsxembedbool: npnvwindownpobject: returns the...
NP_GetMIMEDescription - Archive of obsolete content
e-handlers.h> #include <libgnomevfs/gnome-vfs-mime-info.h> #include <libgnomevfs/gnome-vfs-utils.h> // const char* gnome_vfs_mime_get_description (const char *mime_type); const char* desc = gnome_vfs_mime_get_description ("audio/ogg"); if you use gnome gio (gio-2.0), you can get the mime type description too.
-ms-filter - Archive of obsolete content
top: 20px; left: 20px;" src="sphere.jpg" alt="sphere"> <div id="filterto" style="position: absolute; width: 200px; height: 250px; top: 20px; left: 20px; background: white; visibility: hidden;"> </div> </div> <script type="text/
javascript"> let filterimg = document.queryselector('#filterfrom'); filterimg.addeventlistener('click', dofilter); function dofilter () { filterfrom.filters.item(0).apply(); // 12 is the dissolve filter.
Examples - Game development
this page lists a number of impressive web technology demos for you to get inspiration from, and generally have fun with.
Crisp pixel art look with image-rendering - Game development
he original image we want to upscale looks like this: here's some html to create a simple canvas: <canvas id="game" width="128" height="128"></canvas> css to size the canvas and render a crisp image: canvas { width: 512px; height: 512px; image-rendering: -moz-crisp-edges; image-rendering: -webkit-crisp-edges; image-rendering: pixelated; image-rendering: crisp-edges; } and some
javascript to set up the canvas and load the image: // get canvas context var ctx = document.getelementbyid('game').getcontext('2d'); // load image var image = new image(); image.onload = function () { // draw the image into the canvas ctx.drawimage(image, 0, 0); } image.src = 'https://udn.realityripple.com/samples/11/a2954fe197.png'; this code used together produces the following result: note...
Collision detection - Game development
first one is the ball, which we explicitly defined in the collide method, and the second one is the single brick from the bricks group that the ball is colliding with.
Move the ball - Game development
understand better how it works: next steps the next step is to add some basic collision detection, so our ball can bounce off the walls.
Expando - MDN Web Docs Glossary: Definitions of Web-related terms
expando properties are properties added to dom nodes with
javascript, where those properties are not part of the object's dom specification: window.document.foo = 5; // foo is an expando the term may also be applied to properties added to objects without respecting the object's original intent, such as non-numeric named properties added to an array.
Semantics - MDN Web Docs Glossary: Definitions of Web-related terms
in programming, semantics refers to the meaning of a piece of code — for example "what effect does running that line of
javascript have?", or "what purpose or role does that html element have" (rather than "what does it look like?".) semantics in
javascript in
javascript, consider a function that takes a string parameter, and returns an <li> element with that string as its textcontent.
Vendor Prefix - MDN Web Docs Glossary: Definitions of Web-related terms
browser vendors sometimes add prefixes to experimental or nonstandard css properties and
javascript apis, so developers can experiment with new ideas while—in theory—preventing their experiments from being relied upon and then breaking web developers' code during the standardization process.
Web standards - MDN Web Docs Glossary: Definitions of Web-related terms
rk systems must conform to: ietf (internet engineering task force): internet standards (std), which among other things govern set-up and use of uris, http, and mime w3c: specifications for markup language (e.g., html), style definitions (i.e., css), dom, accessibility iana (internet assigned numbers authority): name and number registries ecma intl.: scripting standards, most prominently for
javascript iso (international organization for standardization): standards governing a diverse array of aspects, including character encodings, website management, and user-interface design learn more general knowledge web standards on wikipedia ...
Example 2 - Learn web development
#f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; }
javascript content window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); result for js no js html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>app...
Example 3 - Learn web development
f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; }
javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.classlist.add...
Example 4 - Learn web development
f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; }
javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.classlist.add...
Example 5 - Learn web development
f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; }
javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.classlist.add...
How to structure a web form - Learn web development
le forms: a form usability checklist previous overview: forms next in this module your first form how to structure a web form basic native form controls the html5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through
javascript property compatibility table for form widgets ...
Use HTML to solve common problems - Learn web development
can be used in many different ways: how to create a hyperlink how to create a table of contents with html images & multimedia how to add images to a webpage how to add video content to a webpage scripting & styling html only sets up document structure.
Images in HTML - Learn web development
tarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; css background images you can also use css to embed images into webpages (and
javascript, but that's another story entirely).
Android-specific test suites
ndroid-checkstyle, first build firefox for android with your changes; then run ./mach android checkstyle this will run the tests and report the results to stdout, as well as produce an html report.
Debugging on Mac OS X
include the mozilla's .lldbinit, you must at least put settings set target.inline-breakpoint-strategy always in your $home/.lldbinit as recommended on debugging mozilla with lldb.
ESLint
in order to help people write standard-compliant code from the start and avoid wasting time during code reviews, a set of eslint configuration files have been added to the code base so that
javascript can be analyzed automatically.
Experimental features in Firefox
eloper edition 33 no beta 33 no release 33 no preference name media.track.enabled dom document property: autoplaypolicy the document property autoplaypolicy returns a string indicating how the browser handles requests to automatically play media (either using the autoplay property on a media element or by attempting to trigger playback from
javascript code.
Message manager
message managers provide a way for chrome-privileged
javascript code to communicate across process boundaries.
mozbrowserresize
rget read only eventtarget the browser iframe type read only domstring the type of event.
mozbrowserscroll
rget read only eventtarget the browser iframe type read only domstring the type of event.
overflow-clip-box-block
padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll 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-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, sh...
overflow-clip-box-inline
padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll 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-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, sh...
MozBeforePaint
gecko 2.0 adds a new method for performing
javascript controlled animations that synchronize not only with one another, but also with css transitions and smil animations being performed within the same window.
Chrome-only Events reference
this page lists events that are only available in gecko chrome code (and sometimes in other privileged circumstances, eg.
Gecko SDK
the gecko sdk, also known as the xulrunner sdk, is a set of xpidl files, headers and tools to develop xpcom components which can then in turn e.g.
Gecko
gecko is the name of the layout engine developed by the mozilla project.
FxAccountsOAuthClient.jsm
the fxaccountsoauthclient.jsm
javascript module provides a way for browser services to authenticate with the firefox accounts oauth server.
FxAccountsProfileClient.jsm
the fxaccountsprofileclient.jsm
javascript module provides a way to fetch firefox accounts profile information.
SourceMap.jsm
al: an object with the original line and column positions.
Timer.jsm
the timer.jsm
javascript code module contains pure-
javascript implementations of settimeout, cleartimeout, setinterval, and clearinterval that are compatible with the dom window functions, but that can be used by code that does not have access to a dom window (for example,
javascript code modules or content frame scripts).
WebChannel.jsm
the webchannel.jsm
javascript code module provides an abstraction that uses the message manager and custom events apis to create a two-way communication channel between chrome and content code for specific origins (using a specific origin passed to the constructor or a lookup with nsipermissionmanager while also ensuring the scheme is https).
Mozilla Framework Based on Templates (MFBT)
the mozilla framework based on templates ("mfbt") is the central repository for macros, functions, and data structures used throughout mozilla code, including in the
javascript engine.
Extras
edextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>0</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mrow> </munderover> <mfrac> <msup> <mi>α</mi> <mi>n</mi> </msup> <mrow> <mi>n</mi> <mo>!</mo> </mrow> </mfrac> </mrow> </math> </foreignobject> <text>exp(α)</text> </switch> </g> </g> </svg> </div> inline
javascript html content <math display="block"> <mfrac> <mtext id="num">mouse</mtext> <mtext id="denum">over</mtext> </mfrac> </math>
javascript content function whoistherealert(evt) { alert("who is there?"); } function attachlistener(id) { document.getelementbyid(id).addeventlistener("mouseover", whoistherealert); } function init() { attachlistener("num"); attachlistener("denum"); } window...
MathML Torture Test
cida bright math; } .minion math { font-family: minion math; } .stixtwo math { font-family: stix two math; } .texgyrebonum math { font-family: tex gyre bonum math; } .texgyrepagella math { font-family: tex gyre pagella math; } .texgyreschola math { font-family: tex gyre schola math; } .texgyretermes math { font-family: tex gyre termes math; } .xits math { font-family: xits math; }
javascript content function updatemathfont() { var mathfont = document.getelementbyid("mathfont").value; if (mathfont == "default") { document.body.removeattribute("class"); } else { document.body.setattribute("class", mathfont); } } function load() { document.getelementbyid("mathfont").
MathML In Action
<mrow> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> </mrow> </msqrt> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow> </mfrac> </mrow> </mstyle> </math> </p>
javascript content function zoomtoggle() { if (this.hasattribute("mathsize")) { this.removeattribute("mathsize"); } else { this.setattribute("mathsize", "200%"); } } function load() { document.getelementbyid("zoomablemath").
Preferences
mozilla preferences for uber-geeks a guide to preferences that only truly elite geeks should play with.
MailNews automated testing
describe (and link to) the available test mechanisms within mailnews, and provide supporting information for developers and testers.
Midas
introduction midas is the code name for gecko's built-in rich text editor.
PRUnichar
an unsigned 16-bit type, like char in java or the "characters" of a
javascript string defined in /mozilla/xpcom/base/nscore.h.
PR_cnvtf
address of the buffer in which to store the result.
NSS tools : modutil
w-password-file] modutil -dbdir sql:/home/my/sharednssdb -changepw "nss certificate db" enter old password: incorrect password, try again...
NSS tools : modutil
ord-file] modutil -dbdir sql:/home/my/sharednssdb -changepw "nss certificate db" enter old password: incorrect password, try again...
Rhino and BSF
y ibm and now published as open source as a project at the apache software foundation.
Running the Rhino tests
to run the rhino tests, simply run the junit-all ant task in the top-level rhino directory: $ cd rhino $ ant junit-all this will run rhino's own unit tests as well as most of the mozilla
javascript test suite.
New in Rhino 1.7R4
update license to mpl 2.0 make string concatenation with + fast java class generation updates and fixes faster number to string conversion several regexp fixes regexp performance improvements es5 compliance fixes improved interpreter performance improved commonjs module implementation
javascript 1.8 generator expressions many parser and ast fixes use
javascript 1.7 as default version in rhino shell javaadapter improvements fixes in js to java access include mozilla test suite a list of bugs that were fixed since the previous release.
Rhino
rhino is an open-source implementation of
javascript written entirely in java.
Garbage collection
: the information here is about the implementation of gc roots and their use within spidermonkey.
Invariants
the fastest, followed by jsop_{get,call}upvar, jsop_{get,call}dslot, jsop_{get,call,set}gvar, and lastly jsop_{,call,set}name.
JS::BooleanValue
this article covers features introduced in spidermonkey 24 convert a c boolean of type bool to a js::value.
JS::CloneFunctionObject
f funobj is an extant function that you wish to use as if it were enclosed by a newly-created global object.
SavedFrame
savedframe a savedframe instance is a singly linked list of stack frames.
Zest runtimes
as zest is written in json it requires a runtime in order to be evaluated.
AT APIs Support
oards, magnification software and other assitive technologies can support gecko-based software.
Frecency algorithm
s: initial algorithm ideas implementation notes history the initial algorithm design was by mike connor and seth spitzer.
Places
e places keywords querying places how to query the bookmarks and history system with specific parameters.
STEEL
fox ("fuel") and in seamonkey ("smile").
Fun With XBL and XPConnect
introduction this article describes an application of xbl in which a simple xpcom interface is made accessible to a xul widget.
Setting up the Gecko SDK
\users\<user>\appdata\roaming\mozilla\firefox\profiles\<profile>\xpti.dat" "c:\users\<user>\appdata\roaming\mozilla\firefox\profiles\<profile>\extensions\bob@george.com\cspecialthing.dll" now if you start up firefox using that profile, you should have your new component installed.
Components.lastResult
components.lastresult returns the numeric nsresult code that was the result code of the last xpcom method called via xpconnect.
Components.stack
components.stack is a read only property of type nsistackframe (idl definition) that represents a snapshot of the current
javascript callstack.
Components.utils.exportFunction
name); // "bill" }, false); note that this is subject to the normal rules of xrays: for example, an expando property added to a dom node will not be visible in the original object.
Components.utils.isXrayWrapper
when privileged
javascript in gecko accesses objects belonging to less-privileged code (such as untrusted web content), it does so, by default, with "xray vision": a mechanism that filters out certain changes to the objects that could cause them to behave in unexpected ways.
Other Resources
other resources embedding mozilla xpconnect -
javascript-xpcom bridge blackconnect - java-xpcom bridge (no longer supported) xpidl to java types - from blackconnect ...
JavaXPCOM
javaxpcom allows for communication between java and xpcom, such that a java application can access xpcom objects, and xpcom can access any java class that implements an xpcom interface.
Using components
works transparently in mozilla and xpcshell to give you access to xpcom components.
Profiling XPCShell
introduction sometimes, you might want to get a performance profile of a certain piece of
javascript (like an xpcom module), to see which part takes the most time.
jsdIStackFrame
current line number (using the script's pc to line map.) read only.
nsIAlertsService
[optional] in astring name, [optional] in astring dir, [optional] in astring lang, [optional] in astring data, [optional] in nsiprincipal principal,[optional] in boolean inprivatebrowsing); void closealert([optional] in astring name, [optional] in nsiprincipal principal); methods showalertnotification() displays a notification window.
nsIEventListenerInfo
his is the method you should use if you want to get access to the actual listener, but the debugger service must be already active, which significantly slows down script execution.
nsIFrameMessageListener
ed gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) this interface is used when implementing out-of-process handling of frames; the process handling a frame should implement this interface in order to receive messages.
nsIInputStream
ream, nsacstring& aresultbuf) { uint32_t numread; return astream->readsegments(appendsegment, (void*) &aresultbuf, pr_uint32_max, &numread); } remarks this interface was frozen for gecko 1.0.
nsIMemoryReporterManager
emory allocations, both at the operating system level (for example, via mmap, virtualalloc) and at the heap level (for example, via malloc(), calloc(), operator new).
nsIMsgWindowCommands
mailnews/base/public/nsimsgwindow.idlscriptable this interface defines methods used by the back end to update the user interface in a mail or news message list.
nsIObserverService
ic, in boolean ownsweak); nsisimpleenumerator enumerateobservers( in string atopic ); void notifyobservers( in nsisupports asubject, in string atopic, in wstring somedata ); void removeobserver( in nsiobserver anobserver, in string atopic ); methods addobserver() registers a given listener for a notifications regarding the specified topic.
nsIProtocolHandler
scheme acstring the scheme for this protocol ("file", "http", and so forth).
nsISessionStartup
sessionstartup = components.classes["@mozilla.org/browser/sessionstartup;1"] .getservice(components.interfaces.nsisessionstartup); method overview boolean dorestore(); attributes attribute type description sessiontype unsigned long the type of session being restored; this will be one of the session type constants.
nsIStringBundle
this interface provides functions for retrieving both formatted and unformatted strings from a properties file.
nsITransferable
rameters acontext the load context associated with the transferable object.
nsIWebNavigation
ons look here nsdocshellloadtypes.h stop flags constant value description stop_network 1 this flag specifies that all network activity should be stopped.
nsIXPCScriptable
obj id vp return value ns_success_i_did_something if this method does something.
The Thread Manager
the thread manager, introduced in firefox 3, offers an easy to use mechanism for creating threads and dispatching events to them for processing.
Using nsISimpleEnumerator
using nsisimpleenumerator <stringbundle>.strings var enumerator = document.getelementbyid('astringbundleid').strings; var s = ""; while (enumerator.hasmoreelements()) { var property = enumerator.getnext().queryinterface(components.interfaces.nsipropertyelement); s += property.key + ' = ' + property.value + ';\n'; } alert(s); example using
javascript 1.7 features // creates a generator iterating over enum's values function generatorfromsimpleenumerator(enum, interface) { while (enum.hasmoreelements()) { yield enum.getnext().queryinterface(interface); } } var b = document.getelementbyid("stringbundleset").firstchild var props = generatorfromenumerator(b.strings, components.interfaces.nsipropertyelement); var s = ""; for (let property in props) { s += property.key + ' = ' ...
XTF
the extensible tag framework (xtf) allows adding support for new namespaces using xpcom components to mozilla (written in
javascript or c++).
Activity Manager examples
itted event.init(folder.prettiestname + " is processed", null, "no junk found", process.starttime, // start time date.now()); // completion time event.contexttype = process.contexttype; // optional event.contextobj = process.contextobj; // optional gactivitymanager.addactivity(event); showing a user-defined activity with cancel capability (
javascript) this sample improves the previous one by providing an nsiactivitycancelhandler to allow the user to cancel the process.
Access Window
the window object represents the window of the thunderbird application as well as the currently opened tabs.
Add Toolbar Button
example xul overlay file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://demo/skin/overlay.css" type="text/css" ?> <overlay id="messengerwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-
javascript" src="overlay.js" /> <toolbarpalette id="mailtoolbarpalette"> <toolbarbutton id="demo-button" class="demo-button toolbarbutton-1" label="demo" type="button" oncommand="demo.load();" /> </toolbarpalette> </overlay> add this to the css file you referenced in your xul file: #demo-button, [place="palette"] > #demo-button { list-style-image: url("chrome://demo/skin/icon.png") !important; } ...
Thunderbird extensions
on thunderbird community / communications thunderbird specific : add-ons section on developer.thunderbird.net thunderbird communication channels add-on developers forum/mailing list #maildev irc channel more general : mozillazine extension development forum general developer channels related topics xul,
javascript, xpcom, themes, developing mozilla categori ...
Using popup notifications
and recalled by clicking anywhere outside the notification, then clicking on the notification icon to bring it back again.
Using COM from js-ctypes
bject linking and embedding (ole) and later by the component object model (com), automation objects, activex controls, and the .net framework.
ABI
es under these operating systems use a different abi than regular function declarations.
Search - Firefox Developer Tools
ant: searching within a file to search for a particular substring in the file currently loaded into the source pane, press control + f (or command + f on a mac) while the source pane is focused.
Network request details - Firefox Developer Tools
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!
Animation inspector example: CSS transitions - Firefox Developer Tools
sform 750ms ease-in, filter 750ms ease-in-out; } .note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#selected { filter: grayscale(0%); transform: scale(1.5); } .icon#selected+span { opacity: 1; width: 300px; }
javascript content function toggleselection(e) { if (e.button != 0) { return; } if (e.target.classlist.contains("icon")) { var wasselected = (e.target.getattribute("id") == "selected"); clearselection(); if (!wasselected) { e.target.setattribute("id", "selected"); } } } function clearselection() { var selected = document.getelementbyid("selected"); if (selected) { ...
Animation inspector example: Web Animations API - Firefox Developer Tools
nel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } #icon { width: 50px; height: 50px; filter: grayscale(100%); } #note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; }
javascript content var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100%)', offset: 0.333}, { transform: 'scale(1.5)', offset: 0.666 }, { transform: 'scale(1.5)', filter: 'grayscale(0%)'} ]; var notekeyframeset = [ { opacity: '0', width: '0'}, { opacity: '1', width: '300px'} ]; var iconkeyframeoptions = { duration: 750, fill: 'forwards', ...
Sorting algorithms comparison - Firefox Developer Tools
// (generate random array, then call sort) x 200 -> sort() // sort with each algorithm, log the result -> bubblesort() -> swap() -> selectionsort() -> swap() -> quicksort() -> partition() the implementations of the sorting algorithms in the program are taken from https://github.com/nzakas/computer-science-in-
javascript/ and are used under the mit license.
Animation - Web APIs
i.e., forwards-filling), this can result in a huge animations list, which could create a memory leak.
ArrayBufferView - Web APIs
arraybufferview is a helper type representing any of the following
javascript typedarray types: int8array, uint8array, uint8clampedarray, int16array, uint16array, int32array, uint32array, float32array, float64array or dataview.
AudioWorkletNode() - Web APIs
the audioworkletnode() constructor creates a new audioworkletnode object, which represents an audionode that uses a
javascript function to perform custom audio processing.
BasicCardRequest - Web APIs
the basiccardrequest dictionary is a
javascript object-structure that can be used in the payment request api.
BiquadFilterNode.getFrequencyResponse() - Web APIs
de and phase values: var myfrequencyarray = new float32array(5); myfrequencyarray[0] = 1000; myfrequencyarray[1] = 2000; myfrequencyarray[2] = 3000; myfrequencyarray[3] = 4000; myfrequencyarray[4] = 5000; var magresponseoutput = new float32array(5); var phaseresponseoutput = new float32array(5); next we create a <ul> element in our html to contain our results, and grab a reference to it in our
javascript: <p>biquad filter frequency response for: </p> <ul class="freq-response-output"> </ul> var freqresponseoutput = document.queryselector('.freq-response-output'); finally, after creating our biquad filter, we use getfrequencyresponse() to generate the response data and put it in our arrays, then loop through each data set and output them in a human-readable list at the bottom of the page: var ...
Body.json() - Web APIs
the json() method of the body mixin takes a response stream and reads it to completion.
ByteString - Web APIs
bytestring is a utf-8 string that corresponds to the set of all possible sequences of bytes.
CSSMathSum - Web APIs
roperties cssmathsum.values returns a cssnumericarray object which contains one or more cssnumericvalue objects.
CSSMathValue.operator - Web APIs
in" cssmathmax "max" cssmathclamp "clamp" cssmathnegate "negate" cssmathinvert "invert" examples we create an element with a width determined using a calc() function, then console.log() the operator.
CSSMathValue - Web APIs
smathnegate cssmathproduct cssmathsum properties cssmathvalue.operator indicates the operator that the current subtype represents.
CSSStyleDeclaration.item() - Web APIs
exceptions as long as you provide arguments; the empty string is returned if the index is out of range and a typeerror is thrown if no argument is provided.
DataTransferItemList.add() - Web APIs
agend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; }
javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
DataTransferItemList.clear() - Web APIs
);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; }
javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
Document.URL - Web APIs
the url read-only property of the document interface returns the document location as a string.
Document.caretRangeFromPoint() - Web APIs
ple basic demo: when clicking in a paragraph insert a line break at the caret position: html <p>lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Document.createNSResolver() - Web APIs
proach works well for dynamic xpath expressions where the namespaces might not be known) or use prefixed name tests, and create a namespace resolver mapping the prefix to the namespace.
Document.currentScript - Web APIs
the document.currentscript property returns the <script> element whose script is currently being processed and isn't a
javascript module.
Document: drag event - Web APIs
dragstart="event.datatransfer.setdata('text/plain',null)"> this div is draggable </div> </div> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dropzone"></div> css #draggable { width: 200px; height: 20px; text-align: center; background: white; } .dropzone { width: 200px; height: 20px; background: blueviolet; margin-bottom: 10px; padding: 10px; }
javascript var dragged; /* events fired on the draggable target */ document.addeventlistener("drag", function(event) { }, false); document.addeventlistener("dragstart", function(event) { // store a ref.
Document.evaluate() - Web APIs
notice in the above document.body has been used as the context instead of document so the xpath starts from the body element.
Example - Web APIs
<html> <head> <title>my document</title> <script type="text/
javascript"> function change() { // document.getelementsbytagname("h1") returns a nodelist of the h1 // elements in the document, and the first is number 0: var header = document.getelementsbytagname("h1").item(0); // the firstchild of the header is a text node: header.firstchild.data = "a dynamic document"; // now the header is "a dynamic document".
Element.attributes - Web APIs
mentsbytagname("p")[0]; var atts = para.attributes; enumerating elements attributes numerical indexing is useful for going through all of an element's attributes.
Element: click event - Web APIs
en't affected by this bug): <a> (but it must have an href) <area> (but it must have an href) <button> <img> <input> <label> (but it must be associated with a form control) <textarea> this list is incomplete; you can help mdn by doing further testing/research and expanding it.
Element.closest() - Web APIs
over, .toto + q return value closestelement is the element which is the closest ancestor of the selected element.
Element.matches() - Web APIs
syntax var result = element.matches(selectorstring); parameters selectorstring is a string representing the selector to test.
Element.querySelector() - Web APIs
y counts this example demonstrates that the hierarchy of the entire document is considered when applying selectors, so that levels outside the specified baseelement are still considered when locating matches.
Element.scrollHeight - Web APIs
id="agree" name="accept" /> <label for="agree">i agree</label> <input type="submit" id="nextstep" value="next" /> </p> </form> css #notice { display: inline-block; margin-bottom: 12px; border-radius: 5px; width: 600px; padding: 5px; border: 2px #7fdf55 solid; } #rules { width: 600px; height: 130px; padding: 5px; border: #2a9f00 solid 2px; border-radius: 5px; }
javascript function checkreading () { if (checkreading.read) { return; } checkreading.read = this.scrollheight - this.scrolltop === this.clientheight; document.registration.accept.disabled = document.getelementbyid("nextstep").disabled = !checkreading.read; checkreading.noticebox.innerhtml = checkreading.read ?
Element.slot - Web APIs
is attached and then populated using the contents of a template that contains a slot named my-text.
Element.tagName - Web APIs
of elements in an xml dom tree are returned in the same case in which they're written in the original xml file.
Event.eventPhase - Web APIs
<input type="checkbox" id="chcapture" /> <label for="chcapture">use capturing</label> <div id="d1">d1 <div id="d2">d2 <div id="d3">d3 <div id="d4">d4</div> </div> </div> </div> <div id="divinfo"></div> css div { margin: 20px; padding: 4px; border: thin black solid; } #divinfo { margin: 18px; padding: 8px; background-color:white; font-size:80%; }
javascript let clear = false, 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() { f...
Fetch basic concepts - Web APIs
find a fetch concept that you feel needs explaining better, let someone know on the mdn discussion forum, or mdn web docs room on matrix.
File - Web APIs
the file interface provides information about files and allows
javascript in a web page to access their content.
FileReader - Web APIs
ect returned as a result of a user selecting files using the <input> element, from a drag and drop operation's datatransfer object, or from the mozgetasfile() api on an htmlcanvaselement.
FileSystemDirectoryEntry.getDirectory() - Web APIs
is takes the resulting directory entry object and calls getfile() to get a filesystemfileentry object representing the dictionary file; the success callback for this, in turn, creates a new filereader and uses it to load the contents of the file.
FileSystemDirectoryEntry.getFile() - Web APIs
is takes the resulting directory entry object and calls getfile() to get a filesystemfileentry object representing the dictionary file; the success callback for this, in turn, creates a new filereader and uses it to load the contents of the file.
GlobalEventHandlers.onmouseup - Web APIs
0%); } .toaster { width: 160px; height: 110px; background: #bbb; border-radius: 10px 10px 0 0; } .toast { position: absolute; left: 50%; top: 50%; z-index: -1; width: 100px; height: 50px; padding: 10px; background: #ed9; border-radius: 10px 10px 0 0; transform: translate(-50%, -90px); transition: transform .3s; } .depressed { transform: translate(-50%, -50%); }
javascript function depress() { toast.classlist.add('depressed'); } function release() { toast.classlist.remove('depressed'); } const toaster = document.queryselector('.toaster'); const toast = document.queryselector('.toast'); toaster.onmousedown = depress; document.onmouseup = release; result specification specification status comment html living standardthe definition...
GlobalEventHandlers.ontransitionend - Web APIs
; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000ff; color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s; } .box:hover { background-color: #ffcccc; color: #000000; width: 200px; height: 200px; transform: rotate(180deg); }
javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.
HTMLCanvasElement.toDataURL() - Web APIs
dambaairaxeapwd/ad/6ap/z" var mediumquality = canvas.todataurl('image/jpeg', 0.5); var lowquality = canvas.todataurl('image/jpeg', 0.1); example: dynamically change images you can use this technique in coordination with mouse events in order to dynamically change images (gray-scale vs.
accessKeyLabel - Web APIs
the htmlelement.accesskeylabel read-only property returns a string that represents the element's assigned access key (if any); otherwise it returns an empty string.
HTMLElement: beforeinput event - Web APIs
nterface inputevent event handler property none sync / async sync composed yes default action update the dom element examples this example logs current value of the element immediately before replacing that value with the new one applied to the <input> element.
HTMLElement.innerText - Web APIs
} #text { text-transform: uppercase; }</style> <span id=text>take a look at<br>how this text<br>is interpreted below.</span> <span style="display:none">hidden text</span> </p> <h3>result of textcontent:</h3> <textarea id="textcontentoutput" rows="6" cols="30" readonly>...</textarea> <h3>result of innertext:</h3> <textarea id="innertextoutput" rows="6" cols="30" readonly>...</textarea>
javascript const source = document.getelementbyid("source"); const textcontentoutput = document.getelementbyid("textcontentoutput"); const innertextoutput = document.getelementbyid("innertextoutput"); textcontentoutput.value = source.textcontent; innertextoutput.value = source.innertext; result specification specification status comment html living standardthe definition o...
HTMLElement: transitioncancel event - Web APIs
lement, styled with a transition that includes a delay: <div class="transition"></div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 2s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some
javascript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire.
HTMLElement: transitionend event - Web APIs
d with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some
javascript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire.
HTMLElement: transitionrun event - Web APIs
with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some
javascript to indicate where the transitionstart and transitionrun events fire.
HTMLElement: transitionstart event - Web APIs
with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some
javascript to indicate where the transitionstart and transitionrun events fire.
HTMLFormElement: reset event - Web APIs
yes interface event event handler property globaleventhandlers.onreset examples this example uses eventtarget.addeventlistener() to listen for form resets, and logs the current event.timestamp whenever that occurs.
HTMLImageElement.currentSrc - Web APIs
attribute is provided to indicate that the image should be drawn at 50% of the document width if the viewport is under 400px wide; otherwise, the image is drawn at 90% width of the document.
HTMLImageElement.sizes - Web APIs
>last width: 50em</button> </article> css article { margin: 1em; max-width: 60em; min-width: 20em; height: 100vh; border: 4em solid #880e4f; border-radius: 7em; padding: 1.5em; font: 16px "open sans", verdana, arial, helvetica, sans-serif; } article img { display: block; max-width: 100%; border: 1px solid #888; box-shadow: 0 0.5em 0.3em #888; margin-bottom: 1.25em; }
javascript the
javascript code handles the two buttons that let you toggle the third width option between 40em and 50em; this is done by handling the click event, using the
javascript string object method replace() to replace the relevant portion of the sizes string.
HTMLInputElement.stepDown() - Web APIs
ype: html <p> <label>enter a number between 0 and 400 that is divisible by 5: <input type="number" step="5" id="thenumber" min="0" max="400"> </label> </p> <p> <label>enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1" id="decrementer" min="-2" max="15"> </label> </p> <input type="button" value="decrement" id="thebutton">
javascript /* make the button call the function */ let button = document.getelementbyid('thebutton'); button.addeventlistener('click', function() { stepondown();} ); function stepondown() { let input = document.getelementbyid('thenumber'); let val = document.getelementbyid('decrementer').value; if (val) { /* increment with a parameter */ input.stepdown(val); } else { /* or without a par...
HTMLInputElement.stepUp() - Web APIs
type: html <p> <label>enter a number between 0 and 400 that is divisible by 5: <input type="number" step="5" id="thenumber" min="0" max="400"> </label> </p> <p> <label>enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1" id="incrementer" min="0" max="25"> </label> </p> <input type="button" value="increment" id="thebutton">
javascript /* make the button call the function */ let button = document.getelementbyid('thebutton') button.addeventlistener('click', function() { steponup() }) function steponup() { let input = document.getelementbyid('thenumber') let val = document.getelementbyid('incrementer').value if (val) { /* increment with a parameter */ input.stepup(val) } else { /* or without a parameter.
HTMLMediaElement: progress event - Web APIs
ent-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } video { grid-area: video; } .event-log { grid-area: log; } .event-log>label { display: block; }
javascript const loadvideo = document.queryselector('button'); const video = document.queryselector('video'); const eventlog = document.queryselector('.event-log-contents'); let source = null; function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addevent...
Ajax navigation example - Web APIs
de/before_content.php: <p> [ <a class="ajax-nav" href="first_page.php">first example</a> | <a class="ajax-nav" href="second_page.php">second example</a> | <a class="ajax-nav" href="third_page.php">third example</a> | <a class="ajax-nav" href="unexisting.php">unexisting page</a> ] </p> include/header.php: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/
javascript" src="js/ajax_nav.js"></script> <link rel="stylesheet" href="css/style.css" /> js/ajax_nav.js: "use strict"; const ajaxrequest = new (function () { function closereq () { oloadingbox.parentnode && document.body.removechild(oloadingbox); bisloading = false; } function abortreq () { if (!bisloading) { return; } oreq.abort(); closereq(); ...
IIRFilterNode.getFrequencyResponse() - Web APIs
de and phase values: var myfrequencyarray = new float32array(5); myfrequencyarray[0] = 1000; myfrequencyarray[1] = 2000; myfrequencyarray[2] = 3000; myfrequencyarray[3] = 4000; myfrequencyarray[4] = 5000; var magresponseoutput = new float32array(5); var phaseresponseoutput = new float32array(5); next we create a <ul> element in our html to contain our results, and grab a reference to it in our
javascript: <p>iir filter frequency response for: </p> <ul class="freq-response-output"> </ul> var freqresponseoutput = document.queryselector('.freq-response-output'); finally, after creating our filter, we use getfrequencyresponse() to generate the response data and put it in our arrays, then loop through each data set and output them in a human-readable list at the bottom of the page: var feedforward...
ImageData() - Web APIs
his example creates an imagedata object that is 200 pixels wide and 100 pixels tall, containing a total of 20,000 pixels.
Intersection Observer API - Web APIs
border: 4px solid rgb(20, 20, 120); transition: background-color 1s, border 1s; width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; padding: 20px; } .vertical { color: white; font: 32px "arial"; } .extra { width: 350px; height: 350px; margin-top: 10px; border: 4px solid rgb(20, 20, 120); text-align: center; padding: 20px; }
javascript finally, let's take a look at the
javascript code that uses the intersection observer api to make things happen.
KeyboardEvent.altKey - Web APIs
the keyboardevent.altkey read-only property is a boolean that indicates if the alt key (option or ⌥ on os x) was pressed (true) or not (false) when the event occured.
KeyboardEvent.ctrlKey - Web APIs
the keyboardevent.ctrlkey read-only property returns a boolean that indicates if the control key was pressed (true) or not (false) when the event occured.
Key Values - Web APIs
the tables below list the standard key values in various categories of key, with an explanation of what the key is typically used for.
KeyboardEvent.key - Web APIs
</div> <div class="flex"> <pre id="console-log"></pre> </div> </div> css .fx { -webkit-display: flex; display: flex; margin-left: -20px; margin-right: -20px; } .fx > div { padding-left: 20px; padding-right: 20px; } .fx > div:first-child { width: 30%; } .flex { -webkit-flex: 1; flex: 1; } #test-target { display: block; width: 100%; margin-bottom: 10px; }
javascript let textarea = document.getelementbyid('test-target'), consolelog = document.getelementbyid('console-log'), btnclearconsole = document.getelementbyid('btn-clear-console'); function logmessage(message) { document.getelementbyid("console-log").innerhtml += message + "<br>"; } textarea.addeventlistener('keydown', (e) => { if (!e.repeat) logmessage(`key "${e.key}" pressed [event: keydown]...
KeyboardEvent.shiftKey - Web APIs
the keyboardevent.shiftkey read-only property is a boolean that indicates if the shift key was pressed (true) or not (false) when the event occurred.
Location - Web APIs
family:monospace; position:absolute; top:100%; width:100%; left:50%; margin-left:-50%; font-size:40%; line-height:1.5; background:black;} [title]:hover:before, :target:before {background:black; color:yellow;} [title] [title]:before {margin-top:1.5em;} [title] [title] [title]:before {margin-top:3em;} [title]:hover, :target {position:relative; z-index:1; outline:50em solid rgba(255,255,255,.8);}
javascript [].foreach.call(document.queryselectorall('[title][id]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation(); window.location.hash = '#' + $(this).attr('id'); }); }); [].foreach.call(document.queryselectorall('[title]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagatio...
MathMLElement - Web APIs
documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement methods this interface has no methods, but inherits methods from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement examples mathml <math xmlns="http://www.w3.org/1998/math/mathml"> <msqrt> <mi>x</mi> </msqrt> </math>
javascript document.queryselector('msqrt').constructor.name; // mathmlelement specifications specification status comment mathmlelement interface ...
MediaDevices.getUserMedia() - Web APIs
ermedia() is not permitted to be called: a document loaded into a sandboxed <iframe> element cannot call getusermedia() unless the <iframe> has its sandbox attribute set to allow-same-origin.
MediaDevices.ondevicechange - Web APIs
x solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } h2 { margin-bottom: 4px; } .left { float:left; width: 48%; margin-right: 2% } .right { float:right; width: 48%; margin-left: 2% } .devicelist { border: 1px solid black; list-style-type: none; margin-top: 2px; padding: 6px; }
javascript content other code below is other code which, while needed to make this example work, isn'tt related directly to ondevicechange, so we won't go into any detail.
MediaStreamTrack.remote - Web APIs
the mediastreamtrack.remote read-only property allows
javascript to know whether a webrtc mediastreamtrack is from a remote source or a local one.
Recording a media element - Web APIs
font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; text-decoration: none; } h2 { margin-bottom: 4px; } .left { margin-right: 10px; float: left; width: 160px; padding: 0px; } .right { margin-left: 10px; float: left; width: 160px; padding: 0px; } .bottom { clear: both; padding-top: 10px; }
javascript content now let's have a look at the
javascript code; this is where the majority of the action happens, after all!
Using the Media Capabilities API - Web APIs
tion> <option>24</option> <option selected>15</option> </select> </li> <li> <label for="bitrate">select a bitrate</label> <select id="bitrate"> <option>4000</option> <option>2500</option> <option>800</option> </select> </li> </ul> <p><input type="button" value="test this video configuration" id="tryit"></p> </form> <ul id="results"></ul>
javascript let mc = { videoconfiguration : new object(), tryit: function () { mc.createconfiguration(); mc.testit(); }, createconfiguration: function () { var size = document.getelementbyid('size').value.split('x'); mc.videoconfiguration = { type: 'file', video: { contenttype: document.getelementbyid('codec').value, width: size[0], height: size[1]...
Capabilities, constraints, and settings - Web APIs
olor: darkgreen; } .wrapper { margin-bottom: 10px; width: 600px; } .trackrow { height: 200px; } .leftside { float: left; width: calc(calc(100%/2) - 10px); } .rightside { float: right; width: calc(calc(100%/2) - 10px); } textarea { padding: 8px; } h3 { margin-bottom: 3px; } #supportedconstraints { column-count: 2; -moz-column-count: 2; } #log { padding-top: 10px; }
javascript content now let's take a look at the
javascript code that makes everything work.
MouseEvent.buttons - Web APIs
y button (usually the right button) 4 : auxiliary button (usually the mouse wheel button or middle button) 8 : 4th button (typically the "browser back" button) 16 : 5th button (typically the "browser forward" button) example this example logs the buttons property when you trigger a mousedown event.
msFirstPaint - Web APIs
here may also be large incompatibilities between implementations and the behavior may change in the future.
msPlayToSource - Web APIs
m an audio, video, or img element using the msplaytosource property and pass it to e.setsource, then set the playtosource.next property to the msplaytosource of another element for continual playing.
Navigator.share() - Web APIs
romise that will be fulfilled once a user has completed a share action (usually the user has chosen an application to share to).
Node.removeChild() - Web APIs
out having to specify its parent node: let node = document.getelementbyid("nested"); if (node.parentnode) { node.parentnode.removechild(node); } to remove all children from an element: let element = document.getelementbyid("top"); while (element.firstchild) { element.removechild(element.firstchild); } causing a typeerror <!--sample html code--> <div id="top"> </div> <script type="text/
javascript"> let top = document.getelementbyid("top"); let nested = document.getelementbyid("nested"); // throws uncaught typeerror let garbage = top.removechild(nested); </script> causing a notfounderror <!--sample html code--> <div id="top"> <div id="nested"></div> </div> <script type="text/
javascript"> let top = document.getelementbyid("top"); let nested = document.getelementbyid("nest...
NodeList - Web APIs
iterate over the items in the nodelist, and whether you should cache the list's length.
NonDocumentTypeChildNode.nextElementSibling - Web APIs
the nondocumenttypechildnode.nextelementsibling read-only property returns the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list.
PageTransitionEvent - Web APIs
"#4d4e53" text-anchor="middle" alignment-baseline="middle">pagetransitionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, event.
ParentNode.children - Web APIs
ly property that returns a live htmlcollection which contains all of the child elements of the node upon which it was called.
PerformanceServerTiming - Web APIs
onst headers = { 'server-timing': ` cache;desc="cache read";dur=23.2, db;dur=53, app;dur=47.2 `.replace(/\n/g, '') }; response.writehead(200, headers); response.write(''); return settimeout(_ => { response.end(); }, 1000) }; http.createserver(requesthandler).listen(3000).on('error', console.error); the performanceservertiming entries are now observable from
javascript via the performanceresourcetiming.servertiming property: let entries = performance.getentriesbytype('resource'); console.log(entries[0].servertiming); // 0: performanceservertiming {name: "cache", duration: 23.2, description: "cache read"} // 1: performanceservertiming {name: "db", duration: 53, description: ""} // 2: performanceservertiming {name: "app", duration: 47.2, description: ""} speci...
PluginArray - Web APIs
the pluginarray interface is used to store a list of plugin objects describing the available plugins; it's returned by the window.navigator.plugins property.
PopStateEvent - Web APIs
call to history.pushstate() or was affected by a call to history.replacestate(), the popstate event's state property contains a copy of the history entry's state object.
RTCDataChannel.binaryType - Web APIs
the property binarytype on the rtcdatachannel interface is a domstring which specifies the type of
javascript object which should be used to represent binary data received on the rtcdatachannel.
RTCRtpReceiver.getStats() - Web APIs
the rtcrtpreceiver method getstats() asynchronously requests an rtcstatsreport object which provides statistics about incoming traffic on the owning rtcpeerconnection, returning a promise whose fulfillment handler will be called once the results are available.
RTCRtpSender.getStats() - Web APIs
the rtcrtpsender method getstats() asynchronously requests an rtcstatsreport object which provides statistics about outgoing traffic on the rtcpeerconnection which owns the sender, returning a promise which is fulfilled when the results are available.
Range.commonAncestorContainer - Web APIs
</li> </ul> </li> <li>woodwinds <ul> <li>clarinet</li> <li>oboe</li> </ul> </li> </ul> css the .highlight class created below uses a set of css @keyframes to animate a fading outline.
ResizeObserver - Web APIs
change the font-size of a header and paragraph as a slider’s value is changed causing the containing <div> to change width.
Resize Observer API - Web APIs
or performance (continually calling the above methods would result in a big performance hit), and often won't work when the browser window size is not changed.
r - Web APIs
te of a <circle> element and by that defines the radius of the circle.
SVGGraphicsElement: copy event - Web APIs
" height="320" xmlns="http://www.w3.org/2000/svg"> <text x="5" y="10" id="text-to-copy">copy this text</text> <foreignobject x="5" y="20" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" placeholder="paste it here"/> </foreignobject> </svg> css input { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; }
javascript document.getelementsbytagname("text")[0].addeventlistener("copy", evt => { evt.clipboarddata.setdata('text/plain', document.getselection().tostring().touppercase()); evt.preventdefault(); }); result specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation definition that the clipboard events apply to svg elements...
getBBox() - Web APIs
="5" y="16" transform="scale(2, 2)">hello world!</text> <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">hello world again!</text> </g> <!-- shows bbox in green --> <rect id="rect_1" stroke="#00ff00" stroke-width="3" fill="none"> </rect> <!-- shows boundingclientrect in red --> <rect id="rect_2" stroke="#ff0000" stroke-width="3" fill="none"></rect> </svg>
javascript var rectbbox = document.queryselector('#rect_1'); var rectboundingclientrect = document.queryselector('#rect_2'); var groupelement = document.queryselector('#group_text_1'); var bboxgroup = groupelement.getbbox(); rectbbox.setattribute('x', bboxgroup.x); rectbbox.setattribute('y', bboxgroup.y); rectbbox.setattribute('width', bboxgroup.width); rectbbox.setattribute('height', bboxgroup.height); ...
SVGGraphicsElement: paste event - Web APIs
mlns="http://www.w3.org/2000/svg"> <foreignobject x="5" y="-10" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" value="copy this text"/> </foreignobject> <text x="5" y="30" id="element-to-paste-text" tabindex="1">paste it here</text> </svg> css input { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; }
javascript document.getelementbyid("element-to-paste-text").addeventlistener("paste", evt => { evt.target.textcontent = evt.clipboarddata.getdata("text/plain").touppercase(); evt.preventdefault(); }); result specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation definition that the clipboard events apply to svg elemen...
SVGLength - Web APIs
ype_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" onload="start();" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg"> <script type="text/
javascript"><![cdata[ function start() { var rect = document.getelementbyid("myrect"); var val = rect.x.baseval; // read x in pixel and cm units console.log("value: " + val.value + ", valueinspecifiedunits: " + val.unittype + ": " + val.valueinspecifiedunits + ", valueasstring: " + val.valueasstring); // set x = 20pt and read it out in pixel and pt units val.newvaluesp...
Screen.availHeight - Web APIs
lette which can contain multiple panels, and wants to position it so that it occupies the entire vertical space available, you can do so using code similar to what's seen here.
Selection.modify() - Web APIs
sentence</option> <option value="line">line</option> <option value="paragraph">paragraph</option> <option value="lineboundary">line boundary</option> <option value="sentenceboundary">sentence boundary</option> <option value="paragraphboundary">paragraph boundary</option> <option value="documentboundary">document boundary</option> </select> <br><br> <button>extend selection</button>
javascript let select = document.queryselector('select'); let button = document.queryselector('button'); button.addeventlistener('click', modify); function modify() { let selection = window.getselection(); selection.modify('extend', 'forward', select.value); } result specifications this method is not part of any specification.
Selection.setBaseAndExtent() - Web APIs
pan>plane</span></p> </div> <div> <p> <label for="aoffset">anchor offset</label> <input id="aoffset" name="aoffset" type="number" value="0"> </p> <p> <label for="foffset">focus offset</label> <input id="foffset" name="foffset" type="number" value="0"> </p> <p><button>capture selection</button></p> </div> <p><strong>output</strong>: <span class="output"></span></p> the
javascript looks like so: var one = document.queryselector('.one'); var two = document.queryselector('.two'); var aoffset = document.getelementbyid('aoffset'); var foffset = document.getelementbyid('foffset'); var button = document.queryselector('button'); var output = document.queryselector('.output'); var selection; button.onclick = function() { try { selection = document.getselection(); s...
Server-sent events - Web APIs
fication specification status comment html living standardthe definition of 'server-sent events' in that specification.
StereoPannerNode.pan - Web APIs
; var pannode = audioctx.createstereopanner(); pannode.pan.value = -0.5; returned value an a-rate audioparam containing the panning to apply.
StorageEstimate.quota - Web APIs
ate.quota; value a numeric value specifying an approximation of the total amount of storage space available for use by the application.
StorageEstimate.usage - Web APIs
ate.usage; value a numeric value specifying an approximation of the total amount of storage space available for use by the application.
StorageManager.estimate() - Web APIs
user visits public site popularity data user engagement signals like bookmarking, adding to homescreen, or accepting push notifications example in this example, we obtain the usage estimates and present the percentage of storage capacity currently used to the user.
Text.splitText() - Web APIs
tions thrown a domexception with a value of index_size_err is thrown if the specified offset is negative or is greater than the number of 16-bit units in the node's text; a domexception with a value of no_modification_allowed_err is thrown if the node is read-only.
TextEncoder - Web APIs
0, i = 0; i !== len; ) { point = str.charcodeat(i), i += 1; if (point >= 0xd800 && point <= 0xdbff) { if (i === len) { resarr[respos += 1] = 0xef/*0b11101111*/; resarr[respos += 1] = 0xbf/*0b10111111*/; resarr[respos += 1] = 0xbd/*0b10111101*/; break; } // https://mathiasbynens.be/notes/
javascript-encoding#surrogate-formulae nextcode = str.charcodeat(i); if (nextcode >= 0xdc00 && nextcode <= 0xdfff) { point = (point - 0xd800) * 0x400 + nextcode - 0xdc00 + 0x10000; i += 1; if (point > 0xffff) { resarr[respos += 1] = (0x1e/*0b11110*/<<3) | (point>>>18); ...
TextMetrics - Web APIs
dicated by the canvasrenderingcontext2d.textbaseline property to the ideographic baseline of the line box, in css pixels.
TrackEvent - Web APIs
tracklist)) { trackkind = "audio"; } else if (event.target instanceof(texttracklist)) { trackkind = "text"; } else { trackkind = "unknown"; } switch(event.type) { case "addtrack": console.log("added a " + trackkind + " track"); break; case "removetrack": console.log("removed a " + trackkind + " track"); break; } } the event handler uses the
javascript instanceof operator to determine which type of track the event occurred on, then outputs to console a message indicating what kind of track it is and whether it's being added to or removed from the element.
UIEvent.layerX - Web APIs
o the whole of the document unless the event occurs inside a positioned element, where the returned value is relative to the top left of the positioned element.
UIEvent.layerY - Web APIs
the whole of the document, unless the event occurs inside a positioned element, where the returned value is relative to the top left of the positioned element.
URL() - Web APIs
the url() constructor returns a newly created url object representing the url defined by the parameters.
URLSearchParams.set() - Web APIs
let url = new url('https://example.com?foo=1&bar=2'); let params = new urlsearchparams(url.search.slice(1)); //add a third parameter.
USVString - Web APIs
usvstring corresponds to the set of all possible sequences of unicode scalar values.
VTTCue - Web APIs
vttcue.textalign returns an enum representing the alignment of all the lines of text within the cue box.
WebGLRenderingContext.makeXRCompatible() - Web APIs
"green button" type="button">start game</button> <button class="blue button use-webxr" type="button">start game (vr mode)</button> the first button starts the game, continuing to present the game onscreen as usual.
Using shaders to apply color in WebGL - Web APIs
// white 1.0, 0.0, 0.0, 1.0, // red 0.0, 1.0, 0.0, 1.0, // green 0.0, 0.0, 1.0, 1.0, // blue ]; const colorbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, colorbuffer); gl.bufferdata(gl.array_buffer, new float32array(colors), gl.static_draw); return { position: positionbuffer, color: colorbuffer, }; } this code starts by creating a
javascript array containing four 4-value vectors, one for each vertex color.
A simple RTCDataChannel sample - Web APIs
er="message text" inputmode="latin" size=60 maxlength=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.
WebRTC API - Web APIs
interacting with gateways that link to old-school telephone systems includes support for sending dtmf tones using the rtcdtmfsender interface.
WebSocket.send() - Web APIs
you can send the underlying binary data used by a typed array object; its binary data contents are queued in the buffer, increasing the value of bufferedamount by the requisite number of bytes.
Controlling multiple parameters with ConstantSourceNode - Web APIs
font: 14px "open sans", "lucida grande", "arial", sans-serif; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input { vertical-align: baseline; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle; }
javascript now let's take a look at the
javascript code, a piece at a time.
Example and tutorial: Simple synth keyboard - Web APIs
dle; width: 100%; height: 30px; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle; } .right { width: 50%; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input { vertical-align: baseline; }
javascript the
javascript code begins by initializing a number of variables.
Web Storage API - Web APIs
oads and restores) stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.
Web Workers API - Web APIs
run a script operation in a background thread separate from the main execution thread of a web application.
Window: blur event - Web APIs
terface focusevent event handler property onblur sync / async sync composed yes examples live example this example changes the appearance of a document when it loses focus.
Window: focus event - Web APIs
erface focusevent event handler property onfocus sync / async sync composed yes examples live example this example changes the appearance of a document when it loses focus.
Window: popstate event - Web APIs
struct a dynamically generated page, or to otherwise alter the state of the content being presented while remaining on the same document.
Window: rejectionhandled event - Web APIs
the rejectionhandled event is sent to the script's global scope (usually window but also worker) whenever a
javascript promise is rejected but after the promise rejection has been handled.
Window: unhandledrejection event - Web APIs
the unhandledrejection event is sent to the global scope of a script when a
javascript promise that has no rejection handler is rejected; typically, this is the window, but may also be a worker.
WindowEventHandlers.onpopstate - Web APIs
call to history.pushstate(), or was affected by a call to history.replacestate(), the popstate event's state property contains a copy of the history entry's state object.
Worker() - Web APIs
e for the dedicatedworkerglobalscope representing the scope of the worker, which is mainly useful for debugging purposes.
Worklet - Web APIs
the worklet interface is a lightweight version of web workers and gives developers access to low-level parts of the rendering pipeline.
XRInputSourceArray.entries() - Web APIs
the xrinputsourcearray interface's entries() method returns a
javascript iterator which can then be used to iterate over the key/value pairs in the input source array.
msthumbnailclick - Web APIs
modecleariconoverlay(); // pinned icons on your taskbar can be instructed to trigger specific events on your site from the taskbar // add an event handlerdocument.addeventlistener('msthumbnailclick', onbuttonclicked, false); // add the buttons var btnplay = window.external.mssitemodeaddthumbbarbutton(iconuri, tooltip); // refresh the taskbar window.external.mssitemodeshowthumbbar(); // call a
javascript function when the button is pressed function onbuttonclicked(e) { switch (e.buttonid) { case btnplay: play(); break;} } see also microsoft api extensions ...
Web APIs
when writing code for the web, there are a large number of web apis available.
ARIA Test Cases - Accessibility
0 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - property-only test cases these testcases involve aria properties used to enhance html controls (as opposed to
javascript-built widgets).
ARIA: tabpanel role - Accessibility
the aria tabpanel role indicates description an element with the tabpanel role associated roles and attributes aria- keyboard interaction key action tab → ← delete required
javascript features include note about semantic alternatives to using this role or attribute.
ARIA: cell role - Accessibility
header would likely have aria-rowindex="1" set, and cells in row 47 would have aria-rowindex="47", if aria-rowindex were needed due to not all rows being in the dom.
::before (:before) - CSS: Cascading Style Sheets
: relative; margin: 2px; padding: 0.5em 0.5em 0.5em 2em; background: lightgrey; font-family: sans-serif; } li.done { background: #ccff99; } li.done::before { content: ''; position: absolute; border-color: #009933; border-style: solid; border-width: 0 0.3em 0.25em 0; height: 1em; top: 1.3em; left: 0.6em; margin-top: -1em; transform: rotate(45deg); width: 0.5em; }
javascript var list = document.queryselector('ul'); list.addeventlistener('click', function(ev) { if (ev.target.tagname === 'li') { ev.target.classlist.toggle('done'); } }, false); here is the above code example running live.
::part() - CSS: Cascading Style Sheets
ab):hover { background-color: #0c0c0d19; border-color: #0c0c0d33; } tabbed-custom-element::part(tab):hover:active { background-color: #0c0c0d33; } tabbed-custom-element::part(tab):focus { box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3); } tabbed-custom-element::part(active) { color: #0060df; border-color: #0a84ff !important; }
javascript let template = document.queryselector("#tabbed-custom-element"); globalthis.customelements.define(template.id, class extends htmlelement { constructor() { super(); this.attachshadow({ mode: "open" }); this.shadowroot.appendchild(template.content); } }); result specifications specification status comment shadow partsthe definition of '::part' in t...
:checked - CSS: Cascading Style Sheets
ange; } /* checkbox element, when checked */ input[type="checkbox"]:checked { box-shadow: 0 0 0 3px hotpink; } /* option elements, when selected */ option:checked { box-shadow: 0 0 0 3px lime; color: red; } result toggling elements with a hidden checkbox this example utilizes the :checked pseudo-class to let the user toggle content based on the state of a checkbox, all without using
javascript.
:fullscreen - CSS: Cascading Style Sheets
reen pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when elements switch back and forth between full-screen and traditional presentations.
:target - CSS: Cascading Style Sheets
/p> css p:target { background-color: gold; } /* add a pseudo-element inside the target element */ p:target::before { font: 70% sans-serif; content: "►"; color: limegreen; margin-right: .25em; } /* style italic elements within the target element */ p:target i { color: red; } result pure-css lightbox you can use the :target pseudo-class to create a lightbox without using any
javascript.
aspect-ratio - CSS: Cascading Style Sheets
step="5" value="165"> <iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> watch this element as you resize your viewport's width and height.</div>"> </iframe> css iframe{ display:block; }
javascript outer.style.width=outer.style.height="165px" w.onchange=w.oninput=function(){ outer.style.width=w.value+"px" wf.textcontent="width:"+w.value } h.onchange=h.oninput=function(){ outer.style.height=h.value+"px" hf.textcontent="height:"+h.value } result specifications specification status comment media queries level 4the definition of 'aspect-ratio' in th...
Border-image generator - CSS: Cascading Style Sheets
gin: 0 0 10px 0; line-height: 25px; text-align: center; color: #aaa; } #output .css-property { width: 100%; margin: 0; color: #555; font-size: 14px; line-height: 18px; float: left; } #output .css-property .name { width: 30%; font-weight: bold; text-align: right; float: left; } #output .css-property .value { width: 65%; padding: 0 2.5%; word-break: break-all; float: left; }
javascript content 'use strict'; /** * ui-slidersmanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.style.width = 50 + obj.precision * 10 + 'px'; input.addeventlistener('click', function(e) { ...
Border-radius generator - CSS: Cascading Style Sheets
{ width: 200px; color: #444; float:left; } #dimensions input { background: #555; color: #fff; border: none; border-radius: 3px; } #output { width: 500px; padding: 10px 0; margin: 10px 0; color: #555; text-align: center; border: 1px dashed #999; border-radius: 3px; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; float: right; }
javascript content 'use strict'; /** * ui-inputslidermanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('...
Box-shadow generator - CSS: Cascading Style Sheets
order: 1px dashed #ccc; border-radius: 3px; display: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; } #output .css-property { width: 100%; float: left; white-space: pre; } #output .name { width: 35%; float: left; } #output .value { width: 65%; float: left; }
javascript content 'use strict'; /** * ui-slidersmanager */ var slidermanager = (function slidermanager() { var subscribers = {}; var sliders = []; var slider = function(node) { var min = node.getattribute('data-min') | 0; var max = node.getattribute('data-max') | 0; var step = node.getattribute('data-step') | 0; var value = node.getattribute('data-value') | 0; var snap = node.getattri...
Color picker tool - CSS: Cascading Style Sheets
as-controls.png') center right no-repeat; } #zindex { height: 20px; margin: 5px; font-size: 16px; position: absolute; opacity: 0; top: -10000px; left: 0; color: #777; float: left; transition: opacity 1s; } #zindex input { border: 1px solid #ddd; font-size: 16px; color: #777; } #zindex .ui-input-slider-info { width: 60px; } #zindex[data-active='true'] { top: 0; opacity: 1; }
javascript content 'use strict'; var uicolorpicker = (function uicolorpicker() { function getelembyid(id) { return document.getelementbyid(id); } var subscribers = []; var pickers = []; /** * rgba color class * * hsv/hsb and hsl (hue, saturation, value / brightness, lightness) * @param hue 0-360 * @param saturation 0-100 * @param value 0-100 * @param lightness 0-100 */ fun...
Linear-gradient Generator - CSS: Cascading Style Sheets
: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } #output .css-property { width: 90%; margin: 5px 5%; color: #777; position: relative; float: left; } #output .property { height: 100%; width: 12%; position: absolute; left: 0; } #output .value { width: 88%; position: absolute; white-space: pre; word-wrap: break-word; display: block; right: 0; }
javascript content var uicolorpicker = (function uicolorpicker() { 'use strict'; function getelembyid(id) { return document.getelementbyid(id); } var subscribers = []; var pickers = []; /** * rgba color class * * hsv/hsb and hsl (hue, saturation, value / brightness, lightness) * @param hue 0-360 * @param saturation 0-100 * @param value 0-100 * @param lightness 0-100 */ fun...
Viewport concepts - CSS: Cascading Style Sheets
width media query in the svg is based on the element in which the svg is contained — the <img> if the source is an svg file, the svg itself if the svg is included directly into the html, or the parent if the parent element has a width assigned and — not the viewport’s width.
align-content - CSS: Cascading Style Sheets
<option value="unsafe center">unsafe center</option> <option value="safe right">safe right</option> <option value="unsafe right">unsafe right</option> <option value="safe end">safe end</option> <option value="unsafe end">unsafe end</option> <option value="safe flex-end">safe flex-end</option> <option value="unsafe flex-end">unsafe flex-end</option> </select> </div>
javascript var values = document.getelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.aligncontent = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); result specifications sp...
align-items - CSS: Cascading Style Sheets
value="unsafe right">unsafe right</option> <option value="safe end">safe end</option> <option value="unsafe end">unsafe end</option> <option value="safe self-end">safe self-end</option> <option value="unsafe self-end">unsafe self-end</option> <option value="safe flex-end">safe flex-end</option> <option value="unsafe flex-end">unsafe flex-end</option> </select> </div>
javascript var values = document.getelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.alignitems = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); result specifications spec...
<blend-mode> - CSS: Cascading Style Sheets
rence</option> <option>exclusion</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosity</option> </select> css div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center, linear-gradient(to bottom, blue, orange); }
javascript const selectelem = document.queryselector('select'); const divelem = document.queryselector('div'); selectelem.addeventlistener('change', () => { divelem.style.backgroundblendmode = selectelem.value; }); result specifications specification status comment compositing and blending level 1the definition of '<blend-mode>' in that specification.
border-image-repeat - CSS: Cascading Style Sheets
} html <div id="bordered">you can try out various border repetition rules on me!</div> <select id="repetition"> <option value="stretch">stretch</option> <option value="repeat">repeat</option> <option value="round">round</option> <option value="space">space</option> <option value="stretch repeat">stretch repeat</option> <option value="space round">space round</option> </select>
javascript var repetition = document.getelementbyid("repetition"); repetition.addeventlistener("change", function (evt) { document.getelementbyid("bordered").style.borderimagerepeat = evt.target.value; }); results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-repeat' in that specification.
border-image-slice - CSS: Cascading Style Sheets
" id="slice"> <output id="slice-output">30</output> </li> </ul> css .wrapper { width: 400px; height: 300px; } div > div { width: 300px; height: 200px; border-width: 30px; border-style: solid; border-image: url(https://udn.realityripple.com/samples/56/bb98f533ef.png); border-image-slice: 30; border-image-repeat: round; } li { display: flex; place-content: center; }
javascript const widthslider = document.getelementbyid('width'); const sliceslider = document.getelementbyid('slice'); const widthoutput = document.getelementbyid('width-output'); const sliceoutput = document.getelementbyid('slice-output'); const divelem = document.queryselector('div > div'); widthslider.addeventlistener('input', () => { const newvalue = widthslider.value + 'px'; divelem.style.borderw...
clip-path - CSS: Cascading Style Sheets
t id="clippath"> <option value="none">none</option> <option value="circle(100px at 110px 100px)">circle</option> <option value="url(#cross)" selected>cross</option> <option value="inset(20px round 20px)">inset</option> <option value="path('m 0 200 l 0,110 a 110,90 0,0,1 240,100 l 200 340 z')">path</option> </select> css #clipped { margin-bottom: 20px; clip-path: url(#cross); }
javascript const clippathselect = document.getelementbyid("clippath"); clippathselect.addeventlistener("change", function (evt) { document.getelementbyid("clipped").style.clippath = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'clip-path' in that specification.
display - CSS: Cascading Style Sheets
id</option> <option>table</option> <option>list-item</option> </select> </div> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; padding-top: 10px; } article { background-color: red; } article span { background-color: black; color: white; margin: 1px; } article, span { padding: 10px; border-radius: 7px; } article, div { margin: 20px; }
javascript const articles = document.queryselectorall('.container'); const select = document.queryselector('select'); function updatedisplay() { articles.foreach((article) => { article.style.display = select.value; }); } select.addeventlistener('change', updatedisplay); updatedisplay(); result note: you can find more examples in the pages for each separate display data type, linked above.
<easing-function> - CSS: Cascading Style Sheets
height: 50px; background-color: blue; background-image: radial-gradient(circle at 10px 10px, rgba(25,255,255,0.8),rgba(25,255,255,0.4)); border-radius: 50%; top: 25px; animation: 1.5s infinite alternate; } @keyframes move-right { from { left: 10%; } to { left: 90%; } } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
javascript const selectelem = document.queryselector('select'); const startbtn = document.queryselector('button'); const divelem = document.queryselector('div > div'); startbtn.addeventlistener('click', () => { if(startbtn.textcontent === 'start animation') { divelem.style.animationname = 'move-right'; startbtn.textcontent = 'stop animation'; divelem.style.animationtimingfunction = selectele...
<filter-function> - CSS: Cascading Style Sheets
{ width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center; } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } input { width: 60% } output { width: 5%; text-align: center; } select { width: 40%; margin-left: 2px; }
javascript const selectelem = document.queryselector('select'); const divelem = document.queryselector('div'); const slider = document.queryselector('input'); const output = document.queryselector('output'); const curvalue = document.queryselector('p code'); selectelem.addeventlistener('change', () => { setslider(selectelem.value); setdiv(selectelem.value); }); slider.addeventlistener('input', () => ...
font-kerning - CSS: Cascading Style Sheets
lies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | normal | none examples enabling and disabling kerning html <div id="kern"></div> <div id="nokern"></div> <textarea id="input">av t.
font-style - CSS: Cascading Style Sheets
font: 1rem monospace; } .container { max-height: 150px; overflow: scroll; } .sample { font: 2rem 'amstelvaralpha', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; }
javascript let slantlabel = document.queryselector('label[for="slant"]'); let slantinput = document.queryselector('#slant'); let sampletext = document.queryselector('.sample'); function update() { let slant = `oblique ${slantinput.value}deg`; slantlabel.textcontent = `font-style: ${slant};`; sampletext.style.fontstyle = slant; } slantinput.addeventlistener('input', update); update(); accessibil...
font-weight - CSS: Cascading Style Sheets
container { max-height: 150px; overflow-y: auto; } .sample { text-transform: uppercase; font: 1.5rem 'mutatorsans', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; }
javascript let weightlabel = document.queryselector('label[for="weight"]'); let weightinput = document.queryselector('#weight'); let sampletext = document.queryselector('.sample'); function update() { weightlabel.textcontent = `font-weight: ${weightinput.value};`; sampletext.style.fontweight = weightinput.value; } weightinput.addeventlistener('input', update); update(); accessibility concerns pe...
font - CSS: Cascading Style Sheets
5px; width: 120px; } .propinputs, .setpropcont { margin-bottom: 1em; } .curcss { border: none; border-bottom: 1px solid black; text-align: center; width: 80px; } .mandatory { border-bottom-color: red; } .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .tar { width: 40px; text-align: right; } .fontfamily { display: inline-block; }
javascript var textareas = document.getelementsbyclassname("curcss"), shorttext = "", getcheckedvalue, setcss, getproperties, injectcss; getproperties = function () { shorttext = getcheckedvalue("font_style") + " " + getcheckedvalue("font_variant") + " " + getcheckedvalue("font_weight") + " " + getcheckedvalue("font_size") + getcheckedvalue("line_height"...
image-orientation - CSS: Cascading Style Sheets
flip ] examples orienting image from image data css #image { image-orientation: from-image; /* can be changed in the live sample */ } html <img id="image" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="orientation taken from the image"> <select id="imageorientation"> <option value="from-image">from-image</option> <option value="none">none</option> </select>
javascript var imageorientation = document.getelementbyid("imageorientation"); imageorientation.addeventlistener("change", function (evt) { document.getelementbyid("image").style.imageorientation = evt.target.value; }); result specifications specification status comment css images module level 3the definition of 'image-orientation' in that specification.
justify-content - CSS: Cascading Style Sheets
ht">right</option> <option value="baseline">baseline</option> <option value="first baseline">first baseline</option> <option value="last baseline">last baseline</option> <option value="space-between" selected>space-between</option> <option value="space-around">space-around</option> <option value="space-evenly">space-evenly</option> <option value="stretch">stretch</option> </select>
javascript var justifycontent = document.getelementbyid("justifycontent"); justifycontent.addeventlistener("change", function (evt) { document.getelementbyid("container").style.justifycontent = evt.target.value; }); result specifications specification status comment css box alignment module level 3the definition of 'justify-content' in that specification.
<length> - CSS: Cascading Style Sheets
inset -3px -3px 5px rgba(0,0,0,0.5); background-color: orange; display: flex; align-items: center; margin-top: 10px; } .result code { position: absolute; margin-left: 20px; } .results { margin-top: 10px; } .input-container { position: absolute; display: flex; justify-content: flex-start; align-items: center; height: 50px; } label { margin: 0 10px 0 20px; }
javascript const inputdiv = document.queryselector('.inner'); const inputelem = document.queryselector('input'); const resultsdiv = document.queryselector('.results'); inputelem.addeventlistener('change', () => { inputdiv.style.width = inputelem.value; const result = document.createelement('div'); result.classname = 'result'; result.style.width = inputelem.value; result.innerhtml = `<code>width...
mask-clip - CSS: Cascading Style Sheets
option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</option> <option value="fill-box">fill-box</option> <option value="stroke-box">stroke-box</option> <option value="view-box">view-box</option> <option value="no-clip">no-clip</option> </select>
javascript var clipbox = document.getelementbyid("clipbox"); clipbox.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskclip = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-clip' in that specification.
mask-composite - CSS: Cascading Style Sheets
url(https://mdn.mozillademos.org/files/12676/star.svg); mask-size: 100% 100%; mask-composite: add; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="compositemode"> <option value="add">add</option> <option value="subtract">subtract</option> <option value="intersect">intersect</option> <option value="exclude">exclude</option> </select>
javascript var clipbox = document.getelementbyid("compositemode"); clipbox.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskcomposite = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-composite' in that specification.
mask-mode - CSS: Cascading Style Sheets
eight: 200px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-mode: alpha; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="maskmode"> <option value="alpha">alpha</option> <option value="luminance">luminance</option> <option value="match-source">match-source</option> </select>
javascript var maskmode = document.getelementbyid("maskmode"); maskmode.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskmode = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-mode' in that specification.
mask-origin - CSS: Cascading Style Sheets
d="masked"> </div> <select id="origin"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</option> <option value="fill-box">fill-box</option> <option value="stroke-box">stroke-box</option> <option value="view-box">view-box</option> </select>
javascript var origin = document.getelementbyid("origin"); origin.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskorigin = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-origin' in that specification.
mask-position - CSS: Cascading Style Sheets
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 value="center center">center center</option> <option value="bottom left">bottom left</option> <option value="10px 20px">10px 20px</option> <option value="60% 20%">60% 20%</option> </select>
javascript var maskposition = document.getelementbyid("maskposition"); maskposition.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskposition = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-position' in that specification.
mask-repeat - CSS: Cascading Style Sheets
changed in the live sample */ margin-bottom: 10px; } html content <div id="masked"> </div> <select id="repetition"> <option value="repeat-x">repeat-x</option> <option value="repeat-y">repeat-y</option> <option value="repeat" selected>repeat</option> <option value="space">space</option> <option value="round">round</option> <option value="no-repeat">no-repeat</option> </select>
javascript content var repetition = document.getelementbyid("repetition"); repetition.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskrepeat = evt.target.value; }); result multiple mask image support you can specify a different <repeat-style> for each mask image, separated by commas: .examplethree { mask-image: url('mask1.png'), url('mask2.png'); mask-r...
mask-size - CSS: Cascading Style Sheets
ze: 50%; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="masked"> </div> <select id="masksize"> <option value="auto">auto</option> <option value="40% 80%">40% 80%</option> <option value="50%" selected>50%</option> <option value="200px 100px">200px 100px</option> <option value="cover">cover</option> <option value="contain">contain</option> </select>
javascript var masksize = document.getelementbyid("masksize"); masksize.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.masksize = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-size' in that specification.
place-items - CSS: Cascading Style Sheets
nd normal</option> <option value="left auto">left auto</option> <option value="right normal">right normal</option> <option value="baseline normal">baseline normal</option> <option value="first baseline auto">first baseline auto</option> <option value="last baseline normal">last baseline normal</option> <option value="stretch auto">stretch auto</option> </select> </div>
javascript var values = document.getelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.placeitems = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); css #container { height:200px; wid...
<transform-function> - CSS: Cascading Style Sheets
ight { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } .select-form { margin-top: 50px; }
javascript const selectelem = document.queryselector('select'); const example = document.queryselector('#example-element'); selectelem.addeventlistener('change', () => { if(selectelem.value === 'choose a function') { return; } else { example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectelem.value}`; settimeout(function() { example.style.transform = 'rotate3d(1, 1, 1, 30deg)'; ...
transform-style - CSS: Cascading Style Sheets
otatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); }
javascript const cube = document.getelementbyid('example-element'); const checkbox = document.getelementbyid('preserve'); checkbox.addeventlistener('change', () => { if(checkbox.checked) { cube.style.transformstyle = 'preserve-3d'; } else { cube.style.transformstyle = 'flat'; } }) result specifications specification status comment css transforms level 2the de...
Used value - CSS: Cascading Style Sheets
th-50"> <p>explicit width: 50%.</p> <p class="show-used-width">..</p> <div id="width-inherit"> <p>explicit width: inherit.</p> <p class="show-used-width">..</p> </div> </div> </div> css #no-width { width: auto; } #width-50 { width: 50%; } #width-inherit { width: inherit; } /* make results easier to see */ div { border: 1px solid red; padding: 8px; }
javascript function updateusedwidth(id) { var div = document.queryselector(`#${id}`); var par = div.queryselector('.show-used-width'); var wid = window.getcomputedstyle(div)["width"]; par.textcontent = `used width: ${wid}.`; } function updateallusedwidths() { updateusedwidth("no-width"); updateusedwidth("width-50"); updateusedwidth("width-inherit"); } updateallusedwidths(); window.addeventl...
regexp:match() - EXSLT
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes regexp:match() performs regular expression matching on a string, returning the submatches found as a result.
regexp:replace() - EXSLT
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes regexp:replace() replaces the portions of a string that match a given regular expression with the contents of another string.
regexp:test() - EXSLT
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes regexp:test() tests to see whether a string matches a specified regular expression.
Regular expressions (regexp) - EXSLT
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the exslt regular expressions package provides functions that allow testing, matching, and replacing text using
javascript style regular expressions.
Community - Developer guides
if you know of useful mailing lists, newsgroups, forums, or other communities related to ajax, please link to them here.
Guide to Web APIs - Developer guides
the web includes a wide array of apis that can be used from
javascript to build increasingly more powerful and capable applications, running either on the web, locally, or through technology such as node.js, on a server.
Web Audio playbackRate explained - Developer guides
ntrols in html: <video id="myvideo" controls> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type='video/mp4' /> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type='video/webm' /> </video> <form> <input id="pbr" type="range" value="1" min="0.5" max="4" step="0.1" > <p>playback rate <span id="currentpbr">1</span></p> </form> and apply some
javascript to it: window.onload = function () { var v = document.getelementbyid("myvideo"); var p = document.getelementbyid("pbr"); var c = document.getelementbyid("currentpbr"); p.addeventlistener('input',function(){ c.innerhtml = p.value; v.playbackrate = p.value; },false); }; finally, we listen for the input event firing on the <input> element, allowing us to react to the playback ...
<abbr>: The Abbreviation element - HTML: Hypertext Markup Language
fn> (<abbr title="specification">spec</abbr>) is a document that outlines in detail how a technology or api is intended to function and how it is accessed.</p> result accessibility concerns spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand it, especially if the content is technical or industry jargon.
<dialog>: The Dialog element - HTML: Hypertext Markup Language
<option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select> </label></p> <menu> <button value="cancel">cancel</button> <button id="confirmbtn" value="default">confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <output aria-live="polite"></output>
javascript var updatebutton = document.getelementbyid('updatedetails'); var favdialog = document.getelementbyid('favdialog'); var outputbox = document.queryselector('output'); var selectel = document.queryselector('select'); var confirmbtn = document.getelementbyid('confirmbtn'); // "update details" button opens the <dialog> modally updatebutton.addeventlistener('click', function onopen() { if (typeof f...
<input type="radio"> - HTML: Hypertext Markup Language
choice1">email</label> <input type="radio" id="contactchoice2" name="contact" value="phone"> <label for="contactchoice2">phone</label> <input type="radio" id="contactchoice3" name="contact" value="mail"> <label for="contactchoice3">mail</label> </div> <div> <button type="submit">submit</button> </div> </form> <pre id="log"> </pre> then we add some
javascript to set up an event listener on the submit event, which is sent when the user clicks the "submit" button: var form = document.queryselector("form"); var log = document.queryselector("#log"); form.addeventlistener("submit", function(event) { var data = new formdata(form); var output = ""; for (const entry of data) { output = output + entry[0] + "=" + entry[1] + "\r"; }; log.innertex...
<menuitem> - HTML: Hypertext Markup Language
-menu"> right-click to see the adjusted context menu </div> <menu type="context" id="popup-menu"> <menuitem type="checkbox" checked>checkbox</menuitem> <hr> <menuitem type="command" label="this command does nothing" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png"> commands don't render their contents.
contextmenu - HTML: Hypertext Markup Language
geimage"> on the image below, you can fire the "change image" action in your context menu.<br /> <img src="https://udn.realityripple.com/samples/a2/b601bdfc0c.png" contextmenu="changeimage" id="promobutton" /> <menu type="context" id="changeimage"> <menuitem label="change image" onclick="changeimage()"></menuitem> </menu> </li> </ol> </body>
javascript function shareviatwitter() { window.open("https://twitter.com/intent/tweet?text=" + "hurray!
Global attributes - HTML: Hypertext Markup Language
ters default to lowercase) on or sentences, the first letter of each sentence defaults to a capital letter; all other letters default to lowercase words, the first letter of each word defaults to a capital letter; all other letters default to lowercase characters, all letters should default to uppercase class a space-separated list of the classes of the element.
Cache-Control - HTTP
e header: good: cache-control: no-store bad: cache-control: private,no-cache,no-store,max-age=0,must-revalidate,pre-check=0,post-check=0 caching static assets for the files in the application that will not change, you can usually add aggressive caching by sending the response header below.
Referer - HTTP
idden header name yes syntax referer: <url> directives <url> an absolute or partial address of the previous web page from which a link to the currently requested page was followed.
X-DNS-Prefetch-Control - HTTP
the x-dns-prefetch-control http response header controls dns prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as urls for items referenced by the document, including images, css,
javascript, and so forth.
X-XSS-Protection - HTTP
the http x-xss-protection response header is a feature of internet explorer, chrome and safari that stops pages from loading when they detect reflected cross-site scripting (xss) attacks.
Add to Home screen - Progressive web apps (PWAs)
to make our pwa installable on desktop, we first added a button to our document to allow users to do the installation — this isn't made available automatically on desktop apps, and the installation needs to be triggered by a user gesture: <button class="add-button">add to home screen</button> we then gave it some simple styling: .add-button { position: absolute; top: 1px; left: 1px; }
javascript for handling the install at the bottom of our index.js file, we added some
javascript to handle the installation.
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
}; when the button is clicked, fetch asks the server to send the notification with the given parameters: payload is the text that to be shown in the notification, delay defines a delay in seconds until the notification will be shown, and ttl is the time-to-live setting that keeps the notification available on the server for a specified amount of time, also defined in seconds.
visibility - SVG: Scalable Vector Graphics
"button-icon"> <path d="m16.59 8.59l12 13.17 7.41 8.59 6 10l6 6 6-6z" /> <path d="m12 8l-6 6 1.41 1.41l12 10.83l4.59 4.58l18 14z" class="invisible" /> <path d="m0 0h24v24h0z" fill="none" /> </svg> <span> click me </span> </button> css svg { display: inline !important; } span { vertical-align: 50%; } button { line-height: 1em; } .invisible { visibility: hidden; }
javascript document.queryselector("button").addeventlistener("click", function (evt) { this.queryselector("svg > path:nth-of-type(1)").classlist.toggle("invisible"); this.queryselector("svg > path:nth-of-type(2)").classlist.toggle("invisible"); }); specifications specification status comment css level 2 (revision 1)the definition of 'visibility' in that specification.
SVG as an Image - SVG: Scalable Vector Graphics
css background-image gecko-specific contexts additionally, gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) introduced support for using svg in these contexts: css list-style-image css content svg <image> element svg <feimage> element canvas drawimage function restrictions for security purposes, gecko places some restrictions on svg content when it's being used as an image:
javascript is disabled.
Types of attacks - Web security
t access to any cookies, session tokens, or other sensitive site-specific information, or lets the malicious script rewrite the html content.
Converting WebAssembly text format to wasm - WebAssembly
func from a module called imports, and exports a function called exported_func: (module (func $i (import "imports" "imported_func") (param i32)) (func (export "exported_func") i32.const 42 call $i ) ) the webassembly function exported_func is exported for use in our environment (e.g.