Search completed in 1.28 seconds.
nsIAlertsService
toolkit/components/
alerts/nsi
alertsservice.idlscriptable this interface can be used to notify the user of something that does not require an immediate reaction.
... note: prior firefox 22, the
alerts service was only supported on windows in gecko 1.7, had no effect on mac os x in gecko 1.8, but was fully supported in mac os x in gecko 1.9.
... implemented by: @mozilla.org/
alerts-service;1 as a service: var
alertsservice = components.classes["@mozilla.org/
alerts-service;1"] .getservice(components.interfaces.nsi
alertsservice); method overview void show
alertnotification(in astring imageurl, in astring title, in astring text, [optional] in boolean textclickable, [optional] in astring cookie, [optional] in nsiobserver
alertlistener, [optional] in astring name, [optional] in astring dir, [optional] in astring lang, [optional] in astring data, [optional] in nsiprincipal principal,[optional] in boolean inprivatebrowsing); void close
alert([optional] in astring name, [optional] in nsiprincipal prin...
...And 22 more matches
Using the alert role - Accessibility
description this technique demonstrates how to use the
alert role and describes the effect it has on browsers and assistive technology.
... the
alert role is used to communicate an important and usually time-sensitive message to the user.
... when this role is added to an element, the browser will send out an accessible
alert event to assistive technology products which can then notify the user about it.
...And 19 more matches
Using the alertdialog role - Accessibility
description this technique demonstrates how to use the
alertdialog role.
... the
alertdialog role is used to notify the user of urgent information that demands the user's immediate attention.
... as the name implies,
alertdialog is a type of dialog.
...And 17 more matches
ARIA: alert role - Accessibility
the
alert role can be used to tell the user an element has been dynamically updated.
...if the user is expected to close the
alert, then the
alertdialog role should be used instead.
... description one of the five live region roles, the
alert role is used to provide the user with important, and usually time-sensitive, information, and often to tell the user an element has been dynamically updated.
...And 14 more matches
User Notifications and Alerts - Archive of obsolete content
using modal dialogs and
alerts is usually a bad idea.
... this kind on notification is very easy to implement, it doesn't interrupt the user and is easy to read and dismiss, so it is our recommended way of displaying
alerts and notifications.
... the
alerts service this is a very good option when you want to
alert users about events without requiring input from them.
...And 13 more matches
Alerts - Accessibility
if the criteria was not met, the user will be notified via an
alert.
... instead of using the javascript ‘
alert’ function, we’ll use a simple wai-aria widget for notification.
... this notifies the user of the error, but allows for them continue modifying the form without losing focus (caused by the “onblur” handler in javascript's default ‘
alert’ function).
...And 13 more matches
XForms Alert Element - Archive of obsolete content
the message of the
alert element can exist in instance data, in a remote document, or as inline text.
... attributes single-node binding linking src - url of a document whose contents will be retrieved by the
alert element and used to provide the
alert message for the containing form control.
... type restrictions the
alert element can be bound to any simple content.
...And 6 more matches
Window.alert() - Web APIs
the window.
alert() method displays an
alert dialog with the optional specified content and an ok button.
... syntax window.
alert(message); parameters message optional a string you want to display in the
alert dialog, or, alternatively, an object that is converted into a string and displayed.
... example window.
alert("hello world!");
alert("hello world!"); both produce: notes the
alert dialog should be used for messages which do not require any response on the part of the user, other than the acknowledgement of the message.
... specification specification status comment html living standardthe definition of '
alert()' in that specification.
Alerts and Notifications - Archive of obsolete content
basic modal
alert alert('hello'); pop-ups the following code presents a non-modal pop-up, which automatically disappears after an appropriate delay.
... it uses nsi
alertsservice.
... this works on windows, linux and (if growl is installed) mac os x: function popup(title, text) { try { components.classes['@mozilla.org/
alerts-service;1'] .getservice(components.interfaces.nsi
alertsservice) .show
alertnotification(null, title, text, false, '', null); } catch(e) { // prevents runtime error on platforms that don't implement nsi
alertsservice } } if you need to display a comparable
alert on a platform that doesn't support nsi
alertsservice, you can do this: function popup(title, msg) { var image = null; var win = components.classes['@mozilla.org/embedcomp/window-watcher;1'] .getservice(components.interfaces.nsiwindowwatcher) .openwindow(null, 'chrome://global/content/
alerts/
alert.xul', ...
ROLE_ALERT
« gecko roles page represents an
alert or a condition that a user should be notified about.
... mapped to at-spi: role_
alert atk: atk_role_
alert msaa/ia2: role_system_
alert ua: nsaccessibilitywindowrole events event_
alert - fires when the widget is shown.
... used by aria:
alert,
alertdialog xul: <notification/>, <panel noautofocus = "true"/> ...
alert - Archive of obsolete content
summary the
alert function displays a modal dialog box with a message representing the input.
... method of install object syntax void
alert ( string message ); parameters the message parameter is displayed as a string in the dialog box.
ui.alertNotificationOrigin
ui.
alertnotificationorigin controls the position and direction from which popup notifications invoked by nsi
alertsservice are sliding in.
Working with Svelte stores - Learn web development
objective: learn how to use svelte stores using stores we will create an
alert component that shows notifications on screen, which can receive messages from any component.
... in this case, the
alert component is independent from the rest — it is not a parent or child of any other — so the messages don't fit into the component hierarchy.
... creating the
alert component to show how to work with stores, we will create an
alert component.
...And 46 more matches
StringView - Archive of obsolete content
examples var mystringview1 = new stringview("hello world!"); // utf-8
alert(mystringview1) // "hello world!" var mystringview2 = new stringview(mystringview1, "utf-16");
alert(mystringview1.buffer.bytelength); // 12
alert(mystringview2.buffer.bytelength); // 24 stringview constructor's methods makefrombase64() syntax stringview.makefrombase64(base64string[, encoding][, byteoffset][, length]) description returns a new instance of stringview constr...
... examples var mystringview = stringview.makefrombase64("sgvsbg8gd29ybgqh");
alert(mystringview) // "hello world!" this function is useful in order to pass binary data containing strings.
... examples var mystringview = new stringview("\u6432\u6432\u6432\u6432");
alert(mystringview.makeindex()) // 4
alert(mystringview.makeindex(2)) // 6 …using the startfrom argument… var mystringview = stringview.makefrombase64("5lit5pahigvzcghdsw9sievuz2xpc2gg4ks54ks/4kso4kwn4ksm4kwainin2ytyudix2kjzitipihbvcnr1z3xdqnmg4kas4ka+4kac4kay4ka+inga0yprgdgb0lrqunc5ioaxpeacroiqnidgqkrgqbdgqjzgql7gqkzgqy==");
alert(mystringview); /* get the hindi subview...
...And 21 more matches
TypeScript support in Svelte - Learn web development
for example, if you start adding an ms property to the
alert component call, typescript will infer from the default value that the ms property should be a number: and if you pass something that is not a number it will complain about it: the application template has a validate script configured that runs svelte-check against your code.
...==================================== svelte-check found no errors and no warnings note that if you are using a supporting code editor like vs code, a simple way to start porting a svelte component is to just add the <script lang='ts'> at the top of your component and look for the three-dotted hints:
alert.svelte let's start with our
alert.svelte component.
... add lang="ts" into your
alert.svelte component's <script> tag.
...And 15 more matches
Processing XML with E4X - Archive of obsolete content
var h = 'html'; var text = "here's some text"; var doc = <{h}><body>{text}</body></{h}>;
alert(doc.toxmlstring()); // gives <html> <body>here's some text</body> </html> working with attributes xml literal syntax has a significant advantage over the xml constructor when you need to create markup dynamically.
... var b = 'he said "don\'t go there."'; var el = <foo a={b}/>;
alert(el.toxmlstring()); // gives: <foo a="he said "don't go there.""/> less than and ampersand signs are escaped into their entity equivalents.
... while one can interpolate attribute names as well as attribute values: var a = 'att'; var b = <b {a}='value'/>;
alert(b); // gives: <b att="value"/> ...one cannot interpolate a whole expression at once (e.g., <b {a}>.) after executing the above example, the variable languages references an xml object corresponding to the <languages> node in the xml document.
...And 13 more matches
nsIPromptService
its methods should be used in privileged code instead of dom window.
alert, window.confirm, and other similar functions.
...to get an instance, use: var promptservice = components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice); method overview void
alert(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext); void
alertcheck(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, in wstring acheckmsg, inout boolean acheckstate); boolean confirm(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext); boolean confirmcheck(in nsidomwindow aparent, in wstring adialogtitle, in wstring at...
... (button_title_yes *button_pos_0) +(button_title_no * button_pos_1) methods
alert()
alert shows an
alert dialog with an ok button.
...And 12 more matches
JXON - Archive of obsolete content
try:
alert(json.stringify(myobject)); note: if you want to freeze the whole object tree (because of the "static" nature of an xml document), uncomment the string: /* object.freeze(this); */.
...try:
alert(json.stringify(myobject)); note: if you want to freeze the whole object tree (because of the "static" nature of an xml document), uncomment the string: /* object.freeze(this); */.
...try:
alert(json.stringify(myobject)); note: if you want to freeze the whole object tree (because of the "static" nature of an xml document), uncomment the string: /* if (nlength > 0) { object.freeze(vresult); } */.
...And 10 more matches
sslerr.html
ssl_error_bad_mac_
alert -12272 "ssl peer reports incorrect message authentication code." the remote system has reported that it received a message with a bad message authentication code from the local system.
... ssl_error_bad_cert_
alert -12271 "ssl peer cannot verify your certificate." the remote system has received a certificate from the local system, and has rejected it for some reason.
... ssl_error_revoked_cert_
alert -12270 "ssl peer rejected your certificate as revoked." the remote system has received a certificate from the local system, and has determined that the certificate has been revoked.
...And 10 more matches
XUL accessibility guidelines - Archive of obsolete content
alerts provide accessible
alerts for presenting important information to the user.
... use scripting or the notificationbox element to flag
alerts.
... avoid using audio or visual
alerts alone to signal urgent events.
...And 9 more matches
Using js-ctypes
line 15 calls the msgbox() routine, which displays the
alert.
... note: this example will not work on 64bit os x, see below for core foundation for 64bit os x /* build a str255 ("pascal style") string from the passed-in string */ function makestr(str) { return string.fromcharcode(str.length) + str; } components.utils.import("resource://gre/modules/ctypes.jsm"); var carbon = ctypes.open("/system/library/frameworks/carbon.framework/carbon"); std
alert = carbon.declare("standard
alert", /* function name */ ctypes.default_abi, /* abi type */ ctypes.int16_t, /* return type */ ctypes.int16_t, /*
alert type */ 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 standard
alert carbon function from javascript!"); var err = std
alert(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.
...And 9 more matches
Accessibility documentation index - Accessibility
7 aria live regions aria, accessibility, arialive 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.
... 8 forms aria, accessibility the following pages provide various techniques for improving the accessibility of web forms: 9
alerts aria, accessibility, forms, web you have a form — a contact form, for example — that you want to put some accessible error checking into.
... 15 using the
alert role aria, accessibility, advanced, css, example, html, needscontent,
alert,
alert role,
alertrole,
alerts, assitive technology, role configuration, wcag1.2.1, wcag3.3.1 the
alert role is used to communicate an important and usually time-sensitive message to the user.
...And 8 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
pref("mcd.logging.console", "all"); pref("mcd.logging.dump", "all"); components.utils.import("resource:///modules/gloda/log4moz.js"); var log = log4moz.getconfiguredlogger("mcd"); // enable
alerts.
... var
alerts = components.classes["@mozilla.org/
alerts-service;1"] .getservice(components.interfaces.nsi
alertsservice); // displayerror() is broken.
...function displayerror(title, msg) { log.debug(title + ": " + msg);
alerts.show
alertnotification("chrome://branding/content/icon48.png", title, msg); } firefox it's the same principles as for firefox as it was described above for thunderbir.
...And 7 more matches
XUL Event Propagation - Archive of obsolete content
this is the case in the example code in the diagram, where the onclick event listener for the button element handles the click event by displaying a simple
alert dialog: <button value="click me" onclick="
alert('thank you')" /> the opposite of event bubbling is event capturing.
... the widget hierarchy consider the following xul file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="events" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" oncommand="
alert('window handler')"> <vbox> <vbox style="background-color: lightgrey;" oncommand="
alert('box handler')"> <menu class="menu" label="file" oncommand="
alert('menu handler')"> <menupopup> <menuitem oncommand="
alert('new item
alert')" label="new" /> <menuitem label="open" /> <menuitem oncommand="
alert('close handler')" label="close" /> </menupopup> </menu> <menu...
... class="menu" label="edit"> <menupopup> <menuitem oncommand="
alert('edit source handler')" label="edit source" /> <menuitem label="reload" /> <menuitem label="view source" /> </menupopup> </menu> </vbox> <spring flex="1" /> </vbox> </window> in this file, the lowest-down, or "leaf" elements are the menuitems.
...And 7 more matches
Content Scripts - Archive of obsolete content
you can load multiple scripts by passing an array of strings to either contentscript or contentscriptfile: // main.js var tabs = require("sdk/tabs"); tabs.on('ready', function(tab) { tab.attach({ contentscript: ['document.body.style.border = "5px solid red";', 'window.
alert("hi");'] }); }); // main.js var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscriptfile: [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.
... passing configuration options the contentscriptoptions is a json object that is exposed to content scripts as a read-only value under the self.options property: // main.js var tabs = require("sdk/tabs"); tabs.on('ready', function(tab) { tab.attach({ contentscript: 'window.
alert(self.options.message);', contentscriptoptions: {"message" : "hello world"} }); }); any kind of jsonable value (object, array, string, etc.) can be used here.
... for example, this content script will fail with the error "themessage is not defined": var themessage = "hello from content script!"; anelement.setattribute("onclick", "
alert(themessage);"); second, if you define an event listener by direct assignment to a global event handler like onclick, then the assignment might be overridden by the page.
...And 6 more matches
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
listing 1: calling xpcom functions using xpconnect <?xml version="1.0" encoding="utf-8"?> <page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript"><![cdata[ var ioservice = components.classes['@mozilla.org/network/io-service;1'] .getservice(components.interfaces.nsiioservice);
alert(ioservice); ]]></script> </page> calling xpconnect using local files try saving the contents of listing 1 as the file test.xul, somewhere on your desktop, and drag and drop it into firefox to open it.
... you'll note that even though the file includes an
alert method, nothing happens.
... listing 4: get active browser window netscape.security.privilegemanager .enableprivilege('universalxpconnect'); var windowmediator = components .classes['@mozilla.org/appshell/window-mediator;1'] .getservice(components.interfaces.nsiwindowmediator); var browser = windowmediator.getmostrecentwindow('navigator:browser');
alert(browser.gbrowser.mtabs.length); get overview of all windows with a certain type use the nsiwindowmediator.getenumerator() method to get an overview of all windows that have a certain type.
...And 6 more matches
Adding windows and dialogs - Archive of obsolete content
an
alert window is an example of this.
...
alert the
alert is the simplest form of dialog.
...we have been using the window.
alert function to open
alert messages in our examples so far, but that's not the right way to do it.
...And 6 more matches
Object-oriented JavaScript for beginners - Learn web development
add this function within the script element: function createnewperson(name) { const obj = {}; obj.name = name; obj.greeting = function() {
alert('hi!
... replace your previous function with the following: function person(name) { this.name = name; this.greeting = function() {
alert('hi!
...each instance is created according to this definition: function person(name) { this.name = name; this.greeting = function() {
alert('hi!
...And 6 more matches
Using tab-modal prompts
prior to gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1), prompts (that is,
alerts and other modal prompts) were window modal.
... that is, when an
alert occurred, it blocked the user interface on all tabs in the window until the user dismissed the prompt.
... window-modal
alert.
...And 6 more matches
Reference - Archive of obsolete content
well if you combine the two, you can have inherited private variables: function myclass(){ var property = 5; this.tellme = function(){ return property; } } function myotherclass(){ myclass.apply( this ); } var o = new myotherclass;
alert( o.tellme() ); //
alerts 5 as you'd expect — the preceding comment was added by psygnisfive (talk – contribs) on 22:23, 4 december 2006 terminology we need a terminology appendix.
...i checked this by doing
alert(math.constructor) //shows that object is its constructor
alert(object.constructor) //shows that function is its constructor
alert(function.constructor) //shows that function is its constructor note : the function.constructor seems to keep on refering to itself, if you do the following you get same results which suggests that this is indeed the top level object.
...
alert(function.constructor.constructor)
alert(function.constructor.constructor.constructor.constructor) function == object however the following statement suggests that function is object.
...And 5 more matches
Gecko info for Windows accessibility vendors
for example, we may say event_
alert instead of the full event_system_
alert.
...if it is a role_application, role_dialog or role_
alert then stay in focus tracking mode -- there is no need to parse the document.
... in addition, if it is a role_
alert, a screen reader should treat it as a message box -- that is, to read the entire contents.
...And 5 more matches
Getting Started - Developer guides
our javascript will request an html document, test.html, which contains the text "i'm a test." then we'll
alert() the contents of the response.
... <button id="ajaxbutton" type="button">make a request</button> <script> (function() { var httprequest; document.getelementbyid("ajaxbutton").addeventlistener('click', makerequest); function makerequest() { httprequest = new xmlhttprequest(); if (!httprequest) {
alert('giving up :( cannot create an xmlhttp instance'); return false; } httprequest.onreadystatechange =
alertcontents; httprequest.open('get', 'test.html'); httprequest.send(); } function
alertcontents() { if (httprequest.readystate === xmlhttprequest.done) { if (httprequest.status === 200) {
alert(httprequest.responsetext); } else {
alert('t...
...here was a problem with the request.'); } } } })(); </script> in this example: the user clicks the "make a request" button; the event handler calls the makerequest() function; the request is made and then (onreadystatechange) the execution is passed to
alertcontents();
alertcontents() checks if the response was received and ok, then
alert()s the contents of the test.html file.
...And 5 more matches
Closures - JavaScript
lexical scoping consider the following example code: function init() { var name = 'mozilla'; // name is a local variable created by init function displayname() { // displayname() is the inner function, a closure
alert(name); // use variable declared in the parent function } displayname(); } init(); init() creates a local variable called name and a function called displayname().
... run the code using this jsfiddle link and notice that the
alert() statement within the displayname() function successfully displays the value of the name variable, which is declared in its parent function.
... closure consider the following code example: function makefunc() { var name = 'mozilla'; function displayname() {
alert(name); } return displayname; } var myfunc = makefunc(); myfunc(); running this code has exactly the same effect as the previous example of the init() function above.
...And 5 more matches
Index - Archive of obsolete content
6 navigator.moznotification api, deprecated, mobile, non-standard, property, reference provides support for creating notification objects, which are used to display desktop notification
alerts to the user.
... 172
alerts and notifications code snippets non-modal notification and further interaction with users 173 autocomplete code snippets, form fill, satchel no summary!
... 292 user notifications and
alerts no summary!
...And 4 more matches
Sending forms through JavaScript - Learn web development
urlencodeddata = urlencodeddatapairs.join( '&' ).replace( /%20/g, '+' ); // define what happens on successful data submission xhr.addeventlistener( 'load', function(event) {
alert( 'yeah!
... data sent and response loaded.' ); } ); // define what happens in case of error xhr.addeventlistener( 'error', function(event) {
alert( 'oops!
...now for the javascript: const btn = document.queryselector('button'); function senddata( data ) { const xhr = new xmlhttprequest(), fd = new formdata(); // push our data into our formdata object for( name in data ) { fd.append( name, data[ name ] ); } // define what happens on successful data submission xhr.addeventlistener( 'load', function( event ) {
alert( 'yeah!
...And 4 more matches
Functions — reusable blocks of code - Learn web development
function myfunction() {
alert('hello'); } myfunction(); // calls the function once anonymous functions you may see functions defined and invoked in slightly different ways.
... so far we have just created a function like so: function myfunction() {
alert('hello'); } but you can also create a function that doesn't have a name: function() {
alert('hello'); } this is called an anonymous function — it has no name!
...you generally use an anonymous function along with an event handler, for example the following would run the code inside the function whenever the associated button is clicked: const mybutton = document.queryselector('button'); mybutton.onclick = function() {
alert('hello'); } the above example would require there to be a <button> element available on the page to select and click.
...And 4 more matches
React interactivity: Events and state - Learn web development
for example: const btn = document.queryselector('button'); btn.addeventlistener('click', () => {
alert("hi!"); }); in react, we write event handlers directly on the elements in our jsx, like this: <button type="button" onclick={() =>
alert("hi!")} > say hi!
...the value of that attribute is a function that triggers a simple
alert.
...after that, it should trigger an
alert(), which can say whatever you’d like.
...And 4 more matches
Examples
in the example below we try
alerting an undefined variable.
... components.utils.import("resource://gre/modules/promise.jsm"); var mypromise = myuserdefinedpromise(); mypromise.then( function(asuccessreason) {
alert('mypromise was succesful and reason was = "' + asuccessreason + '"'); }, function(arejectreason) {
alert('mypromise failed for reason = "' + uneval(arejectreason) + '"'); } ); function myuserdefinedpromise() { try { //var myvariscommented = 'hi'; // i commented this out s oit is undefined, this will cause rejected
alert(myvariscommented); return promise.resolve('yay success'); // this makes the success function trigger with asuccessreason being 'yay success' but because i commented out the var 2 lines above, it will error out on the
alert(myvariscommented) and never get to this success line.
...now replace the `
alert(myvariscommented)` with `throw new error('i feel like rejecting this promise')` like this: components.utils.import("resource://gre/modules/promise.jsm"); var mypromise = myuserdefinedpromise(); mypromise.then( function(asuccessreason) {
alert('mypromise was succesful and reason was = "' + asuccessreason + '"'); }, function(arejectreason) {
alert('mypromise failed for reason = "' + uneval(arejectreason) + '"'); } ); function myuserdefinedpromise() { try { var myvariscommented =...
...And 4 more matches
ARIA Test Cases - Accessibility
widget test cases
alert simple
alert complex
alert real
alert example with aria-required and aria-invalid -- type in a email address without an at sign to test the
alert expected at behavior: a screen reader or screen magnifier must speak an
alert when it becomes visible.
... a screen magnifier should move the current view to the
alert or open a new panel with the
alert information optional, but desired: if there are widgets within the
alert, their role and any keyboard mnemonic (accesskey) should be spoken.
... for example, "options, button, alt+shift+t" should be spoken if there is an options button in the
alert with alt+shift+t as an accesskey.
...And 4 more matches
Compiling from Rust to WebAssembly - WebAssembly
let's write some rust let's put this code into src/lib.rs instead: use wasm_bindgen::prelude::*; #[wasm_bindgen] extern { pub fn
alert(s: &str); } #[wasm_bindgen] pub fn greet(name: &str) {
alert(&format!("hello, {}!", name)); } this is the contents of our rust project.
... calling external functions in javascript from rust the next part looks like this: #[wasm_bindgen] extern { pub fn
alert(s: &str); } the bit inside the #[ ] is called an "attribute", and it modifies the next statement somehow.
...it says "the
alert function takes one argument, a string named s." as you might suspect, this is the
alert function provided by javascript.
...And 4 more matches
page-mod - Archive of obsolete content
for example, the following add-on displays an
alert whenever the user visits any page hosted at "mozilla.org": var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscript: 'window.
alert("page matches ruleset");' }); you can modify the document in your script: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscript: 'document.body.innerhtml = ' + ' "<h1>page matches ruleset</h1>";' }); you can supp...
... you can specify a url exactly: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://www.iana.org/domains/example/", contentscript: 'window.
alert("page matches ruleset");' }); you can specify a number of wildcard forms, for example: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscript: 'window.
alert("matched!");' }); you can specify a set of urls using a regular expression.
... var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: /.*developer.*/, contentscript: 'window.
alert("matched!");' }); to specify multiple patterns, pass an array of match patterns: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: ["*.foo.org", "*.bar.com"], contentscript: 'window.
alert("matched!");' }); see the match-pattern module for a detailed description of match pattern syntax.
...And 3 more matches
Miscellaneous - Archive of obsolete content
or firefox services.appinfo.version; // returns "2.0.0.1" for firefox version 2.0.0.1 retrieving the version of an extension as specified in the extension's install.rdf components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("extension-guid@example.org", function(addon) { // this is an asynchronous callback function that might not be called immediately
alert("my extension's version is " + addon.version); }); restarting firefox/thunderbird/seamonkey_2.0 for firefox 3 see onwizardfinish around here: http://mxr.mozilla.org/seamonkey/sou...pdates.js#1639 for firefox 2 see around here: http://mxr.mozilla.org/mozilla1.8/so...pdates.js#1631 bug 338039 tracks improving this situation by providing a simple method to restart the application.
...</div> <script type="text/javascript"> var elm = document.getelementbyid("scrollarea"); elm.addeventlistener("dommousescroll", function scroll(event){ //event.detail is positive for a downward scroll, negative for an upward scroll
alert("scrolling " + event.detail + " lines"); }, false); </script> if you do not receive a dommousescroll event while holding any of the modifier keys (ctrl,shift,alt,meta) you should check the mousewheel.withcontrolkey.action and related preferences.
...n be accessed from javascript in the following manner: var common = { _bundle: components.classes["@mozilla.org/intl/stringbundle;1"] .getservice(components.interfaces.nsistringbundleservice) .createbundle("chrome://myext/locale/myext.properties"), getlocalizedmessage: function(msg) { return this._bundle.getstringfromname(msg); } };
alert(common.getlocalizedmessage("invalid.url")) another similar alternative (using both getstringfromname and formatstringfromname), is: var fcbundle = components.classes["@mozilla.org/intl/stringbundle;1"] .getservice(components.interfaces.nsistringbundleservice) .createbundle("chrome://myext/locale/myext.properties"); function getstr(msg, args){ //get localised messa...
...And 3 more matches
Interaction between privileged and non-privileged pages - Archive of obsolete content
var myextension = { mylistener: function(evt) {
alert("received from web page: " + evt.target.getattribute("attribute1") + "/" + evt.target.getattribute("attribute2")); } } document.addeventlistener("myextensionevent", function(e) { myextension.mylistener(e); }, false, true); // the last value is a mozilla-specific value to indicate untrusted content is allowed to trigger the event.
...to trigger the
alert() in the listener and pass the data from the web page, write code such as this in the web page: var element = document.createelement("myextensiondataelement"); element.setattribute("attribute1", "foobar"); element.setattribute("attribute2", "hello world"); document.documentelement.appendchild(element); var evt = document.createevent("events"); evt.initevent("myextensionevent", true, false); element.dispatchevent(evt); this code creates an arbitrary element -- <myextensiondataelement/> -- and inserts it into the web page's dom.
... the code containing the callback could look like this: in the extension: var myextension = { mylistener: function(evt) {
alert("received from web page: " + evt.target.getattribute("attribute1") + "/" + evt.target.getattribute("attribute2")); /* the extension answers the page*/ evt.target.setattribute("attribute3", "the extension"); var doc = evt.target.ownerdocument; var answerevt = doc.createelement("myextensionanswer"); answerevt.setattribute("part1", "answers this."); doc...
...And 3 more matches
WAI-ARIA basics - Learn web development
this is a fairly trivial example, but just imagine if you were creating a complex ui with lots of constantly updating content, like a chat room, or a strategy game ui, or a live updating shopping cart display — it would be impossible to use the app in any effective way without some kind of way of
alerting the user to the updates.
... wai-aria fortunately provides a useful mechanism to provide these
alerts — the aria-live property.
... form validation and error
alerts first of all, let's revisit the form example we first looked at in our css and javascript accessibility article (read keeping it unobtrusive for a full recap).
...And 3 more matches
JavaScript basics - Learn web development
for example: let icecream = 'chocolate'; if(icecream === 'chocolate') {
alert('yay, i love chocolate ice cream!'); } else {
alert('awwww, but chocolate is my favorite...'); } the expression inside the if( ...
...for example: let myvariable = document.queryselector('h1');
alert('hello!'); these functions, document.queryselector and
alert, are built into the browser.
... for example, the
alert() function makes a pop-up box appear inside the browser window, but we need to give it a string as an argument to tell the function what message to display.
...And 3 more matches
Introducing asynchronous JavaScript - Learn web development
let's look at a simple example (see it live here, and see the source): const btn = document.queryselector('button'); btn.addeventlistener('click', () => {
alert('you clicked me!'); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); in this block, the lines are executed one after the other: we grab a reference to a <button> element that is already available in the dom.
... we add a click event listener to it so that when the button is clicked: an
alert() message appears.
... once the
alert is dismissed, we create a <p> element.
...And 3 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
in the following example, the browser will wait two seconds before executing the anonymous function, then will display the
alert message (see it running live, and see the source code): let mygreeting = settimeout(function() {
alert('hello, mr.
...the following two versions of the code snippet are equivalent to the first one: // with a named function let mygreeting = settimeout(function sayhi() {
alert('hello, mr.
... universe!'); }, 2000) // with a function defined separately function sayhi() {
alert('hello mr.
...And 3 more matches
JavaScript object basics - Learn web development
let's update the javascript object in our file to look like this: const person = { name: ['bob', 'smith'], age: 32, gender: 'male', interests: ['music', 'skiing'], bio: function() {
alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old.
... he likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); }, greeting: function() {
alert('hi!
...try these in the js console: person['eyes'] = 'hazel'; person.farewell = function() {
alert("bye everybody!"); } you can now test out your new members: person['eyes'] person.farewell() one useful aspect of bracket notation is that it can be used to set not only member values dynamically, but member names too.
...And 3 more matches
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
pressing the first button will set a timeout which calls an
alert dialog after two seconds and stores the timeout id for use by cleartimeout().
... html <p>live example</p> <button onclick="delayed
alert();">show an
alert box after two seconds</button> <p></p> <button onclick="clear
alert();">cancel
alert before it happens</button> javascript var timeoutid; function delayed
alert() { timeoutid = window.settimeout(window.
alert, 2*1000, 'that was really slow!'); } function clear
alert() { window.cleartimeout(timeoutid); } result see also cleartimeout() example.
... see the following example: myarray = ['zero', 'one', 'two']; myarray.mymethod = function (sproperty) {
alert(arguments.length > 0 ?
...And 3 more matches
Functions - JavaScript
for example: var y = function x() {};
alert(x); // throws an error the function name also appears when the function is serialized via function's tostring method.
...for example,
alert(new function()) outputs: function anonymous() { } since the function actually does not have a name, anonymous is not a variable that can be accessed within the function.
... for example, the following would result in an error: var foo = new function("
alert(anonymous);"); foo(); unlike functions defined by function expressions or by the function constructor, a function defined by a function declaration can be used before the function declaration itself.
...And 3 more matches
Introduction to using XPath in JavaScript - XPath
numbervalue stringvalue booleanvalue example the following uses the xpath expression count(//p) to obtain the number of <p> elements in an html document: var paragraphcount = document.evaluate( 'count(//p)', document, null, xpathresult.any_type, null );
alert( 'this document contains ' + paragraphcount.numbervalue + ' paragraph elements' ); although javascript allows us to convert the number to a string for display, the xpath interface will not automatically convert the numerical result if the stringvalue property is requested, so the following code will not work: var paragraphcount = document.evaluate('count(//p)', document, null, xpathresult.any_...
...type, null );
alert( 'this document contains ' + paragraphcount.stringvalue + ' paragraph elements' ); instead, it will return an exception with the code ns_dom_type_error.
... iterator example var iterator = document.evaluate('//phonenumber', documentnode, null, xpathresult.unordered_node_iterator_type, null ); try { var thisnode = iterator.iteratenext(); while (thisnode) {
alert( thisnode.textcontent ); thisnode = iterator.iteratenext(); } } catch (e) {
alert( 'error: document tree modified during iteration ' + e ); } snapshots when the specified result type in the resulttype parameter is either: unordered_node_snapshot_type ordered_node_snapshot_type the xpathresult object returned is a static node-set of matched nodes, which allows us to access each n...
...And 3 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
ontent for clock.dtd locale\en-us\clock.dtd: <!entity helloworld.clock "clock"> <!entity helloworld.currenttime "current time"> locale\fr-fr\clock.dtd: <!entity helloworld.clock "horloge"> <!entity helloworld.currenttime "heure courante"> replacing user interface messages within javascript files with properties references it may happen your extension displays some useful messages such as
alerts to the user.
... suppose you have these strings nested in a .js file: if ( password == userpassword ) { oprefs.setboolpref("access.authenticated", true); } else {
alert ("invalid password"); ......
...s.classes["@mozilla.org/intl/stringbundle;1"].getservice(components.interfaces.nsistringbundleservice); var _bundle = gmyextensionbundle.createbundle("chrome://myextension/locale/myextension.properties") you can now use your string substitutes in the .js where they are needed: see examples below if ( password == userpassword ) { oprefs.setboolpref("access.authenticated", true); } else {
alert (_bundle.getstringfromname("wrongpassmessage")); function clear() { sure = confirm(_bundle.getstringfromname("areyousuremessage")); } operations check this brings us to the operations check.
...And 2 more matches
The Essentials of an Extension - Archive of obsolete content
sayhello : function(aevent) { let stringbundle = document.getelementbyid("xulschoolhello-string-bundle"); let message = stringbundle.getstring("xulschoolhello.greeting.label"); window.
alert(message); } and, finally, this is our function declaration.
...we then call the window.
alert function with the message, just like we would do in an html document.
...you cannot dynamically change an attribute value with a new dtd key, you have to set the new value directly: let helloitem = document.getelementbyid("xulschoolhello-hello-menu-item"); // the
alert will say "hello world!"
alert(helloitem.getattribute("label")); // wrong helloitem.setattribute("label", "&xulschoolhello.hello2.label;"); // better helloitem.setattribute("label", "alternate message"); // right!
...And 2 more matches
Broadcasters and Observers - Archive of obsolete content
example 3 : source view <broadcasterset> <broadcaster id="colorchanger" style="color: black"/> </broadcasterset> <button label="test"> <observes element="colorchanger" attribute="style" onbroadcast="
alert('color changed');"/> </button> <button label="observer" oncommand="document.getelementbyid('colorchanger').setattribute('style','color: red');" /> two buttons have been created, one labeled test and the other labeled observer.
...first, the button changes to have red text and, second, an
alert box appears with the message 'color changed'.
...this results in an
alert message appearing.
...And 2 more matches
Document Object Model - Archive of obsolete content
for example, the following code will display the text 'message' in an
alert twice.
... function gettext(){ return "message"; }
alert(gettext());
alert(window.gettext()); thus, if you want to access variables or call a function declared in a script used by another window, you just need to access it using the other window's window object.
...to do this, we can do the following:
alert(window.opener.gettext()); each window has an opener property which holds the window object that opened this one.
...And 2 more matches
Property Files - Archive of obsolete content
an example is shown below: notfound
alert=no files were found matching the criteria.
... delete
alert=click ok to have all your files deleted.
...var strbundle = document.getelementbyid("strings"); var nofilesfound=strbundle.getstring("notfound
alert");
alert(nofilesfound); this example first gets a reference to the bundle using its id then, it looks up the string 'notfound
alert' in the property file.
...And 2 more matches
Making asynchronous programming easier with async and await - Learn web development
here is a trivial example: async function hello() { return greeting = await promise.resolve("hello"); }; hello().then(
alert); of course, the above example is not very useful, although it does serve to illustrate the syntax.
...} each one ends by recording a start time, seeing how long the timetest() promise takes to fulfill, then recording an end time and reporting how long the operation took in total: let starttime = date.now(); timetest().then(() => { let finishtime = date.now(); let timetaken = finishtime - starttime;
alert("time taken in milliseconds: " + timetaken); }) it is the timetest() function that differs in each case.
... in the slow-async-await.html example, timetest() looks like this: async function timetest() { await timeoutpromise(3000); await timeoutpromise(3000); await timeoutpromise(3000); } here we simply await all three timeoutpromise() calls directly, making each one
alert for 3 seconds.
...And 2 more matches
nsIAccessibleStates
state_
alert_low 0x04000000 this information is of low priority.
... state_
alert_medium 0x08000000 this information is of medium priority.
... state_
alert_high 0x10000000 this information is of high priority.
...And 2 more matches
Working with windows in chrome code
for example: //
alerts the title of the document displayed in the content-primary widget
alert(content.document.title); for example, you can use content.document in a browser.xul overlay to access the web page in the selected tab in a firefox window.
...alternatively, the opener window can pass a callback function to the progress dialog in the same way we passed the status string in the previous example: function oncancel() {
alert("operation canceled!"); } ...
... you can't use the window object, its members, like
alert and open, and many other objects available from inside a window.
...And 2 more matches
Pointer Lock API - Web APIs
if ("onpointerlockchange" in document) { document.addeventlistener('pointerlockchange', lockchange
alert, false); } else if ("onmozpointerlockchange" in document) { document.addeventlistener('mozpointerlockchange', lockchange
alert, false); } function lockchange
alert() { if(document.pointerlockelement === canvas || document.mozpointerlockelement === canvas) { console.log('the pointer lock status is now locked'); // do something useful in response } else { console.log('the pointer...
... document.addeventlistener('pointerlockerror', lockerror, false); document.addeventlistener('mozpointerlockerror', lockerror, false); function lockerror(e) {
alert("pointer lock failed"); } note: until firefox 50 the above events were prefixed with moz in firefox.
...when this occurs, we run a function called lockchange
alert() to handle the change.
...And 2 more matches
Using Web Workers - Web APIs
world'); console.log(typeof example3); // object console.log(typeof emulatemessage(example3)); // string // test #4 var example4 = { 'name': 'john smith', "age": 43 }; console.log(typeof example4); // object console.log(typeof emulatemessage(example4)); // object // test #5 function animal(stype, nage) { this.type = stype; this.age = nage; } var example5 = new animal('cat', 3);
alert(example5.constructor); // animal
alert(emulatemessage(example5).constructor); // object a value that is cloned and not shared is called message.
... this.terminate = function() { worker.terminate(); } } then we add the methods of adding/removing listeners: this.addlisteners = function(name, listener) { listeners[name] = listener; } this.removelisteners = function(name) { delete listeners[name]; } here we let the worker handle two simple operations for illustration: getting the difference of two numbers and making an
alert after three seconds.
... first we need to have the methods to handle the two simple operations: var queryablefunctions = { getdifference: function(a, b) { reply('printstuff', a - b); }, waitsometime: function() { settimeout(function() { reply('do
alert', 3, 'seconds'); }, 3000); } } function reply() { if (arguments.length < 1) { throw new typeerror('reply - takes at least one argument'); return; } postmessage({ querymethodlistener: arguments[0], querymethodarguments: array.prototype.slice.call(arguments, 1) }); } /* this method is called when main page calls queryworker's postmessage...
...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.
... including an aria-live attribute or a specialized live region role (such as role="
alert") on the element you want to announce changes to works as long as you add the attribute before the changes occur — either in the original markup, or dynamically using javascript.
...
alert error or warning message that flashes on the screen.
...And 2 more matches
Interacting with page scripts - Archive of obsolete content
listener displays a property of the cloned object, and the other listener displays a property of the assigned object: <html> <head> </head> <body> <input id="works" type="button" value="i will work"/> <input id="fails" type="button" value="i will not work"/> <script> var works = document.getelementbyid("works"); works.addeventlistener("click", function() {
alert(clonedcontentscriptobject.greeting); }, false); var fails = document.getelementbyid("fails"); fails.addeventlistener("click", function() {
alert(assignedcontentscriptobject.greeting); }, false); </script> </body> </html> if you run the example, clicking "i will work" displays the value of "greeting" in an
alert.
...ortfunction(greetme, unsafewindow, {defineas: "greetme"}); finally, the "page.html" file adds a button and a page script that calls the exported function when the user pushes the button: <html> <head> </head> <body> <input id="test" type="button" value="click me"/> <script> var test = document.getelementbyid("test"); test.addeventlistener("click", function() {
alert(window.greetme("page script")); }, false); </script> </body> </html> exportfunction() works by structured cloning the arguments and return value of the function from one scope to the other.
...now the page script can call the function as foo.greetme(): <html> <head> </head> <body> <input id="test" type="button" value="click me"/> <script> var test = document.getelementbyid("test"); test.addeventlistener("click", function() {
alert(window.foo.greetme("page script")); }, false); </script> </body> </html> reverting to the old behavior you can switch firefox back to the old behavior in which content scripts could expose objects and functions to page scripts using unsafewindow.
... finally, "listen.html" uses window.addeventlistener() to listen for messages from the content script: <!doctype html> <html> <head></head> <body> <script> window.addeventlistener('message', function(event) { window.
alert(event.data); // message from content script }, false); </script> </body> </html> page script to content script sending messages from the page script to the content script is just the same, but in reverse.
XUL Migration Guide - Archive of obsolete content
the following complete add-on uses nsipromptservice to display an
alert dialog: var {cc, ci} = require("chrome"); var promptsvc = cc["@mozilla.org/embedcomp/prompt-service;1"].
... getservice(ci.nsipromptservice); require("sdk/ui/button/action").actionbutton({ id: "xpcom-example", label: "hello from xpcom", icon: "./icon-16.png", onclick: function() { promptsvc.
alert(null, "my add-on", "hello from xpcom"); } }); it's good practice to encapsulate code which uses xpcom by packaging it in its own module.
... for example, we could package the
alert feature implemented above using a script like: var {cc, ci} = require("chrome"); var promptsvc = cc["@mozilla.org/embedcomp/prompt-service;1"].
... getservice(ci.nsipromptservice); exports.
alert = function(title, text) { promptsvc.
alert(null, title, text); }; if we save this as "
alert.js" in our add-on's lib directory, we can rewrite main.js to use it as follows: require("sdk/ui/button/action").actionbutton({ id: "xpcom-example", label: "hello from xpcom", icon: "./icon-16.png", onclick: function() { require("./
alert").
alert("my add-on", "hello from xpcom"); } }); one of the benefits of this is that we can control which parts of the add-on are granted chrome privileges, making it easier to review and secure the code.
QuerySelector - Archive of obsolete content
// if you'd like to convert it to a array for convenience, use this instead: // return array.prototype.slice.call(el.queryselectorall(selector)); }
alert($('#myid').id); (note that while using the firefox web console, the above functions are available automatically.) both xul and even xml can be easily made supportable (an alternative approach to the following would be to add chromewindow.prototype or window.prototype, accessing this.document.queryselector, or following the jquery style of chaining by returning 'this' within each prototype method...
... of $()): htmldocument.prototype.$ = function (selector) { // only for html 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.imp...
...lementation.createdocument('somens', 'foo', null); // create an xml document <foo xmlns="somens"/> var bar = foo.createelementns('somens', 'bar'); // add <bar xmlns="somens"/> foo.documentelement.appendchild(bar);
alert(foo.$('bar').nodename); // gives 'bar' element.prototype.$ = function (selector) { // works for html, xul, and plain xml return this.queryselector(selector); }; html example: <h1><a>test!<a/></h1> <script> element.prototype.$ = function (selector) { return this.queryselector(selector); };
alert(document.getelementsbytagname('h1')[0].$('a').nodename); // 'a' xul example: <hbox><vbox/></hbox> <script type="text/javascript"><![cdata[ element.prototype.$ = function (selector) { return this.queryselector(selector); }; var xulns = 'http://www.mozilla.org/keymaster/gatek...
...eeper/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')[0];
alert(foo.$('bar')); note that for plain xml, the # 'id' selector will not work with an 'id' attribute (since a such-named attribute need not necessarily be of type id in xml, though it is in html and xul), nor will it work with xml:id.
JavaScript Daemons Management - Archive of obsolete content
utton onclick="orecompose.makesteps(29);">makesteps(29)</button> <button onclick="orecompose.fixposition(-13);">fixposition(-13)</button> <button onclick="orecompose.play();">play</button> <button onclick="orecompose.turn();">turn</button> <button onclick="orecompose.pause();">pause</button> <button onclick="orecompose.reverseplay();">reverseplay</button> <button onclick="orecompose.reversals = 2;
alert('changed');">two reversals</button> <button onclick="orecompose.makeloop();
alert('changed');">makeloop</button> <button onclick="orecompose.unmakeloop();
alert('changed');">unmakeloop</button> <button onclick="orecompose.close();">close</button> <button onclick="orecompose.reclose();">reclose</button><br /> frame rate: <input type="text" id="vello" value="33" style="width: 40px;" onkeypress="retur...
...kipto(11)</button> <button onclick="ounhide.makesteps(29);">makesteps(29)</button> <button onclick="ounhide.fixposition(-13);">fixposition(-13)</button> <button onclick="ounhide.play();">play</button> <button onclick="ounhide.turn();">turn</button> <button onclick="ounhide.pause();">pause</button> <button onclick="ounhide.reverseplay();">reverseplay</button> <button onclick="ounhide.reversals = 2;
alert('changed');">two reversals</button> <button onclick="ounhide.makeloop();
alert('changed');">makeloop</button> <button onclick="ounhide.unmakeloop();
alert('changed');">unmakeloop</button> <button onclick="ounhide.close();">close</button> <button onclick="ounhide.reclose();">reclose</button><br /> frame rate: <input type="text" id="vello" value="33" style="width: 40px;" onkeypress="return event.char...
...utton onclick="orecompose.makesteps(29);">makesteps(29)</button> <button onclick="orecompose.fixposition(-13);">fixposition(-13)</button> <button onclick="orecompose.play();">play</button> <button onclick="orecompose.turn();">turn</button> <button onclick="orecompose.pause();">pause</button> <button onclick="orecompose.reverseplay();">reverseplay</button> <button onclick="orecompose.reversals = 2;
alert('changed');">two reversals</button> <button onclick="orecompose.makeloop();
alert('changed');">makeloop</button> <button onclick="orecompose.unmakeloop();
alert('changed');">unmakeloop</button> <button onclick="orecompose.close();">close</button> <button onclick="orecompose.reclose();">reclose</button><br /> frame rate: <input type="text" id="vello" value="33" style="width: 40px;" onkeypress="retur...
...kipto(11)</button> <button onclick="ounhide.makesteps(29);">makesteps(29)</button> <button onclick="ounhide.fixposition(-13);">fixposition(-13)</button> <button onclick="ounhide.play();">play</button> <button onclick="ounhide.turn();">turn</button> <button onclick="ounhide.pause();">pause</button> <button onclick="ounhide.reverseplay();">reverseplay</button> <button onclick="ounhide.reversals = 2;
alert('changed');">two reversals</button> <button onclick="ounhide.makeloop();
alert('changed');">makeloop</button> <button onclick="ounhide.unmakeloop();
alert('changed');">unmakeloop</button> <button onclick="ounhide.close();">close</button> <button onclick="ounhide.reclose();">reclose</button><br /> frame rate: <input type="text" id="vello" value="33" style="width: 40px;" onkeypress="return event.char...
Observer Notifications - Archive of obsolete content
this example code shows you what an implementation of the nsiobserver interface looks like: let testobserver = { observe : function(asubject, atopic, adata) { if (atopic == "xulschoolhello-test-topic") { window.
alert("data received: " + adata); } } } in order for this observer to work, you need to use the observer service that provides methods for you to add, remove, notify and enumerate observers.
... */ observe : function(asubject, atopic, adata) { if (atopic == "xulschoolhello-test-topic") { asubject.queryinterface(ci.nsisupportsstring); window.
alert("subject: " + asubject.data); // => "this is a test" window.
alert("data: " + adata); // => "hello" } } } window.addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); window.addeventlistener( "unload", function() { xulschoolchrome.browseroverlay.uninit(); }, false); in the observe method the notification topic is verified because you can hav...
... when the notifytest method is called, all observers registered with xulschoolhello-test-topic will get notified and display two
alerts.
... if there are 2 firefox windows open, the observer will be notified in both and the
alerts will show up on both.
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
<script> document.write("<script type='text/javascript'>
alert('hello');</script>") </script> since the page is in strict mode, mozilla's parser will see the first <script> and parse until it finds a closing tag for it, which would be the first </script>.
...<script> document.write("<script type='text\/javascript'>
alert('hello');</" + "script>") </script> debug javascript mozilla provides several ways to debug javascript-related issues found in applications created for internet explorer.
... xml: <?xml version="1.0"?> <myxmldoc xmlns:myns="http://myfoo.com"> <myns:foo>bar</myns:foo> </myxmldoc> javascript: var myxmldoc = getxmldocument().documentelement;
alert(myxmldoc.childnodes.length); the first line of javascript loads the xml document and accesses the root element (myxmldoc) by retrieving the documentelement.
... the second line simply
alerts the number of child nodes.
MenuButtons - Archive of obsolete content
<toolbarbutton type="menu-button" label="save" oncommand="
alert('save');"> <menupopup> <menuitem label="save this document"/> <menuitem label="save all" oncommand="
alert('save all'); event.stoppropagation();"/> </menupopup> </toolbarbutton> here, the 'save' button has a type of 'menu-button', so a small arrow button will appear which will open the menu when pressed.
... pressing the label part of the button will invoke the command event on the button, so the 'save'
alert will appear.
...when the first item on the menu ('save this document') is activated, it will also display the 'save'
alert as the command event bubbles up to the button.
...the second menu item ('save all') has a command event of its own that displays a different
alert with the text 'save all'.
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
copy the following content, and paste it into the new file: custombutton = { 1: function () {
alert("just testing") }, } there is nothing to customize for now.
...remove the line:
alert("just testing") and replace it with javascript code that does whatever you want to do.
...for example, you could add this code for testing: 2: function () {
alert("just testing again") }, create an image for the new button, naming the file button-2s.png.
...ile named: install.js copy the following content, and paste it into the new file: const title = "custom toolbar button" const name = "custombutton" const version = "1.0" r = initinstall(title, name, version) || adddirectory(null, "content", getfolder("chrome"), name) || registerchrome(content + delayed_chrome, getfolder("chrome", name), "") if (r) cancelinstall(r) else performinstall(),
alert("now restart seamonkey") customize the title, name and (optionally) version definitions, changing the text between double-quote characters on those three lines.
Adding Event Handlers - Archive of obsolete content
an example of responding to a button being pressed: example 1 : source view <button label="ok" oncommand="
alert('button was pressed!');"/> since the command event will bubble, it is also possible to place the event listener on an enclosing element.
... example 2 : source view <vbox oncommand="
alert(event.target.tagname);"> <button label="ok"/> <checkbox label="show images"/> </vbox> in this example, the command event will bubble up from the button or checkbox to the vbox, where it is handled.
...in the example we display an
alert containing the target's tag name.
...the syntax is as follows: example 3 : source view <button id="okbutton" label="ok"/> <script> function buttonpressed(event){
alert('button was pressed!'); } var button = document.getelementbyid("okbutton"); button.addeventlistener('command', buttonpressed, true); </script> the getelementbyid() function returns the element with a given id, in this case the button.
Tree Selection - Archive of obsolete content
<tree id="treeset" onselect="
alert('you selected something!');"> tree indices the tree has a property currentindex, which can be used to get the currently selected item, where the first row is 0.
... getrangeat example var start = new object(); var end = new object(); var numranges = tree.view.selection.getrangecount(); for (var t = 0; t < numranges; t++){ tree.view.selection.getrangeat(t,start,end); for (var v = start.value; v <= end.value; v++){
alert("item " + v + " is selected."); } } we create two objects called 'start' and 'end'.
...an
alert is displayed for each index.
...
alert(tree.view.selection.isselected(3)); modifying the tree selection the selection object has a number of functions which may be used to change the selection.
Graceful asynchronous programming with Promises - Learn web development
in the below code we simply
alert that message: timeoutpromise .then((message) => {
alert(message); }) or even just timeoutpromise.then(
alert); try running this live to see the result (also see the source code).
...else structures: first of all, we check to see if the message is appropriate for being
alerted.
...let's use it now — replace the previous timeoutpromise usage with this one: timeoutpromise('hello there!', 1000) .then(message => {
alert(message); }) .catch(e => { console.log('error: ' + e); }); when you save and run the code as is, after one second you'll get the message
alerted.
...you could also try doing something else with the resolved message rather than just
alerting it.
Accessibility API cross-reference
wherease gnome accessibility uses a lot of different interfaces depending on the type of object go through the atk info and make sure it's up-to-date accessible roles description & notes msaa role (role_system_*) java accessibility role gnome accessibility role (atk_role_*) mac os x accessibility role aria (role=*) html tagged pdf relevant xul for
alerts, in java/gnome for any
alert, in msaa if no other role applies.
...
alert alert alert alert,
alertdialog content changes over time, such as animated gif animation n/a no spec n/a a section that forms an independent part of a document, page, or site.
...in aria, a type of live region whose content is advisory information for the user but is not important enough to justify an
alert, often but not necessarily presented as a status bar.
... n/a accessible_active_descendant_property aria-activedescendant critical info to convey immediately
alert_high n/a n/a aria-live=assertive info that's important, but does not require immediacy
alert_medium n/a n/a aria-live=polite low-priority info such as a tip or hint
alert_low n/a n/a n/a this object is changing or moving rapidly animated n/a n/a n/a indi...
Accessibility/LiveRegionDevGuide
container-channel the channel property defines two channels - 'main' and '
alert'.
...for instance, a 'main' channel message might go to the speech generator while an '
alert' channel message might be sent to a braille device.
...in this case, 'main' channel messages are queued according to the 'live' property and '
alert' channel messages bypass the queue and are output immediately.
... the rationale being that
alerts are meant to quickly grab the user's attention in the event of a major issue, such as a system/server failure.
Mozilla’s UAAG evaluation report
(p1) c status line and
alert boxes used to convey messages and
alerts guideline 2.
...(p3) ni 2.11
alert unsupported language.
...(p2) vg preferences, advanced, scripts & windows - allow scripts to "open unrequested windows" we do not have a strategy to "
alert the user and allow the user to open it on demand" we do not have exposed prefs for all of our popup control options.
...(p1) vg can use keyboard api to control mozilla, by generating keystrokes programmatically when in-process, can use dom to generate events uses active accessibility to provide program access to controls do not support all active accessibility features for programmatic operation (put_accname, put_accvalue not yet supported) 6.5 programmatic
alert of changes.
Continuous Integration
post-job analysis and
alerts there is some analysis of test data that occurs out-of-band after jobs complete.
... perfherder
alerts we track changes to talos and other performance frameworks inside perfherder, and try to automatically
alert when there is a sustained change exceeding a certain magnitude (specified per test).
... performance sheriffs review the list of
alerts on a regular basis and file bugs if appropriate.
... you can view the current set of
alerts on the perfherder
alerts dashboard.
XForms Accessibility
the help element has role_
alert role.
...
alert this message will be shown when the form control cannot properly bind to instance data or when the instance data value is invalid or out of the specified range of selectable values (see the spec, the docs).
... the
alert element has role_
alert role for both usual and inline
alert elements.
...the message element has role_
alert role.
nsIWindowWatcher
this attribute will be null if the active window is not an nsidomwindow; for example, if the active window is an
alert.
... nsiauthprompt getnewauthprompter( in nsidomwindow aparent ); parameters aparent the parent window used for posing
alerts.
... nsiprompt getnewprompter( in nsidomwindow aparent ); parameters aparent the parent nsidomwindow used for posing
alerts.
...for example the following code will block the system because it will open windows continuously: function mywindowobserver() { this.observe=function(asubject, atopic, adata) {
alert("window event: " + atopic) //and this is where the bugs origins because opening this
alert will cause a window-open //event and the call of this method again (forever) } } var ww = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher); ww.registernotification(new mywindowobserver())
alert("") //generate the first ...
Document.lastModified - Web APIs
syntax var string = document.lastmodified; examples simple usage this example
alerts the value of lastmodified.
...
alert(document.lastmodified); // returns: tuesday, december 16, 2017 11:09:42 transforming lastmodified into a date object this example transforms lastmodified into a date object.
...here is a possible example of how to show an
alert message when the page changes (see also: javascript cookies api): if (date.parse(document.lastmodified) > parsefloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0")) { document.cookie = "last_modif=" + date.now() + "; expires=fri, 31 dec 9999 23:59:59 gmt; path=" + location.pathname;
alert("this page has changed!"); } …the same example, but skipp...
...ing the first visit: var nlastvisit = parsefloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")), nlastmodif = date.parse(document.lastmodified); if (isnan(nlastvisit) || nlastmodif > nlastvisit) { document.cookie = "last_modif=" + date.now() + "; expires=fri, 31 dec 9999 23:59:59 gmt; path=" + location.pathname; if (isfinite(nlastvisit)) {
alert("this page has been changed!"); } } note: webkit returns the time string in utc; gecko and internet explorer return a time in the local timezone.
Events and the DOM - Web APIs
eventtarget.addeventlistener // assuming mybutton is a button element mybutton.addeventlistener('click', greet, false) function greet(event){ // print and have a look at the event object // always print arguments in case of overlooking any other arguments console.log('greet:', arguments)
alert('hello world') } this is the method you should use in modern web pages.
... html attribute <button onclick="
alert('hello world!')"> the javascript code in the attribute is passed the event object via the event parameter.
... dom element properties // assuming mybutton is a button element mybutton.onclick = function(event){
alert('hello world')} the function can be defined to take an event parameter.
... function print(evt) { // the evt parameter is automatically assigned the event object // take care of the differences between console.log &
alert console.log('print:', evt)
alert(evt) } // any function should have an appropriate name, that's what called semantic table_el.onclick = print ...
RTCError - Web APIs
received
alert read only an unsigned long integer value indicating the fatal dtls error which was received from the network.
... sent
alert read only if errordetail is dtls-failure, this property is an unsigned long integer indicating the fatal dtls error that was sent out by this device.
... datachannel.addeventlistener("error", (event) => { let error = event.error; if (error.errordetail === "sdp-syntax-error") { let errline = error.sdplinenumber; let errmessage = error.message; let
alertmessage = `a syntax error occurred interpreting line ${errline} of the sdp: ${errmessage}`; showmy
alertmessage("data channel error",
alertmessage); } else { terminatemyconnection(); } }); if the error is an sdp syntax error—indicated by its errordetail property being sdp-syntax-error—, a message string is constructed to present the error message and the line number within the sdp...
...this message is then displayed using a function called showmy
alertmessage(), which stands in for whatever output mechanism this code might use.
RTCErrorEvent.error - Web APIs
received
alert read only an unsigned long integer value indicating the fatal dtls error which was received from the network.
... sent
alert read only if errordetail is dtls-failure, this property is an unsigned long integer indicating the fatal dtls error that was sent out by this device.
... datachannel.addeventlistener("error", (event) => { let error = event.error; if (error.errordetail === "sdp-syntax-error") { let errline = error.sdplinenumber; let errmessage = error.message; let
alertmessage = `a syntax error occurred interpreting line ${errline} of the sdp: ${errmessage}`; showmy
alertmessage("data channel error",
alertmessage); } else { terminatemyconnection(); } }); if the error is an sdp syntax error—indicated by its errordetail property being sdp-syntax-error—, a message string is constructed to present the error message and the line number within the sdp...
...this message is then displayed using a function called showmy
alertmessage(), which stands in for whatever output mechanism this code might use.
Adding 2D content to a WebGL context - Web APIs
if compiling or linking fails the code displays an
alert.
...ource) { const vertexshader = loadshader(gl, gl.vertex_shader, vssource); const fragmentshader = loadshader(gl, gl.fragment_shader, fssource); // create the shader program const shaderprogram = gl.createprogram(); gl.attachshader(shaderprogram, vertexshader); gl.attachshader(shaderprogram, fragmentshader); gl.linkprogram(shaderprogram); // if creating the shader program failed,
alert if (!gl.getprogramparameter(shaderprogram, gl.link_status)) {
alert('unable to initialize the shader program: ' + gl.getprograminfolog(shaderprogram)); return null; } return shaderprogram; } // // creates a shader of the given type, uploads the source and // compiles it.
... // function loadshader(gl, type, source) { const shader = gl.createshader(type); // send the source to the shader object gl.shadersource(shader, source); // compile the shader program gl.compileshader(shader); // see if it compiled successfully if (!gl.getshaderparameter(shader, gl.compile_status)) {
alert('an error occurred compiling the shaders: ' + gl.getshaderinfolog(shader)); gl.deleteshader(shader); return null; } return shader; } the loadshader() function takes as input the webgl context, the shader type, and the source code, then creates and compiles the shader as follows: a new shader is created by calling gl.createshader().
...if that's false, we know the shader failed to compile, so show an
alert with log information obtained from the compiler using gl.getshaderinfolog(), then delete the shader and return null to indicate a failure to load the shader.
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
there's a very good chance they won't ask for more than the events marked [important]: event_system_sound event_system_
alert [can be important, to have auto-speaking for newly created role_
alerts] event_system_foreground event_system_menustart [important] event_system_menuend [important] event_system_menupopupstart [important] event_system_menupopupend [important] event_system_capturestart event_system_captureend event_system_movesizestart event_system_movesizeend event_system_co...
...rtant] state_busy [important] state_floating state_marqueed state_animated state_invisible state_offscreen [important] state_sizeable state_moveable state_selfvoicing state_focusable [important] state_selectable [important] state_linked [important] state_traversed [important] state_multiselectable [important] state_extselectable state_
alert_low state_
alert_medium state_
alert_high state_protected [important] state_haspopup msaa roles cheat sheet for information on what each role does, see the msdn role constants page.
... role_titlebar [inserted by system] role_menubar [important if you don't use native menus] role_scrollbar role_grip role_sound role_cursor role_caret role_
alert role_window [inserted by system] role_client [important] role_menupopup [important] role_menuitem [important] role_tooltip role_application role_document role_pane [important] role_chart role_dialog [semi-important, not currently used by all at's] role_border role_grouping role_separator [important] role_toolbar role_statusbar [important...
...there's a very good chance they won't ask for more than the object itentifiers marked [important]: objid_
alert objid_caret objid_client [important] objid_cursor objid_hscroll objid_nativeom [important?
Event reference
se events abort blocked complete error success upgradeneeded versionchange script events afterscriptexecute beforescriptexecute menu events dommenuitemactive dommenuiteminactive window events close popup events popuphidden popuphiding popupshowing popupshown tab events visibilitychange battery events chargingchange chargingtimechange dischargingtimechange levelchange call events
alerting busy callschanged cfstatechange connecting dialing disconnected disconnecting error held, holding incoming resuming statechange voicechange sensor events compassneedscalibration devicemotion deviceorientation orientationchange smartcard events icccardlockerror iccinfochange smartcard-insert smartcard-remove stkcommand stksessionend cardstatechange sms and ussd events delivered received s...
... mozbrowsershowmodalprompt firefox os browser api-specific sent when
alert(), confirm() or prompt() are called within a browser <iframe> mozbrowsertitlechange firefox os browser api-specific sent when the document.title changes within a browser iframe.
...
alertactive addons specific a notification element is shown.
...
alertclose addons specific a notification element is closed.
Communicating using "port" - Archive of obsolete content
here's a simple add-on that sends a message to a content script using port: var tabs = require("sdk/tabs"); var
alertcontentscript = "self.port.on('
alert', function(message) {" + " window.
alert(message);" + "})"; tabs.on("ready", function(tab) { worker = tab.attach({ contentscript:
alertcontentscript }); worker.port.emit("
alert", "message from the add-on"); }); tabs.open("http://www.mozilla.org"); in total, the port object defines four functions: ...
...a panel you use panel.port.on(): var panel = require("sdk/panel").panel({ contentscript: "self.port.emit('showing', 'panel is showing');" }); panel.port.on("showing", function(text) { console.log(text); }); panel.show(); conversely, to emit user-defined messages from your add-on you can just call panel.port.emit(): var panel = require("sdk/panel").panel({ contentscript: "self.port.on('
alert', function(text) {" + " console.log(text);" + "});" }); panel.show(); panel.port.emit("
alert", "panel is showing"); the panel and page-worker objects only host a single page at a time, so each distinct page object only needs a single channel of communication to its content scripts.
... var pagemodscript = "window.addeventlistener('click', function(event) {" + " self.port.emit('click', event.target.tostring());" + " event.stoppropagation();" + " event.preventdefault();" + "}, false);" + "self.port.on('warning', function(message) {" + "window.
alert(message);" + "});" var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.port.on('click', function(html) { worker.port.emit('warning', 'do not click this again'); }); } }); in the add-on above there are two user-defined messages: click is sent from the page-mod to the add-on...
Dialogs and Prompts - Archive of obsolete content
example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" ondialogaccept="
alert('ok!');"> <hbox> <label value="hey!"/> <spacer flex="1"/> <vbox> <button dlgtype="accept"/> <button dlgtype="cancel"/> </vbox> </hbox> </dialog> default button since firefox 1.5, there are defaultbutton attributes and properties on the <dialog> element bug 284776.
...most web developers are familiar with the
alert() function: this is a prime example of a prompt.
... links nsipromptservice open and save dialogs see also
alerts and notifications ...
File I/O - Archive of obsolete content
creating temporary files to create a temporary file, use nsifile.createunique(): components.utils.import("resource://gre/modules/fileutils.jsm"); var file = fileutils.getfile("tmpd", ["suggestedname.tmp"]); file.createunique(components.interfaces.nsifile.normal_file_type, fileutils.perms_file); // do whatever you need to the created file
alert(file.path); user input via nsifilepicker the file picker component, nsifilepicker, can be used to open standard open / save dialogs.
...stance(components.interfaces.nsiconverterinputstream); fstream.init(file, -1, 0, 0); cstream.init(fstream, "utf-8", 0, 0); // you can use another encoding here if you wish let (str = {}) { let read = 0; do { read = cstream.readstring(0xffffffff, str); // read as much as we can and put it in str.value data += str.value; } while (read != 0); } cstream.close(); // this closes fstream
alert(data); reading line by line note: the sample code below does not handle text with non-ascii characters.
... createinstance(components.interfaces.nsifileinputstream); istream.init(file, 0x01, 0444, 0); istream.queryinterface(components.interfaces.nsilineinputstream); // read lines into array var line = {}, lines = [], hasmore; do { hasmore = istream.readline(line); lines.push(line.value); } while(hasmore); istream.close(); // do something with read data
alert(lines); reading a binary file for instance, to get the data in a png file: var ios = components.classes["@mozilla.org/network/io-service;1"].
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
settimeout("
alert('" + xhr.responsetext + "');", 100); // attacker manipulated responsetext to contain "attack!'); format_computer();
alert('done" settimeout("
alert('attack!'); format_computer();
alert('done');", 100); as a general rule of thumb, just don't pass code around as strings and execute it by calling eval, settimeout and friends.
... var response = xhr.responsetext; settimeout(function() {
alert(response); }, 100); } alternative: use function.bind() introduced in javascript 1.8.5 function.bind is a new utility function that you may use to (partially) bind parameters to functions.
... addeventlistener("load", myaddon.init.bind(myaddon), true); settimeout(
alert.bind(null, xhr.responsetext), 100); function.bind() returns a new function.
Connecting to Remote Content - Archive of obsolete content
let url = "http://www.example.com/"; let request = components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"] .createinstance(components.interfaces.nsixmlhttprequest); request.onload = function(aevent) { window.
alert("response text: " + aevent.target.responsetext); }; request.onerror = function(aevent) { window.
alert("error status: " + aevent.target.status); }; request.open("get", url, true); request.send(null); in this example we demonstrate how to make a xmlhttprequest call in asynchronous mode.
... request.onload = function(aevent) { let text = aevent.target.responsetext; let jsobject = json.parse(text); window.
alert(jsobject.shops[1].name); // => "orange" window.
alert(jsobject.total); // => 2; }; the javascript object can also be serialized back with the stringify method.
... request.onload = function(aevent) { let responsexml = aevent.target.responsexml; let rootelement = responsexml.documentelement; if (rootelement && "parseerror" != rootelement.tagname) { let shopelements = rootelement.getelementsbytagname("shop"); let totalelement = rootelement.getelementsbytagname("total")[0]; window.
alert(shopelements[1].getelementsbytagname("name")[0].firstchild.nodevalue); // => orange window.
alert(totalelement.firstchild.nodevalue); // => 2 } }; using dom functions is good for simple xml documents, but dom manipulation code can become too complicated if the documents are more complex.
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
event listeners can be defined on the given nodes by passing functions rather than strings to on* attributes: var href = "http://www.google.com/"; var text = "google"; var nodes = {}; document.documentelement.appendchild( jsontodom(["xul:hbox", {}, ["div", {}, ["a", { href: href, key: "link", onclick: function (event) {
alert(event.target.href); } }, text], ["span", { class: "stuff" }, "stuff"]]], document, nodes));
alert(nodes.link); function addentrytopopup(menupopup, doc, chromewindow) { var newitem = doc.createelement("menuitem"); newitem.setattribute("value", "testvalue"); newitem.setattribute("label", "another popup menu item"); menupopup.app...
... }, [ "menupopup", { onpopupshowing: function(event) { addentrytopopup(this, document, window); } }, null ] ]; var capturednodes = {}; var toolbox = doc.getelementbyid("navigator-toolbox"); var palette = toolbox.palette; var domfragment = jsontodom(jsontemplatebtn, document, capturednodes); palette.appendchild(domfragment);
alert("capturednodes contains any created nodes that have optionally been captured (for later convenient javascript access) by giving them a 'key' attribute; for example: " + capturednodes.mytestbutton123); another example this here is another example of using jsontodom but in the html scope, a complex form is created with ease.
... var href = "http://www.google.com/"; var text = "google"; $("body").append( $("<div>", { class: "foo" }) .append($("<a>", { href: href, text: text }) .click(function (event) {
alert(event.target.href) })) .append($("<span>").text("foo"))); innerhtml with html escaping this method is a last resort which should be used only as a temporary measure in established code bases.
JavaScript Object Management - Archive of obsolete content
} // more stuff }; window.addeventlistener( "load", function() { 〈namespace〉.browseroverlay.init(); }, false); there are some things you can't (or shouldn't) do inside load handlers, such as closing the window being loaded, or opening new windows,
alerts or dialogs.
...if you really need to do something like this anyway, one way to do it is to have a timeout execute the code after a delay: init : function(aevent) { let that = this; this._stringbundle = document.getelementbyid("xs-hw-string-bundle"); window.settimeout( function() { window.
alert(that._stringbundle.getstring("xulschoolhello.greeting.label")); }, 0); } the settimeout function executes the function in the first parameter, after a delay in miliseconds specified by the second parameter.
... creating an instance and using it is simple enough: let user = new 〈modulenamespace〉.user("pete", "http://example.com/pete"); window.
alert(user.name); this is something you can do with js in general.
Index of archived content - Archive of obsolete content
modifying web pages based on url modifying the page hosted by a tab open a web page troubleshooting unit testing using xpcom without chrome using third-party modules (jpm) bootstrapped extensions code snippets
alerts and notifications autocomplete bookmarks boxes canvas code snippets cookies customizing the download progress bar delayed execution dialogs and prompts downloading files drag & drop embedding svg examples and demos from articles file i/o ...
...ing 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 performance best practices in extensions search extension tutorial (draft) security best practices in extensions session store api setting up an extension development environment signing an xpi signing an extension supporting search suggest...
...vascript generators in firefox window.importdialog() writing javascript for xhtml xforms building mozilla xforms community developing mozilla xforms implementation status mozilla xforms specials mozilla xforms user interface xforms
alert element xforms group element xforms help element xforms hint element xforms input element xforms label element xforms message element xforms output element xforms range element xforms repeat element xforms secret element xforms select element ...
Install.js - Archive of obsolete content
- profileinstall: true, silentinstall: false, install: function() { var jarname = this.extshortname + '.jar'; var profiledir = install.getfolder('profile', 'chrome'); // parse http arguments this.parsearguments(); // check if extension is already installed in profile if (file.exists(install.getfolder(profiledir, jarname))) { if (!this.silentinstall) { install.
alert('updating existing profile install of ' + this.extfullname + ' to version ' + this.extversion + '.'); } this.profileinstall = true; } else if (!this.silentinstall) { // ask user for install location, profile or browser dir?
...(var skin in this.extskinnames) { var regpath = 'skin/' + this.extskinnames[skin] + '/' + this.extshortname + '/'; install.registerchrome(install.skin | installtype, jarpath, regpath); } // perform install var err = install.performinstall(); if (err == install.success || err == install.reboot_needed) { if (!this.silentinstall && this.extpostinstallmessage) { install.
alert(this.extpostinstallmessage); } } else { this.handleerror(err); return; } }, parsearguments: function() { // can't use string handling in install, so use if statement instead var args = install.arguments; if (args == 'p=0') { this.profileinstall = false; this.silentinstall = true; } else if (args == 'p=1') { this.profileinstall = true; this.silentins...
...tall = true; } }, handleerror: function(err) { if (!this.silentinstall) { install.
alert('error: could not install ' + this.extfullname + ' ' + this.extversion + ' (error code: ' + err + ')'); } install.cancelinstall(err); } }; xpiinstaller.install(); ...
Download Manager preferences - Archive of obsolete content
browser.download.manager.
alertonexeopen a boolean value that indicates whether the ui should
alert the user about the dangers of opening (executing) an exe.
... browser.download.manager.show
alertinterval the minimum number of milliseconds that must elapse between download complete
alerts; if two downloads complete within this amount of time, only one
alert is displayed.
... browser.download.manager.show
alertoncomplete a boolean value that indicates whether or not an
alert should be shown when downloads complete.
Creating XPI Installer Modules - Archive of obsolete content
mozilla is
alerted to these content specifications and the resources they manage either through registration as part of an installation process (as described in this tutorial) or by way of a shortcut file called installed-chrome.txt, in which developers can point at their new contents.rdf files and have them registered as they develop (a process we do not describe here).
...one of the buttons, labeled "show aphids", displays an
alert dialog by calling a function defined in the javascript file barley.js.
...the javascript file barley.js contains a single function, bar(), defined as follows: function bar() {
alert("aphids"); } if you want to use the same gif image that is used in the barley package, it can be grabbed from here.
Index - Archive of obsolete content
538 moveto
alertposition xul methods, xul reference no summary!
... 894
alert-icon xul reference, xul_style_classes no summary!
... 1158 promptbox xul the promptbox object represents the tab-modal prompts (or
alerts) on a given tab.
Menus - Archive of obsolete content
here, it just displays an
alert message.
... <menuitem label="open" accesskey="o" oncommand="
alert('open a file!');"/> another way to associate an action with a menu item is to use a command element.
... <command id="cmd_open" oncommand="
alert('open a file!');"/> ...
Custom toolbar button - Archive of obsolete content
copy the following content, and paste it into the new file: custombutton = { 1: function () {
alert("just testing") }, } there is nothing to customize for now.
... remove the line:
alert("just testing") and replace it with javascript code that does whatever you want to do.
...for example, you could add this code for testing: 2: function () {
alert("just testing again") }, create an image for the new button, naming the file button-2.png.
Adding Properties to XBL-defined Elements - Archive of obsolete content
xul: <box id="random-box" class="randomizer"/> <button label="generate" oncommand="document.getelementbyid('random-box').number=math.random();"/> <button label="show" oncommand="
alert(document.getelementbyid('random-box').number)"/> xbl: <binding id="randomizer"> <implementation> <field name="number"/> </implementation> </binding> a number field has been defined in the binding, which stores the random number.
...<property name="size" onget="return 77;" onset="
alert('changed to:'+val);"/> this property will always return 77 when retrieved.
... when set, an
alert will be displayed which displays the value to assign to the property.
Box Objects - Archive of obsolete content
example 1 : source view <button label="click me" oncommand="
alert('the width is ' + this.boxobject.width);"/> you can use the width and height attributes of the element to specify the element's width and height, respectively.
...example 2 : source view <script> function showpositionandsize() { var labelbox = document.getelementbyid('thelabel').boxobject;
alert("position is (" + labelbox.x + "," + labelbox.y + ") and size is (" + labelbox.width + "," + labelbox.height + ")"); } </script> <button label="hide" oncommand="document.getelementbyid('thelabel').hidden = true;"/> <button label="show" oncommand="document.getelementbyid('thelabel').hidden = false;"/> <button label="collapse" oncommand="document.getelementb...
...example 3 : source view <hbox> <button label="button 1" oncommand="
alert('next is: ' + this.boxobject.nextsibling.label);"/> <button label="button 2" hidden="true"/> <button label="button 3" oncommand="
alert('next is: ' + this.boxobject.nextsibling.label);"/> <button label="button 4" collapsed="true"/> </hbox> box ordering attributes when a xul box is laid out on a window, the elements are ordered according to a number of properties, for instance the ...
Commands - Archive of obsolete content
a simple way of using commands is as follows: example: simple command example 1 : source view <command id="cmd_openhelp" oncommand="
alert('help!');"/> <button label="help" command="cmd_openhelp"/> in this example, instead of placing the oncommand attribute on the button, we instead place it on a command element.
... example: toggling command disabled example 2 : source view <command id="cmd_openhelp" oncommand="
alert('help');"/> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> <button label="disable" oncommand="document.getelementbyid('cmd_openhelp').setattribute('disabled','true');"/> <button label="enable" oncommand="document.getelementbyid('cmd_openhelp').removeattribute('disabled');"/> in this example, both buttons use the same command.
... it is normal to put a group of commands inside a commandset element, together near the top of the xul file, as in the following: <commandset> <command id="cmd_open" oncommand="
alert('open!');"/> <command id="cmd_help" oncommand="
alert('help!');"/> </commandset> a command is invoked when the user activates the button or other element attached to the command.
Creating an Installer - Archive of obsolete content
here is an example: function donefn ( name , result ){
alert("the package " + name + " was installed with a result of " + result); } var xpi = new object(); xpi["calendar"] = "calendar.xpi"; installtrigger.install(xpi,donefn); first, we define a callback function donefn() which will be called when the install is complete.
...the function donefn() here just displays an
alert box to the user.
... function donefn ( name , result ){ if (result)
alert("an error occured: " + result); } var xpi = new object(); xpi["find files"] = "findfile.xpi"; installtrigger.install(xpi,donefn); the xpi archive note: if you want to create a new xulrunner application, extension, or theme, see bundles.
More Event Handlers - Archive of obsolete content
example 1 : source view <vbox oncommand="
alert(event.currenttarget.tagname);"> <button label="ok"/> <checkbox label="show images"/> </vbox> stop event propagation once you handle an event, regardless of where in the propagation the event is, you will likely want to stop the event from being sent to further elements, essentially stopping the capturing or bubbling phases from continuing.
...example 2 : source view <hbox id="outerbox"> <button id="okbutton" label="ok"/> </hbox> <script> function buttonpressed(event){
alert('button was pressed!'); } function boxpressed(event){
alert('box was pressed!'); event.stoppropagation(); } var button = document.getelementbyid("okbutton"); button.addeventlistener('command',buttonpressed,true); var outerbox = document.getelementbyid("outerbox"); outerbox.addeventlistener('command',boxpressed,true); </script> here, an event listener has been added to the button and anoth...
...if this call was removed, both listeners would be called and both
alerts would appear.
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
listing 4 - demonstration of server and client context <script runat="server"> function exposed() { return "exposed to the browser"; } function notexposed() { return "can't see me!"; } </script> <script runat="client">
alert( exposed() );
alert( notexposed() ); </script> there are two blocks of scripts defined, one with runat set to server and the other set to client.
...tration of server-proxy <script runat="server"> function notexposed() { // runs on the server, hidden from the browser return "can't see me!"; } function exposed() { // runs on the server, callable from the browser return "exposed to the browser"; } exposed.proxy = true; // tell jaxer this function is ok to be called from the browser </script> <script runat="client" type="text/javascript">
alert( exposed() ); //works like a charm
alert( notexposed() ); //produces an object not found error since it server-side only </script> understanding the concept of operating context in jaxer is central to moving forward with the example application which is what we'll examine next.
...ssage.getvalue(); // if the form passes validation client-side, submit results to the processor if( validatecomments( name, email, message ) ) { formprocessor( name, email, message ); // update the logger with the most recent entry document.getelementbyid( "out-logger" ).innerhtml += "name: " + name + "<br/>email: " + email + "<br/>message: " + message + "<br/><br/>"; } else { ext.msg.
alert( "error", "please enter the required fields" ); } } </script> <!-- processes the form contents --> <script runat="server"> function formprocessor( name, email, message ) { // perform the same validation of the data server-side if( !validatecomments( name, email, message ) ) { throw "incomplete data was submitted."; } // assemble the string var s = "name: " + name + "<br/>" + "email: " +...
Writing JavaScript for XHTML - Archive of obsolete content
even the plain old
alert() method is gone.
... the code looks something like this: <script type="text/javascript"> //<!-- window.
alert("hello world!"); //--> </script> solution: the cdata trick this problem usually arises, when inline scripts are included in comments.
... the easy solution is to do away with the commenting entirely: <script type="text/javascript"> window.
alert("hello world!"); </script> this will work so long as your code doesn't contain characters which are "special" in xml, which usually means < and &.
RDF in Mozilla FAQ - Archive of obsolete content
var remote = ds.queryinterface(components.interfaces.nsirdfremotedatasource); if (remote.loaded) {
alert("the datasource was already loaded!"); } else {
alert("the datasource wasn't loaded, but it's loading now!"); } say the datasource wasn't loaded, and is loading asynchronously.
...the following code illustrates its usage: // this is the object that will observe the rdf/xml load's progress var observer = { onbeginload: function(asink) {}, oninterrupt: function(asink) {}, onresume: function(asink) {}, onendload: function(asink) { asink.removexmlsinkobserver(this);
alert("done!"); }, onerror: function(asink, astatus, aerrormsg) {
alert("error!
...var remote = ds.queryinterface(components.interfaces.nsirdfremotedatasource); if (remote.loaded) {
alert("the datasource was already loaded!"); } else {
alert("the datasource wasn't loaded, but it's loading now!"); // rdf/xml datasources are all nsirdfxmlsinks var sink = ds.queryinterface(components.interfaces.nsirdfxmlsink); // attach the observer to the datasource-as-sink sink.addxmlsinkobserver(observer); // now observer's methods will be called-back as // the load progresses.
Game over - Game development
for now we'll keep it simple, showing an
alert message and restarting the game by reloading the page.
... first, replace where you initially called setinterval() setinterval(draw, 10); with: var interval = setinterval(draw, 10); then replace the second if statement with the following: if(y + dy < ballradius) { dy = -dy; } else if(y + dy > canvas.height-ballradius) {
alert("game over"); document.location.reload(); clearinterval(interval); // needed for chrome to end game } letting the paddle hit the ball the last thing to do in this lesson is to create some kind of collision detection between the ball and the paddle, so it can bounce off it and get back into the play area.
...update the last bit of code you modified again, to the following: if(y + dy < ballradius) { dy = -dy; } else if(y + dy > canvas.height-ballradius) { if(x > paddlex && x < paddlex + paddlewidth) { dy = -dy; } else {
alert("game over"); document.location.reload(); clearinterval(interval); } } if the ball hits the bottom edge of the canvas we need to check whether it hits the paddle .
Track the score and win - Game development
columncount; c++) { for(var r=0; r<brickrowcount; r++) { var b = bricks[c][r]; if(b.status == 1) { if(x > b.x && x < b.x+brickwidth && y > b.y && y < b.y+brickheight) { dy = -dy; b.status = 0; score++; if(score == brickrowcount*brickcolumncount) {
alert("you win, congratulations!"); document.location.reload(); clearinterval(interval); // needed for chrome to end game } } } } } } thanks to this, your users can actually win the game when they destroy all the bricks, which is quite important when it comes to games.
... the document.location.reload() function reloads the page and starts the game again once the
alert button is clicked.
... compare your code the latest code looks (and works) like this, in case you want to compare and contrast it with yours: exercise: add more points per brick hit, print out the number of collected points in the end game
alert box.
Extra lives - Game development
instead of executing an anonymous function and showing the
alert right away : ball.events.onoutofbounds.add(function(){
alert('game over!'); location.reload(); }, this); we will assign a new function called ballleavescreen; delete the previous event handler (shown above) and replace it with the following line: ball.events.onoutofbounds.add(ballleavescreen, this); we want to decrease the number of lives every time the ball leaves the canvas.
...if(lives) { livestext.settext('lives: '+lives); lifelosttext.visible = true; ball.reset(game.world.width*0.5, game.world.height-25); paddle.reset(game.world.width*0.5, game.world.height-5); game.input.ondown.addonce(function(){ lifelosttext.visible = false; ball.body.velocity.set(150, -150); }, this); } else {
alert('you lost, game over!'); location.reload(); } } instead of instantly printing out the
alert when you lose a life, we first subtract one life from the current number and check if it's a non-zero value.
... when the number of available lives reaches zero, the game is over and the game over
alert message will be shown.
Symbol - MDN Web Docs Glossary: Definitions of Web-related terms
for instance, we can
alert almost any value, and it will work.
... for example: let sym = symbol("sym")
alert(sym) // typeerror: cannot convert a symbol value to a string that’s a "language guard" against messing up, because strings and symbols are fundamentally different, and should not occasionally convert one into another.
... let sym = symbol("sym")
alert(sym.tostring()) // symbol(sym), now it works or you can use the symbol.description property to get its description: let _sym = symbol("sym");
alert(_sym.description); // sym well-known symbols the symbol class has constants for so-called well-known symbols.
Test your skills: Selectors - Learn web development
give the element with a class of
alert a 1px grey border.
... if the element with a class of
alert also has a class of stop, make the background red.
... if the element with a class of
alert also has a class of go, make the background green.
General asynchronous programming concepts - Learn web development
a "click me for
alert" button that when clicked shows an
alert message.
... function expensiveoperation() { for(let i = 0; i < 1000000; i++) { ctx.fillstyle = 'rgba(0,0,255, 0.2)'; ctx.beginpath(); ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degtorad(0), degtorad(360), false); ctx.fill() } } fillbtn.addeventlistener('click', expensiveoperation);
alertbtn.addeventlistener('click', () =>
alert('you clicked me!') ); if you click the first button and then quickly click the second one, you'll see that the
alert does not appear until the circles have finished being rendered.
...our example from above is run like this: main thread: render circles to canvas --> display
alert() after some time, javascript gained some tools to help with such problems.
Build your own function - Learn web development
it will display a custom message box on a web page and will act as a customized replacement for a browser's built-in
alert() function.
...type the following in your browser's javascript console, on any page you like:
alert('this is a message'); the
alert function takes a single argument — the string that is displayed in the
alert box.
... the
alert function is limited: you can alter the message, but you can't easily vary anything else, such as the color, icon, or anything else.
Inheritance in JavaScript - Learn web development
for example: person.prototype.greeting = function() {
alert('hi!
...dd the following at the bottom of your code: teacher.prototype.greeting = function() { let prefix; if (this.gender === 'male' || this.gender === 'male' || this.gender === 'm' || this.gender === 'm') { prefix = 'mr.'; } else if (this.gender === 'female' || this.gender === 'female' || this.gender === 'f' || this.gender === 'f') { prefix = 'ms.'; } else { prefix = 'mx.'; }
alert('hello.
... my name is ' + prefix + ' ' + this.name.last + ', and i teach ' + this.subject + '.'); }; this
alerts the teacher's greeting, which also uses an appropriate name prefix for their gender, worked out using a conditional statement.
Object prototypes - Learn web development
below the existing javascript, add the following code, which adds a new method to the constructor's prototype property: person.prototype.farewell = function() {
alert(this.name.first + ' has left the building.
... bye for now!'); }; save the code and load the page in the browser, and try entering the following into the text input: person1.farewell(); you should get an
alert message displayed, featuring the person's name as defined inside the constructor.
...in our code we define the constructor, then we create an instance object from the constructor, then we add a new method to the constructor's prototype: function person(first, last, age, gender, interests) { // property and method definitions } let person1 = new person('tammi', 'smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']); person.prototype.farewell = function() {
alert(this.name.first + ' has left the building.
Ember interactivity: Events, classes and state - Learn web development
update the content to the following: import component from '@glimmer/component'; import { action } from '@ember/object'; export default class headercomponent extends component { @action onkeydown({ target, key }) { let text = target.value.trim(); let hasvalue = boolean(text); if (key === 'enter' && hasvalue) {
alert(text); target.value = '' } } } the @action decorator is the only ember-specific code here (aside from extending from the component superclass, and the ember-specific items we are importing using javascript module syntax) — the rest of the file is vanilla javascript, and would work in any application.
... coming back to our browser tab with the app running, we can type whatever we want, and when we hit enter we'll be greeted with an
alert message telling us exactly what we typed.
...line: @service('todo-data') todos; now the placeholder
alert(text); line can be replaced with a call to our new add() function.
Componentizing our Svelte app - Learn web development
eventually, we will split up our app into the following components:
alert.svelte: a general notification box for communicating actions that have occurred.
...just for now, we'll replace the call to removetodo with an
alert.
... id="todo-{todo.id}" on:click={() => todo.completed = !todo.completed} checked={todo.completed} /> <label for="todo-{todo.id}" class="todo-label">{todo.name}</label> </div> <div class="btn-group"> <button type="button" class="btn"> edit <span class="visually-hidden">{todo.name}</span> </button> <button type="button" class="btn btn__danger" on:click={() =>
alert('not implemented')}> delete <span class="visually-hidden">{todo.name}</span> </button> </div> </div> now we need to import our todo component into todos.svelte.
Embedding API for Accessibility
it's a w3c uaag requirement */ setboolpref("browser.selection.use_system_colors", usesystemcolors); no content waiting
alerts setcharpref("
alert.audio.mail_waiting", pathtosoundfile); setcharpref("
alert.audio.background_image_waiting", pathtosoundfile); setcharpref("
alert.audio.popup_waiting", pathtosoundfile); setcharpref("
alert.audio.applet_waiting", pathtosoundfile); setcharpref("
alert.audio.sc...
...ript_waiting", pathtosoundfile); setcharpref("
alert.audio.redirect_waiting", pathtosoundfile); setcharpref("
alert.audio.refresh_waiting", pathtosoundfile); setcharpref("
alert.audio.plugin_content_waiting", pathtosoundfile); setcharpref("
alert.audio.video_waiting", pathtosoundfile); setcharpref("
alert.audio.audio_waiting", pathtosoundfile); setcharpref("
alert.audio.timed_event_waiting", pathtosoundfile); /* these
alerts will also be mirrored visually, either on the status bar or elsewhere */ no background images setboolpref("browser.accept.background_images", acceptba...
... for each preference named "browser.accept.*", there is also an "
alert.audio.*" preference, to allow configuration of sound files to go with each type of content.
mozbrowsershowmodalprompt
the mozbrowsershowmodalprompt event is fired when the content of a browser <iframe> calls the window.
alert(), window.confirm(), or window.prompt() methods.
...it can be
alert, confirm, or prompt.
... message a domstring representing the value passed to the window.
alert(), window.confirm(), or window.prompt() methods within the browser <iframe>'s content.
Using JavaScript code modules
for example: components.utils.import("resource://app/my_module.jsm");
alert(foo()); // displays "foo"
alert(bar.size + 3); // displays "6"
alert(dummy); // displays "dummy is not defined" because 'dummy' was not exported from the module note: when you're testing changes to a code module, be sure to change the application's build id (e.g., the version) before your next test run; otherwise, you may find yourself running the previous version of your modul...
... scope 1: components.utils.import("resource://app/my_module.jsm");
alert(bar.size + 3); // displays "6" bar.size = 10; scope 2: components.utils.import("resource://app/my_module.jsm");
alert(foo()); // displays "foo"
alert(bar.size + 3); // displays "13" this sharing behavior can be used to create singleton objects that can share data across windows and between xul script and xpcom components.
... scope 1: components.utils.import("resource://app/my_module.jsm"); bar = "foo";
alert(bar); // displays "foo" scope 2: components.utils.import("resource://app/my_module.jsm");
alert(bar); // displays "[object object]" the main effect of the by-value copy is that global variables of simple types won't be shared across scopes.
Embedded Dialog API
these new windows can be entire new browser windows opened in response to web page script, or dialogs or
alerts which may arise from script or merely during normal operation of the browser.
...however, it's nearly accurate to claim that the majority of all dialogs and
alerts posed by gecko do reside in a single generic component, nsipromptservice (nsipromptservice).
...other sets of dialogs and
alerts, implemented in other components,can be overridden in exactly the same fashion.
nsIMsgFolder
nsiurllistener listener, in nsimsgwindow window); void enablenotifications(in long notificationtype, in boolean enable, in boolean dbbatching); boolean iscommandenabled(in acstring command); boolean matchorchangefilterdestination(in nsimsgfolder folder,in boolean caseinsensitive); boolean confirmfolderdeletionforfilter(in nsimsgwindow msgwindow); void
alertfilterchanged(in nsimsgwindow msgwindow); void throw
alertmsg(in string msgname, in nsimsgwindow msgwindow); astring getstringwithfoldernamefrombundle(in string msgname); void notifycompactcompleted(); long comparesortkeys(in nsimsgfolder msgfolder); [noscript] void getsortkey(out octet_ptr key, out unsigned long length); boolean callfilterplugi...
...ble, in boolean dbbatching); iscommandenabled() boolean iscommandenabled(in acstring command); matchorchangefilterdestination() boolean matchorchangefilterdestination(in nsimsgfolder folder, in boolean caseinsensitive); confirmfolderdeletionforfilter() boolean confirmfolderdeletionforfilter(in nsimsgwindow msgwindow);
alertfilterchanged() void
alertfilterchanged(in nsimsgwindow msgwindow); throw
alertmsg() void throw
alertmsg(in string msgname, in nsimsgwindow msgwindow); getstringwithfoldernamefrombundle() astring getstringwithfoldernamefrombundle(in string msgname); notifycompactcompleted() void notifycompactcompleted(); comparesortkeys() long comparesortkeys(in nsimsgfolder msg...
...this is intended for new mail
alerts, title tips on folders with new messages, and perhaps titletips/message preview in the thread pane.
nsISound
event_
alert_dialog_open 1 an
alert dialog is opened.
...void playsystemsound( in astring soundalias ); parameters soundalias two different types of names are supported: you can specify the name of a system sound provided by the host operating system; for example, if you specify "systemexclamation", you can play the windows
alert sound, but it's played only on windows.
... _moz_
alertdialog the system sound when an
alert dialog is opened.
nsIXULWindow
void assumechromeflagsarefrozen(); void center(in nsixulwindow arelative, in boolean ascreen, in boolean a
alert); nsixulwindow createnewwindow(in print32 achromeflags, in nsiappshell aappshell); nsidocshelltreeitem getcontentshellbyid(in wstring id); void removechildwindow(in nsixulwindow achild); void showmodal(); attributes attribute type description chromeflags pruint32 chromeflags are from nsiwebbrowserchrome.
... void center( in nsixulwindow arelative, in boolean ascreen, in boolean a
alert ); parameters arelative if not null, the window relative to which the window is moved.
...false to center it relative to arelative itself (arelative must be set in this case.) a
alert true to move the window to an
alert position, generally centered horizontally and 1/3 down from the top.
Gloda examples
en items that are in our collection are purged from the system */ onitemsremoved: function _onitemsremoved(aitems, acollection) { }, /* called when our database query completes */ onquerycompleted: function _onquerycompleted(conversation_coll) { try { for (var conv in conversation_coll) { //do something with the conversation here
alert(conv.subject); } } catch (e) {} } } glodamessage.conversation.getmessagescollection(alistener) alternatively if you need to get a conversation based on the subject, you need to do a query (using the same listener as above).
..._onitemsmodified(aitems, acollection) { }, /* called when items that are in our collection are purged from the system */ onitemsremoved: function _onitemsremoved(aitems, acollection) { }, /* called when our database query completes */ onquerycompleted: function _onquerycompleted(acollection) { var items = acollection.items; for (msg of items) {
alert(msg.subject); }; } }; collection = id_q.getcollection(mylistener); show all messages where the from, to and cc values include a specified email address at present there doesn't appear to be any way of going directly from an email address to email addresses that it involves.
... }, /* called when our database query completes */ onquerycompleted: function _onquerycompleted(msg_coll) { try { while(msg = msg_coll.items.pop()) { //do something with the messages here
alert(msg.subject); } } catch (e) {} } }); } }); ...
Using popup notifications
then you can create the popup notification at the appropriate time like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", "this is a sample popup notification.", null, /* anchor id */ { label: "do something", accesskey: "d", callback: function() {
alert("doing something awesome!"); } }, null /* secondary action */ ); in this case, we aren't providing any secondary actions; that is, actions provided to the user through the drop-down menu.
...condary options to provide options in the drop-down menu, add an array of notification actions to the call to the show() method, like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", "this is a sample popup notification.", null, /* anchor id */ { label: "do something", accesskey: "d", callback: function() {
alert("doing something awesome!"); } }, [ { label: "first secondary option", accesskey: "1", callback: function() {
alert("first secondary option selected."); } }, { label: "second secondary option", accesskey: "2", callback: function() { ...
...
alert("second secondary option selected."); } } ] ); when this notification is presented, and the user clicks on the menu button in the panel, the display looks like this: when the user chooses one of your secondary actions from the drop-down menu, the corresponding callback is invoked.
Introduction to the DOM - Web APIs
alert(paragraphs[0].nodename); all of the properties, methods, and events available for manipulating and creating web pages are organized into objects (for example, the document object that represents the document itself, the table object that implements the special htmltableelement dom interface for accessing html tables, and so forth).
...your dom programming may be something as simple as the following, which displays an
alert message by using the
alert() function from the window object, or it may use more sophisticated dom methods to actually create new content, as in the longer example below.
... this following javascript will display an
alert when the document is loaded (and when the whole dom is available for use): <body onload="window.
alert('welcome to my home page!');"> another example.
KeyboardEvent - Web APIs
example <!doctype html> <html> <head> <script> 'use strict'; document.addeventlistener('keydown', (event) => { const keyname = event.key; if (keyname === 'control') { // do not
alert when only control key is pressed.
...
alert(`combination of ctrlkey + ${keyname}`); } else {
alert(`key pressed ${keyname}`); } }, false); document.addeventlistener('keyup', (event) => { const keyname = event.key; // as the user releases the ctrl key, the key is no longer active, // so event.ctrlkey is false.
... if (keyname === 'control') {
alert('control key was released'); } }, false); </script> </head> <body> </body> </html> specifications specification status comment ui eventsthe definition of 'keyboardevent' in that specification.
Signaling and video calling - Web APIs
starting a call when the user clicks on a username they want to call, the invite() function is invoked as the event handler for that click event: var mediaconstraints = { audio: true, // we want an audio track video: true // ...and we want a video track }; function invite(evt) { if (mypeerconnection) {
alert("you can't start a call because you already have one open!"); } else { var clickedusername = evt.target.textcontent; if (clickedusername === myusername) {
alert("i'm afraid i can't let you talk to yourself.
... function handlegetusermediaerror(e) { switch(e.name) { case "notfounderror":
alert("unable to open your call because no camera and/or microphone" + "were found."); break; case "securityerror": case "permissiondeniederror": // do nothing; this is the same as the user canceling the call.
... break; default:
alert("error opening your camera and/or microphone: " + e.message); break; } closevideocall(); } an error message is displayed in all cases but one.
Window.ondragdrop - Web APIs
example fire an
alert on dragdrop in this example, an event listener is added to the window (the event target).
... if, from an external source, a tab, a link, marked text or a file is dragged and dropped onto this window, the
alert is fired.
... <html> <head><title>dragdroptest</title> <script type="text/javascript"> window.addeventlistener("dragdrop", testfunc, false); function testfunc(event) {
alert("dragdrop!"); event.stoppropagation(); } </script> </head> <body> i am bodytext </body> </html> specification not part of specification.
Window.prompt() - Web APIs
example let sign = prompt("what's your sign?"); if (sign.tolowercase() == "scorpio") {
alert("wow!
... the following text is shared between this article, dom:window.confirm and dom:window.
alert dialog boxes are modal windows; they prevent the user from accessing the rest of the program's interface until the dialog box is closed.
... see also
alert confirm ...
Window.window - Web APIs
this means: global variables of your script are in fact properties of window: var global = {data: 0};
alert(global === window.global); // displays "true" you can access built-in properties of the window object without having to type window.
... prefix: settimeout("
alert('hi!')", 50); // equivalent to using window.settimeout.
...
alert(window === window.window); // displays "true" the point of having the window property refer to the object itself, was likely to make it easy to refer to the global object.
WindowOrWorkerGlobalScope.setInterval() - Web APIs
see the following example (which uses settimeout() instead of setinterval() – the problem, in fact, is the same for both timers): myarray = ['zero', 'one', 'two']; myarray.mymethod = function (sproperty) {
alert(arguments.length > 0 ?
... new feature test: myarray = ['zero', 'one', 'two']; myarray.mymethod = function (sproperty) {
alert(arguments.length > 0 ?
... this[sproperty] : this); }; settimeout(
alert, 1500, 'hello world!'); // the standard use of settimeout and setinterval is preserved, but...
Using the aria-invalid attribute - Accessibility
s a very simple validation function, which only checks for the presence of a particular character (in the real world, validation will likely be more sophisticated): function checkvalidity(aid, asearchterm, amsg){ var elem = document.getelementbyid(aid); var invalid = (elem.value.indexof(asearchterm) < 0); if (invalid) { elem.setattribute("aria-invalid", "true"); update
alert(amsg); } else { elem.setattribute("aria-invalid", "false"); update
alert(); } } the snippet below shows the
alert functions, which add (or remove) the error message: function update
alert(msg) { var old
alert = document.getelementbyid("
alert"); if (old
alert) { document.body.removechild(old
alert); } if (msg) { var new
alert = document.createel...
...ement("div"); new
alert.setattribute("role", "
alert"); new
alert.setattribute("id", "
alert"); var content = document.createtextnode(msg); new
alert.appendchild(content); document.body.appendchild(new
alert); } } note that the
alert has the aria role attribute set to "
alert." working examples:
alert role example (uses the aria-invalid attribute) notes when aria-invalid is used in conjunction with the aria-required attribute, aria-invalid should not be set to true before the form is submitted - only in response to validation.
... used in aria roles all elements of the base markup related aria techniques using the aria-required attribute using the
alert role compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-invalid property wai authoring practices for forms ...
WAI-ARIA Roles - Accessibility
for a full list of roles, see using aria: roles, states, and properties aria:
alert rolethe
alert role can be used to tell the user an element has been dynamically updated.
...if the user is expected to close the
alert, then the
alertdialog role should be used instead.aria: application rolethe application role indicates to assistive technologies that an element and all of its children should be treated similar to a desktop application, and no traditional html interpretation techniques should be used.
...
alertdialog banner combobox command columnheader (estelle) complementary composite definition directory feed gridcell (eric e) group input landmark link - old page listbox log - old page marquee math menu menubar menuitem menuitemcheckbox menuitemradio none note option presentation progressbar - old page radio - old page radiogroup range region roletype rowheader(est...
Cognitive accessibility - Accessibility
alerting the user and providing a buffer of at least 20 seconds to extend the timeout duration by a factor of 10 with a simple action, such as hitting the space bar.
...also, enable a way to make nonessential
alerts optional.
... convey automated error detection users need to be
alerted to the error and informed of what is wrong.
Shapes From Images - CSS: Cascading Style Sheets
in chrome the console will
alert you to cors problems.
... in firefox if you inspect the property you will be
alerted to the fact that the image could not be loaded.
... this should
alert you to the fact that your image cannot be used as the source of a shape due to cors.
<dialog>: The Dialog element - HTML: Hypertext Markup Language
the html <dialog> element represents a dialog box or other interactive component, such as a dismissable
alert, inspector, or subwindow.
... permitted parents any element that accepts flow content implicit aria role dialog permitted aria roles
alertdialog dom interface htmldialogelement attributes this element includes the global attributes.
...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 favdialog.showmodal === "function") { favdialog.showmodal(); } else {
alert("the <dialog> api is not supported by this browser"); } }); // "favorite animal" input sets the value of the submit button selectel.addeventlistener('change', function onselect(e) { confirmbtn.value = selectel.value; }); // "confirm" button of form triggers "close" on dialog because of [method="dialog"] favdialog.addeventlistener('close', function onclose() { outputbox.value = favdialog.ret...
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
will
alert user if site is not secure.
... we can set limits on what values we accept, and supporting browsers will natively validate these form values and
alert the user if there is a mistake when the form is submitted.
... if there is an error, supporting browsers will both
alert the user and prevent the form from being submitted.
XPath snippets - XPath
example: javascript code with the custom evaluatexpath() utility function // display the last names of all people in the doc var results = evaluatexpath(people, "//person/@last-name"); for (var i in results)
alert("person #" + i + " has the last name " + results[i].value); // get the 2nd person node results = evaluatexpath(people, "/people/person[2]"); // get all the person nodes that have addresses in denver results = evaluatexpath(people, "//person[address/@city='denver']"); // get all the addresses that have "south" in the street name results = evaluatexpath(people, "//address[contains(@street, 'sou...
...th')]");
alert(results.length); docevaluatearray the following is a simple utility function to get (ordered) xpath results into an array, regardless of whether there is a special need for namespace resolvers, etc.
... example: defining a simple docevaluatearray() utility function // example usage: // var els = docevaluatearray('//a'); //
alert(els[0].nodename); // gives 'a' in html document with at least one link function docevaluatearray (expr, doc, context, resolver) { var i, result, a = []; doc = doc || (context ?
Bookmarks - Archive of obsolete content
you can fetch the current title of an item using the nsinavbookmarksservice.getitemtitle() method: var thistitle = bmsvc.getitemtitle(newbkmkid); this code will display an
alert containing the title of the item referenced by the id newbkmkid.
...nerateqi([components.interfaces.nsinavbookmarkobserver]) }; // an extension var myextension = { // this function is called when my add-on is loaded onload: function() { bmsvc.addobserver(myext_bookmarklistener, false); }, // this function is called when my add-on is unloaded onunload: function() { bmsvc.removeobserver(myext_bookmarklistener); }, dosomething: function() {
alert("did something."); } }; see also nsinavbookmarksservice nsinavbookmarkobserver places using xpcom without chrome - bookmark observer ...
Examples and demos from articles - Archive of obsolete content
do something if current document has changed since last visit here is a possible example of how to show an
alert message when current document changes.
... do something if an external page has changed since last visit here is a possible example of how to show an
alert message when an external page changes.
HTML to DOM - Archive of obsolete content
the returned <body> object is of type element here is a sample that counts the number of paragraphs in a string: var dompars = htmlparser('<p>foo</p><p>bar</p>');
alert(dompars.getelementsbytagname('p').length); if htmlparser() returns the element name html (instead of body), you have all document object with its complete functions list, therefore you can retrieve info within div tag like this: var dompars = htmlparser("<div id='userinfo'>john was a mediocre programmer, but people liked him <strong>anyway</strong>.</div>");
alert(dompars.getelementbyid('useri...
...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.frameelement) return; // do something with the dom of doc
alert(doc.location.href); // when done remove frame or set location "about:blank" settimeout(function (){ var frame = document.getelementbyid("sample-frame"); // remove frame // frame.destroy(); // if using browser element instead of iframe frame.parentnode.removechild(frame); // or set location "about:blank" // frame.contentdocument.location.href = "about...
On page load - Archive of obsolete content
if(doc.location.href.search("forum") > -1)
alert("a forum page is loaded"); // add event listener for page unload aevent.originaltarget.defaultview.addeventlistener("unload", function(event){ myextension.onpageunload(event); }, true); }, onpageunload: function(aevent) { // do something } }; current firefox trunk nightlies will fire the onpageload function for not only documents, but xul:images (favicons in tabbrowser).
... // if (win.frameelement) return; // skip iframes/frames
alert("page is loaded \n" +doc.location.href); } } window.addeventlistener("load", function load(event){ window.removeeventlistener("load", load, false); //remove listener, no longer needed myextension.init(); },false); references if you need to have a more complicated listener (not just onload), use progress listeners.
Preferences - Archive of obsolete content
for example: if (prefs.prefhasuservalue("mypref")) {
alert(prefs.getcharpref("mypref")); } note that the getcharpref() call may throw error even if the preference exists, for example if it has a different type.
...so you could use, for instance:
alert(prefs.getcharpref("mypref", "no value stored")); be careful with this technique because prior to firefox 54, the additional (default) value will be ignored and an exception would still be thrown in this case.
Rosetta - Archive of obsolete content
"); if (!odicts.hasownproperty(smimetype)) {
alert("rosetta.translatescript() \u2013 unknown mime-type \"" + smimetype + "\": script ignored."); return; } var ocompiled = document.createelement("script"); oscript.parentnode.insertbefore(obaton, oscript); oscript.parentnode.removechild(oscript); for (var aattrs = oscript.attributes, nattr = 0; nattr < aattrs.length; nattr++) { ocompiled.setattribute(aattrs[nattr].
...*/ return "
alert(\"here you have the c code to be compiled to ecmascript:\\n\\n\" + " + json.stringify(scsrc) + ");"; } rosetta.appendcompiler([ "text/x-csrc", "text/x-c" ], createecmasrc); })(); note: creating a compiler from scratch can be a very difficult task.
Tree - Archive of obsolete content
reeview.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; var sel = view.selection.currentindex; //returns -1 if the tree is not focused var treeitem = view.getitematindex(sel); note that the current index may be unselected (for example, a multi-select tree).
...nclick="ontreeclicked(event)"> use the following javascript: function ontreeclicked(event){ var tree = document.getelementbyid("my-tree"); var tbo = tree.treeboxobject; // get the row, col and child element at the point var row = { }, col = { }, child = { }; tbo.getcellat(event.clientx, event.clienty, row, col, child); var celltext = tree.view.getcelltext(row.value, col.value);
alert(celltext); } getting the selected indices of a multiselect tree var start = {}, end = {}, numranges = tree.view.selection.getrangecount(), selectedindices = []; for (var t = 0; t < numranges; t++){ tree.view.selection.getrangeat(t, start, end); for (var v = start.value; v <= end.value; v++) selectedindices.push(v); } other resources xul: tree documentation xul tutori...
XPath - Archive of obsolete content
turnedxml,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[i].text); } } else { var tobj = obj.evaluate("/root/field/item",obj.documentelement,null, xpathresult.any_type, null); var tmp = tobj.iterat...
...enext(); while(tmp) { fields.push(tmp.textcontent); tmp = tobj.iteratenext(); } }
alert(fields); } //here is the demo xml file for xpath <?xml version="1.0"?> <root> <field> <item>art_id</item> <item>psection</item> <item>qkind</item> <item>qtitle</item> <item>question</item> <item>pic</item> <item>answer1</item> <item>answer2</item> <item>answer3</item> <item>answer4</item> </field> </root> //add by mooring 2008-11-15 16:16 china ...
Inline options - Archive of obsolete content
oolean) --> <setting pref="extensions.myaddon.options2" type="radio" title="options 2"> <radiogroup> <radio value="false" label="disabled"/> <radio value="true" label="enabled"/> </radiogroup> </setting> <!-- button example - not tied to a preference, but attached to a command --> <setting title="do something" type="control"> <button id="myaddon-button" label="click me" oncommand="
alert('thank you!');"/> </setting> setting element changed notifications most of the setting elements (it might be all i havent really looked), support oninputchanged attribute.
... <setting pref="extensions.throbberrestored.showtxtontoolbar" title="show text on toolbar button" type="bool" oninputchanged="
alert('new value is = ' + this.value); this.style.backgroundcolor='red';"> if labels on other toolbar buttons are visible (like by using add-on "classic theme restorer") then show label on throbber toolbar button </setting> note in order for the oninputchanged to execute, the setting must have a pref attribute, otherwise the oninputchanged will not trigger.
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
var item = document.getelementbyid('menu-item-custom'); function handlecommandevent(aevent) {
alert('ok'); item.removeeventlistener('command', handlecommandevent, false); item.parentnode.removechild(item); } item.addeventlistener('command', handlecommandevent, false); listing 11: additions and deletions using a dynamic event listener special menu items much like input elements in html, menuitem elements can operate like checkboxes and radio buttons by setting their type attributes.
... <script type="application/javascript"><![cdata[ var nodes = gbrowser.mtabcontainer.childnodes; for (var i = 0; i < nodes.length; i++)
alert(nodes[i].label); ]]></script> listing 18: embedding a script in xul note: although embedding javascript is permitted, it's generally encouraged that you instead place your javascript code in an external file.
Monitoring WiFi access points - Archive of obsolete content
ager.enableprivilege('universalxpconnect'); var d = document.getelementbyid("d"); d.innerhtml = ""; for (var i=0; i<accesspoints.length; i++) { var a = accesspoints[i]; d.innerhtml += "<p>" + a.mac + " " + a.ssid + " " + a.signal + "</p>"; } var c = document.getelementbyid("c"); c.innerhtml = "<p>" + count++ + "</p>"; }, onerror: function (value) {
alert("error: " +value); }, queryinterface: function(iid) { netscape.security.privilegemanager.enableprivilege('universalxpconnect'); if (iid.equals(components.interfaces.nsiwifilistener) || iid.equals(components.interfaces.nsisupports)) return this; throw components.results.ns_error_no_interface; }, } netscape.security.privilegemanager.enablep...
...the onerror() method simply opens an
alert that displays the error code received.
Java in Firefox Extensions - Archive of obsolete content
str, true, loader ); var policy = policyclass.newinstance(); policy.setouterpolicy(java.security.policy.getpolicy()); java.security.policy.setpolicy(policy); policy.addpermission(new java.security.allpermission()); for (var j=0; j < urls.length; j++) { policy.addurl(urls[j]); } }catch(e) {
alert(e+'::'+e.linenumber); } } //get extension folder installation path...
...var aclass = java.lang.class.forname("org.mozilla.developer.helloworld", true, cl); var astaticmethod = aclass.getmethod("getgreeting", []); var greeting = astaticmethod.invoke(null, []);
alert(greeting); another, perhaps simpler approach is as follows: var myclass = loader.loadclass('com.example.myclass'); // use the same loader from above var myobj = myclass.newinstance(); var binval = myobj.mymethod(arg1, arg2); // pass whatever arguments you need (they'll be auto-converted to java form, taking into account the liveconnect conversion rules) for more complex cases, in which you ne...
Using XPInstall to Install Plugins - Archive of obsolete content
err = addfile("@myplugin.com/myplugin,version=2.5.0.0", "2.5.0.0", plugin_file, pluginsfolder, null); if (err != 0) { //
alert("installation of myplugin plug-in failed.
...errror conde: " + err); return err; } err = addfile(null, cult_version, component_file, componentsfolder, null); if (err != 0) {
alert("installation of myplugin component failed.
label - Archive of obsolete content
see also treeitem.label, <label> element examples in javascript <label value="whaw" id="the-big-label" command="the-big-button"/> <button id="the-big-button" label="click me" oncommand="
alert(document.getelementbyid('the-big-label').value)"/> <label id="mylabel" value="my label"/> <button label="click me" oncommand="document.getelementbyid('mylabel').setattribute('value','value changed');" /> <checkbox label="my checkbox" id="mycheckbox"/> <button label="another click" oncommand="document.getelementbyid('mycheckbox').setattribute('label','still not checked');"/> <button label="sho...
...w label of checkbox" oncommand="
alert( document.getelementbyid('mycheckbox').getattribute('label') )"/> ...
Uploading and Downloading Files - Archive of obsolete content
the formdata object can then simply be passed to xmlhttprequest: function upload(posturl, fieldname, filepath) { var formdata = new formdata(); formdata.append(fieldname, new file(filepath)); var req = new xmlhttprequest(); req.open("post", posturl); req.onload = function(event) {
alert(event.target.responsetext); }; req.send(formdata); } http put you can also upload a file using an http put operation.
... function uploadput(posturl, filepath) { var req = new xmlhttprequest(); req.open("put", posturl); req.setrequestheader("content-type", "text/plain"); req.onload = function(event) {
alert(event.target.responsetext); } req.send(new file(filepath)); } in this example, a new input stream is created for a file, and is passed to the xmlhttprequest's send method.
Building Menus With Templates - Archive of obsolete content
here is an example using an xml source: <button type="menu" datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <menupopup> <menuitem uri="?" label="?name"/> </menupopup> </action> </template> </button> <button label="children" oncommand="
alert(this.previoussibling.childnodes.length);"/> in this example, the datasources attribute has been placed on a menu-type button.
...the second button in the example displays an
alert with the number of children the template-driven button has.
Focus and Selection - Archive of obsolete content
don't display an
alert during a focus or blur event as this will be distracting for the user and is poor user interface design.
...example 4 : source view <label id="focused" style="-moz-user-focus: normal;" onkeypress="
alert('label focused');" value="focus me"/> the style property is set to normal.
Manipulating Lists - Archive of obsolete content
getting the selected item these two properties are commonly inspected during a select event, as in the following example: example 2 : source view <listbox id="thelist" onselect="
alert(this.selecteditem.label);"> <listitem label="short"/> <listitem label="medium"/> <listitem label="tall"/> </listbox> the select event is fired for a listbox when an item in the list is selected.
... the select handler here displays an
alert containing the label of the selected item in the list.
dialog - Archive of obsolete content
onaccesskeyextra1, buttonaccesskeyextra2, buttonaccesskeyhelp, buttonalign, buttondir, buttondisabledaccept, buttonlabelaccept, buttonlabelcancel, buttonlabeldisclosure, buttonlabelextra1, buttonlabelextra2, buttonlabelhelp, buttonorient, buttonpack, buttons, defaultbutton, title properties buttons, defaultbutton methods acceptdialog, canceldialog, centerwindowonscreen, getbutton, moveto
alertposition examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" buttonlabelcancel="cancel" buttonlabelaccept="save"> <dialogheader title="options" description="my preferences"/> <groupbox> ...
... moveto
alertposition() return type: no return value moves and resizes the dialog to a position and size suitable for an
alert box.
image - Archive of obsolete content
attributes onerror, onload, src, validate properties accessibletype, src style classes
alert-icon, error-icon, message-icon, question-icon examples <image src='firefoxlogo.png' width='135' height='130'/> attributes onerror type: script code this event is sent to an image element when an error occurs loading the image.
...s(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes
alert-icon class that adds an
alert icon.
promptBox - Archive of obsolete content
the promptbox object represents the tab-modal prompts (or
alerts) on a given tab.
...you should use the window.
alert() method or the nsiprompt interface instead.
CommandLine - Archive of obsolete content
an nsicommandline object is passed as the first argument of the launched window: example var cmdline = window.arguments[0]; cmdline = cmdline.queryinterface(components.interfaces.nsicommandline);
alert(cmdline.handleflagwithparam("test", false)); see also: chrome: command line for single instance applications of course, for a single instance application (see toolkit.singletonwindowtype for more information), the last example still applies the first time your application is launched.
...urn apphandlermodule; } create an observer that will get notified when arguments change: chrome/content/cmdline.js function commandlineobserver() { this.register(); } commandlineobserver.prototype = { observe: function(asubject, atopic, adata) { var cmdline = asubject.queryinterface(components.interfaces.nsicommandline); var test = cmdline.handleflagwithparam("test", false);
alert("test = " + test); }, register: function() { var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.addobserver(this, "commandline-args-changed", false); }, unregister: function() { var observerservice = components.classes["@mozilla.org/observer-ser...
How to enable locale switching in a XULRunner application - Archive of obsolete content
selecteditem = listitem; } localelistbox.appendchild(listitem); } // highlight current locale localelistbox.selecteditem = selecteditem; } catch (err) {
alert (err); } 4.
...nch); prefs.setcharpref("general.useragent.locale", newlocale); // restart application var appstartup = components.classes["@mozilla.org/toolkit/app-startup;1"] .getservice(components.interfaces.nsiappstartup); appstartup.quit(components.interfaces.nsiappstartup.erestart | components.interfaces.nsiappstartup.eattemptquit); } catch(err) {
alert("couldn't change locale: " + err); } } * * * here i include a complete xulrunner application example that demonstrates the locale switching.
XULRunner tips - Archive of obsolete content
preferences needed for file download dialogs to use the unknown-content-type and file-downloads dialogs from a <browser> element, you need to add the following prefs: pref("browser.download.usedownloaddir", true); pref("browser.download.folderlist", 0); pref("browser.download.manager.show
alertoncomplete", true); pref("browser.download.manager.show
alertinterval", 2000); pref("browser.download.manager.retention", 2); pref("browser.download.manager.showwhenstarting", true); pref("browser.download.manager.usewindow", true); pref("browser.download.manager.closewhendone", true); pref("browser.download.manager.opendelay", 0); pref("browser.download.manager.focuswhenstarting", false); pref("br...
...owser.download.manager.flashcount", 2); // pref("
alerts.slideincrement", 1); pref("
alerts.slideincrementtime", 10); pref("
alerts.totalopentime", 4000); pref("
alerts.height", 50); if you are missing preferences that a dialog requires, you will get the following errors: component returned failure code: 0x8000ffff (ns_error_unexpected) [nsiprefbranch.getboolpref] error: dialog has no properties source file: chrome://mozapps/content/downloads/u...ontenttype.xul line: 1 enabling password manager these preferences seem to be the default in firefox, however, they are missing in xulrunner.
Monitoring plugins - Archive of obsolete content
here is an example that shows the runtime in an
alert box to the user if the runtime exceeds half a second in length: observe: function(subject, topic, data) { if (topic == "experimental-notify-plugin-call" ) { if (data > 0.500) {
alert("runtime is: " + data); } } } note: this is just a simplified example and the use of
alert() is discouraged as the component can send hundreds of notifications each second and could p...
...otentially cause your browser to crash if an excessive number of
alert boxes are displayed.
Old Proxy API - Archive of obsolete content
here is an example: var incompletehandler = {get:function(myproxy, name){
alert('property ' + name + ' accessed.'); return 1; } }; var p = proxy.create(incompletehandler); var q = p.blabla; //
alerts 'property blabla accessed' and 1 is assigned to q p.azerty = "trying to set a property"; // throws an error since neither the set trap or the fundamental trap used in the set trap are implemented...
... var o = object.create({}); var proxy = proxy.create(handlermaker(o)); proxy.blabla = 12; // thanks to the forwarding, o now has a 'blabla' property with a value of 12 o.blabla++; // just incrementing o.blabla
alert(proxy.blabla); //
alerts 13: the getting operation is forwarded to o which returns 13.
Sharp variables in JavaScript - Archive of obsolete content
examples multiple references var a = { foo:#1=[], bar:#1# }; a.foo.push("hello"); a.bar.push("there!");
alert(a.foo[1]); // "there!" you can avoid using sharp variables by breaking the declaration up into multiple lines.
... var a = { foo:[], bar:undefined }; a.bar = a.foo; a.foo.push("hello"); a.bar.push("there!");
alert(a.foo[1]); // "there!" cyclic references sharp variables can be used to create a circularly linked list in one line of code.
Unconventional controls - Game development
if(horizontaldegree > degreethreshold) { playerx -= 5; } else if(horizontaldegree < -degreethreshold) { playerx += 5; } if(verticaldegree > degreethreshold) { playery += 5; } else if(verticaldegree < -degreethreshold) { playery -= 5; } if(grabstrength == 1) {
alert('boom!'); } ctx.drawimage(img, playerx, playery); requestanimationframe(draw); } if the horizontaldegree value is greater than our degreethreshold, which is 30 in this case, then the ship will be moved left 5 pixels on every frame.
...the last value is grabstrength, which is a float between 0 and 1 — when reaching 1 (fist fully clenched), we show an
alert for now (in a full game this could be replaced with the shooting logic.) that's it — everything you needed for a working leap motion example in javascript is here already.
Game over - Game development
add the following lines just below the previous new one: ball.checkworldbounds = true; ball.events.onoutofbounds.add(function(){
alert('game over!'); location.reload(); }, this); adding those lines will make the ball check the world (in our case canvas) bounds and execute the function bound to the onoutofbounds event.
... when you click on the resulting
alert, the page will be reloaded so you can play again.
Win the game - Game development
add the following new code into your ballhitbrick() function: function ballhitbrick(ball, brick) { brick.kill(); score += 10; scoretext.settext('points: '+score); var count_alive = 0; for (i = 0; i < bricks.children.length; i++) { if (bricks.children[i].alive == true) { count_alive++; } } if (count_alive == 0) {
alert('you won the game, congratulations!'); location.reload(); } } we loop through the bricks in the group using bricks.children, checking for the aliveness of each with each brick's .alive() method.
... if there are no more bricks left alive, then we show a winning message, restarting the game once the
alert is dismissed.
XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
xifallback = xinclude.getelementsbytagnamens('http://www.w3.org/2001/xinclude', 'fallback')[0]; // only one such child is allowed if (href === '' || href === null) { // points to same document if empty (null is equivalent to empty string) href = null; // set for uniformity in testing below if (parse === 'xml' && xpointer === null) {
alert('there must be an xpointer attribute present if "href" is empty an parse is "xml"'); return false; } } else if (href.match(/#$/, '') || href.match(/^#/, '')) {
alert('fragment identifiers are disallowed in an xinclude "href" attribute'); return false; } var j; var xinclu...
...ext/plain; charset='+encoding); //'x-user-defined' } responsetype = 'responsetext'; break; case null: case 'xml': responsetype = 'responsexml'; break; default:
alert('xinclude element contains an invalid "parse" attribute value'); return false; break; } request.send(null); if((request.status === 200 || request.status === 0) && request[responsetype] !== null) { response = request[responsetype]; if ...
CSS and JavaScript accessibility best practices - Learn web development
good example uses of unobtrusive javascript include: providing client-side form validation, which
alerts users to problems with their form entries quickly, without having to wait for the server to check the data.
... as a final note, we have used some wai-aria attributes in our demo to help solve accessibility problems caused by areas of content constantly updating without a page reload (screen readers won't pick this up or
alert users to it by default): <div class="errors" role="
alert" aria-relevant="all"> <ul> </ul> </div> we will explain these attributes in our next article, which covers wai-aria in much more detail.
Organizing your CSS - Learn web development
$base-color: #c6538c; .
alert { border: 1px solid $base-color; } once compiled to css, you would end up with the following css in the final stylesheet.
... .
alert { border: 1px solid #c6538c; } compiling component stylesheets i mentioned above that one way to organise css is to break down stylesheets into smaller stylesheets.
What are browser developer tools? - Learn web development
this will give you a window like the following: to see what happens, try entering the following snippets of code into the console one by one (and then pressing enter):
alert('hello!'); document.queryselector('html').style.backgroundcolor = 'purple'; const mywordmark = document.createelement('img'); mywordmark.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png'); document.queryselector('h1').appendchild(mywordmark); now try entering the following incorrect versions of the code and see what you get.
...
alert('hello!); document.cheeseselector('html').style.backgroundcolor = 'purple'; const mywordmark = document.createelement('img'); mybanana.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png'); document.queryselector('h1').appendchild(mywordmark); you'll start to see the kind of errors that the browser returns.
Choosing the right approach - Learn web development
single delayed operation repeating operation multiple sequential operations multiple simultaneous operations yes yes (recursive timeouts) yes (nested timeouts) no code example here the browser will wait two seconds before executing the anonymous function, then will display the
alert message (see it running live, and see the source code): let mygreeting = settimeout(function() {
alert('hello, mr.
...for example: remotedb.alldocs({ include_docs: true, attachments: true }).then(function (result) { let docs = result.rows; docs.foreach(function(element) { localdb.put(element.doc).then(function(response) {
alert("pulled doc with id " + element.doc._id + " and added to local db."); }).catch(function (err) { if (err.name == 'conflict') { localdb.get(element.doc._id).then(function (resp) { localdb.remove(resp._id, resp._rev).then(function (resp) { // et cetera...
A first splash into JavaScript - Learn web development
functions next, add the following below your previous javascript: function checkguess() {
alert('i am a placeholder'); } functions are reusable blocks of code that you can write once and run again and again, saving the need to keep repeating code all the time.
...then go into the developer tools javascript console, and enter the following line: checkguess(); after pressing return/enter, you should see an
alert come up that says "i am a placeholder"; we have defined a function in our code that creates an
alert whenever we call it.
Handling text — strings in JavaScript - Learn web development
concatenation in context let's have a look at concatenation being used in action — here's an example from earlier in the course: <button>press me</button> const button = document.queryselector('button'); button.onclick = function() { let name = prompt('what is your name?');
alert('hello ' + name + ', nice to see you!'); } here we're using a window.prompt() function in line 4, which asks the user to answer a question via a popup dialog box then stores the text they enter inside a given variable — in this case name.
... we then use a window.
alert() function in line 5 to display another popup containing a string we've assembled from two string literals and the name variable, via concatenation.
Storing the information you need — Variables - Learn web development
let's look at a simple example: <button>press me</button> const button = document.queryselector('button'); button.onclick = function() { let name = prompt('what is your name?');
alert('hello ' + name + ', nice to see you!'); } in this example pressing the button runs a couple of lines of code.
...it would end up looking something like this: let name = prompt('what is your name?'); if (name === 'adam') {
alert('hello adam, nice to see you!'); } else if (name === 'alan') {
alert('hello alan, nice to see you!'); } else if (name === 'bella') {
alert('hello bella, nice to see you!'); } else if (name === 'bianca') {
alert('hello bianca, nice to see you!'); } else if (name === 'chris') {
alert('hello chris, nice to see you!'); } // ...
Handling common accessibility problems - Learn web development
you can then press enter/return to follow a focused link or press a button (we've included some javascript to make the buttons
alert a message), or start typing to enter text in a text input (other form elements have different controls, for example the <select> element can have its options displayed and cycled between using the up and down arrow keys).
...good uses of javascript include: providing client-side form validation, which
alerts users to problems with their form entries quickly, without having to wait for the server to check the data.
Setting up your own test automation environment - Learn web development
delete the previous code entry, then add this line at the bottom instead: button.click(); try running your test again; the button will be clicked, and the
alert() popup should appear.
...add the following to the bottom of the code, and try testing it again: let
alert = driver.switchto().
alert();
alert.gettext().then(function(text) { console.log('
alert text is \'' + text + '\''); });
alert.accept(); next, let's try entering some text into one of the form elements.
Creating JavaScript callbacks in components
here is an example of how to use the callback system: var wordhandler = { onword : function(word) {
alert(word); } }; var stringparser = /* get a reference to the parser somehow */ stringparser.addobserver(wordhandler); stringparser.parse("pay no attention to the man behind the curtain"); you can find examples of this pattern all over the mozilla codebase.
...now we can create a callback javascript function to handle the onword event: function handleword(word) {
alert(word); } var stringparser = /* get a reference to the parser somehow */ stringparser.addobserver(handleword); stringparser.parse("pay no attention to the man behind the curtain"); yes, you can still use the normal interface-based callback implementation too.
JavaScript-DOM Prototypes in Mozilla
as an example: function bar() {
alert("hello world!"); } document.images[0].__proto__.foo = bar; this would make every image in this document have a callable foo property (i.e.
... here is an attempt to modify a host object: (function(){ try { image.prototype.src = 1; } catch(ex){
alert(ex); } })(); this demonstrates that the image constructor, a host object supported in nearly all browsers for mac and windows, has a prototype property, and that an attempt to modify the prototype's src - property results in an error.
Code Samples
ort("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("yourextensionid", function(addon) { var addonlocation = addon.getresourceuri("").queryinterface(components.interfaces.nsifileurl).file.path; }); accessing file and version information components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("my-addon@foo.com", function(addon) {
alert("my extension's version is " + addon.version);
alert("did i remember to include that file.txt file in my xpi?
..."yes!" : "no");
alert("let's pretend i did, it's available from the url " + addon.getresourceuri("file.txt").spec); }); uninstall an add-on components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("youraddon@youraddon.com", function(addon) { addon.uninstall(); }); disable an add-on components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("youraddon@youraddon.com", function(addon) { if (addon.isactive) addon.userdisabled = addon.isactive; }); listening for add-on uninstall this example sets a variable beinguninstalled that you can check when you get a profile-before-change message to do cleanup for your add-on on uninstall.
CustomizableUI.jsm
tooltiptext: 'this is my widget created with cui.jsm', oncommand: function(aevent) { var thisdomwindow = aevent.target.ownerdocument.defaultview; //this is the browser (xul) window var thiswindowsselectedtabswindow = thisdomwindow.gbrowser.selectedtab.linkedbrowser.contentwindow; //this is the html window of the currently selected tab thiswindowsselectedtabswindow.
alert('
alert from html window of selected tab'); thisdomwindow.
alert('
alert from xul window'); } }); giving the button an icon non-style sheet method the style sheet method (below) is one way to add an icon.
... tooltiptext: 'this is my widget created with cui.jsm', oncommand: function(aevent) { var thisdomwindow = aevent.target.ownerdocument.defaultview; //this is the browser (xul) window var thiswindowsselectedtabswindow = thisdomwindow.gbrowser.selectedtab.linkedbrowser.contentwindow; //this is the html window of the currently selected tab thiswindowsselectedtabswindow.
alert('
alert from html window of selected tab'); thisdomwindow.
alert('
alert from xul window'); } }); //end - use customizableui.jsm to create the widget //start - use style sheet service to style our widget to give it an icon cu.import('resource://gre/modules/services.jsm'); var sss = cc['@mozilla.org/content/style-sheet-service;1'].getservice(ci.nsistylesheetservice); var css = ''; css +...
Localizing with Mozilla Translator
|-- browser-region | `-- region.properties `-- ab-cd |--
alerts | `-- notificationnames.properties |-- autoconfig | `-- autoconfig.properties |-- cookie | |-- cookieacceptdialog.dtd | `-- cookieacceptdialog.properties |-- global | |-- about.dtd | |-- apppicker.dtd .
... but in the cvs and mozilla-central repositories the locale part looks like this: toolkit |-- locales | |-- en-us | | |-- chrome | | | |--
alerts | | | | `-- notificationnames.properties | | | |-- autoconfig | | | | `-- autoconfig.properties | | | |-- cookie | | | | |-- cookieacceptdialog.dtd | | | | `-- cookieacceptdialog.properties | | | |-- global | | | | |-- about.dtd | | | | |-- apppicker.dtd .
Index
type = 21 (
alert) version = { 3,0 } length = 18 (0x12) < encrypted > } ] server socket closed.
...ication_data) version = { 3,0 } length = 287 (0x11f) > encrypted > } ] [ sslrecord { type = 23 (application_data) version = { 3,0 } length = 160 (0xa0) > encrypted > } ] >-- [ sslrecord { type = 23 (application_data) version = { 3,0 } length = 223 (0xdf) > encrypted > } sslrecord { type = 21 (
alert) version = { 3,0 } length = 18 (0x12) > encrypted > } ] server socket closed.
NSS 3.30 release notes
support for callback functions that can be used to monitor ssl/tls
alerts that are sent or received.
... in ssl.h ssl_
alertreceivedcallback - register a callback function, that will be called whenever an ssl/tls
alert is received ssl_
alertsentcallback - register a callback function, that will be called whenever an ssl/tls
alert is sent ssl_setsessionticketkeypair - configures an asymmetric key pair, for use in wrapping session ticket keys, used by the server.
NSS tools : ssltab
type = 21 (
alert) version = { 3,0 } length = 18 (0x12) < encrypted > } ] server socket closed.
... = 22 (handshake) version = { 3,0 } length = 56 (0x38) > encrypted > } ] --> [ sslrecord { type = 23 (application_data) version = { 3,0 } length = 287 (0x11f) > encrypted > } ] [ sslrecord { type = 23 (application_data) version = { 3,0 } length = 160 (0xa0) > encrypted > } ] >-- [ sslrecord { type = 23 (application_data) version = { 3,0 } length = 223 (0xdf) > encrypted > } sslrecord { type = 21 (
alert) version = { 3,0 } length = 18 (0x12) > encrypted > } ] server socket closed.
NSS tools : ssltap
type = 21 (
alert) version = { 3,0 } length = 18 (0x12) < encrypted > } ] server socket closed.
... = 22 (handshake) version = { 3,0 } length = 56 (0x38) > encrypted > } ] --> [ sslrecord { type = 23 (application_data) version = { 3,0 } length = 287 (0x11f) > encrypted > } ] [ sslrecord { type = 23 (application_data) version = { 3,0 } length = 160 (0xa0) > encrypted > } ] >-- [ sslrecord { type = 23 (application_data) version = { 3,0 } length = 223 (0xdf) > encrypted > } sslrecord { type = 21 (
alert) version = { 3,0 } length = 18 (0x12) > encrypted > } ] server socket closed.
NSS Tools ssltap
type = 21 (
alert) version = { 3,0 } length = 18 (0x12) < encrypted >}]server socket closed.
...ted >}]--> [sslrecord { type = 23 (application_data) version = { 3,0 } length = 287 (0x11f) < encrypted >}][sslrecord { type = 23 (application_data) version = { 3,0 } length = 160 (0xa0) < encrypted >}]<-- [sslrecord { type = 23 (application_data) version = { 3,0 } length = 223 (0xdf) < encrypted >}sslrecord { type = 21 (
alert) version = { 3,0 } length = 18 (0x12) < encrypted >}]server socket closed.
NSS tools : ssltap
type = 21 (
alert) version = { 3,0 } length = 18 (0x12) < encrypted > } ] server socket closed.
...ication_data) version = { 3,0 } length = 287 (0x11f) > encrypted > } ] [ sslrecord { type = 23 (application_data) version = { 3,0 } length = 160 (0xa0) > encrypted > } ] >-- [ sslrecord { type = 23 (application_data) version = { 3,0 } length = 223 (0xdf) > encrypted > } sslrecord { type = 21 (
alert) version = { 3,0 } length = 18 (0x12) > encrypted > } ] server socket closed.
Manipulating bookmarks using Places
you can fetch the current title of an item using the nsinavbookmarksservice.getitemtitle() method: var thistitle = bmsvc.getitemtitle(newbkmkid); this code will display an
alert containing the title of the item referenced by the id newbkmkid.
...nerateqi([components.interfaces.nsinavbookmarkobserver]) }; // an extension var myextension = { // this function is called when my add-on is loaded onload: function() { bmsvc.addobserver(myext_bookmarklistener, false); }, // this function is called when my add-on is unloaded onunload: function() { bmsvc.removeobserver(myext_bookmarklistener); }, dosomething: function() {
alert("did something."); } }; see also nsinavbookmarksservice nsinavbookmarkobserver places using xpcom without chrome - bookmark observer ...
How to build an XPCOM component in JavaScript
ommented the "wrappedjsobject" line in the class constructor, and you removed the "[components.interfaces.nsihelloworld]" argument for the call to xpcomutils.generateqi() in queryinterface, then you can access your component like this: try { var mycomponent = components.classes['@dietrich.ganx4.com/helloworld;1'] .getservice().wrappedjsobject;
alert(mycomponent.hello()); } catch (anerror) { dump("error: " + anerror); } for more information about wrappedjsobject, see here.
... using xpcom instantiation try { var mycomponent = components.classes['@dietrich.ganx4.com/helloworld;1'] .createinstance(components.interfaces.nsihelloworld);
alert(mycomponent.hello()); } catch (anerror) { dump("error: " + anerror); } other resources rm lantwo mozillazine forums threads about implementing xpcom components in js with some explanations, example code, and troubleshooting tips: http://forums.mozillazine.org/viewtopic.php?t=308369 http://forums.mozillazine.org/viewtopic.php?t=367298 implementing xpcom components in javascript at kb.mozillazine.org using xpcom in javascript without leaking - a must-read.
Index
323 nsi
alertsservice interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference by default a message is displayed in a small window that slides up from the bottom of the screen, holds there for a few seconds, then slides down.
... 525 nsidomwindowinternal interface, interfaces, interfaces:scriptable, mozilla, reference, xpcom, xpcom interface reference, xpcom:dom, nsidomwindowinternal it provides many of the common functions used in javascript such as
alert() or open().
Components.utils.Sandbox
it
alerts the dollar sign function.
... var sandboxscript = '
alert($)'; var options = { sandboxprototype: content, wantxrays: false // only set this to false if you need direct access to the page's javascript.
nsIAccessibleRole
role_
alert 8 represents an
alert or a condition that a user should be notified about.
...the role is used by xul:browsermessage, role="
alert", xforms:message.
nsIDOMWindowInternal
it provides many of the common functions used in javascript such as
alert() or open().
... void
alert(in domstring text) boolean confirm(in domstring text) domstring prompt([optional] in domstring amessage, [optional] in domstring ainitial, [optional] in domstring atitle, [optional] in unsigned long asavepassword) void focus() void blur() void back() void forward() void home() void stop() void print() void m...
nsIIdleService
example example 1 var idleservice = components.classes["@mozilla.org/widget/idleservice;1"] .getservice(components.interfaces.nsiidleservice) settimeout(function() {
alert(idleservice.idletime) }, 1000) // if you don't use the mouse or the keyboard after running this snippet, // you'll see a number around 1000
alerted.
... example 2 var idleservice = components.classes["@mozilla.org/widget/idleservice;1"] .getservice(components.interfaces.nsiidleservice) var idleobserver = { observe: function(subject, topic, data) {
alert("topic: " + topic + "\ndata: " + data); } }; idleservice.addidleobserver(idleobserver, 60); // one minute // ...
nsIWindowMediator
important: this will attach the functionality to future opened windows, so if you copy paste this code to scratchpad, then after running this script, you need to open a new window by pressing ctrl + n and then in the new window, selecting tabs will fire the
alert.
...rfacerequestor).getinterface(ci.nsidomwindowinternal || ci.nsidomwindow); domwindow.addeventlistener("load", function () { domwindow.removeeventlistener("load", arguments.callee, false); //this removes this load function from the window //window has now loaded now do stuff to it //as example this will add a function to listen to tab select and will fire
alert in that window if (domwindow.gbrowser && domwindow.gbrowser.tabcontainer) { domwindow.gbrowser.tabcontainer.addeventlistener('tabselect', function () { domwindow.
alert('tab was selected') }, false); } }, false); }, onclosewindow: function (awindow) {}, onwindowtitlechange: function (awindow, atitle) {}...
nsIXMLHttpRequest
cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(ci.nsixmlhttprequest); let handler = ev => { evf(m => xhr.removeeventlistener(m, handler, !1)); switch (ev.type) { case 'load': if (xhr.status == 200) { cb(xhr.response); break; } default: services.prompt.
alert(null, 'xhr error', 'error fetching package: ' + xhr.statustext + ' [' + ev.type + ':' + xhr.status + ']'); break; } }; let evf = f => ['load', 'error', 'abort'].foreach(f); evf(m => xhr.addeventlistener(m, handler, false)); xhr.mozbackgroundrequest = true; xhr.open('get', url, true); xhr.channel.loadflags |= ci.nsirequest.load_anonymous | ci.nsire...
...you only want this if your url is to a zip file or some file you want to download and make a nsiarraybufferinputstream out of it or something xhr.send(null); } xhr('https://www.gravatar.com/avatar/eb9895ade1bd6627e054429d1e18b576?s=24&d=identicon&r=pg&f=1', data => { services.prompt.
alert(null, 'xhr success', data); var file = os.path.join(os.constants.path.desktopdir, "test.png"); var promised = os.file.writeatomic(file, new uint8array(data)); promised.then( function() {
alert('succesfully saved image to desktop') }, function(ex) {
alert('failed in saving image to desktop') } ); }); ...
nsIZipReader
sm'); cu.import('resource://gre/modules/fileutils.jsm'); var reusablestreaminstance = cc['@mozilla.org/scriptableinputstream;1'].createinstance(ci.nsiscriptableinputstream); var pathtoxpitoread = os.path.join(os.constants.path.profiledir, 'extensions', 'portabletester@jetpack.xpi'); var nsifilexpi = new fileutils.file(pathtoxpitoread); //services.ww.activewindow.
alert(pathtoxpitoread); try { zr.open(nsifilexpi); //if file dne it throws here var entries = zr.findentries('*'); //we use asterik because we want everything listed out while (entries.hasmore()) { var entrypointer = entries.getnext(); //just a string of "zip path" (this means path to file in zip, and it uses forward slashes remember) var entry = zr.getentry(e...
...init(inputstream); var filecontents = reusablestreaminstance.read(entry.realsize); console.log('contenst of file=', filecontents); } else { console.log('is directory, no stream to read'); } } } catch (ex) { console.warn('exception occured = ', ex); if (ex.name == 'ns_error_file_not_found') { services.ww.activewindow.
alert('xpi at path does not exist!\n\npath = ' + pathtoxpitoread); } } finally { zr.close(); console.log('zr closed'); } see also nsizipentry nsizipwriter ...
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 + '...
... = ' + property.value + ';\n'; }
alert(s); links code based on using_nsipasswordmanager nsisimpleenumerator xul:property:strings ...
Adding items to the Folder Pane
, get children() { if (!this._children) { this._children = []; for (var i = 1; i <= this._numbers; i++) this._children.push(new numberrow(i)); } return this._children; }, getproperties: function gne_getprops() { // put your css attributes here }, command: function gne_command() { // just going to
alert, to do something here components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice) .
alert(window, null, this.text); } }; second, our child items (the numbers 1, 2, and 3) are copies of the following prototype: function numberrow(anumber) { this._number = anumber; } number...
...row.prototype = { get id() { return "numbers-child-row-" + this._number; }, get text() { return this._number; }, level: 1, open: false, children: [], getproperties: function gne_kid_getprops() {}, // no-op command: function gne_kid_command() { // just going to
alert, to do something here components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice) .
alert(window, null, this.text); } }; putting it all together all that is left at this point is to actually add these newly defined folder-tree-items to the folder pane's _rowmap at the appropriate time.
Access Window
check if the window is a tab or the root window window.addeventlistener("load", function(e) {
alert("is root?: " + isroot()); }, false); function isroot() { if(window != window.top) return "false"; else return "true"; } the example above tells you if the window object is a reference of the application window or of one of it is a tabs.
... register a timer window.setinterval( function() {
alert('foobar'); }, 60000); //execute the function once very minute if you periodically need to perform a certain action then you can use the setinterval function, it will then call this function every x milliseconds, in this case every 60000ms or one minute.
Using COM from js-ctypes
setoutput; void* getoutputobjecttoken; void* getoutputstream; void* pause; void* resume; void* setvoice; void* getvoice; hresult (__stdcall *speak)(struct myispvoice*, lpcwstr pwcs, dword dwflags, ulong* pulstreamnumber); void* speakstream; void* getstatus; void* skip; void* setpriority; void* getpriority; void* set
alertboundary; void* get
alertboundary; void* setrate; void* getrate; void* setvolume; void* getvolume; void* waituntildone; void* setsyncspeaktimeout; void* getsyncspeaktimeout; void* speakcompleteevent; void* isuisupported; void* displayui; /* end ispvoice */ }; int main(void) { if (succeeded(coinitialize(null))) { struct myispvoice* pvo...
... // return [ ispvoice.ptr, lpcwstr, // *pwcs dword, // dwflags ulong // *pulstreamnumber ]).ptr }, { 'speakstream': ctypes.voidptr_t }, { 'getstatus': ctypes.voidptr_t }, { 'skip': ctypes.voidptr_t }, { 'setpriority': ctypes.voidptr_t }, { 'getpriority': ctypes.voidptr_t }, { 'set
alertboundary': ctypes.voidptr_t }, { 'get
alertboundary': ctypes.voidptr_t }, { 'setrate': ctypes.voidptr_t }, { 'getrate': ctypes.voidptr_t }, { 'setvolume': ctypes.voidptr_t }, { 'getvolume': ctypes.voidptr_t }, { 'waituntildone': ctypes.voidptr_t }, { 'setsyncspeaktimeout': ctypes.voidptr_t }, { 'getsyncspeaktimeout': ctypes.voidptr_t }, { 'speakcompleteevent': ct...
Attr.localName - Web APIs
example the following example shows "id" in an
alert dialog.
... html content <button id="example">click me</button> javascript content const element = document.queryselector("#example"); element.addeventlistener("click", function() { const attribute = element.attributes[0];
alert(attribute.localname); }); notes the local name of an attribute is the part of the attribute's qualified name that comes after the colon.
CanvasRenderingContext2D.addHitRegion() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); canvas.addeventlistener('mousemove', function(event) { if(event.region) {
alert('ouch, my eye :('); } }); ctx.beginpath(); ctx.arc(100, 100, 75, 0, 2 * math.pi); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi); ctx.arc(130, 80, 10, 0, 2 * math.pi); ctx.fill(); ctx.addhitregion({id: "eyes"}); // mouth ctx.beginpath(); ctx.arc(100, 110, 50, 0, math.pi); ctx.stroke(); edit the code below to see your changes update live in the...
...ument.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }); canvas.addeventlistener("mousemove", function(event){ if(event.region) {
alert("ouch, my eye :("); } }); textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications canvas hit regions have been removed from the whatwg living standard, although discussions about future standardization are ongoing.
Using light sensors - Web APIs
window.addeventlistener("devicelight", function (event) { // read out the lux value var luminosity = event.value;
alert(luminosity); }); example: window.addeventlistener('devicelight', function(event) { var bodybg= document.body.style; //event.value is the lux value returned by the sensor on the device if (event.value < 100) {
alert('hey, you!
...the code
alerts the user that they are working in a dark environment and then changes the page's background to a darker color.
Document.cookie - Web APIs
examples example #1: simple usage document.cookie = "name=oeschger"; document.cookie = "favorite_food=tripe"; function
alertcookie() {
alert(document.cookie); } <button onclick="
alertcookie()">show cookies</button> example #2: get a sample cookie named test2 document.cookie = "test1=hello"; document.cookie = "test2=world"; const cookievalue = document.cookie .split('; ') .find(row => row.startswith('test2')) .split('=')[1]; function
alertcookievalue() {
alert(cookievalue); } <button onclick="
alertc...
... function doonce() { if (!document.cookie.split('; ').find(row => row.startswith('dosomethingonlyonce'))) {
alert("do something here!"); document.cookie = "dosomethingonlyonce=true; expires=fri, 31 dec 9999 23:59:59 gmt"; } } <button onclick="doonce()">only do something once</button> example #4: reset the previous cookie function resetonce() { document.cookie = "dosomethingonlyonce=; expires=thu, 01 jan 1970 00:00:00 gmt"; } <button onclick="resetonce()">reset only once cookie</button> example #5: check a cookie existence //es5 if (document.cookie.sp...
Document.getElementsByTagName() - Web APIs
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>getelementsbytagname example</title> <script> function getallparaelems() { var allparas = document.getelementsbytagname('p'); var num = allparas.length;
alert('there are ' + num + ' paragraph in this document'); } function div1paraelems() { var div1 = document.getelementbyid('div1'); var div1paras = div1.getelementsbytagname('p'); var num = div1paras.length;
alert('there are ' + num + ' paragraph in #div1'); } function div2paraelems() { var div2 = document.getelementbyid('div2'); var div2paras = div...
...2.getelementsbytagname('p'); var num = div2paras.length;
alert('there are ' + num + ' paragraph in #div2'); } </script> </head> <body style="border: solid green 3px"> <p>some outer text</p> <p>some outer text</p> <div id="div1" style="border: solid blue 3px"> <p>some div1 text</p> <p>some div1 text</p> <p>some div1 text</p> <div id="div2" style="border: solid red 3px"> <p>some div2 text</p> <p>some div2 text</p> </div> </div> <p>some outer text</p> <p>some outer text</p> <button onclick="getallparaelems();"> show all p elements in document</button><br /> <button onclick="div1paraelems();"> show all p elements in div1 element</button><br /> <button onclick="div2paraelems();"> show all p elements in div2 element...
Document.getElementsByTagNameNS() - Web APIs
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>getelementsbytagnamens example</title> <script type="text/javascript"> function getallparaelems() { var allparas = document.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "p"); var num = allparas.length;
alert("there are " + num + " <p> elements in this document"); } function div1paraelems() { var div1 = document.getelementbyid("div1") var div1paras = div1.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "p"); var num = div1paras.length;
alert("there are " + num + " <p> elements in div1 element"); } function div2paraelems() { var div2 = document.getelementbyid("div2") ...
... var div2paras = div2.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "p"); var num = div2paras.length;
alert("there are " + num + " <p> elements in div2 element"); } </script> </head> <body style="border: solid green 3px"> <p>some outer text</p> <p>some outer text</p> <div id="div1" style="border: solid blue 3px"> <p>some div1 text</p> <p>some div1 text</p> <p>some div1 text</p> <div id="div2" style="border: solid red 3px"> <p>some div2 text</p> <p>some div2 text</p> </div> </div> <p>some outer text</p> <p>some outer text</p> <button onclick="getallparaelems();"> show all p elements in document</button><br /> <button onclick="div1paraelems();"> show all p elements in div1 element</button><br /> <button onclick="div2paraelems();"> s...
DocumentOrShadowRoot.getSelection() - Web APIs
example function foo() { var selobj = document.getselection();
alert(selobj); var selrange = selobj.getrangeat(0); // do stuff with the range } notes string representation of the selection object in javascript, when an object is passed to a function expecting a string (like window.
alert()), the object's tostring() method is called and the returned value is passed to the function.
... in the above example, selobj.tostring() is automatically called when it is passed to window.
alert().
Examples of web and XML development using the DOM - Web APIs
but the stopevent method has stopped propagation, and so after the data in the table is updated, the event phase is effectively ended, and an
alert box is displayed to confirm this.
... ev.stoppropagation();
alert("event propagation halted."); } function load() { elem = document.getelementbyid("tbl1"); elem.addeventlistener("click", stopevent, false); } </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 use...
Element.innerHTML - Web APIs
name = "<script>
alert('i am john in an annoying
alert!')</script>"; el.innerhtml = name; // harmless in this case although this may look like a cross-site scripting attack, the result is harmless.
...for example: const name = "<img src='x' onerror='
alert(1)'>"; el.innerhtml = name; // shows the
alert for that reason, it is recommended that you do not use innerhtml when inserting plain text; instead, use node.textcontent.
Element.requestFullscreen() - Web APIs
function togglefullscreen() { let elem = document.queryselector("video"); if (!document.fullscreenelement) { elem.requestfullscreen().catch(err => {
alert(`error attempting to enable full-screen mode: ${err.message} (${err.name})`); }); } else { document.exitfullscreen(); } } if the document isn't already in full-screen mode—detected by looking to see if document.fullscreenelement has a value—we call the video's requestfullscreen() method.
... we don't need to do anything special if successful, but if the request fails, our promise's catch() handler presents an
alert with an appropriate error message.
EventListener - Web APIs
buttonelement.addeventlistener('click', function (event) {
alert('element clicked through function!'); }); // for compatibility, a non-function object with a `handleevent` property is // treated just the same as a function itself.
... buttonelement.addeventlistener('click', { handleevent: function (event) {
alert('element clicked through handleevent property!'); } }); result see also: addeventlistener specifications specification status comment domthe definition of 'eventlistener' in that specification.
EventTarget.addEventListener() - Web APIs
; outer.addeventlistener('click', oncehandler, once); outer.addeventlistener('click', noneoncehandler, noneonce); middle.addeventlistener('click', capturehandler, capture); middle.addeventlistener('click', nonecapturehandler, nonecapture); inner1.addeventlistener('click', passivehandler, passive); inner2.addeventlistener('click', nonepassivehandler, nonepassive); function oncehandler(event) {
alert('outer, once'); } function noneoncehandler(event) {
alert('outer, none-once, default'); } function capturehandler(event) { //event.stopimmediatepropagation();
alert('middle, capture'); } function nonecapturehandler(event) {
alert('middle, none-capture, default'); } function passivehandler(event) { // unable to preventdefault inside passive event listener invocation.
... event.preventdefault();
alert('inner1, passive, open new page'); } function nonepassivehandler(event) { event.preventdefault(); //event.stoppropagation();
alert('inner2, none-passive, default, not open new page'); } result click the outer, middle, inner containers respectively to see how the options work.
FileList - Web APIs
using an input element: // fileinput is an html input element: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; var file; // loop through files for (var i = 0; i < files.length; i++) { // get item file = files.item(i); //or file = files[i];
alert(file.name); } here is a complete example.
...les to be selected--> <input id="myfiles" multiple type="file"> </body> <script> var pullfiles=function(){ // love the query selector var fileinput = document.queryselector("#myfiles"); var files = fileinput.files; // cache files.length var fl = files.length; var i = 0; while ( i < fl) { // localize file var in the loop var file = files[i];
alert(file.name); i++; } } // set the input element onchange to call pullfiles document.queryselector("#myfiles").onchange=pullfiles; //a.t </script> </html> specifications specification status comment file apithe definition of 'filelist' in that specification.
Using the Geolocation API - Web APIs
a call to watchposition could look like: function success(position) { dosomething(position.coords.latitude, position.coords.longitude); } function error() {
alert('sorry, no position available.'); } const options = { enablehighaccuracy: true, maximumage: 30000, timeout: 27000 }; const watchid = navigator.geolocation.watchposition(success, error, options); describing a position the user's location is described using a geolocationposition object instance, which itself contains a geolocationcoordinates object instance.
... you could use it like so: function errorcallback(error) {
alert(`error(${error.code}): ${error.message}`); }; examples in the following example the geolocation api is used to retrieve the user's latitude and longitude.
GlobalEventHandlers.onplay - Web APIs
example <p>this example demonstrates how to assign an "onplay" event to a video element.</p> <video controls onplay="
alertplay()"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> your browser does not support html5 video.
... </video> <p>video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">big buck bunny</a>.</p> <script> function
alertplay() {
alert("the video has started to play."); } </script> specification specification status comment html living standardthe definition of 'onplay' in that specification.
msAudioCategory - Web APIs
msaudiocategory specifies the purpose of the audio or video media, such as background audio or
alerts.
...
alert looping or longer running
alert sounds: alarms ring tones ringing notification sounds that need to attenuate existing audio no backgroundcapablemedia for audio that needs to continue playing in the background.
Ajax navigation example - Web APIs
el="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(); } function ajaxerror () {
alert("unknown error."); } function ajaxload () { var vmsg, nstatus = this.status; switch (nstatus) { case 200: vmsg = json.parse(this.responsetext); document.title = opageinfo.title = vmsg.page; document.getelementbyid(stargetid).innerhtml = vmsg.content; if (bupdateurl) { history.p...
... successful 2xx console.log("successful code " + vmsg); break; case 3: // redirection 3xx console.log("redirection code " + vmsg); break; */ case 4: /* client error 4xx */
alert("client error #" + vmsg); break; case 5: /* server error 5xx */
alert("server error #" + vmsg); break; default: /* unknown status */ ajaxerror(); } } closereq(); } function f...
History API - Web APIs
window.onpopstate = function(event) {
alert(`location: ${document.location}, state: ${json.stringify(event.state)}`) } history.pushstate({page: 1}, "title 1", "?page=1") history.pushstate({page: 2}, "title 2", "?page=2") history.replacestate({page: 3}, "title 3", "?page=3") history.back() //
alerts "location: http://example.com/example.html?page=1, state: {"page":1}" history.back() //
alerts "location: http://example.com/example.html, sta...
...te: null" history.go(2) //
alerts "location: http://example.com/example.html?page=3, state: {"page":3}" specifications specification status comment html living standardthe definition of 'history' in that specification.
Index - Web APIs
the storage api gives sites' code the ability to find out how much space they can use, how much they are already using, and even control whether or not they need to be
alerted before the user agent disposes of site data in order to make room for other things.
... 4893 window.
alert() api, dom, method, reference, window,
alert the window.
alert() method displays an
alert dialog with the optional specified content and an ok button.
Microdata DOM API - Web APIs
code example this sample gets the first item of type "http://example.net/user" and then pops up an
alert using the "name" property from that item.
... var user = document.getitems('http://example.net/user')[0];
alert('hello ' + user.properties['name'][0].itemvalue + '!'); the htmlpropertiescollection object, when indexed by name in this way, actually returns a propertynodelist object with all the matching properties.
PopStateEvent - Web APIs
the popstate event as an example, a page at http://example.com/example.html running the following code will generate
alerts as indicated: window.onpopstate = function(event) {
alert("location: " + document.location + ", state: " + json.stringify(event.state)); }; history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.back(); //
alerts "location: http://example.com/example.html?page=1, state: {"page":1}"...
... history.back(); //
alerts "location: http://example.com/example.html, state: null history.go(2); //
alerts "location: http://example.com/example.html?page=3, state: {"page":3} note that even though the original history entry (for http://example.com/example.html) has no state object associated with it, a popstate event is still fired when we activate that entry after the second call to history.back().
RTCDataChannel.onerror - Web APIs
the error handler passes information about the error to a ui library's
alert box function to present an error message to the user.
... let pc = new rtcpeerconnection(); let dc = pc.createdatachannel("playercontrol"); dc.onerror = function(event) { myuilibrary.do
alertbox({ 'network error', //
alert title 'the error "' + event.message + '" occurred while handling player control network messages.', event.filename, event.lineno, event.colno }); } /* ...
RTCDtlsTransport.state - Web APIs
closed the transport has been closed intentionally as the result of receipt of a close_notify
alert, or calling rtcpeerconnection.close().
... failed the transport has failed as the result of an error (such as receipt of an error
alert or failure to validate the remote fingerprint).
RTCPeerConnection.currentLocalDescription - Web APIs
example this example looks at the currentlocaldescription and displays an
alert containing the rtcsessiondescription object's type and sdp fields.
... var pc = new rtcpeerconnection(); … var sd = pc.currentlocaldescription; if (sd) {
alert("local session: type='" + sd.type + "'; sdp description='" + sd.sdp + "'"); } else {
alert("no local session yet."); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.currentlocaldescription' in that specification.
RTCPeerConnection.currentRemoteDescription - Web APIs
example this example looks at the currentremotedescription and displays an
alert containing the rtcsessiondescription object's type and sdp fields.
... var pc = new rtcpeerconnection(); … var sd = pc.currentremotedescription; if (sd) {
alert("local session: type='" + sd.type + "'; sdp description='" + sd.sdp + "'"); } else {
alert("no local session yet."); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.currentremotedescription' in that specification.
RTCPeerConnection.localDescription - Web APIs
example this example looks at the localdescription and displays an
alert containing the rtcsessiondescription object's type and sdp fields.
... var pc = new rtcpeerconnection(); … var sd = pc.localdescription; if (sd) {
alert("local session: type='" + sd.type + "'; sdp description='" + sd.sdp + "'"); } else {
alert("no local session yet."); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.localdescription' in that specification.
RTCPeerConnection.remoteDescription - Web APIs
example this example looks at the remotedescription and displays an
alert containing the rtcsessiondescription object's type and sdp fields.
... var pc = new rtcpeerconnection(); … var sd = pc.remotedescription; if (sd) {
alert("remote session: type='" + sd.type + "'; sdp description='" + sd.sdp + "'"); } else {
alert("no remote session yet."); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.remotedescription' in that specification.
Clearing by clicking - Web APIs
// if failed,
alert user of failure.
... if (!gl) { gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) {
alert("failed to get webgl context.\n" + "your browser or device may not support webgl."); return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); } // get a random color value using a helper function.
Migrating from webkitAudioContext - Web APIs
n audio file over the network, and then decoded it using createbuffer(): var xhr = new xmlhttprequest(); xhr.open("get", "/path/to/audio.ogg", true); xhr.responsetype = "arraybuffer"; xhr.send(); xhr.onload = function() { var decodedbuffer = context.createbuffer(xhr.response, false); if (decodedbuffer) { // decoding was successful, do something useful with the audio buffer } else {
alert("decoding the audio buffer failed"); } }; converting this code to use decodeaudiodata() is relatively simple, as can be seen below: var xhr = new xmlhttprequest(); xhr.open("get", "/path/to/audio.ogg", true); xhr.responsetype = "arraybuffer"; xhr.send(); xhr.onload = function() { context.decodeaudiodata(xhr.response, function onsuccess(decodedbuffer) { // decoding was successful, do so...
...mething useful with the audio buffer }, function onfailure() {
alert("decoding the audio buffer failed"); }); }; note that the decodeaudiodata() method is asynchronous, which means that it will return immediately, and then when the decoding finishes, one of the success or failure callback functions will get called depending on whether the audio decoding was successful.
Window.confirm() - Web APIs
syntax result = window.confirm(message); parameters message a string you want to display in the
alert dialog.
... example if (window.confirm("do you really want to leave?")) { window.open("exit.html", "thanks for visiting!"); } produces: notes the following text is shared between this article, dom:window.prompt and dom:window.
alert dialog boxes are modal windows — they prevent the user from accessing the rest of the program's interface until the dialog box is closed.
Window.getSelection() - Web APIs
examples function foo() { var selobj = window.getselection();
alert(selobj); var selrange = selobj.getrangeat(0); // do stuff with the range } notes string representation of the selection object in javascript, when an object is passed to a function expecting a string (like window.
alert() or document.write()), the object's tostring() method is called and the returned value is passed to the function.
... in the above example, selobj.tostring() is automatically called when it is passed to window.
alert().
window.location - Web APIs
syntax var oldlocation = location; location = newlocation; examples basic example
alert(location); //
alerts "/docs/web/api/window/location" example #1: navigate to a new page whenever a new value is assigned to the location object, a document will be loaded using the url as if location.assign() had been called with the modified url.
...nt page from the server location.reload(true); example #3 consider the following example, which will reload the page by using the replace() method to insert the value of location.pathname into the hash: function reloadpagewithhash() { var initialpage = location.pathname; location.replace('http://example.com/#' + initialpage); } example #4: display the properties of the current url in an
alert dialog: function showloc() { var olocation = location, alog = ["property (typeof): value", "location (" + (typeof olocation) + "): " + olocation ]; for (var sprop in olocation){ alog.push(sprop + " (" + (typeof olocation[sprop]) + "): " + (olocation[sprop] || "n/a")); }
alert(alog.join("\n")); } // in html: <button onclick="showloc();">show location properties</button> example #5: s...
WindowEventHandlers.onpopstate - Web APIs
examples for example, a page at http://example.com/example.html running the following code will generate
alerts as indicated: window.onpopstate = function(event) {
alert("location: " + document.location + ", state: " + json.stringify(event.state)); }; history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.back(); //
alerts "location: http://example.com/example.html?page=1, state: {"page":1}"...
... history.back(); //
alerts "location: http://example.com/example.html, state: null history.go(2); //
alerts "location: http://example.com/example.html?page=3, state: {"page":3} note that even though the original history entry (for http://example.com/example.html) has no state object associated with it, a popstate event is still fired, when we activate that entry after the second call to history.back().
WindowOrWorkerGlobalScope.clearTimeout() - Web APIs
if you click the page multiple times in one second, the
alert only appears once.
... var alarm = { remind: function(amessage) {
alert(amessage); this.timeoutid = undefined; }, setup: function() { if (typeof this.timeoutid === 'number') { this.cancel(); } this.timeoutid = window.settimeout(function(msg) { this.remind(msg); }.bind(this), 1000, 'wake up!'); }, cancel: function() { window.cleartimeout(this.timeoutid); } }; window.onclick = function() { alarm.setup(); }; notes passing an invalid id to cleartimeout() silently does nothing; no exception is thrown.
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
by setting the mozbackgroundrequest property of the request object and modifying the example appropriately, you can create your own
alert dialog to handle ssl exceptions in your firefox extension or xulrunner application.
...r = " + cert.issuerorganization + "\n"); dump("\torganisation = " + cert.organization + "\n"); dump("\tsha1 fingerprint = " + cert.sha1fingerprint + "\n"); var validity = cert.validity.queryinterface(ci.nsix509certvalidity); dump("\tvalid from " + validity.notbeforegmt + "\n"); dump("\tvalid until " + validity.notaftergmt + "\n"); } } catch(err) {
alert(err); } } function test(url) { var req = cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(); req.open('get', url, true); req.addeventlistener("error", function(e) { var error = createtcperrorfromfailedxhr(req); dumpsecurityinfo(req, error); }, false); req.onload = function(e) { dumpsecurityinfo(req); }; req.send(); } then test("https://ad...
Using the status role - Accessibility
the status role is a type of live region and a container whose content is advisory information for the user that is not important enough to justify an
alert, and is often presented as a status bar.
... <p role="status">your changes were automatically saved.</p> working examples: notes aria attributes used status related aria techniques
alert role live region roles live region attributes compatibility the paciello group published some data on compatibility via their 2014 blog post: screen reader support for aria live regions tbd: add updated support information for common ua and at product combinations additional resources previous recommendations from wai-aria 1.0 (2014) for the status role ...
ARIA: grid role - Accessibility
break; case "pageup": var i = 0; var result; do { result = moveto(i, event.target.dataset.col); i++; } while (result == false); break; case "pagedown": var i = maxrow; var result; do { result = moveto(i, event.target.dataset.col); i--; } while (result == false); break; case "enter":
alert(event.target.textcontent); break; } event.preventdefault(); }); html <table role="grid" aria-labelledby="calendarheader"> <caption id="calendarheader">september 2018</caption> <thead role="rowgroup"> <tr role="row"> <td></td> <th role="columnheader" aria-label="sunday">s</th> <th role="columnheader" aria-label="monday">m</th> <th role="columnheader"...
... break; case "pageup": var i = 0; var result; do { result = moveto(i, event.target.dataset.col); i++; } while (result == false); break; case "pagedown": var i = maxrow; var result; do { result = moveto(i, event.target.dataset.col); i--; } while (result == false); break; case "enter":
alert(event.target.textcontent); break; } event.preventdefault(); }); more examples data grid examples layout grids examples w3c/wai tutorial: tables accessibility concerns even if the keyboard use is properly implemented, some users might not be aware that they have to use the arrow keys.
Text labels and names - Accessibility
a dialog box is generally denoted by an aria role="dialog" or role="
alertdialog"; you can use the aria-label or aria-labelledby attributes to provide a label.
...you can change your details at any time in the user account section.</p> <button>close</button> </div> see also role="dialog" role="
alertdialog" aria-label aria-labelledby wai-aria: dialog role dialog authoring practices documents must have a title it is important on each html document to include a <title> that describes the page's purpose.
Cubic Bezier Generator - CSS: Cascading Style Sheets
tbyid('bezier'); // make sure we don't execute when canvas isn't supported if (canvas.getcontext) { // use getcontext to use the canvas for drawing var ctx = canvas.getcontext('2d'); scaling = math.min(canvas.height - rulers - margin, canvas.width - rulers - margin); canvas.onmousedown = mousedown; canvas.onmouseup = mouseup; } else {
alert('you need safari or firefox 1.5+ to see this demo.'); } } function cx(x) { return x * scaling + rulers; } function reversex(x) { return (x - rulers) / scaling; } function lx(x) { //used when drawing vertical lines to prevent subpixel blur var result = cx(x); return math.round(result) == result ?
...(); ctx.strokestyle = "black"; ctx.fillstyle = "black"; ctx.arc(cx(1), cy(1), radius, 0, 2 * math.pi); ctx.fill(); ctx.stroke(); ctx.closepath(); // draw the p0(0,0) point ctx.beginpath(); ctx.arc(cx(0), cy(0), radius, 0, 2 * math.pi); ctx.fill(); ctx.stroke(); ctx.closepath(); } else {
alert('you need safari or firefox 1.5+ to see this demo.'); } } function mousedown(e) { var canvas = document.getelementbyid('bezier'); var x1 = cx(document.getelementbyid('x1').value); var y1 = cy(document.getelementbyid('y1').value); var x = e.pagex - canvas.offsetleft; var y = e.pagey - canvas.offsettop; var output = document.getelementbyid('output'); output.valu...
Audio and Video Delivery - Developer guides
request.responsetype = "arraybuffer"; request.onload = function() { context.decodeaudiodata(request.response, function(buffer) { source = context.createbuffersource(); source.buffer = buffer; source.connect(context.destination); // auto play source.start(0); // start was previously noteon }); }; request.send(); } catch(e) {
alert('web audio api not supported'); } in this example we retrieve an mp3 file via xhr, load it into a source and play it (try it for yourself).
...o id="webcam" width="480" height="360"></video> next, if supported connect the webcam source to the video element: if (navigator.mediadevices) { navigator.mediadevices.getusermedia({ video: true, audio: false }) .then(function onsuccess(stream) { var video = document.getelementbyid('webcam'); video.autoplay = true; video.srcobject = stream; }) .catch(function onerror() {
alert('there has been a problem retreiving the streams - are you running on file:/// or did you disallow access?'); }); } else {
alert('getusermedia is not supported in this browser.'); } to find out more, read our mediadevices.getusermedia page.
Overview of events and handlers - Developer guides
"eventprototype" : "objectprototype";
alert("we got a click event at " + ev.timestamp + " with an argument object derived from: " + objkind ); }; and second register our function with the the button object, either on the scripting side using the dom (document object model) representation of the html page: var buttondomelement = document.queryselector('#buttonone'); buttondomelement.addeventlistener('click', example_click_handler); or wi...
...the function, in turn, would perform whatever action was chosen by the programmer, in this case to open an html
alert dialog.
Writing forward-compatible websites - Developer guides
for example, if you have this markup: <div onclick="
alert(ownerdocument)">click me</div> then clicking on the text
alerts the ownerdocument of the div.
... to avoid this, fully qualify global variable access using "window.", like so: <script> function localname() {
alert('function localname 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.
Proxy Auto-Configuration (PAC) file - HTTP
ile: hostname based conditions isplainhostname() dnsdomainis() localhostordomainis() isresolvable() isinnet() related utility functions dnsresolve() convert_addr() myipaddress() dnsdomainlevels() url/hostname based conditions shexpmatch() time based conditions weekdayrange() daterange() timerange() logging utility
alert() there was one associative array (object) already defined, because at the time javascript code was unable to define it by itself: proxyconfig.bindings note: pactester (part of the pacparser package) was used to test the following syntax examples.
... examples: function
alert_eval(str) {
alert(str + ' is ' + eval(str)) } function findproxyforurl(url, host) {
alert_eval('isinnet(host, "63.245.213.24", "255.255.255.255")') // "pac-
alert: isinnet(host, "63.245.213.24", "255.255.255.255") is true" } dnsresolve() dnsresolve(host) parameters host hostname to resolve.
Control flow and error handling - JavaScript
otherwise, it displays an
alert and returns false.
... function checkdata() { if (document.form1.threechar.value.length == 3) { return true; } else {
alert( 'enter exactly three characters.
Introduction - JavaScript
for the sake of simplicity, it can be imagined that every time something is entered into the console, it is actually surrounded by console.log around eval, like so: function greetme(yourname) {
alert("hello " + yourname) } console.log(eval('3 + 5')) multi-line input in the web console the single-line input mode of the web console is great for quick testing of javascript expressions, but although you can execute multiple lines, it's not very convenient for that.
... hello world to get started with writing javascript, open the web console in multi-line mode, and write your first "hello world" javascript code: (function(){ "use strict"; /* start of your code */ function greetme(yourname) {
alert('hello ' + yourname); } greetme('world'); /* end of your code */ })(); press cmd+enter or ctrl+enter (or click the run button) to watch it unfold in your browser!
arguments.callee - JavaScript
neral case (you can achieve it in select cases through tracing, etc., but even the best code is suboptimal due to checks that would not otherwise be necessary.) the other major issue is that the recursive call will get a different this value, e.g.: var global = this; var sillyfunction = function(recursed) { if (!recursed) { return arguments.callee(true); } if (this !== global) {
alert('this is: ' + this); } else {
alert('this is the global'); } } sillyfunction(); ecmascript 3 resolved these issues by allowing named function expressions.
...(n <= 1) return 1; return n * arguments.callee(n - 1); }; } var result = create()(5); // returns 120 (5 * 4 * 3 * 2 * 1) a use of arguments.callee with no good alternative however, in a case like the following, there are not alternatives to arguments.callee, so its deprecation could be a bug (see bug 725398): function createperson(sidentity) { var operson = new function('
alert(arguments.callee.identity);'); operson.identity = sidentity; return operson; } var john = createperson('john smith'); john(); specifications specification ecmascript (ecma-262)the definition of 'arguments exotic objects' in that specification.
this - JavaScript
= document.getelementsbytagname('*'); // add bluify as a click listener so when the // element is clicked on, it turns blue for (var i = 0; i < elements.length; i++) { elements[i].addeventlistener('click', bluify, false); } in an inline event handler when the code is called from an inline on-event handler, its this is set to the dom element on which the listener is placed: <button onclick="
alert(this.tagname.tolowercase());"> show this </button> the above
alert shows button.
... note however that only the outer code has its this set this way: <button onclick="
alert((function() { return this; })());"> show inner this </button> in this case, the inner function's this isn't set so it returns the global/window object (i.e.
Navigator.mozNotification - Archive of obsolete content
mobile only in gecko 2.0 available only in firefox mobile as of gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) provides support for creating notification objects, which are used to display desktop notification
alerts to the user.
Communicating With Other Scripts - Archive of obsolete content
finally, "listen.html" uses window.addeventlistener() to listen for messages from the content script: <!doctype html> <html> <head></head> <body> <script> window.addeventlistener('message', function(event) { window.
alert(event.data); // message from content script }, false); </script> </body> </html> messaging from page script to content script sending messages from the page script to the content script is just the same, but in reverse.
self - Archive of obsolete content
if you do this, the data is available to the content script in the options property of self: // main.js const tabs = require("sdk/tabs"); tabs.open({ url: "./page.html", onready: function(tab) { tab.attach({ contentscriptfile: "./content-script.js", contentscriptoptions: { a: "blah" } }); } }); // content-script.js
alert(self.options.a); port you can use port to receive messages from, and send messages to, the main add-on code.
Two Types of Scripts - Archive of obsolete content
this enables you to call functions like: window.
alert("hello there"); in an add-on's main scripts you can't do that, because the add-on code does not execute in the context of a page, and the dom is therefore not available.
tabs - Archive of obsolete content
for example: // main.js const tabs = require("sdk/tabs"); tabs.open({ url: "./page.html", onready: function(tab) { tab.attach({ contentscriptfile: "./content-script.js", contentscriptoptions: { a: "blah" } }); } }); the values are accessible to content scripts via the self.options property: // content-script.js
alert(self.options.a); onmessage function a function called when the content worker receives a message from content scripts.
widget - Archive of obsolete content
var widget = widgets.widget({ id: "message-test", label: "bi-directional communication!", content: "<foo>bar</foo>", contentscriptwhen: "ready", contentscript: 'self.on("message", function(message) {' + '
alert("got message: " + message);' + '});' + 'self.postmessage("ready");', onmessage: function(message) { if (message == "ready") widget.postmessage("me too"); } }); globals constructors widget(options) creates a new widget.
core/promise - Archive of obsolete content
in such cases it's useful to put a timer on such tasks: function timeout(promise, ms) { let deferred = defer(); promise.then(deferred.resolve, deferred.reject); delay(ms, 'timeout').then(deferred.reject); return deferred.promise; } var tweets = readasync(url); timeout(tweets, 20).then(function(data) { ui.display(data); }, function() {
alert('network is being too slow, try again later'); }); alternative promise apis there may be cases where you will want to provide more than just then method on your promises.
platform/xpcom - Archive of obsolete content
to register a service for a component, construct a service, giving it: a constructor for the object implementing the service a contract id and/or a class id var service = service({ contract: contractid, component:
alertservice }); after this, xpcom users can access the service implementation by supplying the contract id: var
alertservice = cc[contractid].getservice(ci.nsi
alertsservice);
alertservice.show
alertnotification(...); the service interface is identical to the factory interface, so refer to the factory interface documentation for details.
Storing annotations - Archive of obsolete content
add the following to your add-on's main function: simplestorage.on("overquota", function () { notifications.notify({ title: 'storage space exceeded', text: 'removing recent annotations'}); while (simplestorage.quotausage > 1) simplestorage.storage.annotations.pop(); }); because we use a notification to
alert the user, we need to import the notifications module: var notifications = require("sdk/notifications"); (it should be obvious that this is an incredibly unhelpful way to deal with the problem.
Canvas code snippets - Archive of obsolete content
= new image(); image.src = url; return new promise((accept, reject) => { image.onload = accept; image.onerror = reject; }).then(accept => { canvas.width = this.width; canvas.height = this.height; ctxt.clearrect(0, 0, this.width, this.height); ctxt.drawimage(this, 0, 0); accept(canvas.todataurl()); }); } usage: loadimagefile('myimage.jpg').then(string64 => {
alert(string64); }); if you want to get instead the base64 content of a local file using the file <input> element, you must use the filereader object.
JS XPCOM - Archive of obsolete content
determining which interfaces an xpcom component supports to display a list of all interfaces that an xpcom component supports, do the following: // |c| is the xpcom component instance for each (i in components.interfaces) { if (c instanceof i) {
alert(i); } } in this context, instanceof is the same as queryinterface except that it returns false instead of throwing an exception when |c| doesn't support interface |i|.
Progress Listeners - Archive of obsolete content
alert(auri.spec); this.oldurl = auri.spec; }, // nsiwebprogresslistener queryinterface: xpcomutils.generateqi(["nsiwebprogresslistener", "nsisupportsweakreference"]), onlocationchange: function(aprogress, arequest, auri) { this.processnewurl(auri); }, onstatechange: function() {}, onprogresschange: function() {}, ...
xml:base support in old browsers - Archive of obsolete content
txt' xmlbase = getxmlbase (thisitem); if (!xmlbase.match(/\/$/) && !xlink.match(/\/$/)) { // if no preceding slash on xlink or trailing slash on xml:base, add one in between xmlbase += '/'; } else if (xmlbase.match(/\/$/) && xlink.match(/\/$/)) { xmlbase = xmlbase.substring(0, xmlbase.length-2); // strip off last slash to join with xlink path with slash } //
alert(xmlbase + '::' + xlink); } var link = xmlbase + xlink; if (!link.match(scheme)) { // if there is no domain, we'll need to use the current domain var loc = window.location; if (link.indexof('/') === 0 ) { // if link is an absolute url, it should be from the host only link = loc.protocol + '//' + loc.host + link; } else { // if link is relative, it should be from full path, minus the...
getAttributeNS - Archive of obsolete content
s2[i].nodename.match(xmlnsprefix) && attrs2[i].nodevalue === ns ) { // e.g., 'xmlns:xlink' and 'http://www.w3.org/1999/xlink' return attrs[j].nodevalue; } } thisitem = thisitem.parentnode; } } } return ''; // if not found (some implementations return 'null' but this is not standard) }
alert(getattributenswrapper (someelement, 'http://www.w3.org/1999/xlink', 'href')); // gets xlink:href, xl:href, etc.
Code snippets - Archive of obsolete content
xml file i/o code used to read, write and process files drag & drop code used to setup and handle drag and drop events dialogs code used to display and process dialog boxes
alerts and notifications modal and non-modal ways to notify users preferences code used to read, write, and modify preferences js xpcom 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.
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
listing 3: an example of a class definition in javascript function myclass() { } myclass.prototype = { property1 : true, property2 : 'string', method : function() {
alert('hello, world!'); } }; var obj = new myclass(); obj.method(); dom: an api for manipulating xml documents the document object model (dom) is a technical standard promulgated by the w3c, and is an api for manipulating the contents of xml documents as objects.
Custom XUL Elements with XBL - Archive of obsolete content
we have a "click" handler that displays the greeting when the "person" element is clicked: <handler phase="bubbling" event="click"><![cdata[ window.
alert(this.greeting); ]]></handler> handlers are not necessary all that often, since in most cases you'll need the events to only apply to a part of the binding, not the whole thing.
XUL School Tutorial - Archive of obsolete content
introduction introduction getting started with firefox extensions the essentials of an extension setting up a development environment javascript object management basic functionality adding menus and submenus adding toolbars and toolbar buttons adding events and commands adding windows and dialogs adding sidebars user notifications and
alerts intermediate functionality intercepting page loads connecting to remote content handling preferences local storage advanced topics the box model xpcom objects observer notifications custom xul elements with xbl mozilla documentation roadmap useful mozilla community sites appendices appendix a: add-on performance appendix b: install and uninstall...
Tabbed browser - Archive of obsolete content
// wrong way (the page hasn't finished loading yet) var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/"));
alert(newtabbrowser.contentdocument.body.innerhtml); // better way var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); newtabbrowser.addeventlistener("load", function () { newtabbrowser.contentdocument.body.innerhtml = "<div>hello world</div>"; }, true); (the event target in the onload handler will be a 'tab' xul element).
Source code directories overview - Archive of obsolete content
components contains the
alerts, autocomplete, command line interface, console, cookies, download manager, filepicker, history, password manager, typeaheadfind, view source, etc.
Creating a Microsummary - Archive of obsolete content
we might do so via the following code: <script> const warning = "sorry, you need a microsummary-enabled browser like firefox 2.0 to install and use microsummary generators."; function addgenerator(url) { if (typeof window.sidebar == "object" && typeof window.sidebar.addmicrosummarygenerator == "function") window.sidebar.addmicrosummarygenerator(url); else
alert(warning); } </script> <button onclick="addgenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">install the spread firefox home page microsummary!</button> note that due to bug 341283, addmicrosummarygenerator() will not accept a relative url.
UI - Archive of obsolete content
ated vertical column toolbar including entries and access elements into the toolbar panel a movable, expandable, and custom styled content element to display jetpack content tabs adding events and interacting with browser tabs and their contained documents statusbar low-level functions and basic calls notifications a system for
alerting users via provided ui mechanisms selection interacting with user-selected content window mitigates and eases interactions between different browser windows ...
Mozilla Application Framework in Detail - Archive of obsolete content
use the mozilla browser: // register chrome registerchrome(package | delayed_chrome, getfolder("chrome","xmlterm.jar"), "content/xmlterm/"); registerchrome(skin | delayed_chrome, getfolder("chrome","xmlterm.jar"), "skin/modern/xmlterm/"); registerchrome(locale | delayed_chrome, getfolder("chrome","xmlterm.jar"), "locale/xmlterm/"); if (getlasterror() == success) performinstall(); else {
alert("error detected: "+getlasterror()); cancelinstall(); } other features a resource description framework (rdf) parser with support for creating rdf graphs programmatically or by parsing files, compositing multiple sources into a single rdf graph, querying and manipulating graphs, and populating xul widgets (trees, menus, etc.) with graph data; an xslt/xpath processor; scalable vector graphic...
Example Sticky Notes - Archive of obsolete content
--> <handler event="click"><![cdata[ if (this.priority == 'normal') { this.priority = 'high'; this.setborder('2px solid red'); } else { this.priority = 'normal'; this.setborder('2px solid blue'); } var str = this.innertext + '\n\n'; str+= ('on ' + event.type + ' priority set to: ' + this.priority); window.
alert(str); ]]></handler> <handler event="mouseover"><![cdata[ this.$bg = this.style.backgroundcolor || '#ffff00'; this.style.backgroundcolor = '#ffcc00'; ]]></handler> <handler event="mouseout"><![cdata[ this.style.backgroundcolor = this.$bg; ]]></handler> </handlers> </binding> </bindings> notes.css .sticker { position: relative; left: 0px; right: 0px; float: left; clear: none;...
XPInstall API reference - Archive of obsolete content
objects install properties methods adddirectory addfile
alert cancelinstall confirm deleteregisteredfile execute gestalt getcomponentfolder getfolder getlasterror getwinprofile getwinregistry initinstall loadresources logcomment patch performinstall refreshplugins registerchrome reseterror setpackagefolder ...
A XUL Bestiary - Archive of obsolete content
to create an event handler, simple place the code you want executed within the appropriate event listener: <menuitem value="click me" onclick="
alert('event handled.')" /> it follows from the description above that event handlers can be written for events that are fired somewhere below them in the hierarchy.
command - Archive of obsolete content
example <command id="cmd_openhelp" oncommand="
alert('help');"/> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> see also command element, oncommand and commandset ...
onchange - Archive of obsolete content
ect event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */
alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> ...
oncommand - Archive of obsolete content
example 1: in-line code <button label="click me" oncommand="
alert('hi')"/> example 2: function with source argument <button label="click me" oncommand="dosomeprocessing(event.target)"/> and here is the definition of the function: function dosomeprocessing(source) {
alert("source: " + source); return true; } see also command element ...
Accessing Files - Archive of obsolete content
var file = io.getfile("profile", "sample.txt"); if (file.exists())
alert("the file is there!"); else
alert("file not found!"); here, the same file is retrieved and a further check is performed to see whether the file is present or not.
Working With Directories - Archive of obsolete content
var dir = io.getfile("desktop", "myfiles"); dir.append("pictures"); if (dir.exists() && dir.isdirectory())
alert("this is a directory"); creating directories you can create a new directory by using nsifile.create().
Writing to Files - Archive of obsolete content
try { var file = io.getfile("desktop", "myinfo.txt"); var stream = io.newoutputstream(file, "text"); } catch (ex) {
alert(ex); } this example retrieves a file object on the desktop called 'myinfo.txt' using nsiscriptableio.getfile().
Introduction to XUL - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?> <!doctype window> <window id="main-window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu label="file"> <menupopup> <menuitem label="hello world!" onclick="
alert('hello world!\n');"/> </menupopup> </menu> </menubar> <html:iframe id="content-frame" src="contentframe.html" flex="100%"/> </window> the beginning of this example, down through the window tag, is the standard preamble.
appendNotification - Archive of obsolete content
.getservice(components.interfaces.nsiwindowmediator) .getmostrecentwindow("navigator:browser"); } if (typeof gbrowser === "undefined") { //if there is no gbrowser defined, get it var gbrowser = window.gbrowser; } function testnotificationbutton1callback(thenotification, buttoninfo, eventtarget) { window.
alert("button 1 pressed"); //prevent notification from closing: return true; }; function testnotificationbutton2callback(thenotification, buttoninfo, eventtarget) { window.
alert("button 2 pressed"); //do not prevent notification from closing: }; function testnotificationcallback(reason) { window.
alert("reason is: " + reason); }; let not...
Methods - Archive of obsolete content
m getsession getsessionbyname getsessionresultat getsessionstatusat getsessionvalueat getstring goback gobackgroup godown goforward goforwardgroup gohome goto gotoindex goup hidepopup increase increasepage insertitem insertitemat invertselection loadgroup loadonetab loadtabs loaduri loaduriwithflags makeeditable movebyoffset moveto moveto
alertposition onsearchcomplete ontextentered ontextreverted openpopup openpopupatscreen opensubdialog openwindow preferenceforelement reload reloadalltabs reloadtab reloadwithflags removeallitems removeallnotifications removealltabsbut removecurrentnotification removecurrenttab removeitemat removeitemfromselection removenotification removeprogresslistener rem...
MenuItems - Archive of obsolete content
<command id="cmd_delete" disabled="true" oncommand="
alert('deleted!');"/> <menuitem label="delete" accesskey="f" command="cmd_deleted"/> as the menuitem is attached to the command, it's automatically disabled when the command is disabled.
accessibleType - Archive of obsolete content
possible values are: constant value xul
alert 1001 xulbutton 1002 xulcheckbox 1003 xulcolorpicker 1004 xulcolorpickertile 1005 xulcombobox 1006 xuldropmarker 1007 xulgroupbox 1008 xulimage 1009 xullink 100a xullistbox 100b xullistcell 1026 x...
currentIndex - Archive of obsolete content
<script language ="javascript"> function treerowclicked(){ var tree = document.getelementbyid("my-tree"); var selection = tree.view.selection; var celltext = tree.view.getcelltext(tree.currentindex, tree.columns.getcolumnat(0));
alert(celltext); } </script> <tree id="my-tree" seltype="single" onselect="treerowclicked()"> <treecols> <treecol label="title" flex="1"/><treecol label="url" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </treeitem> <treeitem> <treerow> <tr...
Style classes - Archive of obsolete content
« xul reference home
alert-icon chromeclass-toolbar error-icon groove header indent listcell-iconic listitem-iconic menuitem-iconic menuitem-non-iconic message-icon monospace plain question-icon small-margin statusbarpanel-iconic statusbarpanel-iconic-text statusbarpanel-menu-iconic text-link thin tree-splitter treecol-image ...
Template Logging - Archive of obsolete content
for example: if (root.builder.datasource instanceof xmldocument)
alert("xml datasource loaded ok"); be careful, as the datasource will only be set once the document has finished loading and has been parsed, so don't check this property too early.
textbox (Toolkit autocomplete) - Archive of obsolete content
ect event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */
alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> oninput type: script code this event is sent when a user enters text in a textbox.
Textbox (XPFE autocomplete) - Archive of obsolete content
ect event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */
alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> onerrorcommand type: script code this event handler is called when an error occurs when selecting a result from the popup.
Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
<handlers> <handler event="click" button="0" action="
alert('left button pressed');"/> <handler event="mouseup" button="1" action="
alert('middle button pressed')"/> <handler event="click" button="2" action="
alert('right button pressed');"/> </handlers> handling key events for key events, you can use a number of attributes similar to those for the key element to match a specific key and match only when certain modifer keys are pressed.
Creating Dialogs - Archive of obsolete content
example dialog source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" ondialogaccept="return dook();" ondialogcancel="return docancel();"> <script> function dook(){
alert("you pressed ok!"); return true; } function docancel(){
alert("you pressed cancel!"); return true; } </script> <description value="select a button"/> </dialog> you may place any elements that you wish in a dialog.
Keyboard Shortcuts - Archive of obsolete content
example 2 : source view <keyset> <key id="paste-key" modifiers="accel" key="v" oncommand="
alert('paste invoked')"/> </keyset> <menubar id="sample-menubar"> <menu id="edit-menu" label="edit" accesskey="e"> <menupopup id="edit-popup"> <menuitem id="paste-command" accesskey="p" key="paste-key" label="paste" oncommand="
alert('paste invoked')"/> </menupopup> </menu> </menubar> the menuitem's key attribute, which here is paste-key is equal to the id of the d...
Modifying a XUL Interface - Archive of obsolete content
you can also retrieve the current label or value using these properties, as in the following example: example 5 : source view <button label="hello" oncommand="
alert(this.label);"/> toggling a checkbox checkboxes have a checked property which may be used to check or uncheck the checkbox.
Using nsIXULAppInfo - Archive of obsolete content
s.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo).id; } else { try { id = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefbranch) .getcharpref("app.id"); } catch(e) { // very old version dump(e); } } return id; }
alert(getappid()); see also mxr: nsixulappinfo.idl ...
button - Archive of obsolete content
attributes accesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, icon, image, label, open, orient, tabindex, type properties accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <button label="press me" oncommand="
alert('you pressed me!');"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
colorpicker - Archive of obsolete content
ect event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */
alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> preference type: id connects the element to a corresponding preference.
command - Archive of obsolete content
see also: command attribute, commandset element attributes disabled, label, oncommand,reserved examples the following code will send a paste command (cmd_paste) to the currently focused element: // first include chrome://global/content/globaloverlay.js godocommand("cmd_paste"); example with two buttons <commandset><command id="cmd_openhelp" oncommand="
alert('help');"/></commandset> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> attributes disabled type: boolean indicates whether the element is disabled or not.
commandset - Archive of obsolete content
attributes commandupdater, events, oncommandupdate, targets example <commandset> <command id="cmd_open" oncommand="
alert('open!');"/> <command id="cmd_help" oncommand="
alert('help!');"/> </commandset> attributes commandupdater type: boolean if true, the commandset is used for updating commands.
preference - Archive of obsolete content
ect event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */
alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> readonly type: boolean if set to true, then the user cannot change the value of the element.
splitter - Archive of obsolete content
the vbox is used to hold the .png image that a user clicks on to resize the search bar.--> <splitter tooltiptext="resize the search box" oncommand="
alert('the splitter was dragged')"> <vbox id="example_vbox" /> </splitter> attributes collapse type: one of the values below determines which side of the splitter is collapsed when its grippy is clicked.
tree - Archive of obsolete content
{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 checkbox of the corresponding row.
window - Archive of obsolete content
/> <radiogroup> <vbox> <hbox> <label control="your-fname" value="enter first name:"/> <textbox id="your-fname" value="johan"/> </hbox> <hbox> <label control="your-lname" value="enter last name:"/> <textbox id="your-lname" value="hernandez"/> </hbox> <hbox> <button oncommand="
alert('save!')"> <description>save</description> </button> </hbox> </vbox> </radiogroup> </groupbox> </vbox> </window> attributes accelerated type: booleanset this attribute to true to allow hardware layer managers to accelerate the window.
Building XULRunner with Python - Archive of obsolete content
for example def onload(): btntest = document.getelementbyid("btntest") btntest.addeventlistener('command', ontest, false) def ontest(): window.
alert('button activated') window.addeventlistener('load', onload, false) one possible gotcha is that the default python path used to find modules that areimported explicitly includes the xulrunner executable directory and the directory that is current when xulrunner launches.
Dialogs in XULRunner - Archive of obsolete content
l:open_and_save_dialogs */ var nsifilepicker = components.interfaces.nsifilepicker; var fp = components.classes["@mozilla.org/filepicker;1"].createinstance(nsifilepicker); fp.init(window, "open file", nsifilepicker.modeopen); fp.appendfilters(nsifilepicker.filtertext | nsifilepicker.filterall); var res = fp.show(); if (res == nsifilepicker.returnok) { var thefile = fp.file;
alert(thefile.leafname); // --- do something with the file here --- } } xul does not currently support any other common dialogs.
Extentsions FAQ - Archive of obsolete content
omponents.interfaces; var toplevelwindow = window.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsiwebnavigation) .queryinterface(ci.nsidocshelltreeitem) .roottreeitem .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsidomwindow) .queryinterface(ci.nsidomchromewindow); var sidebar = toplevelwindow.document.getelementbyid("sidebar");
alert(sidebar.contentdocument); is there anyone successfully using dojo in a firefox extension and where to fine sample codes?
NP_GetMIMEDescription - Archive of obsolete content
#include <gio/gio.h> const char* desc = g_content_type_get_description("audio/ogg"); javascript inside a web page, you can retrieve these informations with this code: var mimetype = navigator.mimetypes['application/basic-example-plugin']; if (mimetype) {
alert(mimetype.type + ':' + mimetype.suffixes + ':' + mimetype.description); } ...
Theme changes in Firefox 2 - Archive of obsolete content
te-types"] toolbarbutton[type="updates"] toolbarbutton[type="updates"] > .toolbarbutton-icon toolbarbutton[type="updates"][severity="0"] > .toolbarbutton-icon toolbarbutton[type="updates"][severity="1"] > .toolbarbutton-icon toolbarbutton[type="updates"][severity="2"] > .toolbarbutton-icon toolbarbutton[type="updates"][updatecount="0"] updateitem the following styles were also added: .
alertbox .throbber ...
Developing cross-browser and cross-platform pages - Archive of obsolete content
// bad sample if (navigator.appversion.charat(0) == "8") { if (navigator.appname == "netscape") { isns8 = true;
alert("netscape 8"); }; } else if (navigator.appversion.indexof("msie") != -1) { isie = true;
alert("internet explorer"); }; while this kind of checking in the above code can work in a crude sense, sharp readers may wonder what happens when internet explorer 8 is released or when an opera 8.x user visits the page or even when an user with any non-netscape browser starting with a "8" character in...
E4X for templating - Archive of obsolete content
xml') { 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 e4...
Accessing XML children - Archive of obsolete content
var a = <foo> some text <bar>not text</bar> more text </foo>; var list = a.text(); list.length(); // returns 2 list[0]; // returns " some text " list[1]; // returns " more text " you can similarly access comment nodes: xml.ignorecomments = false; var a = <foo> some <!-- abc --> text </foo>; var comments = a.comments();
alert(comments[0]); // returns <!-- abc --> the * selector will return all child nodes in an xml list.
Using JavaScript Generators in Firefox - Archive of obsolete content
grabevent; var event = yield; var db = event.target.result; if (db.version != "1.0") { db.setversion("1.0").onsuccess = grabevent; event = yield; var transaction = event.transaction; db.createobjectstore("stuff"); transaction.oncomplete = grabevent; yield; } db.transaction(["stuff"]).objectstore("stuff").get("foo").onsuccess = grabevent; event = yield;
alert("got result: " + event.target.result); // we're all done.
Examples - Archive of obsolete content
ang="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>.
XForms Custom Controls - Archive of obsolete content
the following list shows where the base bindings for our xforms controls are defined: xforms.xml - contains the base bindings for output, label, trigger, submit, case, message, hint, help,
alert, upload and repeat xforms controls.
Windows Media in Netscape - Archive of obsolete content
ect) { player = new geckoactivexobject("wmplayer.ocx.7"); } } catch(e) { // handle error -- no wmp 7 or 9 control // can use wmp 6 also if necessary, but this is legacy software nowadays } if (player) { // windows media player control exists and it is version 7 or 9 // can use wmp 7 or 9 api -- call versioninfo property, only in 7 and 9 var versionstring = player.versioninfo;
alert(versionstring); } only geckoactivexobject allows for the use of the windows media player classid as an argument.
Desktop gamepad controls - Game development
gamepadupdatehandler(); if(gamepadbuttonpressedhandler(0)) { playery -= 5; } else if(gamepadbuttonpressedhandler(1)) { playery += 5; } if(gamepadbuttonpressedhandler(2)) { playerx -= 5; } else if(gamepadbuttonpressedhandler(3)) { playerx += 5; } if(gamepadbuttonpressedhandler(11)) {
alert('boom!'); } // ...
Finishing up - Game development
so, in the draw() function replace the following three lines:
alert("game over"); document.location.reload(); clearinterval(interval); // needed for chrome to end game with this, we can add slightly more complex logic to it as given below: lives--; if(!lives) {
alert("game over"); document.location.reload(); clearinterval(interval); // needed for chrome to end game } else { x = canvas.width/2; y = canvas.height-30; dx = 2; dy = ...
2D maze game with device orientation - Game development
when the ball overlaps with the hole (instead of colliding), the finishlevel function is executed: finishlevel: function() { if(this.level >= this.maxlevels) { this.totaltimer += this.timer;
alert('congratulations, game completed!\ntotal time of play: '+this.totaltimer+' seconds!'); this.game.state.start('mainmenu'); } else {
alert('congratulations, level '+this.level+' completed!'); this.totaltimer += this.timer; this.timer = 0; this.level++; this.timertext.settext("time: "+this.timer); this.totaltimetext.settext("total time:...
Plug-in Development Overview - Gecko Plugin API Reference
following example, where a media player plug-in can be controlled with an advancetonextsong() method called inside the script element: <object id="myplugin" type="audio/wav" data="music.wav"> </object> <script type="application/javascript"> var theplugin = document.getelementbyid('myplugin'); if (theplugin && theplugin.advancetonextsong) theplugin.advancetonextsong(); else
alert("plugin not installed correctly"); </script> in the past, liveconnect and later xpconnect were used to make plug-ins scriptable.
jQuery - MDN Web Docs Glossary: Definitions of Web-related terms
$(document).ready(function(){
alert("hello world!"); $("#blackbox").hide(); }); the above code carries out the same function as the following code: window.onload = function() {
alert("hello world!"); document.getelementbyid("blackbox").style.display = "none"; }; or: window.addeventlistener("load", () => {
alert("hello world!"); document.getelementbyid("blackbox").style.display = "none"; }); learn more general knowledge jquery on wikipedia jquery o...
Advanced text formatting - Learn web development
you should try having a play with these (try grabbing a copy of our other-semantics.html sample file): <pre><code>var para = document.queryselector('p'); para.onclick = function() {
alert('owww, stop poking me!'); }</code></pre> <p>you shouldn't use presentational elements like <code><font></code> and <code><center></code>.</p> <p>in the above javascript example, <var>para</var> represents a paragraph element.</p> <p>select all the text with <kbd>ctrl</kbd>/<kbd>cmd</kbd> + <kbd>a</kbd>.</p> <pre>$ <kbd>ping mozilla.org</kbd> <samp>ping mozilla.org (63.245.215.20)...
Index - Learn web development
301 working with svelte stores beginner, frameworks, javascript, learn, stores, svelte, client-side in this article we added two new features: an
alert component and persisting todos to web storage.
Introduction to events - Learn web development
the above example invokes a function defined inside a <script> element on the same page, but you could also insert javascript directly inside the attribute, for example: <button onclick="
alert('hello, this is my old-fashioned event handler!');">press me</button> you can find html attribute equivalents for many of the event handler properties; however, you shouldn't use these — they are considered bad practice.
Solve common problems in your JavaScript code - Learn web development
for example: function myfunction() {
alert('this is my function.'); }; this code won't do anything unless you call it with 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.
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
lues: <script> export let bar = 'optional default initial value' // prop export let baz = undefined // prop export let format = n => n.tofixed(2) // prop // these are readonly export const thisis = 'readonly' // read-only export export function greet(name) { // read-only export
alert(`hello ${name}!`) } export const greet = (name) =>
alert(`hello ${name}!`) // read-only export </script> with this in mind, let's go back to our use case.
Creating reftest-based unit tests
the build process runs reftests in a profile that does not automatically grant elevated privileges: requesting them will cause the standard security
alert to display, which will likely cause the machine running the test to hang or timeout.
Browser API
mozbrowsershowmodalprompt sent when
alert(), confirm(), or prompt() are called within a browser <iframe>.
Embedding Tips
how do i display my own message,
alert and prompt boxes?
JavaScript Tips
var uniquename = { _privatemember: 3, publicmember: "a string", init: function() { this.dosomething(this.anothermember); }, dosomething: function(aparam) {
alert(aparam); } }; xpconnect don't use object methods and properties more than you have to.
Add-on Manager
for example, to take a look at the add-ons that were disabled at startup: components.utils.import("resource://gre/modules/addonmanager.jsm"); let addonids = addonmanager.getstartupchanges(addonmanager.startup_change_disabled); if (addonids.length > 0) { // addonids is now an array of the add-on ids that have been disabled
alert("note: " + addonids.length + " add-ons have been disabled."); } open add-on manager tab the add-on manager tab can be opened programatically with the function browseropenaddonsmgr which is available on chrome window of "navigator:browser" type.
Downloads.jsm
download => console.log("changed", download), ondownloadremoved: download => console.log("removed", download) }; yield list.addview(view); try { let download = yield downloads.createdownload({ source: "http://www.mozilla.org/", target: os.path.join(os.constants.path.tmpdir, "example-download.html"), }); list.add(download); try { download.start();
alert("now monitoring all downloads.
Sqlite.jsm
const conn = await sqlite.openconnection({path: "mydb.sqlite"}); const result = await conn.execute("select 1"); await conn.close();
alert("we are done!"); this isn't a terrific example because it doesn't include error handling.
XPCOMUtils.jsm
examples definelazygetter var myservices = {}; cu.import('resource://gre/modules/xpcomutils.jsm'); //set it up xpcomutils.definelazygetter(myservices, 'as', function () { return cc['@mozilla.org/
alerts-service;1'].getservice(ci.nsi
alertsservice) }); //when you need to use it myservices.as.show
alertnotification('chrome://branding/content/icon64.png', 'this was lazyloaded', 'this is a notification from myservices.as', null, null); ...
Extras
</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 whoisthere
alert(evt) {
alert("who is there?"); } function attachlistener(id) { document.getelementbyid(id).addeventlistener("mouseover", whoisthere
alert); } function init() { attachlistener("num"); attachlistener("denum"); } window.addeventlistener("load", init); ...
Mozilla Port Blocking
if a user attempts to access a uri on a blocked port, mozilla shows one of the following
alerts to the user or in the error console.
Build Metrics
since perfherder
alerts are calculated based on the mean value of a range, a regression may be reported as a fractional value.
Measuring performance using the PerfMeasurement.jsm code module
when you're done benchmarking, you can read out each of the counters you asked for as properties: let report = "cpu cycles: " + monitor.cpu_cycles + "\n" + "cache refs: " + monitor.cache_references + "\n" + "cache misses: " + monitor.cache_misses + "\n"; monitor.reset();
alert(report); the reset() method clears all of the enabled counters, as you might expect.
Phishing: a short definition
since version 2.0, firefox has used google’s safebrowsing service, to detect known web forgeries, and display an
alert instead of the fraudulent website.
Preference reference
by default, the reader mode in firefox mobile is only enabled if the memory is greater than 384mb.ui.
alertnotificationoriginui.
alertnotificationorigin controls the position and direction from which popup notifications invoked by nsi
alertsservice are sliding in.ui.spellcheckerunderlineui.spellcheckerunderline holds the colour which is used to underline words not recognized by the spellchecker.ui.spellcheckerunderlinestyleui.spellcheckerunderlinestyle holds the style which is used to underline words not...
L20n HTML Bindings
consider the following source html: <p data-l10n-id="save"> <input type="submit"> <a href="/main" class="btn-cancel"></a> </p> assume the following malicious translation: <save """ <input value="save" type="text"> or <a href="http://myevilwebsite.com" onclick="
alert('pwnd!')" title="back to the homepage">cancel</a>.
Leak Monitor
it will pop-up an
alert when a window is closed and javascript still links to that window (for example, an observer that is not cleared when the window closes).
4.3 Release Notes
libpkix: an rfc 3280 compliant certificate path validation library (see pkixverify) pk11token.needslogin method (see needslogin) support hmacsha256, hmacsha384, and hmacsha512 (see hmactest.java) support for all nss 3.12 initialization options (see initializationvalues) new ssl error codes (see http://mxr.mozilla.org/security/sour...util/sslerrs.h) ssl_error_unsupported_extension_
alert ssl_error_certificate_unobtainable_
alert ssl_error_unrecognized_name_
alert ssl_error_bad_cert_status_response_
alert ssl_error_bad_cert_hash_value_
alert new tls cipher suites (see http://mxr.mozilla.org/security/sour...sslsocket.java): tls_rsa_with_camellia_128_cbc_sha tls_dhe_dss_with_camellia_128_cbc_sha tls_dhe_rsa_with_camellia_128_cbc_sha tls_rsa_with_c...
NSS_3.12_release_notes.html
tls session ticket extension (off by default) see ssl_enable_session_tickets in ssl.h new ssl error codes (see sslerr.h) ssl_error_unsupported_extension_
alert ssl_error_certificate_unobtainable_
alert ssl_error_unrecognized_name_
alert ssl_error_bad_cert_status_response_
alert ssl_error_bad_cert_hash_value_
alert ssl_error_rx_unexpected_new_session_ticket ssl_error_rx_malformed_new_session_ticket new tls cipher suites (see sslproto.h): tls_rsa_with_camellia_128_cbc_sha tls_dhe_dss_with_camellia_128_cbc_sha tls_dhe_rsa_with_camellia_128_cbc_sha tls_rsa_w...
NSS 3.28.1 release notes
:08:22:fe:7a:23:53:fa:48:4d:59:24:e8:75:65:6d:3d:c9:fb:58:77:1f:6f:61:6f:9d:57:1b:c5:92 cn = symantec class 2 public primary certification authority - g6 sha-256 fingerprint: cb:62:7d:18:b5:8a:d5:6d:de:33:1a:30:45:6b:c6:5c:60:1a:4e:9b:18:de:dc:ea:08:e7:da:aa:07:81:5f:f0 the version number of the updated root ca list has been set to 2.11 a misleading assertion/
alert has been removed, when nss tries to flush data to the peer but the connection was already reset.
NSS 3.46 release notes
ository in nss coverity bug 1453408 - modutil -changepw fails in fips mode if password is an empty string bug 1564727 - use a pss spki when possible for delegated credentials bug 1493916 - fix ppc64 inline assembler for clang bug 1561588 - remove -wmaybe-uninitialized warning in p7env.c bug 1561548 - remove -wmaybe-uninitialized warning in pkix_pl_ldapdefaultclient.c bug 1512605 - incorrect
alert description after unencrypted finished msg bug 1564715 - read /proc/cpuinfo when at_hwcap2 returns 0 bug 1532194 - remove or fix -ddebug_$user from make builds bug 1565577 - visual studio's cl.exe -?
JSAPI User Guide
once the functions are defined in global, any script that uses global as the global object can call them, just as any web page can call
alert.
JS_LookupProperty
otherwise, flags must be the logical or of one or more of the following bits: jsresolve_qualified behave as though the property name appeared to the right of a dot, as in
alert(obj.name).
Mozilla Projects
it will pop-up an
alert when a window is closed and javascript still links to that window (for example, an observer that is not cleared when the window closes).
Secure Development Guidelines
is exploitable (in some browsers) with a simple request such as: http://www.victim.com?something=<script>
alert('oops')</script> xss: prevention escape all dynamic input that will be sent back to the user html encoding & → & < → < > → > " → " ' → ' 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 mix...
Gecko events
is supported: yes event_
alert an
alert has been generated.
Gecko Roles
role_
alert represents an
alert or a condition that a user should be notified about.
Feed content access API
, null, null); if (data.length) { var parser = components.classes["@mozilla.org/feed-processor;1"] .createinstance(components.interfaces.nsifeedprocessor); var listener = new feedtestresultlistener(); try { parser.listener = listener; parser.parsefromstring(data, uri); } catch(e) {
alert("error parsing feed."); } } } httprequest = new xmlhttprequest(); httprequest.open("get", feedurl, true); try { httprequest.onload = inforeceived; httprequest.send(null); } catch(e) {
alert(e); } } the nsifeedprocessor interface lets you parse the feed data from several possible sources; in this case, we're loading a document into a...
How to build a binary XPCOM component using Visual Studio
use in javascript: function doxpcom() { try { const cid = "@starkravingfinkle.org/specialthing;1"; var obj = components.classes[cid].createinstance(); obj = obj.queryinterface(components.interfaces.ispecialthing); } catch (err) {
alert(err); return; } var res = obj.add(3, 4);
alert('3+4 = ' + res); var name = obj.name;
alert('name = ' + name); obj.name = 'new name'; name = obj.name;
alert('name = ' + name); } other resources creating xpcom components - mozilla how to build an xpcom component in javascript - mozilla an introduction to xpcom - ibm xpcom project page - mozilla ...
Components.utils.cloneInto
if you do pass this flag, then functions in the object are cloned using the same mechanism as that used in components.utils.exportfunction: // add-on script var addonscriptobject = { greetme: function() {
alert("hello from add-on"); } }; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow, {clonefunctions: true}); // page script var test = document.getelementbyid("test"); test.addeventlistener("click", function() { window.addonscriptobject.greetme(); }, false); cloning objects that cont...
Components.utils.createObjectIn
ple to create a new object in the scope of a specified dom window, you can simply do: function genpropdesc(value) { return { enumerable: true, configurable: true, writable: true, value: value }; } var myobject = components.utils.createobjectin(mywindow); var proplist = { name: genpropdesc("name"), date: genpropdesc("date"), id: genpropdesc("id"), func: genpropdesc(function() {
alert("called func!"); }) }; object.defineproperties(myobject, proplist); components.utils.makeobjectpropsnormal(myobject); this sets up the new object in the scope of the object mywindow, then adds properties by calling object.defineproperties(), then normalizes them by calling components.utils.makeobjectpropsnormal().
Observer Notifications
browser these topics indicate interesting things that happen that the browser
alerts you to.
nsIAccessibleProvider
xul controls constants constant value description xul
alert 0x00001001 xulbutton 0x00001002 xulcheckbox 0x00001003 xulcolorpicker 0x00001004 xulcolorpickertile 0x00001005 xulcombobox 0x00001006 xuldropmarker 0x00001007 xulgroupbox 0x00001008 xulimage 0x00001009 xullink 0x0000100a xullistbox 0x0000100b xullistcell 0x00001026 xullisthead 0x00001024 xullistheader 0x00001025 xullistitem 0x0000100c xu...
nsIDOMMozNetworkStatsManager
you can test for the presence of the service as follows, for example: if ("moznetworkstats" in navigator) { /* networkstats is available */ } else {
alert("i'm sorry, but networkstats services are not supported."); } method overview nsidomdomrequest getsamples(in nsisupports network, in jsval start, in jsval end, [optional] in jsval options /* networkstatsgetoptions */); nsidomdomrequest addalarm(in nsisupports network, ...
nsIDirectoryServiceProvider
alert(currdir); see also nsdirectoryservice nsidirectoryservice additionally, see section 16.5.2 of the rapid application development with mozilla book for instructions on how to get the current working directory and the process binary directory, among other things.
ExtensionManager (Toolkit)
examples here is how to retrive all the extensions installed: var em = cc['@mozilla.org/extensions/manager;1'] .getservice(ci.nsiextensionmanager); const nsiupdateitem = ci.nsiupdateitem; var extension_type = nsiupdateitem.type_extension; items = em.getitemlist(extension_type, {}); items.foreach(function(item, index, array) {
alert(item.name + " / " + item.id + " version: " + item.version); }); ...
nsIHttpHeaderVisitor
stobserver.prototype.observe = function ( subject, topic, data ) { var uri, avisitor; if ( subject instanceof this.nsihttpchannel ) { avisitor = new mynsihttpheadervisitor( ); subject.visitresponseheaders( avisitor ); if ( avisitor.isflash( ) ) { uri = subject.uri; subject.cancel( this.aborted );
alert( "found flash!" ); //handle flash file here } } }; myhttprequestobserver.prototype.register = function ( ) { var observerservice = components.classes[ "@mozilla.org/observer-service;1" ].getservice( components.interfaces.nsiobserverservice ); observerservice.addobserver(this, "http-on-examine-response", false); observerservice.addobserver(this, "http...
nsIMsgMessageService
ueryinterface(components.interfaces.nsiinputstream); var scriptinput = components.classes["@mozilla.org/scriptableinputstream;1"].createinstance(); var scriptinputstream = scriptinput.queryinterface(components.interfaces.nsiscriptableinputstream); scriptinputstream.init(consumer); try { msgservice.streammessage(messageuri, msgstream, msgwindow, null, false, null); } catch (ex) {
alert("error: "+ex) } scriptinputstream .available(); while (scriptinputstream .available()) { content = content + scriptinputstream .read(512); }
alert(content streamheaders() this method streams a message's headers to the passed in consumer.
nsIMsgWindowCommands
this could be as a result of clicking on a new mail
alert, or by clicking a link to a newsgroup.
nsIPrompt
method overview void
alert(in wstring dialogtitle, in wstring text); void
alertcheck(in wstring dialogtitle, in wstring text, in wstring checkmsg, inout boolean checkvalue); boolean confirm(in wstring dialogtitle, in wstring text); boolean confirmcheck(in wstring dialogtitle, in wstring text, in wstring checkmsg, inout boolean checkvalue); print32 confirmex(in...
nsIRadioInterfaceLayer
speakerenabled bool constants call state constants constant value description call_state_unknown 0 call_state_dialing 1 call_state_
alerting 2 call_state_busy 3 call_state_connecting 4 call_state_connected 5 call_state_holding 6 call_state_held 7 call_state_resuming 8 call_state_disconnecting 9 call_state_disconnected 10 call_state_incoming 11 datacall_state_unknown 0 datacall_state_connecting 1 datacall_state_connected 2 datacall_state_disconnecting 3 datacall_state_disconnect...
nsITimer
var event = { notify: function(timer) {
alert("fire!"); } } // now it is time to create the timer...
nsIUpdatePrompt
background optional an optional parameter that, if provided and true, presents a less-obtrusive, non-modal notification
alert.
nsIWebBrowserPersist
// obj_persist.saveuri(obj_uri,null,null,null,null,null,obj_targetfile,privacycontext); } catch (e) {
alert(e); } } see also nsicancelable ...
nsIWifiMonitor
netwerk/wifi/nsiwifimonitor.idlscriptable this interface can be used to be
alerted when the list of available wifi access points changes.
nsIXULAppInfo
example display the application and the gecko version in an
alert box: var info = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo);
alert("application version: " + info.version + "\n" + "gecko version: " + info.platformversion); example this example here uses nsixulappinfo to get the version of the current browser and then compares it: example - compare current browser version see also using ns...
nsIXULRuntime
example display the user's operating system in an
alert box: var xulruntime = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulruntime);
alert(xulruntime.os); see also nsixulappinfo - a related interface providing information about the host application, it's also implemented by xre/app-info.
XPCOM Interface Reference
linknsiaccessiblehypertextnsiaccessibleimagensiaccessibleprovidernsiaccessiblerelationnsiaccessibleretrievalnsiaccessiblerolensiaccessiblescrolltypensiaccessibleselectablensiaccessiblestatechangeeventnsiaccessiblestatesnsiaccessibletablensiaccessibletablecellnsiaccessibletablechangeeventnsiaccessibletextnsiaccessibletextchangeeventnsiaccessibletreecachensiaccessiblevaluensiaccessiblewin32objectnsi
alertsservicensiannotationobservernsiannotationservicensiappshellnsiappshellservicensiappstartupnsiappstartup_mozilla_2_0nsiapplicationcachensiapplicationcachechannelnsiapplicationcachecontainernsiapplicationcachenamespacensiapplicationcacheservicensiapplicationupdateservicensiarraynsiasyncinputstreamnsiasyncoutputstreamnsiasyncstreamcopiernsiasyncverifyredirectcallbacknsiauthinformationnsiauthmodulens...
XPCOM Interface Reference by grouping
ityinfo timer nsitimer nsitimercallback ui windows nsitaskbarpreview nsitaskbarpreviewbutton nsitaskbarpreviewcontroller nsitaskbarprogress nsitaskbartabpreview nsitaskbarwindowpreview nsiwintaskbar nsi
alertsservice nsiwebprogress nsiwebprogresslistener nsiwebprogresslistener2 update nsiupdate nsiupdatechecker nsiupdatechecklistener nsiupdateitem nsiupdatemanager nsiupdatepatch nsiupdateprompt nsiupdatetimermanager nsiprogramminglanguage thunderbird credential...
Using nsIPasswordManager
alert(pass.user); // the username
alert(pass.password); // the password break; } } catch (ex) { // do something if decrypting the password failed--probably a continue } } note that the user will be prompted for their master password if they have chosen to set one to secure their passwords.
Address Book examples
.getservice(components.interfaces.nsiabmanager); let alladdressbooks = abmanager.directories; while (alladdressbooks.hasmoreelements()) { let addressbook = alladdressbooks.getnext() .queryinterface(components.interfaces.nsiabdirectory); if (addressbook instanceof components.interfaces.nsiabdirectory) { // or nsiabitem or nsiabcollection //
alert ("directory name:" + addressbook.dirname); ...
Add Option to Context Menu
for thunderbird 2 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="messagepanecontext"> <menuitem id="my_option" label="my option concise and cool label" oncommand="
alert('hi')"/> </menupopup> </overlay> for thunderbird 3 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <popup id="mailcontext"> <menuitem id="my_option" label="my option concise and cool label" oncommand="
alert('hi')"/> </popup> </overlay> for thunderbird 2 and 3 in the...
Using the Multiple Accounts API
- boolean, should we download new messags on biff (true) or just
alert user that there is new mail (false) preference: mail.server.server.directory - local platform-specific path to store messages and folder indexes preference: mail.server.server.name - user-visible name of server the following are specific to imap: preference: mail.server.server.admin_url - administration url for server preference: mail.server.server.using_subscription - boolean, sh...
Add to iPhoto
"file:///applications/iphoto.app"; var appstrcf = corefoundation.cfstringcreatewithcharacters(null, appstr, appstr.length); var appurl = corefoundation.cfurlcreatewithstring(null, appstrcf, null); corefoundation.cfrelease(appstrcf); var b = corefoundation.cfurlgetfsref(appurl, ref.address()); if (!b) { var stringsbundle = document.getelementbyid("string-bundle");
alert(stringsbundle.getstring('
alert_download_error_string')); } else { var array = ctypes.cast(mutablearray, corefoundation.cfarrayref); appservices.lsopenurlswithrole(array, 0, null, appparams.address(), null, 0); } corefoundation.cfrelease(appurl); // clean up corefoundation.cfrelease(array); } appservices.shutdown(); carbon.shutdown(); corefoundation.shutd...
Declaring and Using Callbacks
if two arguments are passed to the callback constructor, the second is used as the this parameter: function myjscallback() {
alert(this.message); }; var receiver = { message: 'hi there!' }; var callback = funcptrtype(myjscallback, receiver); //
alerts with 'hi there' when the callback is invoked if three arguments are passed to the callback constructor, the third argument is used as a sentinel value which the callback returns if an exception is thrown.
Plug-in Development Overview - Plugins
following example, where a media player plug-in can be controlled with an advancetonextsong() method called inside the script element: <object id="myplugin" type="audio/wav" data="music.wav"> </object> <script type="application/javascript"> var theplugin = document.getelementbyid('myplugin'); if (theplugin && theplugin.advancetonextsong) theplugin.advancetonextsong(); else
alert("plugin not installed correctly"); </script> in the past, liveconnect and later xpconnect were used to make plug-ins scriptable.
Scripting plugins - Plugins
the new npnvariable enumerations are defined in npapi.h as: npnvwindownpobject = 15, npnvpluginelementnpobject = 16 how to call plugin native methods the following html code will do the job: <embed type="application/plugin-mimetype"> <script> var embed = document.embeds[0]; embed.nativemethod();
alert(embed.nativeproperty); embed.nativeproperty.anothernativemethod(); </script> the api extensions the api extensions are based on four new structs: npstring npvariant npn_releasevariantvalue npn_getstringidentifier npn_getstringidentifiers npn_getintidentifier npn_identifierisstring npn_utf8fromidentifier npn_intfromidentifier npobject npn_construct (sin...
Debugger - Firefox Developer Tools
for example, an uncaught exception hook may have access to browser-level features like the
alert function, which this api’s implementation does not, making it possible to present debugger errors to the developer in a way suited to the context.) debugger handler functions each debugger instance inherits accessor properties with which you can store handler functions for spidermonkey to call when given events occur in debuggee code.
Examine and edit CSS - Firefox Developer Tools
for example, here the user has typed "c" and the default choice is "color": if you enter an invalid value for a property when editing it, or an unknown property name, a yellow
alert icon appears besides the declaration.
Animation.ready - Web APIs
animation.pause(); animation.ready.then(function() { // displays 'running'
alert(animation.playstate); }); animation.play(); specifications specification status comment web animationsthe definition of 'animation.ready' in that specification.
CSSRule.cssText - Web APIs
syntax string = cssrule.csstext example <style> body { background-color: darkblue; } </style> <script> var stylesheet = document.stylesheets[0];
alert(stylesheet.cssrules[0].csstext); // body { background-color: darkblue; } </script> specifications specification status comment css object model (cssom)the definition of 'cssrule: csstext' in that specification.
CSSStyleDeclaration.cssText - Web APIs
example <span id="s1" style="color: red;"> some text </span> <script> var elem = document.getelementbyid("s1");
alert(elem.style.csstext); // "color: red;" </script> specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration: csstext' in that specification.
CSSStyleRule.selectorText - Web APIs
syntax string = cssrule.selectortext example // for cssrule: body { background-color: darkblue; } var stylesheet = document.stylesheets[0];
alert(stylesheet.cssrules[0].selectortext); // body notes the implementation may have stripped out insignificant whitespace while parsing the selector.
CSSStyleRule.style - Web APIs
syntax styleobj = cssrule.style example function stilo() {
alert(document.stylesheets[0].cssrules[0].style.csstext); } // displays "background-color: gray;" notes the declaration block is that part of the style rule that appears within the braces and that actually provides the style definitions (for the selector, the part that comes before the braces).
Applying styles and colors - Web APIs
anvas ctx.clearrect(0, 0, 150, 150); // draw guides ctx.strokestyle = '#09f'; ctx.linewidth = 2; ctx.strokerect(-5, 50, 160, 50); // set line styles ctx.strokestyle = '#000'; ctx.linewidth = 10; // check input if (document.getelementbyid('miterlimit').value.match(/\d+(\.\d+)?/)) { ctx.miterlimit = parsefloat(document.getelementbyid('miterlimit').value); } else {
alert('value must be a positive number'); } // draw lines ctx.beginpath(); ctx.moveto(0, 100); for (i = 0; i < 24 ; i++) { var dy = i % 2 == 0 ?
Basic animations - Web APIs
e.initkeyboardevent("keydown", !0, !0, document.defaultview, !1, !1, !1, !1, t, t) : e.initkeyevent("keydown", !0, !0, document.defaultview, !1, !1, !1, !1, t, 0), e.keycodeval = t, e.keycode !== t &&
alert("keycode mismatch " + e.keycode + "(" + e.which + ")"), document.dispatchevent(e) }; var o, s, h = innerheight, w = innerwidth, fw = 60, fa = []; window.onkeydown = function (t) { var e = t.key; (e.search("arrow") > -1 || "1" == e) && (d = t.key), "i" != e && "i" != e || (console.log("inc"), fw -= 10), "d" != e && "d" != e || (console.log("dec")...
Hit regions and accessibility - Web APIs
<canvas id="canvas"></canvas> <script> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregion({id: 'circle'}); canvas.addeventlistener('mousemove', function(event) { if (event.region) {
alert('hit region: ' + event.region); } }); </script> the addhitregion() method also takes a control option to route events to an element (that is a descendant of the canvas): ctx.addhitregion({control: element}); this can be useful for routing to <input> elements, for example.
Clipboard.read() - Web APIs
if (result.state == "granted" || result.state == "prompt") { navigator.clipboard.read().then(data => { for (let i=0; i<data.items.length; i++) { if (data.items[i].type != "image/png") {
alert("clipboard contains non-image data.
Console.timeEnd() - Web APIs
examples console.time("answer time");
alert("click to continue"); console.timelog("answer time");
alert("do a bunch of other stuff..."); console.timeend("answer time"); the output from the example above shows the time taken by the user to dismiss the first
alert box, followed by the time it took for the user to dismiss the second
alert: notice that the timer's name is displayed when the timer value is logged using timelog() and agai...
Console.timeLog() - Web APIs
examples console.time("answer time");
alert("click to continue"); console.timelog("answer time");
alert("do a bunch of other stuff..."); console.timeend("answer time"); the output from the example above shows the time taken by the user to dismiss the first
alert box, followed by the time it took for the user to dismiss the second
alert: notice that the timer's name is displayed when the timer value is logged using timelog() and again ...
console - Web APIs
for example, given this code: console.time("answer time");
alert("click to continue"); console.timelog("answer time");
alert("do a bunch of other stuff..."); console.timeend("answer time"); will log the time needed by the user to dismiss the
alert box, log the time to the console, wait for the user to dismiss the second
alert, and then log the ending time to the console: notice that the timer's name is displayed both when the timer is started and when it'...
DOMImplementation.createDocument() - Web APIs
example var doc = document.implementation.createdocument ('http://www.w3.org/1999/xhtml', 'html', null); var body = document.createelementns('http://www.w3.org/1999/xhtml', 'body'); body.setattribute('id', 'abc'); doc.documentelement.appendchild(body);
alert(doc.getelementbyid('abc')); // [object htmlbodyelement] specifications specification status comment domthe definition of 'domimplementation.createdocument' in that specification.
DOMImplementation.createDocumentType() - Web APIs
example var dt = document.implementation.createdocumenttype('svg:svg', '-//w3c//dtd svg 1.1//en', 'http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd'); var d = document.implementation.createdocument('http://www.w3.org/2000/svg', 'svg:svg', dt);
alert(d.doctype.publicid); // -//w3c//dtd svg 1.1//en specifications specification status comment domthe definition of 'domimplementation.createdocumenttype' in that specification.
Document.body - Web APIs
syntax const objref = document.body document.body = objref example // given this html: <body id="oldbodyelement"></body>
alert(document.body.id); // "oldbodyelement" const anewbodyelement = document.createelement("body"); anewbodyelement.id = "newbodyelement"; document.body = anewbodyelement;
alert(document.body.id); // "newbodyelement" notes document.body is the element that contains the content for the document.
Document.createCDATASection() - Web APIs
example var docu = new domparser().parsefromstring('<xml></xml>', 'application/xml') var cdata = docu.createcdatasection('some <cdata> data & then some'); docu.getelementsbytagname('xml')[0].appendchild(cdata);
alert(new xmlserializer().serializetostring(docu)); // displays: <xml><![cdata[some <cdata> data & then some]]></xml> notes this will only work with xml, not html documents (as html documents do not support cdata sections); attempting it on an html document will throw not_supported_err.
Document.createComment() - Web APIs
example var docu = new domparser().parsefromstring('<xml></xml>', 'application/xml'); var comment = docu.createcomment('this is a not-so-secret comment in your document'); docu.getelementsbytagname('xml')[0].appendchild(comment);
alert(new xmlserializer().serializetostring(docu)); // displays: <xml><!--this is a not-so-secret comment in your document--></xml> specifications specification status comment domthe definition of 'document.createcomment' in that specification.
Document.evaluate() - Web APIs
*/ var thisheading = headings.iteratenext(); var
alerttext = "level 2 headings in this document are:\n"; while (thisheading) {
alerttext += thisheading.textcontent + "\n"; thisheading = headings.iteratenext(); }
alert(
alerttext); //
alerts the text of all h2 elements note, in the above example, a more verbose xpath is preferred over common shortcuts such as //h2.
Document.forms - Web APIs
examples getting form information <!doctype html> <html lang="en"> <head> <title>document.forms example</title> </head> <body> <form id="robby"> <input type="button" onclick="
alert(document.forms[0].id);" value="robby's form" /> </form> <form id="dave"> <input type="button" onclick="
alert(document.forms[1].id);" value="dave's form" /> </form> <form id="paul"> <input type="button" onclick="
alert(document.forms[2].id);" value="paul's form" /> </form> </body> </html> getting an element from within a form var selectform = document.forms[index]; var selectformelement =...
Document.getBoxObjectFor() - Web APIs
example var mydiv = document.getelementbyid("mydiv"), boxobj = document.getboxobjectfor (mydiv);
alert ( "x:" + boxobj.x + ", y:" + boxobj.y + ", width:" + boxobj.width + ", height:" + boxobj.height ); notes specified in nsixuldocument.idl ...
Document.height - Web APIs
syntax pixels = document.height example //
alert document height
alert(document.height); alternatives document.body.clientheight document.documentelement.clientheight document.documentelement.scrollheight specification html5 ...
Document.implementation - Web APIs
syntax domimpobj = document.implementation; example var modname = "html"; var modver = "2.0"; var conformtest = document.implementation.hasfeature( modname, modver );
alert( "dom " + modname + " " + modver + " supported?: " + conformtest ); //
alerts with: "dom html 2.0 supported?: true" if dom level 2 html module is supported.
Document.queryCommandState() - Web APIs
example html <div contenteditable="true">select a part of this text!</div> <button onclick="makebold();">test the state of the 'bold' command</button> javascript function makebold() { var state = document.querycommandstate("bold"); switch (state) { case true:
alert("the bold formatting will be removed from the selected text."); break; case false:
alert("the selected text will be displayed in bold."); break; case null:
alert("the state of the 'bold' command is indeterminable."); break; } document.execcommand('bold'); } result specifications specification status comment execcommand ...
Document.querySelectorAll() - Web APIs
examples obtaining a list of matches to obtain a nodelist of all of the <p> elements in the document: var matches = document.queryselectorall("p"); this example returns a list of all <div> elements within the document with a class of either note or
alert: var matches = document.queryselectorall("div.note, div.
alert"); here, we get a list of <p> elements whose immediate parent element is a <div> with the class highlighted and which are located inside a container whose id is test.
Document.scripts - Web APIs
let scripts = document.scripts; if (scripts.length) {
alert('this page has scripts!'); } specifications specification status comment html living standardthe definition of 'document.scripts' in that specification.
Document.title - Web APIs
example <!doctype html> <html> <head> <title>hello world!</title> </head> <body> <script>
alert(document.title); // displays "hello world!" document.title = "goodbye world!";
alert(document.title); // displays "goodbye world!" </script> </body> </html> notes this property applies to html, svg, xul, and other documents in gecko.
Document.width - Web APIs
syntax pixels = document.width; example function init() {
alert("the width of the document is " + document.width + " pixels."); } alternatives document.body.clientwidth /* width of <body> */ document.documentelement.clientwidth /* width of <html> */ window.innerwidth /* window's width */ specification html5 ...
DocumentFragment.querySelectorAll() - Web APIs
examples this example returns a list of all div elements within the documentfragment with a class of either "note" or "
alert": var matches = documentfrag.queryselectorall("div.note, div.
alert"); specifications specification status comment selectors api level 1the definition of 'documentfragment.queryselectorall' in that specification.
Element.getAttribute() - Web APIs
examples const div1 = document.getelementbyid('div1'); const align = div1.getattribute('align');
alert(align); // shows the value of align for the element with id="div1" description lower casing when called on an html element in a dom flagged as an html document, getattribute() lower-cases its argument before proceeding.
Element.getAttributeNode() - Web APIs
example // html: <div id="top" /> let t = document.getelementbyid("top"); let idattr = t.getattributenode("id");
alert(idattr.value == "top") notes when called on an html element in a dom flagged as an html document, getattributenode lower-cases its argument before proceeding.
Element.name - Web APIs
lformelement.elementname let controlcollection = htmlformelement.elements.elementname example <form action="" name="forma"> <input type="text" value="foo"> </form> <script type="text/javascript"> // get a reference to the first element in the form let formelement = document.forms['forma'].elements[0] // give it a name formelement.name = 'inputa' // show the value of the input
alert(document.forms['forma'].elements['inputa'].value) </script> notes in internet explorer (ie), the name property of dom objects created using document.createelement() can't be set or modified.
Element.onfullscreenchange - Web APIs
function togglefullscreen() { let elem = document.queryselector("video"); elem.onfullscreenchange = handlefullscreenchange; if (!document.fullscreenelement) { elem.requestfullscreen().then({}).catch(err => {
alert(`error attempting to enable full-screen mode: ${err.message} (${err.name})`); }); } else { document.exitfullscreen(); } } function handlefullscreenchange(event) { let elem = event.target; let isfullscreen = document.fullscreenelement === elem; adjustmycontrols(isfullscreen); } specifications specification status comment fullscreen apithe definition o...
Element.querySelectorAll() - Web APIs
t.queryselectorall(`[class$="funnel-chart-percent"]`)]; // const refs = [...document.queryselectorall(`[class~="funnel-chart-percent"]`)]; obtaining a list of matches to obtain a nodelist of all of the <p> elements contained within the element "mybox": var matches = mybox.queryselectorall("p"); this example returns a list of all <div> elements within "mybox" with a class of either "note" or "
alert": var matches = mybox.queryselectorall("div.note, div.
alert"); here, we get a list of the document's <p> elements whose immediate parent element is a div with the class "highlighted" and which are located inside a container whose id is "test".
Element.scrollWidth - Web APIs
/body> <script> var buttonone = document.getelementbyid('abutton'), buttontwo = document.getelementbyid('anotherbutton'), divone = document.getelementbyid('adiv'), divtwo = document.getelementbyid('anotherdiv'); //check to determine if an overflow is happening function isoverflowing(element) { return (element.scrollwidth > element.offsetwidth); } function
alertoverflow(element) { if (isoverflowing(element)) {
alert('contents are overflowing the container.'); } else {
alert('no overflows!'); } } buttonone.addeventlistener('click', function() {
alertoverflow(divone); }); buttontwo.addeventlistener('click', function() {
alertoverflow(divtwo); }); </script> </html> r...
Element.setAttributeNode() - Web APIs
html <div id="one" align="left">one</div> <div id="two">two</div> javascript let d1 = document.getelementbyid('one'); let d2 = document.getelementbyid('two'); let a = d1.getattributenode('align'); d2.setattributenode(a.clonenode(true)); // returns: 'left'
alert(d2.attributes[1].value); notes if the attribute named already exists on the element, that attribute is replaced with the new one and the replaced one is returned.
Element.setAttributeNodeNS() - Web APIs
example // <div id="one" xmlns:myns="http://www.mozilla.org/ns/specialspace" // myns:special-align="utterleft">one</div> // <div id="two">two</div> var myns = "http://www.mozilla.org/ns/specialspace"; var d1 = document.getelementbyid("one"); var d2 = document.getelementbyid("two"); var a = d1.getattributenodens(myns, "special-align"); d2.setattributenodens(a.clonenode(true));
alert(d2.attributes[1].value) // returns: `utterleft' notes if the specified attribute already exists on the element, then that attribute is replaced with the new one and the replaced one is returned.
Element: show event - Web APIs
bubbles no cancelable no interface event event handler property onshow examples <div contextmenu="test"></div> <menu type="context" id="test"> <menuitem label="
alert" onclick="
alert('the
alert label has been clicked')" /> </menu> <script> document.getelementbyid("test").addeventlistener("show", function(e){
alert("the context menu will be displayed"); }, false); </script> specifications specification status html5the definition of 'show event' in that specification.
Event.explicitOriginalTarget - Web APIs
function mycommand(ev) {
alert(ev.explicitoriginaltarget.nodename); // returns 'menuitem' } <xul:command id="my-cmd-anaction" oncommand="mycommand(event);"/> <xul:menulist> <xul:menupopup> <xul:menuitem label="get my element name!" command="my-cmd-anaction"/> </xul:menupopup> </menulist> specifications this is a mozilla-specific property.
Using files from web applications - Web APIs
t/html; charset=utf-8"> <script type="application/javascript"> function sendfile(file) { const uri = "/index.php"; const xhr = new xmlhttprequest(); const fd = new formdata(); xhr.open("post", uri, true); xhr.onreadystatechange = function() { if (xhr.readystate == 4 && xhr.status == 200) {
alert(xhr.responsetext); // handle response.
File.lastModifiedDate - Web APIs
example // fileinput is a htmlinputelement: <input type="file" multiple id="myfileinput"> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (simliar to nodelist) var files = fileinput.files; for (var i = 0; i < files.length; i++) {
alert(files[i].name + " has a last modified date of " + files[i].lastmodifieddate); } reduced time precision to offer protection against timing attacks and fingerprinting, the precision of somefile.lastmodifieddate.gettime() might get rounded depending on browser settings.
File.name - Web APIs
example <input type="file" multiple onchange="processselectedfiles(this)"> function processselectedfiles(fileinput) { var files = fileinput.files; for (var i = 0; i < files.length; i++) {
alert("filename " + files[i].name); } } try the results out below: specifications specification status comment file apithe definition of 'name' in that specification.
File.type - Web APIs
syntax var name = file.type; value a string, containing the media type(mime) indicating the type of the file, for example "image/png" for png images example <input type="file" multiple onchange="showtype(this)"> function showtype(fileinput) { var files = fileinput.files; for (var i = 0; i < files.length; i++) { var name = files[i].name; var type = files[i].type;
alert("filename: " + name + " , type: " + type); } } note: based on the current implementation, browsers won't actually read the bytestream of a file to determine its media type.
onerror - Web APIs
the filereader onerror handler receives an event object, not an error object, as a parameter, but an error can be accessed from the filereader object, as instanceoffilereader.error // callback from a <input type="file" onchange="onchange(event)"> function onchange(event) { var file = event.target.files[0]; var reader = new filereader(); reader.onerror = function(event) {
alert("failed to read file!\n\n" + reader.error); reader.abort(); // (...does this do anything useful in an onerror handler?) }; reader.readastext(file); } ...
FullscreenOptions.navigationUI - Web APIs
let elem = document.documentelement; elem.requestfullscreen({ navigationui: "show" }).then({}).catch(err => {
alert(`an error occurred while trying to switch into full-screen mode: ${err.message} (${err.name})`); }); the promise's resolve handler does nothing, but if the promise is rejected, an error message is displayed by calling
alert().
GlobalEventHandlers.onabort - Web APIs
example window.onabort = function() {
alert('load aborted.'); } specification specification status comment html living standardthe definition of 'onabort' in that specification.
GlobalEventHandlers.onerror - Web APIs
window.onerror = function (msg, url, lineno, columnno, error) { var string = msg.tolowercase(); var substring = "script error"; if (string.indexof(substring) > -1){
alert('script error: see browser console for detail'); } else { var message = [ 'message: ' + msg, 'url: ' + url, 'line: ' + lineno, 'column: ' + columnno, 'error object: ' + json.stringify(error) ].join(' - ');
alert(message); } return false; }; when using the inline html markup (<body onerror="
alert('an error occurred')">), the html specification req...
GlobalEventHandlers.onkeypress - Web APIs
*/
alert("yesss!!!"); location.assign("https://developer.mozilla.org/"); } return true; }; })(); note: a more complete framework for capturing the typing of hidden words is available on github.
HTMLAnchorElement.rel - Web APIs
syntax var relstr = anchorelt.rel; anchorelt.rel = relstr; example var anchors = document.getelementsbytagname("a"); var length = anchors.length; for (var i = 0; i < length; i++) {
alert("rel: " + anchors[i].rel); } specifications specification status comment html living standardthe definition of 'rel' in that specification.
HTMLAreaElement.rel - Web APIs
syntax var relstr = areaelt.rel; areaelt.rel = relstr; example var areas = document.getelementsbytagname("area"); var length = areas.length; for (var i = 0; i < length; i++) {
alert("rel: " + areas[i].rel); } specifications specification status comment html living standardthe definition of 'rel' in that specification.
HTMLCanvasElement.mozFetchAsStream() - Web APIs
also uses netutil.jsm var canvas = document.getelementbyid('canvas'); var d = canvas.width; ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closepath(); ctx.fillstyle = 'yellow'; ctx.fill(); var netutilcallback = function() { return function(result) { if (!components.issuccesscode(result)) {
alert('failed to create icon'); } else {
alert('succesfully made'); } }; } var mfascallback = function(iconname) { return function(instream) { var file = fileutils.getfile('desk', [iconname + '.ico']); var outstream = fileutils.openfileoutputstream(file); cu.import('resource://gre/modules/netutil.jsm'); netutil.asynccopy(instream, outstream,...
HTMLCollection - Web APIs
for example, assuming there is one <form> element in the document and its id is myform: var elem1, elem2; // document.forms is an htmlcollection elem1 = document.forms[0]; elem2 = document.forms.item(0);
alert(elem1 === elem2); // shows: "true" elem1 = document.forms.myform; elem2 = document.forms.nameditem("myform");
alert(elem1 === elem2); // shows: "true" elem1 = document.forms["named.item.with.periods"]; specifications specification status comment domthe definition of 'htmlcollection' in that specification.
HTMLElement.click() - Web APIs
syntax element.click() example simulate a mouse-click when moving the mouse pointer over a checkbox: html <form> <input type="checkbox" id="mycheck" onmouseover="myfunction()" onclick="
alert('click event occured')"> </form> javascript // on mouse-over, execute myfunction function myfunction() { document.getelementbyid("mycheck").click(); } specification specification status comment html living standard living standard document object model (dom) level 2 html specification obsolete initial definition.
HTMLImageElement - Web APIs
example var img1 = new image(); // image constructor img1.src = 'image1.png'; img1.alt = 'alt'; document.body.appendchild(img1); var img2 = document.createelement('img'); // use dom htmlimageelement img2.src = 'image2.jpg'; img2.alt = 'alt text'; document.body.appendchild(img2); // using first image in the document
alert(document.images[0].src); specifications specification status comment css object model (cssom) view modulethe definition of 'extensions to htmlimageelement' in that specification.
HTMLLinkElement.rel - Web APIs
syntax var relstr = linkelt.rel; linkelt.rel = relstr; example var links = document.getelementsbytagname('link'); var length = links.length; for (var i = 0; i < length; i++) {
alert(links[i]); } specifications specification status comment html living standardthe definition of 'rel' in that specification.
HTMLScriptElement - Web APIs
t.src + " didn't load correctly."); } function affixscripttohead(url, onloadfunction) { var newscript = document.createelement("script"); newscript.onerror = loaderror; if (onloadfunction) { newscript.onload = onloadfunction; } document.head.appendchild(newscript); newscript.src = url; } sample usage: affixscripttohead("myscript1.js"); affixscripttohead("myscript2.js", function () {
alert("the script \"myscript2.js\" has been correctly loaded."); }); specifications specification status comment html living standardthe definition of 'htmlscriptelement' in that specification.
HTMLStyleElement.media - Web APIs
example <!doctype html> <html> <head> <link id="linkedstyle" rel="stylesheet" href="document.css" type="text/css" media="screen" /> <style id="inlinestyle" rel="stylesheet" type="text/css" media="screen, print"> p { color: blue; } </style> </head> <body> <script>
alert('linkedstyle: ' + document.getelementbyid('linkedstyle').media); // 'screen'
alert('inlinestyle: ' + document.getelementbyid('inlinestyle').media); // 'screen, print' </script> </body> </html> specifications specification status comment html living standardthe definition of 'htmlstyleelement' in that specification.
IDBDatabase.onclose - Web APIs
example db.onclose = function(event) { myappshow
alert('the database "' + db.name + '" has unexpectedly closed.'); }; specifications specification status comment indexed database api draftthe definition of 'onclose' in that specification.
IDBObjectStore.getKey() - Web APIs
dexeddb.open("telemetry"); openrequest.onsuccess = (event) => { let db = event.target.result; let store = db.transaction("netlogs").objectstore("netlogs"); let today = new date(); let yesterday = new date(today); yesterday.setdate(today.getdate() - 1); let request = store.getkey(idbkeyrange(yesterday, today)); request.onsuccess = (event) => { let when = event.target.result;
alert("the 1st activity in last 24 hours was occurred at " + when); }; }; specifications specification status comment indexed database api draftthe definition of 'getkey()' in that specification.
Checking when a deadline is due - Web APIs
switch(cursor.value.month) { case "january": var monthnumber = 0; 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.
install - Web APIs
example function xpinstallcallback(url, status) { if (status == 0) msg = "xpinstall test: passed\n"; else msg = "xpinstall test: failed\n"; dump(msg);
alert(msg); } xpi={'xpinstall pre-checkin test':'pre_checkin.xpi'}; installtrigger.install(xpi,xpinstallcallback); ...
Keyboard.getLayoutMap() - Web APIs
var keyboard = navigator.keyboard; keyboard.getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.get('keyw'); window.
alert('press ' + upkey + ' to move up.'); }) specifications specification status comment keyboard mapthe definition of 'getlayoutmap()' in that specification.
Keyboard - Web APIs
if (navigator.keyboard) { var keyboard = navigator.keyboard; keyboard.getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.get('keyw'); window.
alert('press ' + upkey + ' to move up.'); }); } else { // do something else.
KeyboardEvent.altKey - Web APIs
syntax var altkeypressed = instanceofkeyboardevent.altkey return value boolean examples <html> <head> <title>altkey example</title> <script type="text/javascript"> function showchar(e){
alert( "key keydown: " + string.fromcharcode(e.charcode) + "\n" + "charcode: " + e.charcode + "\n" + "alt key keydown: " + e.altkey + "\n" ); } </script> </head> <body onkeydown="showchar(event);"> <p> press any character key, with or without holding down the alt key.<br /> you can also use the shift key together with the alt key.
KeyboardEvent.ctrlKey - Web APIs
syntax var ctrlkeypressed = instanceofkeyboardevent.ctrlkey return value a boolean example <html> <head> <title>ctrlkey example</title> <script type="text/javascript"> function showchar(e){
alert( "key pressed: " + e.key + "\n" + "ctrl key pressed: " + e.ctrlkey + "\n" ); } </script> </head> <body onkeypress="showchar(event);"> <p>press any character key, with or without holding down the ctrl key.<br /> you can also use the shift key together with the ctrl key.</p> </body> </html> specifications specification status comment document object model (dom) level 3 events specificationthe definitio...
KeyboardEvent.metaKey - Web APIs
syntax var metakeypressed = instanceofkeyboardevent.metakey return value a boolean example function ismetakey(e) {
alert("metakey = " + e.metakey); } <button onclick="ismetakey(event)">click me with the meta key</button> specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.metakey' in that specification.
KeyboardEvent.shiftKey - Web APIs
syntax var shiftkeypressed = instanceofkeyboardevent.shiftkey return value a boolean example <html> <head> <title>shiftkey example</title> <script type="text/javascript"> function showchar(e){
alert( "key pressed: " + string.fromcharcode(e.charcode) + "\n" + "charcode: " + e.charcode + "\n" + "shift key pressed: " + e.shiftkey + "\n" + "alt key pressed: " + e.altkey + "\n" ); } </script> </head> <body onkeypress="showchar(event);"> <p>press any character key, with or without holding down the shift key.<br /> you can also use the shift key together with the alt key.</p> </body> </html> specifications spe...
KeyboardEvent.which - Web APIs
example <html> <head> <title>charcode/keycode/which example</title> <script type="text/javascript"> function showkeypress(evt) {
alert("onkeypress handler: \n" + "keycode property: " + evt.keycode + "\n" + "which property: " + evt.which + "\n" + "charcode property: " + evt.charcode + "\n" + "character key pressed: " + string.fromcharcode(evt.charcode) + "\n" ); } function keydown(evt) {
alert("onkeydown handler: \n" + "keycode property: " + evt.keycode + "\n" + "which property: " ...
KeyboardLayoutMap.get() - Web APIs
var keyboard = navigator.keyboard; keyboard.getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.get('keyw'); window.
alert('press ' + upkey + ' to move up.'); } specifications specification status comment keyboard mapthe definition of 'get()' in that specification.
KeyboardLayoutMap - Web APIs
var keyboard = navigator.keyboard; keyboard.getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.get('keyw'); window.
alert('press ' + upkey + ' to move up.'); }) specifications specification status comment keyboard mapthe definition of 'keyboardlayoutmap' in that specification.
Keyboard API - Web APIs
if (navigator.keyboard) { var keyboard = navigator.keyboard; keyboard.getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.get('keyw'); window.
alert('press ' + upkey + ' to move up.'); }); } else { // do something else.
MediaStreamEvent.stream - Web APIs
syntax var stream = event.stream; example pc.onaddstream = function( ev ) {
alert("a stream (id: '" + ev.stream.id + "') has been added to this connection."); }; ...
MediaStreamEvent - Web APIs
examples pc.onaddstream = function( ev ) {
alert("a stream (id: '" + ev.stream.id + "') has been added to this connection."); }; ...
MouseEvent - Web APIs
ype="checkbox" id="checkbox"> checked</label> <p><button id="button">click me</button> javascript function simulateclick() { var evt = new mouseevent("click", { bubbles: true, cancelable: true, view: window }); var cb = document.getelementbyid("checkbox"); //element to click on var canceled = !cb.dispatchevent(evt); if(canceled) { // a handler called preventdefault
alert("canceled"); } else { // none of the handlers called preventdefault
alert("not canceled"); } } document.getelementbyid("button").addeventlistener('click', simulateclick); result specifications specification status comment css object model (cssom) view modulethe definition of 'mouseevent' in that specification.
Navigator.oscpu - Web APIs
x.y; wow64 windows 32-bit windows nt x.y mac os x (ppc build) powerpc mac os x version x.y mac os x (i386/x64 build) intel mac os x or macos version x.y linux 64-bit (32-bit build) output of uname -s plus "i686 on x86_64" linux output of uname -sm x.y refers to the version of the operating system example function osinfo() {
alert(window.navigator.oscpu); } osinfo(); //
alerts "windows nt 6.0" for example usage notes unless your code is privileged (chrome or at least has the universalbrowserread privilege), it may get the value of the general.oscpu.override preference instead of the true platform.
NavigatorID.appVersion - Web APIs
example
alert('your browser version is reported as ' + navigator.appversion); notes the window.navigator.useragent property may also contain the version number (for example "mozilla/5.0 (windows; u; win98; en-us; rv:0.9.2) gecko/20010725 netscape 6/6.1"), but you should be aware of how easy it is to change the user agent string and "spoof" other browsers, platforms, or user agents, and also how cavalier the browser vendor themselves are with these properties.
NavigatorID.userAgent - Web APIs
gecko-based browsers comply with the following general structure: useragent = appcodename/appversion number (platform; security; os-or-cpu; localization; rv: revision-version-number) product/productsub application-name application-name-version example
alert(window.navigator.useragent) //
alerts "mozilla/5.0 (windows; u; win98; en-us; rv:0.9.2) gecko/20010725 netscape6/6.1" specifications specification status comment html living standardthe definition of 'navigatorid.useragent' in that specification.
Node.isDefaultNamespace() - Web APIs
example var xulns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var el = document.getelementsbytagnamens(xulns, 'textbox')[0];
alert(el.isdefaultnamespace(xulns)); // true specifications specification status comment domthe definition of 'node: isdefaultnamespace' in that specification.
NodeFilter.acceptNode() - Web APIs
/^\s*$/.test(node.data) ) { return nodefilter.filter_accept; } } }, false ); // show the content of every non-empty text node that is a child of root var node; while ((node = iterator.nextnode())) {
alert(node.data); } specifications specification status comment domthe definition of 'nodefilter.acceptnode()' in that specification.
NodeFilter - Web APIs
/^\s*$/.test(node.data) ) { return nodefilter.filter_accept } } }, false ); // show the content of every non-empty text node that is a child of root let node; while ((node = nodeiterator.nextnode())) {
alert(node.data) } specifications specification status comment domthe definition of 'nodefilter' in that specification.
Notification.requestPermission() - Web APIs
function notifyme() { // let's check if the browser supports notifications if (!("notification" in window)) {
alert("this browser does not support desktop notification"); } // let's check whether notification permissions have already been granted else if (notification.permission === "granted") { // if it's okay let's create a notification var notification = new notification("hi there!"); } // otherwise, we need to ask the user for permission else if (notification.permission !== "denied") ...
Notification - Web APIs
function notifyme() { // let's check if the browser supports notifications if (!("notification" in window)) {
alert("this browser does not support desktop notification"); } // let's check whether notification permissions have already been granted else if (notification.permission === "granted") { // if it's okay let's create a notification var notification = new notification("hi there!"); } // otherwise, we need to ask the user for permission else if (notification.permission !== "denied") ...
Using the Notifications API - Web APIs
" + i, {tag: 'somanynotification'}); if (i++ == 9) { window.clearinterval(interval); } }, 200); } // otherwise, we can fallback to a regular modal
alert else {
alert("hi!"); } }); } // if the user refuses to get notified else { // we can fallback to a regular modal
alert alert("hi!"); } }); }); see the live result below: specifications specification status comment notifications api living standard living standard ...
PageTransitionEvent - Web APIs
example html <!doctype html> <html> <body> </body> </html> javascript window.addeventlistener('pageshow', myfunction); function myfunction(event) { if (event.persisted) {
alert("the page was cached by the browser"); } else {
alert("the page was not cached by the browser"); } } specifications specification status comment html living standardthe definition of 'pagetransitionevent' in that specification.
ParentNode.querySelectorAll() - Web APIs
examples to obtain a nodelist of all of the <p> elements in the document: var matches = document.queryselectorall("p"); this example returns a list of all <div> elements within the document with a class of either note or
alert: var matches = document.queryselectorall("div.note, div.
alert"); here, we get a list of <p> elements whose immediate parent element is a <div> with the class highlighted and which are located inside a container whose id is test.
RTCDataChannel: error event - Web APIs
nsole.error(" identity provider load failure: http error ", err.httprequeststatuscode); break; case "sctp-failure": if (err.sctpcausecode < sctpcausecodes.length) { console.error(" sctp failure: ", err.sctpcausecode); } else { console.error(" unknown sctp error"); } break; case "dtls-failure": if (err.received
alert) { console.error(" received dlts failure
alert: ", err.received
alert); } if (err.sent
alert) { console.error(" sent dlts failure
alert: ", err.received
alert); } break; } // add source file name and line information console.error(" error in file ", err.filename, " at line ", err.linenumber, ", column ", err.columnnumber); }, f...
RTCIdentityErrorEvent.idp - Web APIs
syntax var idp = event.idp; event.idp = "developer.mozilla.org"; example pc.onidpassertionerror = function( ev ) {
alert("the idp named '" + ev.idp + "' encountered an error " + "while generating an assertion."); } ...
RTCIdentityErrorEvent.loginUrl - Web APIs
syntax var loginurl = event.loginurl; event.loginurl = "https://developer.mozilla.org/fakeurl"; example pc.onidpassertionerror = function( ev ) {
alert("the idp requested an authentication" + " to be performed at th3 url '" + ev.url + "'."); } ...
RTCIdentityErrorEvent.protocol - Web APIs
syntax var protocol = event.protocol; event.protocol = "idp.html"; example pc.onidpassertionerror = function( ev ) {
alert("the idp uses the following protocol '" + ev.protocol + "."); } ...
RTCIdentityErrorEvent - Web APIs
examples pc.onidpassertionerror = function( ev ) {
alert("the idp named '" + ev.idp + "' encountered an error " + "while generating an assertion."); } ...
RTCIdentityEvent.assertion - Web APIs
syntax var blob = event.assertion; example pc.onidentityresult = function( ev ) {
alert("a new identity assertion (blob: '" + ev.assertion + "') has been generated."); } ...
RTCIdentityEvent - Web APIs
examples pc.onidentityresult = function( ev ) {
alert("a new identity assertion (blob: '" + ev.assertion + "') has been generated."); } ...
RTCPeerConnectionIceEvent.candidate - Web APIs
example pc.onicecandidate = function( ev ) {
alert("the ice candidate (transport address: '" + ev.candidate.candidate + "') has been added to this connection."); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnectioniceevent.candidate' in that specification.
RTCPeerConnectionIceEvent - Web APIs
examples pc.onicecandidate = function( ev ) {
alert("the ice candidate (transport address: '" + ev.candidate.candidate + "') has been added to this connection."); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnectioniceevent' in that specification.
RTCSessionDescription.sdp - Web APIs
e value is a domstring containing an sdp message like this one: v=0 o=alice 2890844526 2890844526 in ip4 host.anywhere.com s= c=in ip4 host.anywhere.com t=0 0 m=audio 49170 rtp/avp 0 a=rtpmap:0 pcmu/8000 m=video 51372 rtp/avp 31 a=rtpmap:31 h261/90000 m=video 53000 rtp/avp 32 a=rtpmap:32 mpv/90000 example // the remote description has been set previously on pc, an rtcpeerconnection
alert(pc.remotedescription.sdp); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcsessiondescription.sdp' in that specification.
RTCSessionDescription.type - Web APIs
example // the remote description has been set previously on pc, a rtcpeerconnection
alert(pc.remotedescription.type); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcsessiondescription.type' in that specification.
Range.toString() - Web APIs
alerting the contents of a range makes an implicit tostring() call, so comparing range and text through an
alert dialog is ineffective.
Selection.toString() - Web APIs
in javascript, this method is called automatically when a function the selection object is passed to requires a string:
alert(window.getselection()) // what is called
alert(window.getselection().tostring()) // what is actually being effectively called.
Selection - Web APIs
notes string representation of a selection calling the selection.tostring() method returns the text contained within the selection, e.g.: var selobj = window.getselection(); window.
alert(selobj); note that using a selection object as the argument to window.
alert will call the object's tostring method.
ServiceWorkerRegistration.getNotifications() - Web APIs
example navigator.serviceworker.register('sw.js'); var options = { tag : 'user_
alerts' }; navigator.serviceworker.ready.then(function(registration) { registration.getnotifications(options).then(function(notifications) { // do something with your notifications }) }); specifications specification status comment notifications apithe definition of 'serviceworkerregistration.getnotifications()' in that specification.
Storage API - Web APIs
the storage api gives sites' code the ability to find out how much space they can use, how much they are already using, and even control whether or not they need to be
alerted before the user agent disposes of site data in order to make room for other things.
Stylesheet.href - Web APIs
example // on a local machine: <html> <head> <link rel="stylesheet" href="example.css" type="text/css" /> <script> function sref() {
alert(document.stylesheets[0].href); } </script> </head> <body> <div class="thunder">thunder</div> <button onclick="sref()">ss</button> </body> </html> // returns "file:////c:/windows/desktop/example.css notes if the style sheet is a linked style sheet, the value of its attribute is its location.
StyleSheet.ownerNode - Web APIs
syntax noderef = stylesheet.ownernode example <html lang="en"> <head> <link rel="stylesheet" href="example.css"> </head> <body> <button onclick="
alert(document.stylesheets[0].ownernode)">show example.css’s ownernode</button> </body> </html> // displays "object htmllinkelement" notes for style sheets that are included by other style sheets, such as with @import, the value of this property is null.
SubmitEvent.submitter - Web APIs
let form = document.queryselector("form"); form.addeventlistener("submit", (event) => { let submitter = event.submitter; let handler = submitter.id; if (handler) { processorder(form, handler); } else { show
alertmessage("an unknown or unaccepted payment type was selected.
SubmitEvent - Web APIs
let form = document.queryselector("form"); form.addeventlistener("submit", (event) => { let submitter = event.submitter; let handler = submitter.id; if (handler) { processorder(form, handler); } else { show
alertmessage("an unknown or unaccepted payment type was selected.
TextRange - Web APIs
var sel = document.selection; var range = sel.createrange();
alert(range.text); // output plaintext of the selection note that the createrange method does not create a reference.
TouchEvent - Web APIs
there are several possible reasons why this might happen (and the exact reasons will vary from device to device, as well as browser to browser): an event of some kind occurred that canceled the touch; this might happen if a modal
alert pops up during the interaction.
URLSearchParams.set() - Web APIs
ingle-line comments ,[ "these should work:", "", "// eslint-disable-next-line no-unused-vars", "lockpref( 'keyword.url',\t\t'https://duckduckgo.com/html/?q=!+' )\t// test", "/*", " * bla bla ", "*/", "", "/* bla bla */", "", "// bla bla ", "", "these shouldn\'t work:", "console.log(\"http://foo.co.uk/\")", "var url = \"http://regexr.com/foo.html?q=bar\"", "
alert(\"https://mediatemple.net\")", ] , true ) console.info( url, url.tostring() ) // window.open( url, 'regex_site' ) specifications specification status comment urlthe definition of 'set()' in that specification.
VideoPlaybackQuality.totalFrameDelay - Web APIs
syntax value = videoplaybackquality.totalframedelay; example var videoelt = document.getelementbyid('my_vid'); var quality = videoelt.getvideoplaybackquality();
alert(quality.totalframedelay); ...
Simple color animation - Web APIs
stopanimation({type: "click"}); var gl; function drawanimation () { if (!gl) { var canvas = document.getelementbyid("canvas-view"); gl = canvas.getcontext("webgl") ||canvas.getcontext("experimental-webgl"); if (!gl) { clearinterval(timer);
alert("failed to get webgl context.\n" + "your browser or device may not support webgl."); return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); } // get a random color value using a helper function.
Getting started with WebGL - Web APIs
// // start here // function main() { const canvas = document.queryselector("#glcanvas"); // initialize the gl context const gl = canvas.getcontext("webgl"); // only continue if webgl is available and working if (gl === null) {
alert("unable to initialize webgl.
Fundamentals of WebXR - Web APIs
it's also important to be
alert for anything you may display that may have the potential to trigger seizures, given the all-encompassing nature of a headset; the user may not be able to quickly look away from the imagery you're presenting if it's causing distress.
Window.captureEvents() - Web APIs
--> <script> function reg() { window.captureevents(event.click); window.onclick = page_click; } function page_click() {
alert('page click event detected!'); } </script> </head> <body onload="reg();"> <p>click anywhere on this page.</p> </body> </html> notes events raised in the dom by user activity (such as clicking buttons or shifting focus away from the current document) generally pass through the high-level window and document objects first before arriving at the object that initiated the event.
Window.find() - Web APIs
example javascript findstring = function findtext(text) {
alert("string \x22" + text + "\x22 found?
Window.navigator - Web APIs
"mozilla/5.0 (x11; linux x86_64) applewebkit/537.36 (khtml, like gecko) ubuntu chromium/66.0.3359.181 chrome/66.0.3359.181 safari/537.36" } else if (susrag.indexof("safari") > -1) { sbrowser = "apple safari"; // "mozilla/5.0 (iphone; cpu iphone os 11_4 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/11.0 mobile/15e148 safari/604.1 980x1306" } else { sbrowser = "unknown"; }
alert("you are using: " + sbrowser); specifications specification status comment html living standardthe definition of 'window: navigator' in that specification.
Window: unload event - Web APIs
bubbles no cancelable no interface event event handler property onunload it is fired after: beforeunload (cancelable event) pagehide the document is in the following state: all the resources still exist (img, iframe etc.) nothing is visible anymore to the end user ui interactions are ineffective (window.open,
alert, confirm, etc.) an error won't stop the unloading workflow please note that the unload event also follows the document tree: parent frame unload will happen before child frame unload (see example below).
XMLDocument.async - Web APIs
(it has been possible to load documents synchronously since 1.4 alpha.) example function loadxmldata(e) {
alert(new xmlserializer().serializetostring(e.target)); // gives querydata.xml contents as string } var xmldoc = document.implementation.createdocument("", "test", null); xmldoc.async = false; xmldoc.onload = loadxmldata; xmldoc.load('querydata.xml'); ...
XMLDocument.load() - Web APIs
examples var xmldoc = document.implementation.createdocument("", "test", null); function documentloaded (e) {
alert(new xmlserializer().serializetostring(e.target)); // gives querydata.xml contents as string } xmldoc.addeventlistener("load", documentloaded, false); xmldoc.load('querydata.xml'); see also the load sample in the xml tests directory.
Synchronous and asynchronous requests - Web APIs
example.html (the main page): <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>mdn example</title> <script type="text/javascript"> var worker = new worker("mytask.js"); worker.onmessage = function(event) {
alert("worker said: " + event.data); }; worker.postmessage("hello"); </script> </head> <body></body> </html> myfile.txt (the target of the synchronous xmlhttprequest invocation): hello world!!
XRInputSourceArray.length - Web APIs
let sources = xrsession.inputsources; if (sources.length === 0) { show
alertdialog("you need to have at least one controller to play super duper shark jump fest 9000.", [ { label: "shop now", url: "https://www.amazon.com/s?k=vr+controllers" }, { label: "quit" handler: quitgame } ]); } here, if length is 0, a hypothetical show
alertdialog() function is called with a prompt string explaining the nee...
msthumbnailclick - Web APIs
example function thumbnailclickhandler(evt) {
alert ("clicked button: " + evt.buttonid); } document.addeventlistener('msthumbnailclick', thumbnailclickhandler); example 2 // adds an overlay icon on your app pinned to the taskbar window.external.mssitemodeseticonoverlay(iconuri, tooltip); // removes an overlay icon window.external.mssitemodecleariconoverlay(); // pinned icons on your taskbar can be instructed to trigger specific events on your...
Using ARIA: Roles, states, and properties - Accessibility
e treegrid document structure roles application article cell columnheader definition directory document feed figure group heading img list listitem math none note presentation row rowgroup rowheader separator table term textbox toolbar tooltip landmark roles banner complementary contentinfo form main navigation region search live region roles
alert log marquee status timer window roles
alertdialog dialog states and properties widget attributes aria-autocomplete aria-checked aria-current aria-disabled aria-errormessage aria-expanded aria-haspopup aria-hidden aria-invalid aria-label aria-level aria-modal aria-multiline aria-multiselectable aria-orientation aria-placeholder aria-pressed aria-readonly aria-...
ARIA: dialog role - Accessibility
specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of '
alert' in that specification.
Web applications and ARIA FAQ - Accessibility
some of them include: assistive technology minimum version for basic aria minimum version for live region and
alert support nvda 2010.2 (nvda is always a free upgrade) 2011.1 for firefox, no live region support in ie as of 2011.2.
Basic form hints - Accessibility
hing like this: var validate = function () { var emailelement = document.getelementbyid(emailfieldid); var valid = emailvalid(formdata.email); // returns true if valid, false otherwise emailelement.setattribute("aria-invalid", !valid); setelementbordercolour(emailelement, valid); // sets the border to red if second arg is false }; providing helpful error messages read how to use aria
alerts to enhance forms.
Forms - Accessibility
the following pages provide various techniques for improving the accessibility of web forms: basic form hints: adding hints and descriptions for invalid or required fields
alerts: using
alerts to provide client-side validation error messages multi-part labels: enabling complex form labels with a control inside each label see also the yahoo!
Operable - Accessibility
2.2.4 surpress interruptions (aaa) any interruptions such as
alerts or interstitial adverts should have functionality available to suppress or postpone them, unless it is an emergency
alert.
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
l(':-webkit-any(header, main, footer) p'); } catch(e) { try { matcheditems = document.queryselectorall(':-moz-any(header, main, footer) p'); } catch(e) { console.log('your browser doesn\'t support :is(), :matches(), or :any()'); } } } } matcheditems.foreach(applyhandler); function applyhandler(elem) { elem.addeventlistener('click', function(e) {
alert('this paragraph is inside a ' + e.target.parentnode.nodename); }); } simplifying list selectors the :is() pseudo-class can greatly simplify your css selectors.
Cross-browser audio basics - Developer guides
here's an example of creating an <audio> element, setting the media to play, playing and pausing, and then playing from 5 seconds into the audio: var myaudio = document.createelement('audio'); if (myaudio.canplaytype('audio/mpeg')) { myaudio.setattribute('src','audiofile.mp3'); } if (myaudio.canplaytype('audio/ogg')) { myaudio.setattribute('src','audiofile.ogg'); }
alert('play'); myaudio.play();
alert('stop'); myaudio.pause();
alert('play from 5 seconds in'); myaudio.currenttime = 5; myaudio.play(); let's explore the available properties and methods in more detail.
DOM onevent handlers - Developer guides
when the event handler is invoked tbd (non-capturing listener) terminology the term event handler may refer to: any function or object that is registered to be notified of events or more specifically, to the mechanism of registering event listeners via on… attributes in html or properties in web apis, such as <button onclick="
alert(this)"> or window.onload = function() { … }.
Rich-Text Editing in Mozilla - Developer guides
pt"> 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 ; }
alert("uncheck \"show html\"."); odoc.focus(); return false; } function setdocmode(btosource) { var ocontent; if (btosource) { ocontent = document.createtextnode(odoc.innerhtml); odoc.innerhtml = ""; var opre = document.createelement("pre"); odoc.contenteditable = false; opre.id = "sourcetext"; opre.contenteditable = true; opre.appendchild(ocontent); odoc.append...
Making content editable - Developer guides
pt"> 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 ; }
alert("uncheck \"show html\"."); odoc.focus(); return false; } function setdocmode(btosource) { var ocontent; if (btosource) { ocontent = document.createtextnode(odoc.innerhtml); odoc.innerhtml = ""; var opre = document.createelement("pre"); odoc.contenteditable = false; opre.id = "sourcetext"; opre.contenteditable = true; opre.appendchild(ocontent); odoc.append...
<section>: The Generic Section element - HTML: Hypertext Markup Language
implicit aria role region if the element has an accessible name, otherwise no corresponding role permitted aria roles
alert,
alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, none, note, presentation, search, status, tabpanel dom interface htmlelement attributes this element only includes the global attributes.
<template>: The Content Template element - HTML: Hypertext Markup Language
consider the following html and javascript: html <div id="container"></div> <template id="template"> <div>click me</div> </template> javascript const container = document.getelementbyid("container"); const template = document.getelementbyid("template"); function clickhandler(event) {
alert("clicked a div"); } const firstclone = template.content.clonenode(true); firstclone.addeventlistener("click", clickhandler); container.appendchild(firstclone); const secondclone = template.content.firstelementchild.clonenode(true); secondclone.addeventlistener("click", clickhandler); container.appendchild(secondclone); result firstclone is a documentfragment instance, so while it gets appende...
HTML documentation index - HTML: Hypertext Markup Language
91 <dialog>: the dialog element dialog, element, html, html interactive elements, reference, web, polyfill the html <dialog> element represents a dialog box or other interactive component, such as a dismissable
alert, inspector, or subwindow.
Data URLs - HTTP
data:text/plain;base64,sgvsbg8sifdvcmxkiq== base64-encoded version of the above data:text/html,%3ch1%3ehello%2c%20world!%3c%2fh1%3e an html document with <h1>hello, world!</h1> data:text/html,<script>
alert('hi');</script> an html document that executes a javascript
alert.
CSP: form-action - HTTP
<meta http-equiv="content-security-policy" content="form-action 'none'"> <form action="javascript:
alert('foo')" id="form1" method="post"> <input type="text" name="fieldname" value="fieldvalue"> <input type="submit" id="submit" value="submit"> </form> // error: refused to send form data because it violates the following // content security policy directive: "form-action 'none'".
CSP: navigate-to - HTTP
<meta http-equiv="content-security-policy" content="navigate-to 'none'"> <form action="javascript:
alert('foo')" id="form1" method="post"> <input type="text" name="fieldname" value="fieldvalue"> <input type="submit" id="submit" value="submit"> </form> specifications specification status comment content security policy level 3the definition of 'navigate-to' in that specification.
CSP: script-src - HTTP
if 'unsafe-eval' isn't specified with the script-src directive, the following methods are blocked and won't have any effect: eval() function() when passing a string literal like to methods like: window.settimeout("
alert(\"hello world!\");", 500); window.settimeout window.setinterval window.setimmediate window.execscript (ie < 11 only) strict-dynamic the 'strict-dynamic' source expression specifies that the trust explicitly given to a script present in the markup, by accompanying it with a nonce or a hash, shall be propagated to all the scripts loaded by that root script.
Loops and iteration - JavaScript
<p><input id="btn" type="button" value="how many are selected?" /></p> </form> <script> function howmany(selectobject) { let numberselected = 0; for (let i = 0; i < selectobject.options.length; i++) { if (selectobject.options[i].selected) { numberselected++; } } return numberselected; } let btn = document.getelementbyid('btn'); btn.addeventlistener('click', function() {
alert('number of options selected: ' + howmany(document.selectform.musictypes)); }); </script> do...while statement the do...while statement repeats until a specified condition evaluates to false.
SyntaxError: identifier starts immediately after numeric literal - JavaScript
the following fails: var 1life = 'foo'; // syntaxerror: identifier starts immediately after numeric literal var foo = 1life; // syntaxerror: identifier starts immediately after numeric literal
alert(1.foo); // syntaxerror: identifier starts immediately after numeric literal you will need to rename your variable to avoid the leading number.
SyntaxError: Malformed formal parameter - JavaScript
examples invalid cases var f = function('x y', 'return x + y;'); // syntaxerror (missing a comma) var f = function('x,', 'return x;'); // syntaxerror (extraneous comma) var f = function(37, "
alert('ok')"); // syntaxerror (numbers can't be argument names) valid cases var f = function('x, y', 'return x + y;'); // correctly punctuated var f = function('x', 'return x;'); // if you can, avoid using function - this is much faster var f = function(x) { return x; }; ...
TypeError: "x" is not a function - JavaScript
using the latter will throw an error: const sixteen = 2(3 + 5);
alert('2 x (3 + 5) is ' + string(sixteen)); //uncaught typeerror: 2 is not a function you can correct the code by adding a * operator: const sixteen = 2 * (3 + 5);
alert('2 x (3 + 5) is ' + string(sixteen)); //2 x (3 + 5) is 16 import the exported module correctly ensure you are importing the module correctly.
Error.prototype.stack - JavaScript
<!doctype html> <meta charset="utf-8"> <title>stack trace example</title> <body> <script> function trace() { try { throw new error('myerror'); } catch(e) {
alert(e.stack); } } function b() { trace(); } function a() { b(3, 4, '\n\n', undefined, {}); } a('first call, firstarg'); </script> assuming the above markup is saved as c:\example.html on a windows file system it produces an
alert message box with the following text: starting with firefox 30 and later containing the column number: trace@file:///c:/example.html:9:17 b@file:///c:/example.html:...
JSON.stringify() - JavaScript
lace(/\u2029/g, '\\u2029'); } var s = { a: string.fromcharcode(0x2028), b: string.fromcharcode(0x2029) }; try { eval('(' + json.stringify(s) + ')'); } catch (e) { console.log(e); // "syntaxerror: unterminated string literal" } // no need for a catch eval('(' + jsfriendlyjsonstringify(s) + ')'); // console.log in firefox unescapes the unicode if // logged to console, so we use
alert alert(jsfriendlyjsonstringify(s)); // {"a":"\u2028","b":"\u2029"} note: properties of non-array objects are not guaranteed to be stringified in any particular order.
Object.create() - JavaScript
however, when attempting to actually use these objects, their differences quickly become apparent: > "oco is: " + oco // shows "oco is: [object object]" > "ocn is: " + ocn // throws error: cannot convert object to primitive value testing just a few of the many most basic built-in functions shows the magnitude of the problem more clearly: >
alert(oco) // shows [object object] >
alert(ocn) // throws error: cannot convert object to primitive value > oco.tostring() // shows [object object] > ocn.tostring() // throws error: ocn.tostring is not a function > oco.valueof() // shows {} > ocn.valueof() // throws error: ocn.valueof is not a function > oco.hasownproperty("p") // shows "true" > ocn.hasownproperty("p") // throws error: ocn.hasownpr...
PWA developer guide - Progressive web apps (PWAs)
using service workers to run offline description
alerting the user using notifications description creating a web app from an existing site description advanced topics pushing data from the server to your web application some description resource management description integration with the host device description security and privacy description gaming topics for web app developers description polishing web apps web api equiva...
onclick - SVG: Scalable Vector Graphics
eargradient>, <marker>, <metadata>, <mpath>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <script>, <set>, <stop>, <style>, <svg>, <switch>, <symbol>, <text>, <textpath>, <title>, <tref>, <tspan>, <use>, <view> html, body, svg { height: 100%; margin: 0; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" onclick="
alert('you have clicked the circle.')" /> </svg> usage notes value <anything> default value none animatable no specifications specification status comment scalable vector graphics (svg) 2the definition of 'onclick' in that specification.
Scripting - SVG: Scalable Vector Graphics
ument.createelementns("http://www.w3.org/2000/svg","rect") this.rect.setattributens(null,"x",x) this.rect.setattributens(null,"y",y) this.rect.setattributens(null,"width",w) this.rect.setattributens(null,"height",h) document.documentelement.appendchild(this.rect) this.rect.addeventlistener("click",this,false) this.handleevent= function(evt){ switch (evt.type){ case "click":
alert(this.message) break; } } } inter-document scripting: referencing embedded svg when using svg within html, adobe's svg viewer 3.0 automatically includes a window property called svgdocument that points to the svg document.