WebReference.com - Chapter 2 of JavaScript Design, from New Riders (2/5) | WebReference

WebReference.com - Chapter 2 of JavaScript Design, from New Riders (2/5)

To page 1current pageTo page 3To page 4To page 5
[previous] [next]

JavaScript Design

As you saw, the page didn't crash and burn. It just ignored the JavaScript and went on and put up the page on the screen. I would rather see an error message issued so that I could see any problems that arise, but neither of the newest versions of the browsers indicated any trouble at all. (In Netscape Navigator 4.7, a little error message blinks in the lower-left corner, but it happens so fast that you cannot tell that your script has an error.) Debugging JavaScript is often a matter of not seeing what you expect on the screen rather than seeing any clue that you've coded your script incorrectly. However, ignoring case sensitivity is likely to be one bug in the code that you should suspect immediately.

For the most part, JavaScript is typed in lowercase fonts, but you will find many exceptions to that rule. In Chapter 1, you might have noticed the use of Math.floor along with toString in one of the scripts. Both of those words use a combination of upper- and lowercase fonts: intercase. Object, Math, Date, Number, and RegExp are among the objects that use case combinations as well. Properties such as innerHeight, outerWidth, and isFinite, likewise, are among the many other JavaScript terms using case combinations.

You also might run into cases differences in HTML and JavaScript. Event-related attributes in HTML such as onMouseOver, onMouseOut, and onClick are spelled with a combination of upper- and lowercase characters by convention, but, in JavaScript, you must use all lowercase on those same terms. Hence, you will see .onmouseover, .onmouseout, and .onclick.

Another area of case sensitivity in JavaScript can be found in naming variables and functions. You can use any combination of upper- and lowercase characters that you want in a function or variable name, as long as it begins with an ASCII letter, dollar sign, or underscore. Functions are names that you give to a set of other statements or commands. (See an introduction to functions in Chapter 1.) Variables are names that you give to containers that hold different values. For example, the variable customers might contain the words "John Davis" or "Sally Smith." Variables can contain words or numbers. (See the next chapter for a more detailed discussion of variables.) When the function or variable is given a name, you must use the same set of upper- and lowercase characters that you did when you declared the variable or functions. For example, the following script uses a combination of characters in both variables and function. When the function is fired, the name must be spelled as it is in the definition.

VarFuncCase.html

<html>
<head>
<title>Cases in Variables and Functions</title>
<script language="JavaScript">
var Tax=.05
function addTax(item) {
var Total=item + (item * Tax);
var NewTotal=Math.floor(Total);
var Fraction=Math.round(Total *100)%100;
if (Fraction<10) {
Fraction = "0" + Fraction;
}
Total=NewTotal +"." + Fraction;
alert("Your total is $" + Total);
}
</script>
</head>
<body bgcolor="palegreen">
<center><h2>
<a href=# onClick="addTax(7.22)";> Click for total
</a>
</body>
</html>

Several variables and two functions (the alert function is built in and so has a name already—alert) are included in the script, but notice that all of the variable names and function references use the same combination of upper- and lowercase characters. The string message for the alert function reads, "Your total is $" + Total);. The first use of total is part of a message (string literal) and is not a variable in this case. The Total attached to the end of the alert message, however, is a variable, and it uses the uppercase first letter as the variable does when it is defined. Likewise, the argument in the function (item) is always referenced in lowercase because it is initially written in lowercase. The variable declaration lines beginning with var signal the initial creation of a variable, and the case configuration used in those lines is the configuration that must be used throughout the page in reference to a given variable. Chapter 3, "Dealing with Data and Variables," explains developing variables in detail.

Figure 2.1 shows what you will see when the page loads and you click the link text. If you want a link to launch a JavaScript function, you can use a "dummy" link by inserting a pound sign (#) where the URL usually is placed. Then, by adding an event handler, you can launch the function. Try changing the value in the addTax() function to see what you get. Also, see what happens when you change addTax to ADDTAX().

JavaScript is case sensitive example
Figure 2.1 None of HTML is case-sensitive, but virtually all of JavaScript is.


To page 1current pageTo page 3To page 4To page 5
[previous] [next]

Copyright Pearson Education and
Created: December 10, 2001
Revised: December 10, 2001

URL: http://webreference.com/programming/javascript/jsdesign/chap2/2.html