JavaScript Quick Reference Card1.

03

/ 3/2 1.5 slice – returns array slice. 1st arg is start position. 2nd arg
is last position + 1
% 3%2 1 sort – alphanumeric sort if no argument. Pass sort
++ i = 2; 3 function as argument for more specificity.
i++1, ++i2 splice – discard and replace elements
-- i = 2; 1 unshift – append elements to start & return new length
Copyright©, 2007-2008 BrandsPatch LLC i--1, --i2 Date Object
http://www.explainth.at == 3 = '3' true get#
Color key overleaf == 2 == 3 false getUTC#
Code Structure === 3 === 3 true set#
var ... 3 === '3' false setUTC#
//Global variable declarations where # is one of Date, Day, FullYear, Hours,
< 2<3 true
function funcA([param1,param2,...]) 'a' < 'A' false Milliseconds, Minutes, Month, Seconds, Time,
{ TimezoneOffset
var ... <= 2 <= 3 true
toDateString – the date in English.
//Local variable declarations – visible in nested
functions > 2>3 false toGMTString – the date & time in English.
>= 2>3 false toLocaleDateString – the date in the locale language.
[function innerFuncA([iparam1,iparam2...]) toLocaleString – date & time in the locale language.
{ = i=2 i is assigned
var ... the value 2 toLocaleTimeString – time in the locale language.
//Variables local to innerFuncA toTimeString – time in English.
+= i+=1 3
//your code here toUTCString – date & time in UTC, English
}] -= i-=1 2
valueOf – milliseconds since midnight 01 January 1970,
i*= i*=3 6 UTC
aName='ExplainThat!'; Math Object
//implicit global variable creation /= i/=2 3
//your code here E, LN10, LN2, LOG10E, LOG2E, PI, SQRT1_2, SQRT2
%= i%=2 1 abs – absolute value
}
Nomenclature Rules i = 2;j = 5; #(n) - trigonometric functions
Function and variable names can consist of any && (AND) (i <= 2) && (j < 7) true a#(n) - inverse trigonometric functions
alphanumeric character. $ and _ are allowed. The first where # is one of cos, sin or tan
character cannot be numeric. Many extended ASCII || (OR) (i%2 > 0) || (j%2 == 0) false
ceil(n) – smallest whole number >= n
characters are allowed. There is no practical limit on
! (NOT) (i==2) && !(j%2 == 0) true
name length. Names are case-sensitive. exp(n) – returns en
If two or more variables or functions or a variable & a i = 2;j = 7; floor(n) – biggest whole number <= n
function are declared with the same name the last & (bitwise) i&j 2 log(n) – logarithm of n to the base e
declaration obliterates all previous ones. Using a
max(n1,n2) – bigger of n1 and n2
keyword as a variable or function name obliterates that | (bitwise) i|j 7
keyword. min(n1,n2) – smaller of n1 and n2
^(XOR) i^j 5
Visibility & Scope pow(a,b) - ab
Assignments without the use of the var keyword result << 2<<1 4 random – random number between 0 and 1
in a new global variable of that name being created. >> 2>>1 1 round(n) – n rounded down to closest integer
Variables declared with the var keyword outwith the sqrt(n) – square root of n
>>> i=10 (binary 1010) 23
body of a function are global. Variables declared with i>>>2 Number Object
the var keyword inside the body of a function are local
MAX_VALUE - ca 1.7977E+308
to that function. Local variables are visible to all nested Internal Functions
functions. MIN_VALUE – ca 5E-324
decodeURI - reverses encodeURI
Local entities hide globals bearing the same name. NEGATIVE_INFINITY, POSITIVE_INFINITY
decodeURIComponent - reverses encodeURI...
Variable Types n.toExponential(m) – n in scientific notation with m
encodeURI – encodes everything except
decimal places.
string: var s = 'explainthat' or “explainthat” :/?&;,~@&=$+=_.*()# and alphanumerics.
n.toFixed() - n rounded to the closest whole number.
number: var n = 3.14159, 100, 0... encodeURIComponent – encodes everything except
_.-!~*() and alphaumerics. n.toPrecision(m) – n rounded to m figures.
boolean: var flag = false or true
escape – hexadecimal string encoding. Does not Hexadecimal numbers are designated with the prefix
object: var d = new Date(); 0x or 0X. e.g. 0xFF is the number 255.
encode +@/_-.* and alphanumerics.
function: var Greet = function sayHello() {alert('Hello')}unescape – reverses escape String Object
JavaScript is a weakly typed language – i.e. a simple eval – evaluates JavaScript expressions length – number of characters in the string
assignment is sufficient to change the variable type. The
s.charAt(n) – returns s[n]. n starts at 0
typeof keyword can be used to check the current isNaN – true if the argument is not a number.
variable type. isFinite – isFinite(2/0) returns false s.charCodeAt(n) – Unicode value of s[n]
Special Values parseInt - parseInt(31.5°) returns 31 s.fromCharCode(n1,n2..) - string built from Unicode
values n1, n2...
The special values false, Infinity, NaN, null, true & parseFloat - parseFloat(31.5°) returns 31.5
undefined are recognized. null is an object. Infinity s1.indexOf(s2,n) – location of s2 in s1 starting at
Array Object position n
and NaN are numbers.
length – number of elements in the array
Operators s1.lastIndexOf(s2) – location of s2 in s1 starting from
concat – concatenates argument, returns new array. the end
Operator Example Result
join – returns elements as a string separated by s.substr(n1,n2) – returns substring starting from n1 upto
+ 3+2 5 argument (default is ,) character preceding n2. No n2 = extract till end. n1 < 0 =
'explain' + 'that' explainthat pop – suppress & return last element extract from end.
- 3-2 -1 push – adds new elements to end of array & returns s.toLowerCase() - returns s in lower case characters
new length. s.toUpperCase() - care to guess?
* 3*2 6
reverse – inverts order of array elements
shift – suppress & return first element
 JavaScript Quick Reference Card1.03

Escape Sequences { alert(num); ownerDocument – take a guess

\n - new line, \r - carriage return, \t – tab character, num--;} style – CSS style declaration
\\ - \ character, \' - apostrophe, \'' - quote } tagName – element tag type. Curiously, always in
\uNNNN – Unicode character at NNNN uppercase
e.g. \u25BA gives the character ► function doLoop(num){ textContent – the Firefox equivalent of innerText
JavaScript in HTML do{ location Object
External JavaScript alert(num); host – URL of the site serving up the document
num--; href – the entire URL to the document
<script type=”text/javascript” defer=”defer”
src=”/scripts/explainthat.js”></script> }while (num > 0); pathname – the path to the document on the host
Inline JavaScript } protocol – the protocol used, e.g. http
<script type=”text/javascript”> reload(p) - reload the document. From the cache if p is
//your code here function forLoop(num){ true.
</script> replace(url) – replace the current document with the
var i;
Comments one at url. Discard document entry in browser history.
for (i=0;i<num;i++){
/* Comments spanning multiple lines */ screen Object
alert(num);
// Simple, single line, comment height – screen height in pixels
}
Conditional Execution width – screen width in pixels
}
if (Condition) CodeIfTrue;else CodeIfFalse4 window Object
Multiline CodeIf# must be placed in braces, {} alert(msg) – displays a dialog with msg
break causes immediate termination of the loop.
switch (variable) clearInterval(id) – clears interval id set by setInterval
loop statements after continue are skipped and the next
{ execution of the loop is performed. clearTimeout(id) – clears timeout id set by setTimeout
case Value1:Code; confirm(msg) – shows a confirmation dialog
break; function forInLoop(){ print() - prints the window contents
case Value2:Code; var s,x; prompt(msg,[default]) – shows prompt dialog,
break; optionally with default content. Returns content or null.
for (x in document)
..... setInterval(expr,interval,[args]) – sets repeat at
{ interval ms. The function expr is evaluated, optionally
default:Code; s=x + ' = ' + document[x]; with args passed as parameters.
} alert(s); setTimeout(expr,time,[args]) Like setInterval but
variable can be boolean, number, string or even date. non-repeating.
}
(condition)?(CodeIfTrue):(CodeIfFalse) Notes
}
1
Parentheses are not necessary but advisable Evaluates after use 2 Evaluates before use
This code is best tested in Opera which offers the option 3
Error Handling Zero-fill right shift 4 Note the semicolon!
of stopping the script at each alert. In place of
Method 1:The onerror event document any JavaScript object or an array can be Color Coding
used to loop through its properties/elements. italics – user code blue – JavaScript Keywords
<script type=”text/javascript”>
return red – Option object – JavaScript DOM object
function whenError(msg,url,lineNo){
//use parameters to provide meaningful messages return causes immediate termination of the JavaScript green – only numeric values blue - object properties
function. If no value is returned, or if return is missing green – object methods magenta – object events
} the function return type is undefined.
window.onerror = whenError Tested with Internet Explorer 6+, Firefox 1.5+ & Opera
document Object 9.1+.
</script> body - the body of the document
If you find this reference card useful please help us by
Place this code in a separate <script>..</script> tag cookie - read/write the document cookies
creating links to our site http://www.explainth.at where
pair to trap errors occurring in other scripts. This
you will find other quick reference cards and many other
technique blocks errors without taking corrective action. domain – where was the document served from?
free programming resources.
forms[] - array of all forms in the document
images[] - array of all images in the document
Method 2:The try..catch..finally statement
referrer – who pointed to this document?
function showLogValue(num){
URL – the URL for the document
var s = 'No Error';
getElementById(id) – element bearing ID of id
try
getElementsByName(n) – array of elements named n
{if (num < 0) throw 'badnum';
getElementsByTagName(t) - array of t tagged
if (num == 0) throw 'zero'; }
elements
catch (err)
write – write plain or HTML text to the document
{ s = err;
onload – occurs when the document is loaded
switch (err) {
onunload – occurs when user browses away, tab is
case 'badnum':num = -num; closed etc.
break; Element Object
case 'zero':num = 1; By element we mean any HTML element retrieved using
break; } the document.getElementBy# methods.
} attributes – all element attributes in an array
[finally{ alert([s,Math.log(num)]);}] className – the CSS style assigned to the element
} id – the id assigned to the element
The finally block is optional. The two techniques can be innerHTML – HTML content of the element
used in concert. innerText – content of the element shorn of all HTML
Looping tags. Does not work in Firefox
function whileLoop(num){ offset# – element dimensions (# = Height/Width) or
while (num > 0) location(# = Left/Right) in pixels