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).
  • A simple “Hello World” example
    <script type="text/javascript">
    <!--
    document.write("Hello World!");
    //-->
    </script> 
  • 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); 
Recent changes RSS feed Creative Commons License Donate Minima Template by Wikidesign Driven by DokuWiki