WebReference.com - Chapter 2 of JavaScript Design, from New Riders (2/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 alreadyalert) 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().
Figure 2.1 None of HTML is case-sensitive, but virtually all of JavaScript is.
[previous] [next] |
Copyright Pearson Education and
Created: December 10, 2001
Revised: December 10, 2001
URL: http://webreference.com/programming/javascript/jsdesign/chap2/2.html
