Thursday, December 01, 2005
Introduction to JavaScript Functions
Blog Entry #23
In my very first blog entry, I drew a parallel between JavaScript and elementary algebra, noting, inter alia, "If you are comfortable with the concepts of variables and functions, both of which crop up in JavaScript, then you, too, may find JavaScript to be your cup of tea." Having discussed variables in JavaScript in Blog Entry #5, we turn our attention today to JavaScript functions, which are treated introductorily in HTML Goodies' JavaScript Primers #9. Certainly, many of the command statements that we have seen thus far can fairly be considered functions in that they map an "input" onto a unique "output". For example:
document.bgColor = "blue";
maps the input "blue" onto the bluing of a document's background color. And:
location.href = "http://www.htmlgoodies.com";
maps "http://www.htmlgoodies.com" onto a linking to the HTML Goodies home page. In the programming world, a function, a.k.a. a subroutine, has a somewhat more specific definition:
"...a sequence of code that performs a specific task, as part of a larger program, and is grouped as one or more statement blocks..."
to quote Wikipedia. And at least as far as JavaScript is concerned, JavaScript Kit, in its "Functions and creating your own functions" tutorial, helpfully adds:
"Functions...are not executed until you call upon them. It's like your trusted car - it can take you places, but it only does that when you drive it - it does not start driving by itself."
HTML Goodies, in turn, states:
"A function is similar to assigning a variable name to the output of a Javascript command line. What you are doing is assigning a name to an event or a series of events so that you can call on those events by that one function name rather than rewriting the commands over and over again."
Functions are rather integral to JavaScript, as will become clear as we continue to work our way through the HTML Goodies JavaScript primers.
Function Syntax
JavaScript functions can be declared in two ways:
(1) Via a function statement, as follows:
<script type="text/javascript">
function function_name( )
{
command_statement_A;
command_statement_B; etc.
}
</script>
Before going any further, let's get straight the correct names of the various punctuating enclosure marks:
{ } are braces
[ ] are square brackets
< > are angle brackets
( ) are parentheses
In the script above, function_name is in effect a variable that identifies the function; the rules for naming JavaScript functions are thus the same as are those for naming JavaScript variables, as you might expect.
At the end of my previous blog entry, I described a JavaScript function as "an extension of the method concept"; like many methods, function_name( ) can have parameters, as we'll see in future primers.
The braces that delimit the command statements of the function do not need to be on their own lines. For the first line of the function, for example, we could (and most scriptwriters would) have written:
function function_name( ) {
As far as I am aware, there is, at least in theory, no limit to the number of command statements that a function can hold.
(2) Less frequently, a function is declared via a constructor statement, as follows:
<script type="text/javascript">
var function_name = new Function("command_statement_A; command_statement_B; etc.");
// Note the quotes around the command statements; they're necessary.
</script>
As noted in the "Placement of these Items" subsection of Primer #9, a function-containing script is typically placed in the document head, allowing the function to load into the user's RAM before it might be executed.
Executing a Function
As noted above, a function block of command statements does not run by itself, but is "called", often by:
(1) "Simply...specifying its name followed by a parenthetical list of arguments, if any," as noted by WDVL and also by the JavaScript Kit tutorial linked above (but, strangely, not by HTML Goodies), i.e.:
function_name( );
This statement can appear in the same script that holds the function, or in a subsequent script.
(2) The function_name( ); statement above can be assigned to a suitable event handler, e.g.:
<form>
<input type="button" value="Click here to call the function." onclick="function_name( );">
</form>
The Primer #9 Script
Let's now look at the Primer #9 Script and the function it contains:
<head>
<script type="text/javascript">
<!-- Hide from browsers that do not understand Javascript
function dateinbar( )
{
var d = new Date( );
var y = d.getFullYear( );
var m = d.getMonth( ) + 1;
var d = d.getDate( );
var t = m + '/' + d + '/' + y + ' ';
defaultStatus = "You arrived at the page on " + t + ".";
}
// End hiding -->
</script>
</head>
<body bgcolor="ffffcc" onLoad="dateinbar( )">
As you can see, the dateinbar( ) function is triggered by an onLoad event handler, which we discussed (and demonstrated) in Blog Entry #10.
Joe discusses in some detail the HTML-commenting-out of the dateinbar( ) function for non-JavaScript-capable browsers in the "Hey! What are those <!-- and --> things up there?" subsection of Primer #9, even as the gist of this information has appeared in the "Comments" entry on the "Click Here For What You've Learned" page linked at the bottom of each primer as far back as Primer #3. At first glance, one is inclined to think, "Man, this material is seriously out of date; anyone out there using a non-JavaScript-capable browser needs to do some major upgrading," but perhaps it has some value as an 'historical aside'. In any case, we for our part discussed various modes of commenting in Blog Entry #6.
If the command statements in the dateinbar( ) function look familiar, they should - the first five of them are taken, 'verbatim', from the Primer #6 assignment, so there's no need to review them here. With respect to the last command:
defaultStatus = "You arrived at the page on " + t + ".";
I hashed over the execution of window.defaultStatus and window.status commands on my computer in the "Window Status, revisited" section of Blog Entry #18. Contra Primer #9, a window.status command does not need to be paired with an event handler, and can indeed be used in place of a window.defaultStatus command IF there are no other window.status commands in the document to override it.
Other code possibilities...
(1) You may be wondering, "Is it really necessary to use a function here?" Not at all, it must be confessed. On my computer, I find that I can (a) comment out the function dateinbar( ), {, and } lines, (b) leave the first five dateinbar( ) commands where they are, and then (c) replace onLoad="dateinbar( )" in the <body> tag with:
onLoad="defaultStatus = 'You arrived at the page on ' + t + '.' ;"
to reproduce the script's effect when using either MSIE or Netscape. (With Netscape but not MSIE, I can alternatively (a) comment out the function dateinbar( ), {, and } lines, (b) leave all six dateinbar( ) commands where they are, and then (c) delete onLoad="dateinbar( )" in the <body> tag. As noted in the "Window Status, revisited" discussion linked above, it's my experience that MSIE is 'fussier' than Netscape vis-à-vis writing status bar messages.) In addition and more awkwardly, assigning all six function commands to the onLoad event handler will also work:
<body bgcolor="ffffcc" onload="var d = new Date( ); var y = d.getFullYear( ); var m = d.getMonth( ) + 1; var d = d.getDate( ); var t = m + '/' + d + '/' + y + ' '; defaultStatus = 'You arrived at the page on ' + t + '.' ;">
(2) Joe declares the dateinbar( ) function conventionally with a function statement, but he could have used a constructor statement:
var dateinbar = new Function ("var d = new Date( ); var y = d.getFullYear( ); var m = d.getMonth( ) + 1; var d = d.getDate( ); var t = m + '/' + d + '/' + y + ' '; defaultStatus = 'You arrived at the page on ' + t + '.' ;");
(Doesn't look quite as nice, does it?)
This function can also be triggered by the onLoad="dateinbar( )" event handler.
(3) On my computer, the dateinbar( ) function can be executed by a simple dateinbar( ); statement, i.e.:
dateinbar( );
// In the source code, this would be placed outside, and subsequent to, the function.
when using Netscape but not MSIE, regardless of whether the statement is in the document head or body. (Once again, with MSIE I am only able to write the window defaultStatus or status property via an event handler.)
Function Returns
A function is often designed to direct its 'output' to code elsewhere in the document; this is straightforwardly accomplished via an appropriate return statement. Consider the modification of the Primer #9 Script shown below:
// After the first five commands of the dateinbar( ) function, we write:
defaultStatus = "You arrived at the page on " + t + ".";
return defaultStatus;
}
document.write(dateinbar( ));
// End hiding --> etc.
What happens is that the document.write(dateinbar( )); command triggers the dateinbar( ) function, whose concluding return defaultStatus; statement sends the value of defaultStatus ("You arrived at the page on " + t + ".") back to the document.write(dateinbar( )); command, which then writes the defaultStatus value to the page display. Importantly, we see in the code above that JavaScript functions can be called from within other JavaScript expressions. Function returns will crop up on several occasions when we work our way through the HTML Goodies JavaScript Script Tips.
The Primer #9 Assignment
Let's turn now to the Primer #9 Assignment, in which Joe asks the reader to 'functionize' a series of commands that outputs a greeting to the user. Here are a few points that I would make about Joe's "possible answer" thereto:
(1) We discussed the syntax for the prompt( ) method of the window object in Blog Entry #11; as noted there, if you're not going to put anything in the user input field of the prompt box, then you can leave out the second set of quotes in the prompt( ) instance.
(2) For returning the page address, it's a better idea to use a window.location or location.href command than to use a document.location command; as noted in Blog Entry #13, the location property of the document object is deprecated.
(3) Somewhat unintuitively, Joe variabilizes "My Great Page" by putting it in the <title></title> in the document head and then assigning document.title to a ttl variable. Hmmm...who would have thought of that? In my own answer to the assignment, which appears below, I for this part of the script simply wrote: var mgp = "My Great Page";
(4) With respect to the alert box message:
(a) In the assignment, "Hello", the first comma, and the concluding exclamation point become in the answer "Hi", a period, and a period, respectively. (Arrrgh!! I warned you that Joe can be sloppy...or is he deliberately trying to annoy the fastidious types in the audience?)
(b) In the answer, the order of the ttl and page variables in the instance of the alert( ) method is incorrect (the order is correct/reversed in the page's source).
Putting it all together, here is my answer:
<script type="text/javascript">
function greeting( ) {
fn = window.prompt("What is your first name?");
ln = window.prompt("What is your last name?");
pa = location.href;
mgp = "My Great Page!";
window.alert("Hello " + fn + " " + ln + ", Welcome to " + pa + ", " + mgp); }
greeting( );
</script>
The JavaScript Function Object
Finally, I would be remiss if I did not bring to your attention that JavaScript has a built-in Function object, with attendant properties and methods (none of which turn up in any of the HTML Goodies primers or script tips, BTW), for those programmers who might find a use for it.
HTML Goodies' JavaScript Primers #10, which we'll look over in the next post, heralds a return to the topic of event handlers, focusing specifically on the "act[ing] after the fact" onMouseOut and onUnload commands. See you then.
reptile7
- posted by A. Peak @ 2:07 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)