Cheatsheet for JS

Shortcuts-JS.js

// Comment on single line or end of line

/* Comment on...
multiple lines */

/**
GROUP.Fn: What it does.
    * @syntax: fn (par1, par2, par3);
    * @param : (explanation & nature)
    * @return: (explanation & nature)
    */

// Get a reference to the global object (`window` in the browser, `global` on the server).
var root = (function () {
    return this || (0 || eval)('this');
}());

// Get HTML elements
var elemWithId = document.getElementById('abc');        //H: get the id="abc" element (one & only one)
elemWithId.innerHTML = markup;

var elemsWithName = document.getElementsByName('abc');  //H: get all name="abc" elements
var myList = document.getElementsByTagName("p");        //H: get all p elements
var myList = document.getElementsByClassName("abc");    //H: get all class="abc" elements

// Get all, get one, push change
var myList = document.querySelectorAll("p.xyz");        //H: get all [css-selector] elements
var firstElem = myList[0];
myList[0].style.color="red"; // make the first one red


/// ^--- I STOPPED READING HERE ---^ //

// when Enter key is pressed in a text field, click an associated button
document.getElementById('textBox').onkeypress = function (e) {
    var evt = e ? e : window.event;
    if (evt.keyCode == 13) {
        document.getElementById('enterButton').click();
        return false;
    }
};

if (window.console && window.console.log) {
    window.console.log("This is a debugging message.");
}

var concatenatedString = "Hello, " + "world!";
concatenatedString += " And hello again!";

var add = function(a, b) { return a + b; };

var handleVariableArgumentList = function() {
   var i;
   for (i = 0; i < arguments.length; ++i) {
      // do something with arguments[i]
   }
}

var person = { first_name: 'Kris', last_name: 'Johnson' };
person.middle_initial = 'D';
person["age"] = 29;
delete person.middle_initial;  // person.middle_initial now undefined

function Person(first, last) {
    this.first = first;
    this.last = last;
}
Person.prototype.fullName = function() {
    return this.first + ' ' + this.last;
}
Person.prototype.fullNameReversed = function() {
    return this.last + ', ' + this.first;
}
var p = new Person("Kris", "Johnson");
var fullName = p.fullName();

var data = [1, 2, 3, 4, 5];
var i;
for (i = 0; i < data.length; ++i) {
    // do something with data[i]
}
data[5] = 6;
data[1000] = 3.14;  // data.length is now 1001; data[6] is undefined

for (prop in obj) {
   if (obj.hasOwnProperty(prop)) {
      // prop is a member of the object, not its prototype
   }
}

for (prop in obj) {
   if (typeof prop !== 'function') {
      // prop is not a function
   }
}

try {
    // Thrown object should have properties "name" and "message"
    throw new Error("An error occurred");
}
catch (e) {
    // Do something with e.name and e.message
}
finally {
    // This will always run
}


// jQuery

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script> 

$(document).ready(function() {
    // do stuff when DOM is ready
});


// Microsoft ASP.NET AJAX

var label = $get("<%= Label1.ClientID %>");        // get DOM element
var control = $find("<%= MyControl1.ClientID %>"); // get client control

// serialize objects to/from JSON using JavaScriptSerializer (requires ScriptManager)
var contact = Sys.Serialization.JavaScriptSerializer.deserialize(contactString);
var contactString = Sys.Serialization.JavaScriptSerializer.serialize(contact);