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.
The following helper methods are used on this cheat:
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: https://github.com/cirosantilli/nodejs
It can be embedded on the HTML given by the server to the browser inside
It can also be given in separate
.js files which are then included in the HTML header.
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.
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
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: http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
Officially approved features list under the Harmony namespace of the official wiki: http://wiki.ecmascript.org/doku.php?do=index&id=harmony%3Aharmony
Unofficial HTML version of the draft by one of the contributors: http://people.mozilla.org/~jorendorff/es6-draft.html The official versions are in PDF.
Good cheat: https://github.com/lukehoban/es6features
Promises: http://www.html5rocks.com/en/tutorials/es6/promises/ Currently usable through several libraries.
Modules: attempts to unify CommonJS and AMD and end the mess. http://www.html5rocks.com/en/tutorials/es6/promises/ Currently usable with by transpiling: https://github.com/square/es6-module-transpiler Tutorials: http://www.2ality.com/2013/07/es6-modules.html
5.1, 2011: http://www.ecma-international.org/ecma-262/5.1/
Fully implemented by Google's V8 engine for Chrome and Node.js.
People recommend checking for individual features instead.
Besides the standards, also check out:
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 https://github.com/aemkei/jsfuck https://blog.checkpoint.com/2016/02/02/ebay-platform-exposed-to-severe-vulnerability/
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.
.jsfiles and included with
onclick, whose usage is discouraged.
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
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.
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.
Source a script from a separate
The included script behaves exactly as a script inside a
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
It is possible to run external scripts asynchronously.
This makes script run other unpredictable.
Can only be used for external scripts.
Before HTML5 it was mandatory to specify the language of the script as an
attribute to the script tag:
In HTML5 js became the default, so the attribute is not needed anymore.
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.
with concatenation as
Throws exceptions in a bunch of extra smelly cases.
Seems to be the only current directive,
although there are extension directives like asm.js
Turn on for entire script element:
Turn on for single function:
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: http://mislav.uniqpath.com/2010/05/semicolons/
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.
It is unfortunate that many standard classes use all uppercase case for initials
or even worse: mixed standards like the insane
which has two case standards on a single identifier:
XML all uppercase and (insane) and
Only functions with
var generate new scopes,
not blocks like
if in general.
Common application: transform
Works because number representation is fixed at 2's complement and in that case:
~-1 == 0~-1 == 0
~x == 0
Evaluates expression and returns
TODO applications, besides golfing for
undefined, specially on discouraged
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:
TODO: W3C standard? Likely not, since not even in IANA.
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
attribute is mandatory for valid HTML.
Also used instead of straight
can be redefined to something else, while
Major problem with that technique: middle click still opens up a new tab / window
Yes, go ahead and type
Variables contain address of data.
= always takes the address of the data on the right and sets it to the variable on the left.
Not possible, unless derived from function.
Allow property getting and assignment to do magic user define things.
In literals with
Programmatically with ES5
__defineSetter__ are nonstandard extensions.
ES6 draft: http://wiki.ecmascript.org/doku.php?id=harmony:const
Better to also stick to the convention of
CAPS_UNDERSCORE for constants.
month is 0-based,
1 means February!
Explicit constructor and getters for local time:
Create a UTC date object with
new Date(Date.UTC(2000, 1, 2, 3, 4, 5, 6)).
Date.UTC returns the number of milliseconds in UTC.
ISO 8601 http://en.wikipedia.org/wiki/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, https://github.com/douglascrockford/JSON-js/blob/master/json2.js is a common option through the CDN: http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js
Run code from string in current environment.
ES6, already implemented in some browsers.
Makes it easier to deal with event success / failure.
Good article: http://www.html5rocks.com/en/tutorials/es6/promises/
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: https://github.com/jakearchibald/es6-promise
Documented on the HTML5 browsers section: http://www.w3.org/TR/html5/browsers.html#the-window-object
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: http://www.ecma-international.org/ecma-262/5.1/#sec-15.1
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.
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:
Outer includes everything:
Get how much scroll was done from top left:
scrollby: TODO window.scrollBy(100,100)
Run a function every n milliseconds.
Callback once after given number of milliseconds.
Not part of ES5, but Node.js also implements an identical interface.
It is asynchronous:
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
which contains many properties like
urlutils seems to be defined at:
Reload current page page:
Set URL and navigate to it. Old URL gets added to history.
assign but old URL does not get added to history.
For assignment, same as:
document.URL: readonly from when page was loaded
My id is
Do not trigger
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.
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.
python -m SimpleHTTPServer
click me for new-url-1! click me for new-url-2!
Widely implemented (but not necessarily uniformly).
On Firefox, logged messages appear under Console > Logging
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
Starting to get a specification at: http://fullscreen.spec.whatwg.org/, 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.
Locks the pointer into the screen. Allows for similar effect to common first person shooters.
Still in very early stage as of 2014.
HTML5: http://www.w3.org/TR/html5/dom.html#document which extends the DOM specification: http://www.w3.org/TR/dom/#document
This section shall only describe the HTML5 extensions.
Constructor of the
Write after the current script.
Last URL before current, if use clicked on a link to come here.
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: http://www.w3.org/DOM/DOMTR
Edge spec: http://www.w3.org/TR/dom/
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
Element, which is a child class.
Many DOM methods that get multiple nodes like
getElementsByClassName do not return
Those are Array-like and support index access, but not all Array operations such as
To use arbitrary
Array methods, first convert to an array with
Apparently some node types have been deprecated: https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType
A string representing the
Only meant for nodes of type 1, AKA elements.
innerHTML += innerHTML + 'something' unless you are sure it is only a string.
Otherwise, this would destroy events associated to elements in the
TODO are multiple whitespaces preserved? Inconclusive question:
Passing on Firefox 30 and Chromium 34, but maybe unspecified:
Find elements inside other elements.
Select elements by CSS selector. Very powerful.
Not supported in IE7.
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: https://developer.mozilla.org/en-US/docs/Web/API/Element.getElementsByTagName
Some special cases have shortcuts for them:
Get the current script element:
Check if the element matches a selector.
List of classes of element.
Form element for a given
DOMStringMap with the
data-* attributes of the element.
Automatically converts keys to camel case.
innerHTML, but also includes the tags. Less support than
innerHTML but increasing.
children and firstElementChild: only elements, no text:
childNodes and firstChild: include text:
childNodes is of type NodeList. Therefore no forEach.
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
setAttribute creates the attribute if it does not exist.
If the attribute does not exist, return
Get and set CSS attributes.
HTMLElement is the Base element class.
It is extended by more specific types of element such as
The derived element types can be constructed either with
or specific constructors like
Both are standard, widely implemented and equivalent. TODO confirm http://stackoverflow.com/questions/6936071/where-are-constructors-such-as-new-image-and-new-option-documented https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement
new Image vs
Not an element, but can be a child.
Contains the text on the outside of other elements.
Convert string to DOM tree of Elements:
HTMLElement that gives focus to element.
Not all elements can have focus: http://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus
Get element with focus with
Widely supported. TODO standards?
src attribute: starts loading as soon as it is set.
true when load has finished.
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
Get or set the content with the
The default value can be retrieved with the
it's the text that was put inside the
textarea tags in the HTML.
This differs from
where the default value is set through the
value property (and can also be retrieved
with this property).
Events that are activated when:
change: value of input element changed. Only triggered for input text fields when you lose focus of field not on keypress. To do that, use
input: when the value changes, before losing focus.
Property to get or set the disabled state of a form control.
Property that gets or sets checked state of checkbox.
Events are part of the DOM.
Each event is attached to an element.
Like the rest of the DOM, it is a bit messy to find where events are defined.
A good source is Firefox's documentation http://www.w3.org/TR/DOM-Level-3-Events
The major standards are:
Allows to add an unlimited amount of handlers per event.
Better choice than
on attributes like
Can be used together with
on events. TODO check.
TODO do all events have a on version and an
Very good example: http://stackoverflow.com/a/4616720/895245
Only implemented in recent IE. Consider jQuery's
stopPropagation if you care.
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
window objects instead.
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
link or remote
Cannot be used on other elements such as
Both window and document objects have this event:
document's is probably more useful.
document, waits for all content to load,
load has already finished when callback is set, it does not get called.
Fortunately it is possible to check if load completed with
The same is not possible for the error event
since there is no analogous boolean
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
but not for error.
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.
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
jQuery implements this interface on the callback passed to
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: http://stackoverflow.com/questions/1119289/how-to-show-the-are-you-sure-you-want-to-navigate-away-from-this-page-when-ch
alertdoes not work inside the handler, probably because otherwise malicious code could prevent you from ever leaving the page. Where is this written on HTML5?
returnValueis not being shown. It is known that some browsers don't follow the default and use the actual return value of the callback as message, but Firefox should work no? Related bug: https://bugzilla.mozilla.org/show_bug.cgi?id=588292 Docs: https://developer.mozilla.org/en-US/docs/Web/API/Window.onbeforeunload
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 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.
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: http://www.w3.org/TR/XMLHttpRequest/, WHATWG spec: https://xhr.spec.whatwg.org/ widely implemented.
The name is only historical and currently horrible, as this object can:
HTTP in the name make sense anymore,
should be just
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 http://www.w3.org/TR/XMLHttpRequest2/ 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
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.
There is no JSON response, you have to parse the text: http://stackoverflow.com/questions/1973140/parsing-json-from-xmlhttprequest-responsejson
Non-standard like most
X- prefixed headers: https://developer.mozilla.org/en-US/docs/Web/HTTP/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: https://docs.djangoproject.com/en/1.9/ref/request-response/#django.http.HttpRequest.is_ajax
Set basic request info. Does not send the request yet.
Post data is set at
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.
For security reasons, browsers don't let you read HTTP requests to different locations other than the current one by default.
Simple attack examples: http://stackoverflow.com/questions/14667189/simple-example-for-why-same-origin-policy-is-needed
The most common things that this forbids are:
iframeif it points to another domain
It is however perfectly possible to make cross site requests in HTML:
every external hyper link and image tag makes such
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
The reason why it is not possible with XHR is that the
Since it is a security principle like "don't publicly post your password", there are not standards that specify it: only security best practices. http://stackoverflow.com/questions/11423682/cross-domain-form-posting
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. https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29_Prevention_Cheat_Sheet
Some browsers have an option to allow that to happen for testing purposes.
XHR is blocked on SOP basis, you will get
xmlhttp.status == 0.
On the Firefox inspector, those requests get logged under Console > Security.
Apparently not possible.
does not make much sense, since
does not take HTTP requests, and XHR stands for XML HTTP requests.
readyState reaches 4, but
status is 0.
Jan 2014 W3C REC that enables cross origin XHR requests in a controlled manner. http://www.w3.org/TR/cors/. 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: http://enable-cors.org/
Browser and server implementors several headers to deal with, and one extra request. Simple tutorial including the HTTP interface: http://www.html5rocks.com/en/tutorials/cors/
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.
Local file IO.
W3C spec: http://www.w3.org/TR/file-upload/
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.
drop event has a
which contains a list of File API
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:
Now try dragging the image into the drop area:
file is now undefined.
There is a limited amount of information you can get from files:
name: the basename
size: in bytes
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.
Seems not to be possible.
Through drag and drop: http://stackoverflow.com/questions/3590058/does-html5-allow-drag-drop-upload-of-folders-or-a-folder-tree Already implemented in Chrome 21, but not standardized.
Note that file download can be achieved with an
so if the file is generated server side, the cleanest way is to make it available on a URL and use it.
Possible but imperfect HTLM5 solutions include:
downloadlink with a
data:URL. Fails in some browsers. Size limitations.
window.saveAs: not in HTML5
FileSaverAPI was considered for HTML5 by was dropped
Possible as a magic Chrome extension, but not in any standard: http://stackoverflow.com/questions/5416748/drag-a-file-from-browser-to-desktop
Web Real Time Communication.
Developed by Chrome and Mozilla (probably to counter Skype)
W3C WD: http://www.w3.org/TR/webrtc/
HTML5 rocks: http://www.html5rocks.com/en/tutorials/webrtc/basics/
Publicity page demo section: http://www.webrtc.org/demo
Not easy / possible?
Master index of SO questions: http://stackoverflow.com/questions/7022383/how-can-i-make-a-browser-to-browser-peer-to-peer-connection
Advanced audio control.
OpenGL for the browser.
Wide support on desktop browsers.
W3C spec: http://www.w3.org/TR/geolocation-API/
HTML5 intro: http://www.html5rocks.com/en/tutorials/geolocation/trip_meter/
Many sources can be used to get the location, including the IP address and a GPS if present.
Accelerometers, gyroscopes and compasses, present specially in mobile devices like phones.
HTML5 intro: http://www.html5rocks.com/en/tutorials/device/orientation/
Last call: http://www.w3.org/TR/notifications/
TODO get working on Chromium
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.
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.
Very popular peer reviewed CDN. Source and discussions at: https://github.com/cdnjs/cdnjs
Great way to search for new libraries when you need to do something.
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: http://www.ringabell.org/en/un-simple-guide-pour-debuter-avec-requirejs/
Large multi file example: https://github.com/requirejs/example-multipage
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