Monday, March 20, 2006
More on Function Calls/Parameterization
Blog Entry #33
Let's take stock for a moment of the various ways we've called JavaScript functions:
(a) In most cases, starting with the Primer #9 Script, we've called them with the onLoad event handler in the document <body> tag;
(b) We once, in the Primer #10 Assignment, called a function with the onUnload event handler in the document <body> tag;
(c) In the previous post, we triggered functions with hyperlinks and images via the onMouseOver and onMouseOut event handlers;
(d) We've even called functions with basic function_name( ); commands a couple of times (for example, in my answer for the Primer #9 Assignment in Blog Entry #23).
In HTML Goodies' JavaScript Primers #17 ("Calling Functions With Forms"), our focus today, we'll call a function using form control buttons and the onClick event handler and see a second example of function parameterization, which we introduced in the previous post. More generally, we can of course use any suitable combination of document body element and event handler to call a function:
<input onFocus="function_name( );">
<select onChange="function_name( );">
<textarea onSelect="function_name( );">
<form onSubmit="function_name( );"> etc.
Let's look now at the Primer #17 Script, which Joe demonstrates here:
<html><head>
<script type="text/javascript">
function newcolor(color) {
alert("You Chose " + color);
document.bgColor=color; }
</script></head>
<body>
<h1>Select a Background Color</h1>
<form>
<input type="button" value="Blue" onClick="newcolor('lightblue');">
<input type="button" value="Pink" onClick="newcolor('pink');">
</form></body></html>
In the document body, the script codes two buttons, "Blue" and "Pink"; when clicked, each button (a) pops up an alert( ) box indicating the user's color choice and then (b) resets the background color accordingly. Consider the "Blue" button:
<input type="button" value="Blue" onClick="newcolor('lightblue');">
At this point, "you should be able to pick this one apart by yourself," as Joe himself would say. The onClick attribute triggers the newcolor(color) function in the document head and assigns the string 'lightblue' to color, newcolor(color)'s variable parameter*:
var color = 'lightblue';
<!--Again, this statement doesn't appear in the code, but this is what happens.-->
Algebraically speaking, we have now chosen a specific value, 'lightblue', for color, the independent variable of the f(x)=newcolor(color) function. The newcolor(color) function then plugs 'lightblue' into its two command statements, giving the script's effect - pretty straightforward. The "Pink" button works the same way, of course.
*I should mention here that a JavaScript function's parameters are more commonly termed arguments; indeed, JavaScript has an arguments property via which a function can access and otherwise keep track of its arguments/parameters.
In case you were wondering, if you were to leave out the 'lightblue' or 'pink' function call parameter, then onClick="newcolor( );" will still call the newcolor(color) function. In this case, the alert( ) message will read "You Chose undefined"; the document background color with MSIE will stay/turn white or whatever color your background is set to in your browser preferences, but with Netscape turns (for reasons beyond my understanding) a limish green (hex code: #00ef08), or at least that's what happens on my computer.
If you would like an external reference for the function parameterization topic, then the "Functions with Parameters" section of JavaScript Kit's "Functions and creating your own functions" tutorial is as good as any I've seen.
Literals and strings
In the "Deconstructing the Script" section of Primer #17, Joe introduces and defines two new terms: literal and string. (Hmmm...I've been using the phrase "text string" here at my blog for quite some time now, assuming y'all knew what I was talking about.) The "Literals" section of Netscape's JavaScript 1.5 Core Guide is here. As Joe and Netscape point out, a literal is a fixed value of some sort: "blue", (the Boolean) false, 13, etc. When Joe says "string," he really means "string literal," discussed by Netscape here. Whereas Joe defines a string (literal) as "any run of letters or numbers within single or double quotes," Netscape makes clear that an empty string (""), having zero characters, still counts as a string literal.
Speaking of strings:
(a) JavaScript has a built-in String object for representing string literals as objects;
(b) JavaScript's built-in objects all have a toString( ) method that converts instances of these objects to string literals;
(c) JavaScript has a "top-level" (i.e., not associated with a particular object) string( ) function that also converts objects to strings.
We wrap up this entry with a quick comment on...
The Primer #17 Assignment
In the Primer #17 Assignment, Joe asks the reader to augment the Primer #17 Script with a prompt that solicits the user's name for subsequent incorporation into the alert( ) message of the newcolor(color) function. As shown in Joe's answer, in order for the prompt( ) command to execute "when the user enters the page," it must be placed outside the function:
<script type="text/javascript">
var user_name = window.prompt("Write your name in the box below","Write it here");
// the prompt command can alternately be placed after the function
function newcolor(color) { etc.
Interestingly, the user_name variable is declared outside of the newcolor(color) function but is nonetheless recognized by the function; in fact, the user_name variable can now be used anywhere in the document and is thus called a global variable. If we had placed the prompt( ) command inside of the newcolor(color) function, then the user_name variable would be tied to the function and not recognized outside of it (→ "Error: 'user_name' is not defined"), and would then be termed a local variable. Relatedly, the color variable of the newcolor(color) function is in effect declared inside of the function and is thus a local variable.
In the next post, we'll take on HTML Goodies' JavaScript Primers #18, in which we'll continue our look at the intersection of forms and JavaScript functions; specifically, in the Primer #18 Script we'll see a function that acts on a user's text box input and applies it to carrying out searches on search engines.
reptile7
- posted by A. Peak @ 1:43 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)