Introduction To Computational Media on the Web (ICM-W) : Week 3

JavaScript Functions and Objects

Classes and Objects

JavaScript like Java is what is called an "Object Orientated Language". That means that it supports things called "classes".

Class: A class is a blueprint for an object. Within a class, you define what methods (functions) and properties an object of that "type" has. In essence, a class is a category for things.

Object: An object is an "instantiation" of a class. It is an individual thing that has properties similar to those of other things of the same class.

For instance, when we think of a human we may think of individuals but in reality we think about a bunch of individuals and all of the things they have in common (eating, breathing, sleeping, walking and so on). In this way, "human" is a class.

When we think of an individual, that is an object. It is an instantiation of a human with all of the same methods and properties that come along with being human (can walk, sleeps, breathes, has eye color, has height and so on).

To create a class, we define what properties will be in that class and the methods/functions that class has:

// Define the "human" class
function human(height, weight, age, eyecolor)
{
	this.height = height;
	this.wieght = weight;
	this.age = age;
	this.eyecolor = eyecolor;
}

The keyword "this" has special meaning in classes. It means that the variable refers to object you are creating or working with at that moment.

Javascript uses "dot syntax". It means that you call methods and access properties with a ".".

We can also define methods that are part of the class:

// Define the "human" class
function human(height, weight, age, eyecolor)
{
	this.height = height;
	this.wieght = weight;
	this.age = age;
	this.eyecolor = eyecolor;

	this.x = 0;  // Position in space
	this.y = 0;

	// A function called walk
	this.walk = walk;
}

function walk(number_of_steps)
{
	this.x = this.x + (this.height * number_of_steps);
}

To actually use this human class and create an instance of a human we would do something like the following:

// Define the "human" class
function human(height, weight, age, eyecolor)
{
	this.height = height;
	this.wieght = weight;
	this.age = age;
	this.eyecolor = eyecolor;

	this.x = 0;  // Position in space
	this.y = 0;

	// A function called walk
	this.walk = walk;
}

function walk(number_of_steps)
{
	this.x = this.x + (this.height * number_of_steps);
}

// Create two humans
var shawn = new human(6, 200, 10, "hazel");
var karen = new human(5.5, 120, 10, "blue");

shawn.walk(10);
karen.walk(9);

If we looked at the results, shawn would have moved (6 * 10) or 60 and karen would have moved (5.5 * 9) or 49.5.

Shawn and Karen are both humans and have the same methods and properties but when you tell them to walk, the values of these properties come into play and they exhibit different behavior. They are both the same class, but different instantiations or objects of that class. More Information:
JavaScript Objects Introduction

Built-in Objects and Functions

JavaScript being an object orientated language and all has a bunch of built-in classes (and associated methods). In fact, we have already been using some of these.

Timer: The built-in setTimer function allows you to call a function after a certain period of time has elapsed.
Example: Timer Example (view source)

Interval: The built-in setInterval function allows you to call a function repeatedly at a set interval.
Examples: Interval Example, Interval Example 2, Interval Example 3, Interval Example 4 (don't forget to view source).

Date: JavaScript Date Object Reference - Date Example (View the source)

Window: Is the base class for many things such as "alert()". Alert is actually a method inside the "window" class. Window has a ton of properties and methods that you can use: Window Object

The window object is actually the main part of something called the HTML DOM (HTML Document Object Model). This is what we have actually been using already to get at individual elements on the page and to modify them.

HTML DOM Reference

"document" is actually a "property" of "window". We don't need to say "window.document" but we can omit window.

		
	var currentDocument = window.document;
	// same as
	var currentDocument = document;

document is itself an object, it has a bunch of methods and properties as well: Document Object

We have been using the "getElementById()" method to fetch other objects that correspond to elements on the page. These objects are different depending on the type of element that is retrieved: Anchor, Body, Button.

<html>
	<head>
		<title>DOM Example</title>
		<script type="text/javascript">
		
			var thelink;
			var theimage;
			var thebutton;
		
			function runThroughIt()
			{
				thelink = document.getElementById("thelink");
				alert("thelink: " + thelink);
				
				theimage = document.getElementById("theimage");
				alert("theimage: " + theimage);
				
				thebutton = document.getElementById("thebutton");
				alert("thebutton: " + thebutton);
			}
			
			function changeIt()
			{
				thelink.href = "http://www.yahoo.com";
				
				theimage.src = "http://scrapetv.com/News/News%20Pages/Entertainment/images-2/hulk-hogan-with-mean-gene-okerlund.jpg";
				
				thebutton.value = "No More Please!";
			}
		
		</script>
	</head>
	<body>
		<div>
			<a href="http://www.google.com/" id="thelink">Link to Google</a>
		</div>
		
		<div>
			<img src="fighter.jpg" id="theimage" />
		</div>
		
		<div>
			<input type="button" name="abutton" value="Button Value" id="thebutton" />
		</div>	
		
		<div>
			<input type="button" name="run" value="run" onclick="runThroughIt();" />
			<input type="button" name="run" value="change" onclick="changeIt();" />
		</div>
	</body>
</html>

Try It

style: All of the elements in the DOM have a "style" object associated. This object allows us to change any of the CSS attributes associated with that element: Style Object

More Operators

Modulo %

% gives us the value of the remainder after a division operation.

        var r = 10 % 3;
        alert(r);

Modulo allows us an easy way to do something every other time or every how every many times.

		var counter = 0;
		
		function buttonClicked()
		{
			if (counter % 2 == 0)
			{
				alert("Yay!");
			}
			else
			{
				alert("Boo!");
			}
		}
		
		<input type="button" value="Click Me" onclick="buttonClicked();" />

When i equals 0, i % 2 would equal 0, when i is 1, i % 2 equals 1, when i is 2, i % 2 equals 0 again and so on... i % 2 will always alternate between 0 and 1 as long as we increment i.

It is the same concept with % 3 or any other number. The result will always be 0, 1 or 2 when it is 3. When it is 4 the result will be 0, 1, 2 or 3. Always going up to one less than the number you are dividing by.