Core JavaScript Reference Card - James Madison University

Core JavaScript Reference Card

Character set is Unicode.

Comments are like Java: ? // to end of the line ? Between /* and */

Literals: ? numbers: 12, 2.4, -8 ? strings: "abc", `def' ? booleans: true, false ? regular expressions:

/pattern/ ? null, undefined

Identi ers begin with a letter, _, or $, followed by arbitrarily many letters, digits, _, or $. Case sensitive.

Semicolons separate statements. ough optional at the ends of lines, good practice is to always use them.

Primitive types: value types consisting of sets of immutable, simple values: ? numbers: represented

internally as doubles, Infinity, and NaN ? strings: 0-based Unicode character sequences; + is concatenation; there are many string methods; strings can be indexed ? regular expressions: Perlstyle regular expressions between slashes ? null: a special object that means "no object" ? undefined: a special value that means "not initialized" or "doesn't exist"

Object types: reference types consisting of a collection of properties with names and values. ? ordinary object: an

unordered collection of named values ? array: an ordered collection of numbered values ? function: an object with executable code

? global object: contains all prede ned variables and functions, and global functions and variables

(Pseudo)classes are set of objects initialized by the same constructor function.

Variables are untyped, declared with a var statement. Until initialized, value is undefined.

Methods are functions that are property values.

JS has lexical scope. Entities declared outside a function have global scope; those declared inside a function have function scope. Blocks do not create a new scope.

Array initializer: [ , ... ]

Object initializer: { : , ... }

Array element access: [ ]

Object property access: .

Object creation: new ( , ... )

Function de nition: ? anonymous function:

function( , ... ) { } ? named function:

function ( , ... ) { }

Function invocation: (, ... )

Method invocation: .(, ... )

Conversion to string: ? booleans, numbers,

undefined and null convert to text literal values ? arrays: elements converted to strings concatenated with commas interposed

? objects: use toString()

Conversion to boolean: falsey values convert to false:

? false

? undefined

? null

?0

? -0

? NaN

? ""

All other values are truthy and convert to true.

Conversion to number: ? false, null, "", []

convert to 0 ? true converts to 1 ? strings with literal

numbers are parsed ? all others: NaN

Conversion to object: ? undefined and null

throw TypeError ? use Number(), String(),

or Boolean()

Identity: a===b i they are the same type and both are either:

? null

? undefined ? not NaN

? true

? false ? numbers with the same

value (-0===0) ? strings with the same

Unicode characters ? the same object reference

Equality: a==b i either a===b or: ? one is undefined and the

other is null ? one is a number, the other

a string, and they are identical after converting the string to a number ? one is a boolean and after converting true (false) to 1 (0), the results are equal

? one is a number (string), the other an object, and they are identical after converting the object to a number (string)

Operators: Most Java operators plus:

? delete removes a property from an object

? in tests whether an object has a property

? typeof returns a value's type as a string

? instanceof tests an object's class

Reserved word this is the global object outside a method, the invoking object inside a method.

Statements: Whitespace is mostly ignored.

? var , ... ; ? var = , ... ; ? = ; ? ; ? if () ? if ()

else ? if ()

else if () ... else ? switch () { case :

break; ... default:

break; } ? while () ? do

while (); ? for (;;)

? for ( in )

? break;

? continue; ? return ; ? throw ; ? try { }

catch () {} finally { }

Client-Side JavaScript Reference Card

ree places for JS code in HTML les: ? in (.js) les linked by src attribute of

(empty) element ? in elements ? in event listener property values Only the rst is good practice.

Execution: Code runs as it loaded in the order it appears in the page, except: ? code in a element with a

defer attribute runs after the page is loaded ? code in a element with an asynch attribute runs concurrent with page loading After a page loads, event listener code runs whenever events occur.

JS is single-threaded.

Window object: a browser's global object (this or window). Some properties: ? setTimeout(): register function

called once ? setInterval(): register function

called repeatedly ? location: page URL as Location

object ? screen: display data ? prompt(): get string in pop-up ? confirm(): get boolean in pop-up ? alert(): display message in pop-up ? document: DOM structure ? onload: event listener run after the

page is loaded

Document object: root of the DOM structure; some important properties: ? title: text in the title element ? URL: page location as a string ? referrer: URL of the document

from which user linked to this document ? stylesheets: an array of stylesheets for the current document

DOM: ADT for HTML pages. HTML elements and content are nodes in a tree whose root is document. Finding HTMLElement node objects descendant from an element (including document): ? getElementById(id): returns a

single element

? getElementsByName(name): returns an array of elements

? getElementsByTagName(name): returns an array of elements

? getElementsByClassName(name): returns an array of elements

HTMLElement objects have properties named for HTML element attributes. Property names are:

? lowercase (onclick) ? camelCase if multi-word

(defaultChecked) ? pre xed by html if a keyword

(htmlFor) ? except className Also getAttribute() and setAttribute() can be used.

HTMLElement objects have properties holding their contents (non-IE):

? innerHTML holds a string of HTML ? textContent holds a string with

HTML markup removed

Two document methods create nodes: ? createElement(tagName): returns

a new element

? createTextNode(text): returns a node with element contents

Several HTMLElement methods insert, delete, or replace nodes:

? appendChild(node) inserts node as the last child of its receiver

? insertBefore(node,target) inserts node as the child preceding the target child of the receiver

? removeChild(node) deletes node from the parent element receiver

? replaceChild(target,node) replaces target with node in the parent receiver

Events cause associated event listener functions to execute. Assign listeners:

? in HTML by assigning functions to event attributes

? in JS by assigning functions to element event properties

? in JS by calling an element's addEventListener() method with parameters event (string), function (listener), capture (usually false)

Some form event listeners:

? button: onclick when pressed ? radio and checkbox: onclick when

pressed, onchange when changed

? text and textarea: onchange when text is altered and focus removed; onkeypress, onkeydown, onkeyup when keys are used

? select: onchange when an option is selected or deselected

CSS property names are recorded in CSSStyleDeclaration objects. Uses CSS property names except they are:

? camelCase if the CSS name has dashes (fontFamily)

? pre xed with css if the CSS name is a reserved word (cssFloat)

Element computed CSS styles are recorded in read-only CSSStyleDeclaration objects obtainable from window using getComputedStyle(element,null). Short-cut properties (like font) are not computed.

Change an element's style by altering:

? its style property (its inline style), a CSSStyleDeclaration object; all properties have string values; include units with numbers

? its HTML class atribute with property name className

? CSS rules by adding, deleting, or altering cssRule objects in

document.stylesheets ? stylesheets by changing the href

property of a link element

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download