JavaScript Cheatsheet


    Every script tag in this cheat is HTML escaped and put inside a pre element after its script by a script so you can see it. Scripts are styled like this:

    This cheatsheet is designed to work in modern ES5 compliant browsers. No effort was made to account for incompatibilities.

    Content is currently being converted from Js comments to HTML + scripts. This explains the remaining huge script blocks with many useful comments.

    Helper methods

    The following helper methods are used on this cheat:


    JavaScript is a language originally designed to run in a browser.

    More recently, it has also been used outside of browsers, often server side, through Node.js. This cheat shall consider mostly a world without Node.js: for a Node.js cheat see:

    It can be embedded on the HTML given by the server to the browser inside script tags. It can also be given in separate .js files which are then included in the HTML header.

    One of the goals of JavaScript is to restrict what the language can do to prevent malicious attacks. Therefore, by design choice JavaScript does not allows dangerous operations such as file IO (this might be possible soon with: the File API) Node.js adds such abilities to JavaScript through its standard library.

    JavaScript feels very Pythonic, but with less features and stdlib. CoffeScript "Rubynises" it.


    JavaScript is known for having some weird quirks. CoffeScript, a language that transpiles to JavaScript but behaves more like Ruby, attempts to correct many of those quirks.


    Microsoft open source Js extension: every valid Js script also a valid TypeScript one. Possible to compile it down to vanilla JavaScript.



    Official language name: ECMA-262, or ECMAScript.

    Versions are often abbreviated as: ES5, ES6, etc.

    ECMAScript is developed by ECMA: it is therefore one of the few key web standards not maintained by W3C.

    The ECMA work group that develops JavaScript is called T39. They have a wiki at: where they organize the proposals for the next version of the standard, including features prior to approval on the strawman namespace The wiki is openly readable, but only writable by contributors.

    ECMAScript does not include objects which browsers add to JavaScript such as document, window, XMLHttpRequest, although it does furnish some global objects like JSON. Such objects are typically specified in separate W3C specs.

    Browser objects are not directly available to Node.js, including useful ones such as XMLHttpRequest. Some projects implement the browser interfaces as a Node.js library, such as thus allowing to use such objects in Node.js / browser portable code./


    6, AKA #harmony

    Expected Dec 2014.

    Official PDF drafts:

    Officially approved features list under the Harmony namespace of the official wiki:

    Unofficial HTML version of the draft by one of the contributors: The official versions are in PDF.

    Good cheat:

    Promises: Currently usable through several libraries.

    Modules: attempts to unify CommonJS and AMD and end the mess. Currently usable with by transpiling: Tutorials:


    5.1, 2011:

    5: 2009.

    Generally implemented.

    Fully implemented by Google's V8 engine for Chrome and Node.js.


    was aborted



    #Detect JavaScript #version

    Not possible?!

    People recommend checking for individual features instead.


    Besides the standards, also check out:



    Since JavaScript is sent to browsers over the network, methods have been developed to make JavaScript code smaller:


    Compress JavaScript with gzip before sending. Notify browser with Content-Encoding HTTP header.


    Remove unnecessary characters like whitespaces.


    Rename variables and functions to shorter names, factor things out in ways that are shorter but hard for humans to understand.

    jsfuck: arbitrary Js in only 6 characters


    Concatenate multiple Js files together.

    OK, not really a form of compression, but serves the same purpose: make things faster, in this case by reducing the number of HTTP requests.

    When writing JavaScript code, you must be aware that this can happen, and that it may have consequences. See for example the Semicolon before IIFE pattern.

    #script element

    Where JavaScript code can be placed

    #script element

    script elements can appear either inside the head or of the body.

    The most commonly recommended place is load all scripts just before the closing body tag, so that the page can load before long scripts do, so it seems more responsive.

    It is not valid to put scripts after the body tag, as HTML specifies that only comments can be put there.

    #Multiple script elements

    Scripts are executed in the order which they appear on the file.

    head scripts are executed before body ones.

    Definitions from previous scripts blocks are kept for future script blocks:

    Errors and uncaught exceptions (e.g. undefined variables) only stop execution of the current script block: future script blocks still execute. There is no way to prevent future script blocks from executing.

    #src attribute

    Source a script from a separate .js file.

    The included script behaves exactly as a script inside a script element: it can for example get and set cookies. Therefore, when you include a third-party script you must future-trust the source or they can hack your users away.

    In HTML5, the script tag *cannot* be self closing because it is neither void nor foreign.

    In HTML5 you cannot have src and a non-empty innerHTML:

    #async attribute

    It is possible to run external scripts asynchronously.

    This makes script run other unpredictable.

    Can only be used for external scripts.

    #type attribute

    Before HTML5 it was mandatory to specify the language of the script as an attribute to the script tag: type="text/javascript"

    In HTML5 js became the default, so the attribute is not needed anymore.


    Close script tag inside string inside JavaScript

    Any HTML tags can be included inside a script element except the closing script tag. The HTML parser just reads everything up to that and then passes it to the Js interpreter.

    A common technique to write a literal </script> string inside JavaScript it to break it up with concatenation as /scr'+'ipt

    #use strict directive

    #Strict mode


    Throws exceptions in a bunch of extra smelly cases.

    Seems to be the only current directive, although there are extension directives like asm.js "use asm"

    Turn on for entire script element:

    Turn on for single function:



    Separates statements.


    Good tutorial

    Automatic semicolon insertion.

    In most cases, semicolons are automatically added by the parser at newlines:

    There are a few complex cases however.

    Operators inhibit ASI to allow programmers to write:

    Because of ASI, many people use a coding style without semicolons, using them only for the only exception: lines that start with parenthesis:

    One notable case where this happens is for IIFE scope preservation.

    TODO why are semicolons are not required are in single line functions:

    Advantages of using semicolons:

    It is a controversial subject which style is better. This is one of the things CoffeScript takes care of.

    GitHub style says no semicolons. Rationale:

    Google says semicolons. Rationale:


    Like C++.


    Identifiers can contain very weird characters.

    The first character is more restricted than the following ones, for example it cannot be a number.

    Some libraries make extensive use of such variables, notably JQuery which uses the dollar sign $ which is an alias for jQuery.

    Make sure to use meta charset=UTF-8 if you really want to use non ASCII identifier chars.


    JavaScript is case sensitive.

    It is unfortunate that many standard classes use all uppercase case for initials or even worse: mixed standards like the insane XMLHttpRequest, which has two case standards on a single identifier: XML all uppercase and (insane) and Http camel.


    Only functions with var generate new scopes, not blocks like if in general.


    #tilde operator


    Binary negation.

    Common application: transform -1 into 0 on indexOf (jQuery inArray).

    Works because number representation is fixed at 2's complement and in that case:

    #comma operator

    #void operator

    Evaluates expression and returns undefined.

    TODO applications, besides golfing for undefined, specially on discouraged javascript:void(0) hrefs: ?

    Since this is an operator, the parenthesis are not required. If added, what is inside of them is evaluated, so it also works:

    But it might be required to avoid some parsing errors like ReferenceError: invalid assignment left hand side:

    #javascript: URI scheme



    Bad practice: Only use links for links: for other things use styled spans.

    Evaluate JavaScript and open it on the new page if the result is not undefined.

    TODO: W3C standard? Likely not, since not even in IANA.

    If undefined, do nothing, and unlike number sign URL, #don't go to the top of the page.

    Often used with void(0), which is golf for undefined to make links which trigger scripts instead of opening pages. Used because the href attribute is mandatory for valid HTML.

    TODO: vs javascript:;

    Also used instead of straight undefined because undefined can be redefined to something else, while void can't.

    Major problem with that technique: middle click still opens up a new tab / window with address javascript:void(0) that shows nothing on the screen.

    Yes, go ahead and type javascript:something on you browser URL, it will work.



    #Assignment operator

    Variables contain address of data.

    = always takes the address of the data on the right and sets it to the variable on the left.

    Integers like `0` and `1` *do* have a single (because immutable) address in JavaScript.

    #callable object

    Not possible, unless derived from function.





    Allow property getting and assignment to do magic user define things.

    In literals with get and set:

    Programmatically with ES5 defineProperty

    __defineGetter__ and __defineSetter__ are nonstandard extensions.




    ES6 draft:

    Better to also stick to the convention of CAPS_UNDERSCORE for constants.


    Gotcha: month is 0-based, e.g. 1 means February!

    Explicit constructor and getters for local time:

    Other constructors:

    Create a UTC date object with new Date(Date.UTC(2000, 1, 2, 3, 4, 5, 6)). Works because Date.UTC returns the number of milliseconds in UTC.

    toISOString, ES5, ISO 8601 By default ends in Z, thus it is the UTC time, not local time!



    ES5, thus also present in Node.js.

    For greater portability, is a common option through the CDN:


    Run code from string in current environment.


    ES6, already implemented in some browsers.

    Makes it easier to deal with event success / failure.

    Good article:

    Already implemented by many libraries.

    Promises/A+ is an open standard that influences ES6. It is followed by the promise implementation of some libraries, but not others, notably jQuery.

    In jQuery, `Promise` is a subset of `Deferreds`.

    The following implementation exists for Node.js that mimics EC6's exactly:

    #Global object


    Encode entire object at once: no built-in:


    Documented on the HTML5 browsers section:

    One of the most important objects.

    Offers an interface to the browser contents.

    May be undefined on Node.js. This can be used to check if we are no Node.js or browser.

    `window` is the global object in browser implementations:

    It is not present in Node.js.

    All global objects are attributes of window



    In-window modals (popup that disables background).

    Practical, but not very customizable, cannot render HTML in it. Whitespace is preserved.

    Often replaced by more flexible JavaScript libraries or CSS :target. Bootstrap offers:

    The following built-in modals exist:


    Show an important message. Only a single continue button exists, so no information can be retrieved from the user.


    Get a boolean value from the user. Common for: "are you sure you want to quit?" messages to avoid data loss while editing potentially large textareas.


    Get a string value from the user. Very rare because it does not scale well: it is only a matter of time before you need another field. Also makes the site unusable if Js is off. Use HTML forms instead.





    Not on IE8.

    Inner does not include scrollbars, toolbars, address bar, tabs:

    window.innerHeight =
    window.innerWidth =

    Outer includes everything:

    window.outerHeight =
    window.outerWidth =





    Get how much scroll was done from top left:

    window.pageXOffset =
    window.pageYOffset =

    scrollby: TODO window.scrollBy(100,100)



    Run a function every n milliseconds.

    500ms: 0



    Callback once after given number of milliseconds.

    Not part of ES5, but Node.js also implements an identical interface.

    It is asynchronous:

    Synchronous sleep: impossible, do a busy wait loop that waits for a setTimeout control variable.


    Opens up new windows / tabs on the browser.

    Popup blockers usually block this.

    Good way to annoy users =)

    Returns a window object.

    TODO: what is the name parameter?


    Implements which contains many properties like href and hash. urlutils seems to be defined at:


    Reload current page page: window.location.reload().


    Set URL and navigate to it. Old URL gets added to history.


    Same as assign but old URL does not get added to history.



    For assignment, same as: window.location.assign('url').

    #Get current URL


    document.URL: readonly from when page was loaded (not affected by JavaScript operations like replace)

    window.location.href: updated by JavaScript operations.


    Same as: window.location.assign('#fragment').

    My id is location-hash.



    Do not trigger DOMContentLoaded.

    Still not consistent across browsers. A popular alternative is the History.js library which provides the History object and a similar property interface to that of the standard.

    Apparently you can only get the last one for security reasons:

    #Modify current URL without reloading the page

    Great to store state while making AJAX or preloaded modifications.

    User can still go back to previous URLs because this history is being modified.

    May not work on file:/// for security concerns. Try on localhost with python -m SimpleHTTPServer

    click me for new-url-1! click me for new-url-2!

    #non-standard attributes


    Widely implemented (but not necessarily uniformly).

    On Firefox, logged messages appear under Console > Logging


    Navigator metadata


    Change the window size of the browser.

    Chrome and IE WONTFIX, so unlikely to end up in a spec.


    Move browser window to position on screen. Same status as resizeTo.


    Starting to get a specification at:, but still very early stage. Already has incompatible implementations on major browsers. Most implementations first asks user if he wants to do it the first time.

    #pointer lock

    Locks the pointer into the screen. Allows for similar effect to common first person shooters.

    Still in very early stage as of 2014.


    HTML5: which extends the DOM specification:

    This section shall only describe the HTML5 extensions.


    Constructor of the window.document object.


    Write after the current script.

    Scripts inserted like this will be executed. TODO which order? Probably not a good idea to rely on such things.


    Last URL before current, if use clicked on a link to come here.

    May not always work?

    document.referrer =

    See also: window.history


    Can always be read, and set with some SOP limitations.


    HTMLCollection of all form elements. TODO: why for forms only?


    Interface to interact with both HTML and XML elements from a tree point of view.


    All HTML5 elements have a "DOM Interface IDL" section which specifies its available properties.

    List of all DOM specs:

    Edge spec:

    The entire DOM spec is split across multiple modules. Latest REC is DOM level 3.


    Informal name for pre W3C standard rules, specially those derived from Netscape behavior.

    Some still work widely across browsers, but have been superseded by a W3C standard method, for instance returning false from click vs preventDefault.

    #Node object

    Different from Element, which is a child class.



    Many DOM methods that get multiple nodes like getElementsByClassName do not return an Array but NodeList or HTMLCollection objects. Those are Array-like and support index access, but not all Array operations such as forEach.

    To use arbitrary Array methods, first convert to an array with'class'))


    Apparently some node types have been deprecated:


    A string representing the nodeType


    Only meant for nodes of type 1, AKA elements.





    *Don't* do innerHTML += innerHTML + 'something' unless you are sure it is only a string. Otherwise, this would destroy events associated to elements in the innerHTML. Use insertAdjacentHTML instead.

    TODO are multiple whitespaces preserved? Inconclusive question: Passing on Firefox 30 and Chromium 34, but maybe unspecified: Same for getAttribute.

    a b


    Find elements inside other elements.


    Select elements by CSS selector. Very powerful.

    Not supported in IE7.



    By Xpath. Working Group Note, not REC. Implementation status: only not in desktop IE 10 as of 2014: Sample usage:


    Same as querySelectorAll()[0]



    Not implemented on IE8. Alternatives: IE8 alternatives: use querySelectorAll or JQuery.

    The return can be either NodeList or HTMLCollection depending on browser versions and standard considered. In particular, no forEach Array method. Good article:


    Some special cases have shortcuts for them:


    Get the current script element:

    #Element object

    Inherits Node.


    Check if the element matches a selector.


    List of classes of element.


    Form element for a given input element.

    #HTMLElement object

    Extends element.


    DOMStringMap with the data-* attributes of the element.

    Automatically converts keys to camel case.


    Like innerHTML, but also includes the tags. Less support than innerHTML but increasing.






    Test preparation:

    children and firstElementChild: only elements, no text:

    childNodes and firstChild: include text:

    childNodes is of type NodeList. Therefore no forEach.






    #modify DOM


    Insert string before or after tag.



    Insert an element before another.

    Must work with elements: cannot insert string directly. Consider insertAdjacentHTML for that.

    TODO what happens when element exists already? Copy of events? Probably.


    Does not exist, but easily defined with insertBefore.


    Must get parent first:




    setAttribute creates the attribute if it does not exist.

    If the attribute does not exist, return null.



    Get and set CSS attributes.



    HTMLElement is the Base element class. It is extended by more specific types of element such as HTMLImageElement.


    Construction of derived Element types

    The derived element types can be constructed either with document.createElement or specific constructors like Image.

    Both are standard, widely implemented and equivalent. TODO confirm

    new Image vs document.createElement('img')


    Not an element, but can be a child.

    Contains the text on the outside of other elements.

    Create DOM tree from string.

    Convert string to DOM tree of Elements: innerHTML trick:


    Method of HTMLElement that gives focus to element.

    Not all elements can have focus:

    Get element with focus with activeElement: Widely supported. TODO standards?





    src attribute: starts loading as soon as it is set.


    Set to true when load has finished.

    Set to false when load starts, e.g. img.src = .

    Application: do something when image finished loading. Must take care not to add the callback after the event happened.

    The same is not possible for the error event since there is no analogous boolean error indicator.



    Get or set the content with the value property.

    The default value can be retrieved with the defaultValue property: it's the text that was put inside the textarea tags in the HTML. This differs from input elements, where the default value is set through the value property (and can also be retrieved with this property).


    Events that are activated when:


    Property to get or set the disabled state of a form control.



    Property that gets or sets checked state of checkbox.


    The HTML canvas element was made to be drawn with JavaScript and destroy Flash.


    Events are part of the DOM.

    Each event is attached to an element.

    Events propagate

    Like the rest of the DOM, it is a bit messy to find where events are defined.

    A good source is Firefox's documentation

    The major standards are:


    Allows to add an unlimited amount of handlers per event. Better choice than on attributes like onload.

    Can be used together with on events. TODO check.

    TODO do all events have a on version and an addEventListener one?

    #useCapture parameter

    #Capture #Bubble

    Very good example:


    Prevent event from being listened on further listeners.

    Only implemented in recent IE. Consider jQuery's preventDefault and/or stopPropagation if you care.

    document vs window vs body events

    document, window and body have different possible events. TODO understand clearly.

    You cannot attach events to the body element form scripts in the head, because the body is not yet part of the DOM! Prefer to attach events to the document or window objects instead.



    Useful events



    DOMContentLoaded vs document.onload: Former does not wait for external resources to load, later does.

    Used by jQuery's $(document).ready method where supported.



    Can only be used on body or elements that load remote sources such as img, link or remote script tags. Cannot be used on other elements such as div.

    Both window and document objects have this event:> but document's is probably more useful.

    On body and document, waits for all content to load, including images.

    If load has already finished when callback is set, it does not get called. Fortunately it is possible to check if load completed with complete:

    The same is not possible for the error event since there is no analogous boolean error indicator.


    Something like an image failed to load.

    Not fired if event already failed before assigning the listener. TODO: sure? For 'load', possible to work around via the complete argument, but not for error. Source:


    Catches js exceptions? TODO how is that related to load errors of the 'error' event?


    Works on buttons:


    Don't take the default action that would be taken on an event, e.g. open link on anchor click. Works for middle click.

    #return value of click callback

    On DOM0, if return is false then the default action, e.g. open link, is not taken.

    This still works on most browsers, but the W3C way of doing it is preventDefault

    jQuery implements this interface on the callback passed to on.

    #submit event

    #submit() method

    Like click but when submitting a form through the submit button. Attached to the form itself.

    Programmatically submit a form:


    Before the user exits the current page by either of:

    Can be cancelled, preventing the exit.

    How to use:


    Click me to leave the page after activating the beforeunload event.

    Application: "Are you sure you want to exit?" while editing large textareas. Check if the textarea has been modified since first load, and if yes show the message.


    A way of storing small data strings on user's computer hard disk.

    View all cookies on Firefox: chrome://browser/content/preferences/cookies.xul

    Cookies are accessible through DOM.

    Cookies can be set/get only for current domain.

    WARNING: some browsers may not keep cookies for local files (file://) so these tests may fail. Current Firefox does keep the cookies.

    Each browser stores its own cookies

    Cookies in HTTP

    Cookies without JavaScript

    Cookies can also be set via headers using the Set-Cookie header key.

    Cookies are automatically sent to servers by browsers via the Cookie header value.

    Cookies are sent from servers to CGI scripts via the HTTP_COOKIE env var.

    These are the most reliable methods, there is no need to use js for cookies.

    #session cookies

    A cookie based technique to maintain user logged in.

    TODO: how to avoid getting the session hijacked?




    Make server requests without reloading the current page.

    W3C WD:, WHATWG spec: widely implemented.

    The name is only historical and currently horrible, as this object can:

    so neither XML nor HTTP in the name make sense anymore, should be just Request...

    TODO I'm confused about what is the difference between level 1 and level 2. It seems that in the past, there ware two W3C documents, XMLHttpRequest and XHMLHttpRequest2 Now it the level 2 latest version points to the level 1 URL, so I imagine they have been merged, and that the only difference is informal between old and new methods, so: both level 1 and 2 have the same constructor, but level 2 extends level 1 with further capabilities if implemented.

    Not a part of ES, thus not available in Node.js. node-XMLHttpRequest is a wrapper for Node.js's stdlib HTTP implementation with interface exactly like this browser object.

    jQuery has an almost extension of XHR called jqXHR: it contains most, but not all, properties of XHR, plus some extra behavior, and is used by the jQuery API instead of the plain XHR.


    TODO: is Content-Length required?

    There is no JSON response, you have to parse the text:


    Non-standard like most X- prefixed headers:

    Can be used to check if the request was made with a form or not. jQuery sends it by default, and frameworks like Django check it by default:



    Set basic request info. Does not send the request yet.

    Open signature: open(method,url,async)

    Post data is set at send.


    Allows full control over the HTTP headers.

    Many JS libraries add the following to the header:



    Response should be used from a callback function on asynchronous mode.

    onreadystatechange callback is called every time the readyState property changes.

    Its possible values are:

    It is typical for the state to go through all of those states.

    TODO how does the server inform which state we are currently on?


    Field always present: contains the plain response.


    Field only present if the response type is specified XML on the HTTP headers.


    Actually make the request.

    #Cross-origin XHR

    #Same origin policy


    For security reasons, browsers don't let you read HTTP requests to different locations other than the current one by default.

    Simple attack examples:

    The most common things that this forbids are:

    It is however perfectly possible to make cross site requests in HTML: every external hyper link and image tag makes such GET request, and nothing prevents a form from doing a POST request across domains. Preventing such requests would make the web unusable: the only thing that is forbidden is reading that information into JavaScript.

    The reason why it is not possible with XHR is that the send always allows the JavaScript to read the request response.

    It is however possible to make requests from JavaScript using other techniques, which do not allow to read the response, and thus do not violate the SOP, in particular:

    Since it is a security principle like "don't publicly post your password", there are not standards that specify it: only security best practices.

    The same origin policy is the basis for the Synchronizer Token Pattern that prevents CSRF. If it were not used, then the attacker could obtain the token and make the request.

    Some browsers have an option to allow that to happen for testing purposes.

    If an XHR is blocked on SOP basis, you will get xmlhttp.status == 0.

    #iframe SOP example

    XHR SOP example

    On the Firefox inspector, those requests get logged under Console > Security.

    #XHR on file:// protocol

    Apparently not possible.

    does not make much sense, since file:// does not take HTTP requests, and XHR stands for XML HTTP requests.

    On Firefox, readyState reaches 4, but status is 0.


    #Cross-origin resource sharing

    Jan 2014 W3C REC that enables cross origin XHR requests in a controlled manner. Part of XHR2. As of Jul 2014, widely implemented on the most recent version of browser families, and plugins exist for most major server systems, including Apache, Nginx, Rack, etc.

    Promotional website:

    On the JavaScript side nothing needs to be done on XHR2: if the server supports CORS, you do nothing.

    Browser and server implementors several headers to deal with, and one extra request. Simple tutorial including the HTTP interface:

    For a CORS request to be doable, the server must support it, and allow it for the safe pages of course.


    Set the response type request header. TODO check.

    #File API

    Local file IO.

    W3C spec:


    The file API is purposefully restricted in many aspects for security.

    For example, you cannot get directory listings: all path selections are done through the browser's built-in popup.


    The first thing you have to do is get the files from the user.

    There are two main methods:

    Naturally, for security reasons you can't just read file paths from the user's computer: he has to explicitly take some action to give you the files.

    input type=file


    #Drag and Drop file upload

    The drop event has a dataTransfers.file property, which contains a list of File API File objects. Therefore, it is possible to do drag and drop file upload in HTML5!

    Worse method than input type=file, because it is only usable from large screens and you can have multiple windows open and suitably positioned.

    The advantage of drag and drop is that if you already have a file browser open, you don't have to search for the file path again.

    Some browsers like Firefox 31 support drag and drop into a regular input type=file element. This would be the perfect behaviour, allowing both input methods in one, but unfortunately it seems that it is not standardized:

    Drop files here!

    Now try dragging the image into the drop area: file is now undefined.


    Using the files

    There is a limited amount of information you can get from files:

    The spec explicitly says that you can't get the full path.

    To get the contents of a File, you must use the FileReader object on it, which allows for flexible asynchronous data read in chunks.

    Directory upload

    Seems not to be possible.

    Through drag and drop: Already implemented in Chrome 21, but not standardized.

    Through input type=file:

    #download file

    Note that file download can be achieved with an href download="filename", so if the file is generated server side, the cleanest way is to make it available on a URL and use it.

    If the file is generated by client on the browser by JavaScript, things are complicated, and probably the best option is to use

    Possible but imperfect HTLM5 solutions include:

    #download drag and drop

    Possible as a magic Chrome extension, but not in any standard:


    Web Real Time Communication.

    Developed by Chrome and Mozilla (probably to counter Skype)

    W3C WD:

    HTML5 rocks:

    Publicity page demo section:

    #WebRTC without a server

    Not easy / possible?

    Master index of SO questions:

    #Web Audio API

    Advanced audio control.

    W3C spec.


    #Web speech API


    OpenGL for the browser.

    W3C spec.

    Wide support on desktop browsers.


    #Geolocation API

    JavaScript access to the device's location, like GPS or other methods.

    W3C spec:

    HTML5 intro:

    The browser may require your permission to give those informations to the JavaScript. Firefox shows: "Would you like to share your location with the file ...?"

    Many sources can be used to get the location, including the IP address and a GPS if present.

    latitude longitude =

    #Orientation API

    Accelerometers, gyroscopes and compasses, present specially in mobile devices like phones.

    HTML5 intro:

    #Notifications API

    Last call:

    TODO get working on Chromium

    #Server sent events


    #Push notifications to browser

    #HTTP server push

    #HTTP streaming>

    #Web Workers


    Added with the Web Workers API.

    Even callbacks run on a single thread: you don't have to worry about synchronization. Callbacks exist to overcome the huge networking IO delays of web development.



    Mozilla subset of JavaScript that can be compiled.

    Work in progress, only implemented on very recent Firefox.

    Subset so small that although Turing complete it is not practical to write directly: it is meant to be transpiled from C++ using LLVM + Emscripten.

    #Third party

    #Web development



    Very popular peer reviewed CDN. Source and discussions at:

    Great way to search for new libraries when you need to do something.





    AMD and CommonJS are specifications that besides other things describe how to modularize JavaScript code.

    RequireJS is the major implementation of AMD. If it a single file regular JavaScript library.

    Node.js implements CommonJS.

    AMD is a fork of CommonJS.

    AMD is more popular in browsers, CommonJS outside.

    AMD loads asynchronously, CommonJS synchronously. This is a major divergence point, and explains why AMD is more popular on browsers.

    The Browserify utility implements CommonJS for the browser, by pre-compiling multiple files into one before serving.


    Simple examples demo:

    Large multi file example:

    #Design patterns


    Possibilities for Js-only tabs:

    The only clean solution however is to integrate tabs with the server side, and decide which tab is open based on the URL path.