CS 4440 Wiki:
JavaScript Cheat Sheet


Below is an abridged cheat sheet of JavaScript fundamentals relevant to Project 3.

This page is by no means comprehensive—we encourage you to bookmark and familiarize yourself with one of the many in-depth JavaScript tutorials on the web. Some great examples are:

Executing JavaScript Code

In Project 3, you'll work with three fundamental ways to execute JavaScript code: on-page scripts wrapped in HTML code, functions, and event-driven execution.

On-page scripts:

<script>
    /* Code to be executed as the parent HTML code is processed. */
</script>

Functions:

function foo(){
    /* Code to be executed when this function is called. */
}

Events:

document.onload = function(){ 
    /* Code to be executed when the document is loaded. */ 
}

window.onload = function(){ 
    /* Code to be executed when the window is loaded. */ 
}

Debugging

As with other languages, debugging is key to understanding where your code is incorrect. There are two key features to help you debug your code: alert boxes, and your browser's JavaScript console. These are analogous to the many types of print statements that you've seen in other languages.

Alert boxes:

var x = "Hello, world!"      
alert(x);       // On execution, opens an `alert()` box saying "Hello, world!".

Console logging:

var x = "Hello, world!"
console.log(x); // On execution, logs "Hello, world!" to your browser's JS console.

Variables

Like Python, variables types are inferred by the interpreter. For brevity, we won't cover casting here as you will not need to use it in your work. The following is borrowed from HTMLCheatSheet.com.

Initializing:

var a;                          // Variable.
var b = "init";                 // String
var c = "Hi" + " " + "Joe";     // c = "Hi Joe"
var d = 1 + 2 + "3";            // d = "33"
var e = [2,3,5,8];              // Array.
var f = false;                  // Boolean.
var g = function(){};           // Function.
var h = 1, b = 2, c = a + b;    // One line.

Data types:

var age = 18;                           // Number.
var name = "Jane";                      // String.
var name = {first:"Jane", last:"Doe"};  // Object.
var truth = false;                      // Boolean.
var sheets = ["HTML","CSS","JS"];       // Array.
var a = null;                           // Null.

String Manipulation

Length of a string:

var x = "cs4440";
var y = x.length;       // y = 6

Appending to a string:

var x = "cs4440"
var y = x + " is cool"  // y = "cs4440 is cool"

Substrings:

var x = "cs4440";
x.indexOf("4440");            // Find the substring's first index; -1 if not found.
x.lastIndexOf("4440");        // Find the index of the substring's last occurrence.
x.slice(0, 2);                // Grabs the substring "cs" from "cs4440".
x.replace("4440","3500");     // Replaces substring "4440" with substring "3500". 
x.charAt(0);                  // Return character at the index (in this case, "c").

Splitting by a delimiter:

var x = "cs4440";
var y = x.split("cs");        // Splits string by delimiter 'cs' into array ['','4440'].

Array Manipulation

Indexing:

var courses = ['cs4440', 'cs3500', 'cs3810']
var x = courses[0]                  // Accesses the item at index 0 ('cs4440').
var x = courses[courses.length-1]   // Accesses the last array item ('cs3810').

Requests

We recommend the following API calls for issuing GET and POST requests.

GET:

$.get('http://url.com', {param1: (p1_value), param1: (p2_value)});

POST:

$.post('http://url.com/form?', {
    param1: p1_value,
    param2: p2_value,
});

Accessing site elements

DOM elements:

The document object refers to the page DOM tree, where you'll be able to access all page objects. We recommend using the getElementById() function.

var x = document.getElementById("eID").innerHTML;             // Grab an element.
var y = document.getElementById("eID").children[0].innerHTML; // Grab 1st item of an array.

Cookies:

You can also access the website's cookie in a similar fashion. Note that the above code only accesses the raw cookie in full (i.e., the entire site cookie that you can see in Firefox's Developer Tools). If you want to access specific fields of this cookie, you'll need to add some additional parsing code!

var z = document.cookie; // Grab the full site cookie.

Table of Contents: