JavaScript Tutorial

JavaScript Tutorial - Functions

This may seem to be out of place in a tutorial because most books tend not to introduce subprograms (functions) until later, but I think the student should start thinking in these terms early rather than later.

Subprograms are one of the most powerful building blocks of modular programming. It helps to break down a complex task into bite-size pieces.

The concept behind a function is that you pass in one or more arguments (values that you pass in) into a black box and it returns a value. Different black boxes can have different names. It's called a black box because you may not have any idea what is going on inside. Someone gives you a black box and says that you give it a number and it will do some operation on it and return another number.

You may have noticed examples of functions in earlier parts of the tutorial.

For example we may define a couple of functions for doing squares and cubes:

function square(x) {
	return x*x;
}
function cube(x) {
	return x*square(x);
}

A function in JavaScript doesn't necessarily have to return a value. (Then what is it doing? It may be modifying global values. And generally a function that returns no value is called a subroutine in other languages.

In the above example you see that I have the cube function calling the square function even though I could have easily done the trivial multiplication there. I wanted to demonstrate one of the powers of sub-programming. Suppose you have a really complicated function and another one which is just a special case of it. Instead of retyping or copying the code from the first into the second just call the first function for that special case. For example in C++ you specify the operations on a class object, if ``+='' makes sense for your class object, then the ``+'' operation is usually defined in terms of ``+=''.

The single most important reason for this practice is to help with code maintenance. If you have the same bit of complicated code in two places, then if you find a bug in it then you need to remember to fix and test the other piece of code too. This isn't too hard to do if you're doing this with new code, but 6 months or 3 years later you will probably not remember the correlation.

Example: work/funcs.html

<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function square(x) {
	return x*x;
}
function cube(x) {
	return x*square(x);
}

// note that <PRE> is the HTML tag for pre-formatted output
// if you don't have it then all the lines will mixed
document.writeln("<PRE>x\tx^2\tx^3");
document.writeln("2\t",square(2),"\t",cube(2));
document.writeln("3\t",square(3),"\t",cube(3));
document.writeln("4\t",square(4),"\t",cube(4));
document.writeln("5\t",square(5),"\t",cube(5));
document.writeln("</PRE>");
// don't forget the closing </PRE> tag.

// example of subroutines that do not return any value
var string = "unset";
function setstring() { 		// subroutine
	string = "set";
}
function unsetstring() { 	// subroutine
	string = "unset";
}

document.writeln("<PRE>string = ",string);
document.writeln("setting string!");
setstring();
document.writeln("string = ",string);
document.writeln("unsetting string!");
unsetstring();
document.writeln("string = ",string);
document.writeln("</PRE>");
	
</SCRIPT>
</BODY>
</HTML>

HOMEWORK:

Redo the homework from the Expressions and Assignments homework. Write a JavaScript page that sets a number of variables to the following values 0, 32, 70, 100, 212
and create a function called F2C that has f as its argument and computes the expression 5/9*(f - 32) and returns its value. Hence this function is a Fahrenheit to Celsius conversion function.
Create a function named C2F(c) that computes the expression 9/5*c + 32. Use the same numbers above (and you can add its column to the above table for output).
Using the above list of numbers (call them x), output x,F2C(C2F(x)), and C2F(F2C(x)). Observe what the results are.

Slide 6