JavaScript

JavaScript is the most widely used scripting language for implementing client-side functionality in Web applications. Unlike PHP, JavaScript code is interpreted and executed in a client's web browser (not on the web server).

JavaScript? Did you mean Java?

JavaScript is a prototype-based programming language focussed on web interactivity. It was first introduced in Netscape Navigator, and it in turn gave rise to what is now ECMAScript. Originally, JavaScript was called "LiveScript". Sun, the developer of Java at the time, wanted a language that would complement its compiled Java language, and so LiveScript was renamed JavaScript.

Beyond that, Java and JavaScript are as similar as Ham and Hamster.

Java and JavaScript have similar syntax, but the under workings are quite different. For example, Java requires strict typing, but JavaScript allows for dynamic typing. Java is object-oriented, but JavaScript is prototype-oriented. Java is compiled, but JavaScript is interpreted.

JavaScript Language Components

This section highlights some features of the JavaScript language that differentiate it from other languages. For a more comprehensive JavaScript tutorial, the following tutorials are both quality:

• http://www.quirksmode.org/js/contents.html (very thorough and informative)
• http://www.w3schools.com/js/default.asp (covers less advanced concepts)

Variables and Scope

To define a variable in JavaScript, use the var keyword.

var foo = "bar";

All variables are objects. In the case above, the variable foo is an object of the class String.

Notice that like PHP, you do not have to explicitly define a type for a variable like int or String; this is because JavaScript and PHP are dynamically typed languages.

JavaScript code can access any variable higher in the “function tree”, but not vice-versa. This is called scope. All functions create their own scope.

When you reference a variable, JavaScript will look up through the "function tree" until it finds the variable you asked for. This means that you could define variables of the same name as global variables inside of functions. For demonstration of concept:

var a = "hello";
var b = "world";

function sayGoodByeWorld(){
	var a = "goodbye";

	alert(a); // goodbye
	alert(b); // world
}

sayGoodByeWorld();

alert(a); // hello

Object Literals

A very common way of storing and transporting data in JavaScript is by using objects. You can define an object with certain properties using an object literal:

var apple = {
	color: "red",
	flavor: "sweet",
	season: "autumn"
}

alert(apple.color);  // red

Functions

To define a function in JavaScript, use the function keyword.

function sayHello(){
	alert("Hello World");
}

sayHello(); // call the function

Pass a parameter to a function like this:

function sayHello(name){
	alert("Hello, "+name);
}

sayHello("Todd"); // call the function and pass an argument

In JavaScript, functions are objects. This means that they can be assigned to variables, manipulated on the fly, and even passed as arguments to other functions! As we will see in a couple sections, this is an extremely important feature of JavaScript that makes it such a robust language for web development.

If you want to define a scope-specific function, you can assign it to a variable like this:

var sayHello = function(){
	alert("Hello World");
}

sayHello(); // call the function

Closures

A closure is a way to separate a certain snippet of JavaScript code from the global scope. This is useful if you do not want to "muck up" global variables. Closures are nothing more than anonymous functions that are called as soon as they are created:

​var a = "hello";

(​​​​function(){
	var b = "world";
	
	alert(a); // hello
	alert(b); // world
})();

alert(a); // hello
alert(b);​ // ReferenceError: b is not defined​​​​​​​​​​​​​​​

Most JavaScript libraries (like jQuery) write all of their code in a closure. What this means is that except for one or two variable names (jQuery or $), everything associated with the library is completely self-contained.

Events

Events are really what make JavaScript such a powerful language for web development.

Rather than being thread based, JavaScript is event based. Since all JavaScript code runs in a single thread, there are no concurrency issues. When an event occurs, JavaScript automatically calls the event callback as soon as all previous events' callbacks have finished executing.

Code in the form of a callback function is associated with events via a listener. For example, the following JavaScript causes sayHello() (the callback function) to be run whenever the button with ID "hello" is clicked (the event):

var sayHello = function(){
	alert("Hello World");
}

document.getElementById("hello").addEventListener("click", sayHello, false);

The addEventListener method takes three parameters:

• The event type
• The callback function

  The callback function is passed one parameter: the event object.

• A boolean representing bubble (false) or capture (true) phase

  You usually want Bubble phase. For more information on event phase, see #Special Topic: Event Phase

Note that versions of Internet Explorer prior to version 9 required that you use a different, albeit similar, function for assigning event listeners called attachEvent. attachEvent takes the same arguments as addEventListener, except you need to put on before the event type (e.g. "onclick"), and the third argument (phase) is not necessary.

It is perfectly valid to use an anonymous function as your callback function:

document.getElementById("hello").addEventListener("click", function(event){
	alert("Hello, World!  Event Type: "+event.type);
}, false);

QuirksMode has perhaps the best series of articles about the ins and outs of JavaScript events on the internet: http://www.quirksmode.org/js/contents.html#events

Special Topic: Event Phase

In JavaScript, events occur in two phases: Capture Phase and Bubble Phase. Consider the following HTML document:

<!DOCTYPE html>
<html>
<head><title>Event Test</title></head>
<body>
  <div id="box">
    <button id="btn">
      Hello
    </button>
  </div>
</body>
</html>

Suppose the user clicks on the "Hello" button. Events will be fired in the following order:

1. Capture Phase CLICK on the Document
2. Capture Phase CLICK on the Body
3. Capture Phase CLICK on the Div#box
4. Capture Phase CLICK on the Button#btn
5. Bubble Phase CLICK on the Button#btn
6. Bubble Phase CLICK on the Div#box
7. Bubble Phase CLICK on the Body
8. Bubble Phase CLICK on the Document

Graphically, here is the order in which an event occurs in three generic nested elements:

Why is this useful? Suppose you have a control panel (toolbar, etc) that you want to temporarily deactivate. (For example, Bold/Italic/Underline buttons on a graphic text editor that currently has no content.) You could keep bubble phase event listeners on your buttons, but prevent those events from occurring by stopping the event in the capture phase on the parent element before the event reaches your buttons! Example:

var disableToolbarFunc = function(e){
	e.stopPropogation();
}

// To disable toolbar:
document.getElementById("box").addEventListener("click", disableToolbarFunc, true);

// To re-enable toolbar:
document.getElementById("box").removeEventListener("click", disableToolbarFunc, true);

Here is a JSFiddle showing the above code in action: http://jsfiddle.net/r32Dz/

Word of caution: Like many great things in web development, capture phase does not work in versions of Internet Explorer prior to version 9. There is no elegant substitution for older versions of Internet Explorer.

Prototypal Inheritance

JavaScript implements prototypal inheritance, as opposed to a language like Java or C++, which implements classical inheritance. JavaScript is one of only a handful of languages implementing prototype-based inheritance.

Here's how it works. Every callable object (function) has a prototype. When instances of that object are created, their properties and methods are copied (inherited) from the prototype. Additionally, changes made to the prototype later in the program are "copied" to every instance.

For example, if you wanted to make a method on all strings that added a “!”, you could modify String’s prototype:

String.prototype.bang = function(){
	return this+"!"; // Notice: the context is the instance itself
}

alert("Hello".bang()); // alerts Hello!

To "extend" an object, just copy its prototype to a new object. However, since classical inheritance and prototypal inheritance are different concepts, copying prototypes may have results that you don't expect. This article seems to have a pretty good explanation with example implementations.

Context

Every function is called on a certain object, which is not necessarily the same object in which it was defined. This is called context.

To call a function on an arbitrary context, use either call or apply. call takes a list of arguments, while apply takes them all in an array.

To access the current context, use the this keyword. Demonstration of concept:

var sayThisColor = function(){
	alert(this.color);
}

var apple = { color: "red" }

sayThisColor();   // undefined
sayThisColor.call(apple); // red

Document Object Model

The Document Object Model (DOM) is what enables JavaScript to manipulate the content of your web page.

Nodes and Traversing the DOM

Each element on your page, whether it is a <p>, <img/>, a string of text, or even an attribute, is called a node.

Every node, except for the document itself, has exactly one parent. A single node may have multiple children.

Consider the following HTML code:

<ul id="my-list">
	<li class="fruits">Apples</li>
	<li class="citrus">Oranges and <strong>Lemons</strong></li>
	<li class="berries">Cherries</li>
</ul>

Here, the ul with ID "my-list" has three child element nodes (the three li's) as well as four child text nodes (the whitespace counts as a text node) and a child attribute node. The second LI has one child text node as well as one child element node and one child attribute node.

The DOM can be traversed in JavaScript. First, let's look at an example.

e = document.getElementById("my-list").getElementsByClassName("citrus")[0].lastChild.nodeName;
alert(e);

The above snippet gets the element with class name citrus that is a child of the element with ID my-list (the second LI in the example above), and alerts the type of its second child node (which in this case is STRONG).

Some common methods for traversing the DOM include:

• Node.parentNode
• Node.childNodes - returns an array of nodes
• Node.firstChild - same as Node.childNodes[0]
• Node.lastChild - same as Node.childNodes[Node.childNodes.length-1]
• Node.previousSibling
• Node.nextSibling

You can also search for child (including all descendants) using one of the following methods:

• Node.getElementsByTagName("tag-name") - returns an array of element nodes having the tag name tag-name that are descendants of Node
• Node.getElementById("id") - returns a single node having the ID id that is a descendant of Node
• Node.getElementsByClassName("class") - returns an array of nodes having the class class (note: this is not implemented in all browsers)

It is common in JavaScript to have long statements like the one in the example above, where you call methods on several objects in sequence.

Creating, Moving, and Removing Nodes

You will frequently find yourself wanting to modify the DOM. JavaScript provides methods that help you do this.

Consider the same HTML as above. If you wanted to add another element to the list, you could use this code:

var newLi = document.createElement("li");  // creates a node with the tag name li
newLi.appendChild(document.createTextNode("Broccoli"));
newLi.setAttribute("class", "veggies");
document.getElementById("my-list").appendChild(newLi);

If you wanted to remove the apples from the list, you could do:

var apple = document.getElementById("my-list").getElementsByClassName("fruits")[0];
document.getElementById("my-list").removeChild(apple);

If you wanted to move the apples to the end of the list, you could do this:

var apple = document.getElementById("my-list").getElementsByClassName("fruits")[0];
document.getElementById("my-list").appendChild(apple);

Notice that Node.append() both removes a node from its previous location and appends it to its new location, which is always going to be as the last child of the parent node.

In summary, here are the methods to know from this section:

• Node.append(otherNode) - removes otherNode from its current location in the DOM (if applicable) and then adds it as the last child of Node
• Node.removeChild(otherNode) - removes otherNode, a child of Node, from the DOM
• document.createElement("tag-name") - create a new node with the tag name "tag-name"
• Node.setAttribute("attribute", "value") - sets the attribute node of name "attribute" to "value"

Inspecting the DOM

Various browsers and browser plugins allow you, the developer, to look at the DOM of your web page and find what properties and methods are associated with each node. Some options include:

• Firebug. Firebug is a plugin for Firefox that is a toolkit full of web developer tools, one of which is a DOM inspector. To inspect the DOM of a web page, simply open the Firebug window while viewing the web page.
• WebKit Inspector. The WebKit Inspector, which is available in both Chrome and Safari, enables you to see the DOM tree and relationships between elements. However, its DOM inspection tools are not as robust as those of Firebug.
• Opera Dragonfly. The web browser Opera comes with a web developer toolkit similar to the WebKit Inspector called Dragonfly. It is important that you test your sites in Opera, because although Opera has only a small fraction of the desktop browser market, it is second only to WebKit on the mobile market.

Asynchronous Javascript And XML

AJAX, Asynchronous Javascript And XML, is a group of related web development techniques, standards, and technologies used on the client (web browser) side of the standard web server-client communication model. Although other languages can be used, the most common is to use javascript to send asynchronous requests to the web server in order to retrieve XML data that the javascript then uses to produce dynamic, fast, user-friendly web pages. The key idea is that a large fraction of the work happens at the web browser, and larger requests happen behind the scenes, keeping waiting times for data to come back over the network to a minimum. AJAX is generally also associated with higher-level APIs and libraries that aid in producing cleaner user interfaces for web applications.

The javascript XMLHttpRequest object is used to exchange data with the web servers without needing to reload the entire web page in the browser. This XMLHttpRequest object is now supported by all major browsers, although some browsers implement support in slightly different ways, leading to different behavior of the same code on different platforms. For this course, you should focus on supporting Firefox, but in any real production website it's very important to do validation testing using all of the major browsers including Firefox, Internet Explorer, Safari, and Opera as a minimum.

XMLHttpRequest Object

The XMLHttpRequest object handles communication with the web servers. To use it, you must first initialize a variable to be an instance of the XMLHttpRequest class.

var xmlHttp;
xmlHttp=new XMLHttpRequest();

Once you have an XMLHttpRequest, you can use it to send requests to a server. Initially, you need to connect to the server side page you are interested in:

xmlHttp.open("METHOD","REMOTE_URL", ASYNCRONOUS_FLAG);

where METHOD is "GET" or "POST", REMOTE_URL is the page that you are going to send requests to, and ASYNCRONOUS_FLAG is true or false to indicate whether the calls should be made asynchronously or synchronously. In asynchronous communication, the client can do other things while waiting for the server response, whereas in synchronous communication, the client blocks execution and waits until the response comes back before proceeding. Once the object has been opened, you can then use the send method to send a request to the server. Note that you do not explicitly set data fields to send, because it is contained in the URL request.

xmlHttp.send(null);

The XMLHttpRequest object has an attribute, readyState, that stores the current state of the request.

State	Description
0	The request is not initialized
1	The request has been set up
2	The request has been sent
3	The request is in process
4	The request is complete

For example, when a request is sent, the state is set to 2. Every time the state changes, javascript automatically calls a function specified by the onreadystatechange attribute. So, before calling a remote site, you should setup a new function:

xmlHttp.onreadystatechange=function(){
  alert('state changed to '+xmlHttp.readyState);
}

This is how asynchronous requests are handled. Once you send a request, you access the response only through the onreadystatechange function. Meanwhile, your client page can be doing other things. If you are waiting for a response from the server, you should check whether the readyState is 4, corresponding to the request being completed. The server's response is returned as part of the XMLHttpRequest' responseText attribute.

xmlHttp.onreadystatechange=function(){
  if(xmlHttp.readyState==4) {
    // perform actions
  }
}

For example, if you have following text file, server.txt:

hello world

This server page just prints the hello world message.

Here is an example AJAX implementation that gets the message from the server and prints it.

// ajax.js

document.addEventListener("DOMContentReady", function(){
	var xmlHttp = new XMLHttpRequest();
	
	xmlHttp.open("GET", "server.html", true);
	
	xmlHttp.onreadystatechange=function(){
		if(xmlHttp.readyState==4){
			var pElement=document.getElementById("msg");
			pElement.innerText = xmlHttp.responseText;
		}
	}
	
	xmlHttp.send(null);
	
}, false);

<!DOCTYPE html>
<html>
<head>
	<title>AJAX Demo</title>
	<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
	<p id="msg">(message should appear here)</p>
</body>
</html>

Sending Parameters

AJAX can sent GET or POST data to a PHP script just like regular HTML forms can do.

For example, consider the following PHP page that multiplies two numbers:

<?php
// multiply.php

$x = (float) $_POST["x"];
$y = (float) $_POST["y"];

header("Content-Type: text/plain");

echo $x * $y;
?>

We can use AJAX to get the multiplication of two numbers by sending POST data to the PHP script:

// ajax.js

document.getElementById("calc_btn").addEventListener("click", function(){
	var xmlHttp = new XMLHttpRequest();
	
	xmlHttp.open("POST", "server.html", true);
	xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	
	xmlHttp.onreadystatechange=function(){
		if(xmlHttp.readyState==4){
			var pElement=document.getElementById("result");
			pElement.innerText = xmlHttp.responseText;
		}
	}
	
	var x = document.getElementById("input_x").value;
	var y = document.getElementById("input_y").value;
	
	xmlHttp.send("x="+encodeURIComponent(x)+"&y="+encodeURIComponent(y));
	
}, false);

<!DOCTYPE html>
<html>
<head>
	<title>AJAX Demo</title>
</head>
<body>
	<p>
		<input id="input_x" type="number" placeholder="x" />
		&times;
		<input id="input_x" type="number" placeholder="y" />
		<button id="calc_btn">Calculate</button>
	</p>
	<p>
		<output id="result">(calculation should appear here)</output>
	</p>
	<script type="text/javascript" src="ajax.js"></script>
</body>
</html>

Other Resources

There are a number of other w3schools tutorials and references that you may find useful, including PHP (note the PHP and AJAX section), DOM, AJAX, and CSS. Many other resources exist around the web, and you should feel free to incorporate any existing libraries or other javascript or AJAX-related tools. For example, the Google AJAX APIs.