Javascript cheatsheet

CHEAT SHEET

JAVASCRIPT WEB PROGRAMMING http://www.emezeta.com/

Created by @Manz ( http://twitter.com/Manz ) window

= Browser global object

PROPERTIES

b n b n n n n n s s

.closed check if window is closed .devicePixelRatio ratio vertical size pix .fullScreen check if window is fullscreen .innerWidth width size (incl. scrollbar) .innerHeight height size (incl. scrollbar) .outerWidth width size (incl. browser) .outerHeight height size (incl. browser) .length number of frames .name inner name of window .status bottom statusbar text

API/OBJECTS PROPERTIES

o o o o o o o o o

.applicationCache offline resources API .console console browser API .crypto cryptographic API .history session page history API .location information about URL API .localStorage storage for site domain .sessionStorage storage until closed .navigator information about browser .performance data about performance

SCREEN PROPERTIES

o n n n n

.screen information about screen .screenX horizontal pos browser/screen .screenY vertical pos browser/screen .pageXOffset horizontal pixels scrolled .pageYOffset vertical pixels scrolled

WINDOW PROPERTIES

o o o o

.opener window that opened this window .parent parent of current window/frame .self this window (equal to .window) .top top window of current win/frame

METHODS

s .btoa(str) encode string to base64 s .atob(str) decode base64 string to text

.focus() request send window to front .blur() remove focus from window o .getSelection(id) return Selection object .postMessage(msg, dst, transf) send o .open(url, name, options) open popup .stop() stop window loading b .find(str, case, back, wrap, word, fr, d) .print() open print document window ANIMATION METHODS

n .requestAnimationFrame(cb(n))

.cancelAnimationFrame(reqID) TIMER METHODS

n .setTimeout(f(a...), ms, a...) delay&run

.clearTimeout(id) remove timeout n .setInterval(f(a...), ms, a...) run every .clearInterval(id) remove interval SCREEN METHODS

.scrollBy(x, y) scroll x,y pixels (relative) .scrollTo(x, y) scroll x,y pixels (absolute) .moveBy(x, y) move window by x,y (rel) .moveTo(x, y) move window to x,y (abs) .resizeBy(x, y) resize win by x,y (rel) .resizeTo(w, h) resize win to WxX (abs) STYLESHEET METHODS

o .getComputedStyle(elem, pseudelem) a .matchMedia(mediaq) match CSSMQ

screen

= info about screen / resolution

PROPERTIES

n n n n n n n n

.availTop top-from space available .availLeft left-from space available .availWidth width space available .availHeight height space available .width screen width resolution .height screen height resolution .colorDepth screen color depth (bits) .pixelDepth screen pixel depth (bits)

METHODS

b .lockOrientation(mode|modearray) b .unlockOrientation() remove locks

console

= unofficial console browser API

METHODS

.assert(cond, str1|obj1...) set a assert .count(str) count (show number times) .dir(obj) show object (expanded debug) .group() open new message group .groupCollapsed() open new group coll. .groupEnd() close previous group .table(array|obj, colnames) show table .trace() show code trace .timeStamp(str) put time on timeline PERFORMANCE METHODS

.profile(name) start performance profile .profileEnd(name) stop perf. profile .time(name) start performance timer .timeEnd(name) stop perf. timer LOG LEVEL METHODS

.log(str1|obj1...) output message .info(str1|obj1...) output information .warn(str1|obj1...) output warning .error(str1|obj1...) output error window

= global interaction func.

METHODS USER INTERACTION METHODS

.alert(str) show message (ok button)

s .prompt(str, def) ask answer to user b .confirm(str) show message (ok, cancel)

history

= page history on tab

PROPERTIES

n .length number of pages in historytab n .state return state top history stack METHODS

.back() go prev page (same as .go(-1)) .forward() go next page (same as .go(1)) .go(n) go n page (positive or negative) .pushState(obj, title, url) insert state .replaceState(obj, title, url) repl. state storage

performance = info about performance PROPERTIES

localStorage / sessionStorage

PROPERTIES

n .length number of items in storage METHODS

s .key(n) return key name on position n s .getItem(key) return value of item key

.setItem(key, value) set or update key .removeItem(key) delete item with key .clear() delete all items for current site

o .navigation info about redir/type nav. o .timing info about latency-load perf.

METHODS

n .now() high precision timestamp

= info about browser

navigator PROPERTIES

b n o s n b s

.cookieEnabled browser cookies on? .doNotTrack DNT privacy enabled? .geolocation user-info geolocation .language language in browser .maxTouchPoints max on device .onLine browser work in online mode? .userAgent identify browser of user

METHODS

n .vibrate(n|pattern) use device vibration

location

= info about current URL

PROPERTIES

s s s s s s s s s s o s

.href full document url .protocol https://www.emezeta.com/ .username https://user:pass@www .password https://user:pass@www .host https://emezeta.com:81/ .hostname https://emezeta.com:81/ .port https://emezeta.com:81/ .pathname http://emezeta.com/42/ .hash http://emezeta.com/#contacto .search http://google.com/?q=emezeta .searchParams search params object .origin source origin of document url

onClick="..." (HTML) .onclick = (JS func) 'click' (Listener)

e events

(only popular events)

MOUSE EVENTS

e e e e e

.onClick .onMouseDown .onMouseEnter .onMouseMove .onMouseOut

e e e e e

.onDblClick .onMouseUp .onMouseLeave .onMouseOver .onWheel

KEYBOARD EVENTS

e .onKeyDown e .onKeyPress

e .onKeyUp

LOAD/OBJECT EVENTS

e e e e

.onDOMContentLoaded e .onLoad e .onError .onAbort e .onScroll .onResize .onBeforeUnload e .onUnload

FORM/FIELDS EVENTS

e e e e

.onBlur .onChange .onInvalid .onReset

e e e e

.onFocus .onInput .onSelect .onSubmit

ANIMATION/TRANSITION EVENTS

e .onDragEnter e .onDragLeave e .onDragStart e .onDragEnd e .onDragOver e .onDrag e .onDrop ANIMATION/TRANSITION EVENTS

e .onAnimationStart e .onAnimationEnd e .onAnimationIteration e .transitionEnd

CHEAT SHEET

JAVASCRIPT WEB PROGRAMMING Created by @Manz ( http://twitter.com/Manz ) document

= Document object

PROPERTIES

s s s s s s s s s s s s s s o

.characterSet document charset .compatMode quirks or standard mode .cookie return all cookies doc string .designMode return design mode status .dir return direction text: "rtl" or "ltr" .doctype return document type (DTD) .domain return document domain .documentURI return document URL .lastModified return date/time modific. .origin return document's origin .readyState return current load status .referrer return previous page (referrer) .title return document title .URL return HTML document URL .location information about URL

ELEMENTS PROPERTIES

o o o o o o o

.activeElement focused element .body return body element .currentScript return active script .defaultView return window element .documentElement first element (root) .head return head element .scrollingElement first scrollable elem.

DOCUMENT ARRAY PROPERTIES

a a a a a a a a

.anchors array of images elements .applets array of applets elements .embeds array of embeds elements .forms array of forms elements .images array of images elements .links array of links elements .plugins array of plugins elements .scripts array of scripts elements

e Element()

METHODS

o o o o o o o o o o a o

.adoptNode(node) adopt from ext doc .createAttribute(name) create Attr obj .createDocumentFragment() .createElement(tag) create Element obj .createEvent(type) create Event object .createRange() create Range object .createTextNode(text) create TextNode .enableStyleSheetsForSet(name) .importNode(node, desc) import copy .getElementById(id) find elem with id .getElementsByName(name) w/ name .getSelection(id) return Selection object

r ClientRect() = Coords of element PROPERTIES

n n n n n n

.top top coord of surrounding rect .right right coord of surrounding rect .bottom bottom coord of surrounding r. .left left coord of surrounding rect .width width coord of surrounding rect .height height coord of surrounding r.

= Element object

PROPERTIES

s o o s s s s n n n n n n n n

.accessKey if exist, shortcut key .attributes array of Attr objects .classList DOMTokenList of classes .className classes list to string .id id string of element .name name string of element .tagName HTML tag of element .clientTop top border width element .clientLeft left border width element .clientWidth inner width element .clientHeight inner height element .scrollTop top-position in document .scrollLeft left-position in document .scrollWidth width of element .scrollHeight height of element

GET/SET HTML CODE PROPERTIES

s .innerHTML get/set HTML inside elem s .outerHTML get/set HTML (incl. elem) METHODS

o a a o a b

.closest(selec) closest ancestor .getElementsByClassName(class) .getElementsByTagName(tag) .querySelector(selec) return first elem .querySelectorAll(selec) return elems .matches(selec) match with this elem? .insertAdjacentHTML(posstr, html)

ATTRIBUTE METHODS

b .hasAttributes() exists attributes? b .hasAttribute(name) exist attribute? s .getAttribute(name) return value

.removeAttribute(name) del attribute .setAttribute(name, value) set attrib.

CLIENTRECT (POSITION AND SIZES) METHODS

o .getBoundingClientRect() return pos. a .getClientRects() return pos/size array e Event() = Event on action PROPERTIES

b b o b n n b o n s

.bubbles true=bubble, false=captures .cancelable event is cancelable? .currentTarget current element .defaultPrevented preventDefault() call .detail additional event info .eventPhase current stage (0-3) .isTrusted user action or dispatched .target reference to dispatched object .timeStamp time when was created .type type of event

METHODS

.preventDefault() cancel event .stopImmediatePropagation() .stopPropagation() prevent being called t EventTarget

a Attr()

= Attribute object

PROPERTIES

POSITION, SIZE AND SCROLL PROPERTIES

STYLESHEET PROPERTIES

a .styleSheets array of style files elem o .preferredStyleSheetSet preferred css o .selectedStyleSheetSet selected css

http://www.emezeta.com/

(use over elements)

METHODS

.addEventListener(ev, cb(ev), capt) .removeEventListener(ev, cb(ev), capt) b .dispatchEvent(ev)

s .name name of element attribute s .value value of element attribute t DOMTokenList()

= List of classes

PROPERTIES

n .length number of items METHODS

b .contains(item) check if item exists

.add(item) add item to list

s .item(n) return item number n

.remove(item) del item from list

b .toggle(item) del item if exist, add else n Node() = Minor element (elem. or text) PROPERTIES

s s s s s s s

.baseURI absolute base URL of node .namespaceURI namespace of node .nodeName name of node .nodeType 1=element, 2=text, 9=doc .nodeValue value of node .prefix namespace prefix of node .textContent text of node and children

NAVIGATION PROPERTIES

o o o o o o o o

.childNodes children nodes collection .firstChild first children (include text) .lastChild last children (include text) .nextSibling immediate next node .previousSibling immediate prev node .parentElement immediate parent elem .parentNode immediate parent node .ownerDocument return document

METHODS

.appendChild(node) add node to end .cloneNode(child) duplicate node .compareDocumentPosition(node) .contains(node) node is descendant? .hasChildNodes() node has childs? .insertBefore(newnode, node) .isDefaultNamespace(nsURI) .isEqualNode(node) check if are equal .lookupNamespaceURI() ret namesp. .lookupPrefix() return prefix for a ns .normalize() normalize-form children o .removeChild(node) del node & return o .replaceChild(newnode, oldnode) o o o b b o b b s s

c ChildNode() METHODS

o .remove() remove specified node p ParentNode() PROPERTIES

n o o o

.childElementCount number of children .children children elements .firstElementChild first children elem. .lastElementChild last children elem.

n NonDocumentTypeChildNode() PROPERTIES

o .nextElementSibling next element o .previousElementSibling prev element