Table of Contents
Javascript Cheat Sheet
This is a summarized form of the JavaScript Tutorial.
For reference JavaScript specifications can be found here .
What is Javascript
- JavaScript is the most popular scripting language on the internet and works in all major browsers.
- It is a lightweight, interpreted, object-oriented language that is embedded into webpages to add interactivity.
- JavaScript can read and write HTML page elements, react to events, validate data, create cookies.
- JavaScript was invented by Brendan Eich of Netscape but is now known officially as ECMAScript (current version is ECMA-262).
- JavaScript code may be located
- In the head - executed when called
- In the body - executed while loading
- In an external file called from either the head or the body e.g. <script src=“abc.js”></script>
Basic Syntax
- JavaScript is case-sensitive.
- Statements may omit the final semi-colon but should not.
- Blocks may be grouped together using curly braces { }.
- JavaScript uses java-style comments: // and /* */.
- JavaScript variables are case-sensitive and must begin with a letter or underscore.
- Variables are automatically declared when first used but should be explicitly declared using e.g. var a = 5;
- JavaScript uses standard C/Java operators e.g. +-*/%, ++, +=, &&, ||, !, + (concatenation).
- JavaScript uses C/Java comparators >,>=,==, !=, a?b:c. It also uses === to test equality of value and type.
Basic Structures
- if {} else if {} else {}
- for (var=start;var<=end;var=var+inc) {}
- while (condition) {}
- do {} while (condition) ;
- break and continue both valid in a loop.
- for (element in array) {}
- for (property in object) {}
- switch (n) { case 1: stmt; break; default: stmt; }
- function name(var1,var2,…) {}
- \“, \n, \t, \r, \', \&,
- with (object) { } changes default object for fields.
Events, Error Handling & Popups
- try { throw “errname”; } catch(err) {}
- onerror=handleErr; handleErr(msg,url,linenum)
- if handleErr returns false, browser displays a standard error message in the JavaScript console.
- an alert box just has an OK button - alert(“msg”)
- a confirm box returns true if the user clicks OK, false if he clicks cancel - confirm(“msg”)
- a prompt box allows the user to enter a value. It returns true if the user clicks OK, false if he clicks cancel - prompt(“msg”,”defaultvalue“);
- JavaScript functions can be registered to run on certain events (event=“jscode” in an HTML element):
- onunload, onload (page or image), onresize, onabort
- onfocus, onblur, onclick, ondblclick
- onmouseover, onmouseout, onmousemove
- onchange, onsubmit, onreset, onselect
- onkeydown, onkeypress, onkeyup
- onmousedown, onmouseup
JavaScript Objects
- Objects have properties and methods.
- Objects can be created directly
personObj=new Object(); personObj.firstname="John"; personObj.newfirstname = function (new_firstname) { this.firstname=new_firstname; }
- Objects can be created using a template
function person(firstname) { this.firstname=firstname; this.newfirstname = function (new_firstname) { this.firstname=new_firstname; } } myFather=new person("John");
- Object methods can also be assigned by name e.g.
function person(firstname) { this.firstname=firstname; this.newfirstname=newfirstname; } function newfirstname(new_firstname) { this.firstname=new_firstname; }
Predefined Objects
- String objects have a length property and methods including: indexOf, match, replace
- new Date() creates a Date object (with today's date).
- Date objects include methods: getTime(epoch), setFullYear, toUTCString, getDay, getHours
- Date objects can be compared using <, > .
- To declare an array
var mycars=new Array("Saab","Volvo","BMW");
- Arrays have methods including: sort, concat, join.
- To sort an integer array, must use a function
function intSort (a, b){ return a - b;}
- The Math object contains common math routines: round, random, e, pi etc.
- The RegExp object supports regexp creation and searching including methods: test (t/f), exec, compile (alter).
- HTML DOM objects allow access to browser and webpage.
Advanced JavaScript
- navigator.appName/appVersion contain the browser name and version.
- document.cookie allows read and write access to cookie so to set a cookie
function setCookie(c_name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); }
- The onsubmit event can be used to validate a form.
- document.img_name.src =“pic.gif” changes an image.
- To change the content of a block with a given id :
document.getElementById("block_id").innerHTML=txt;
- To set or clear a timed action:
var t=setTimeout("javascript statement",milliseconds); clearTimeout(t);