Dear Sir/Ms.,
I was referred to this forum by Wrox customer support.
I am a student of Web Design/Development and I am working with your textbook, Beginning JavaScript 4th Edition, by Paul Wilton and Jeremy McPeak.
Obviously, web standards change rapidly and so particularly JavaScript code can possibly become outdated. I am wondering if this is the case with your exercise on page 96 of the text, "Try It Out try...catch and Throwing Errors."
My concerns are as follows:
1. Obviously the frameset document type is outdated. In fact, HTML5 no longer even supports this document type. Is there a way to revise the code of this example so that it works in a single document?
2. As far as I know, the name attribute has been deprecated or obsolete altogether since the XHTML standard, yet it appears within the XHTML form in this example. According to all online sources I can find, the name attribute should be replaced with the id attribute. Is this true?
3. When I attempt to execute the code, no matter what I do, I am presented with the following error message in an alert box:
"The following error occurred Cannot read property 'txtNum1' of undefined"
I have gone over and over this code and cannot find any error in my code. I have also tried the code from your code repository and find that this also produces errors particularly in Chrome.
Here is my code for both files involved:
calcfactorialtopframe.html
===================
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- This document is structured using the XHTML Frameset, which is now
considered very close to obsolete. Though sites exist that still use
it, the emerging standard of HTML5 does not even support it.
I am a little mystified why the authors would even have included such
an example in a beginner's text on JavaScript.
-->
<head>
<title>try…catch Example</title>
<!-- The following JavaScript function is called by the frame's source page -->
<script type="text/javascript">
function calcFactorial(factorialNumber) {
// Declare variable to hold initial value of the factorial result.
var factorialResult = 1;
for (; factorialNumber > 0; factorialNuumber--) {
factorialResult = factorialResult * factorialNumber;
} // end for
// Return to calling function the resulting value.
return factorialResult;
} // end calcFactorial(factorialNumber)
</script>
</head>
<frameset rows="*,*" cols="100%">
<frame id="fraCalcFactorial" src="calcfactorial.html" />
</frameset>
</html>
calcfactorial.html
=============
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>try…catch Example</title>
<!-- NOTE: This placement of a script embedded in the head of an HTML document
is no longer in keeping with best practices, and can tend to make for
slower processing with large scripts (whhich this is not).
-->
<script type="text/javascript">
/* The following function takes user input in a screen form, asking the
user to input a positive number for which it will calculate the
factorial. Assuming no error state, the script fills in the value of
the factorial in the screen form.
*/
function butCalculate_onclick() {
try {
if (window.top.calcFactorial == null)
throw "This page is not loaded within the correct frameset.";
if (document.form1.txtNum1.value == "")
throw "!Please enter a value before you calculate its factorial.";
if ( isNaN(document.form1.txtNum1.value) )
throw "!Please enter a valid number.";
if (document.form1.txtNum1.value < 0)
throw "!Please enter a positive number.";
document.form1.txtResult.value =
window.parent.calcFactorial(document.form1.txtNum1.value);
} // end try
catch(exception) {
if ( typeof(exception) == "string" ) {
if ( exception.charAt(0) == "!" ) {
alert( exception.substr(1) );
document.form1.txtNum1.focus();
document.form1.txtNum1.select();
} else {
alert(exception);
} // end inner if-else
} else {
alert("The following error occurred " + exception.message);
} // end outer if-else
} // end catch
} // end butCalculate_onclick()
</script>
</head>
<body>
<!-- User Entry Form for Desired Factorial -->
<form action="#" id="form1">
<input type="text" id="txtNum1" size="3" /> factorial is
<input type="text" id="txtResult" size="25" /><br />
<input type="button" value="Calculate Factorial"
id="butCalculate" onclick="butCalculate_onclick();" />
</form>
</body>
</html>
Any assistance you can provide is greatly appreciated.
Sincerely,
Robert Hieger
Problem with Chapter 4, Page 96--try...catch Throwing Errors
