At the heart of the discipline of computer science is the process of
creating an algorithm and implementing the algorithm in a computer
language. In
this project, we will imagine we are working for a software company
which has been
given the job of developing web demos for a new calculus
textbook. One
of these demos is to be designed to help students approximate the value
of a limit. We have two tasks: 1) devise an algorithm for approximating
the limit
of a function f(x) as x approaches a fixed value c, and 2) implement
this algorithm in the JavaScript programming language, using
various input/output HTML elements such as buttons and text
boxes.

The limit approximation algorithm we will use is to evaluate the
function f(x) for x values "close" to the number c, and then use these
values to "guesstimate" the value of the limit. We will have to devise
a way of choosing what we mean by "close" when we actually implement
this algorithm.

To build our limit algorithm, we will need the ability to type
in a mathematical expression f(x) and evaluate f(x) at values of
x. The JavaScript
library parseFunction.js has a function
that will
carry out this task. Before we dive into the details, try out the
Function Evaluator web page that
illustrates how to use the library to evaluate mathematical
expressions. When
prompted for f(x) type in "2*x^2" and when prompted for x type in
"4." The page will calculate f(4), which
should be 32. Try running this page with other functions, such as
ln(x), sin(x), fractions, etc, and see how it evaluates f(x) at
different values of x.

Now, let's take a look at the structure of the Function Evaluator
web page:

<html>

<head>

<title> Function Evaluator </title>

<script SRC="parseFunction.js" >

</script>

</head>

<body>

<script type="text/javascript">

var f, x, fx;

f = prompt("Enter a function f(x)=","");

x = parseFloat(prompt("Enter a number x=",""));

fx = evaluate(f, x);

document.write("<h3><center>");

document.write("The result of evaluating </br> <b style=color:blue>" + f +

"</b> </br> at x= " + x + " is </br>" +

"<b style=color:red>" + fx + "</b>");

document.write("</h3></center>");

</script>

</body>

</html

fx = evaluate(f, x);

Exercise 1: Look at the library file "parseFunction.js" and locate the function named "evaluate." What are the inputs to this function (describe what type of data is expected by the function)? What does the function output?

At this point, it is not important to look in-depth at how the code in parseFunction.js works. We will use the function "evaluate" just as we use the function Math.sqrt -- we assume they are constructed correctly and use them as parts of other programs. As long as we know what the input and output mean for the function "evaluate", we should be able to use this function effectively.

Exercise 2: We will now design a simple form of the limit demo we are hoping to build. Our simple demo page will show the value of f(x) for x close to c. We will construct a number close to c by setting x=c+h for a small value of h (like 0.01). Create a web page that prompts the user for a function f(x), for a value of a number c, and for a value of a small number h. Then, have the web page report to the user the value of f(c+h) and f(c-h).

By using the web page you just created (with smaller and smaller values of h), a student could get some idea of what value f(x) is appraching, as x gets closer and closer to c. But, the student would have to repeatedly reload the page and gather new input, which would be tedious. It would be better to have a page where the function f(x), the number c, and an initial small number h are input in text boxes, and then have a button which would successively evaluate f(c+h) and f(c-h) for smaller and smaller h. To create this new page we need to use HTML forms.

As an example, here is the Newton's method demo shown in class. Print out the source code of this page for reference. The part of the page defining a form is in the body of the page and consists of the following code:

<form name="NewtonForm">

<input type="text" name="number" size=8 value=100 onChange="initGuess();">

<input type="hidden" name="guess" value=1>

<p>

<input type="button" value="Get next approximation" onClick="addNextApprox();">

<p>

<textarea name="output" rows=11 cols=40

wrap="virtual">Initial approximation = 1</textarea>

</form>

The name of the form is "NewtonForm." This is the name that we
can use to reference the form. Elements within the form are
also named -- a text input box is named "number", a hidden input
element (not
visible on the screen) is named "guess", and a text area (multi-line
text) is named "output."

Let's look at the three functions defined in the head section of the
Newton's method page:

function initGuess()

{

// Inputs: none

// Output: none

document.NewtonForm.guess.value=1;

document.NewtonForm.output.value='Initial approximation = 1';

}

function nextNewton(number, guess)

// Inputs: guess is an estimate of the square root of number

// Ouput: the next (improved) guess using Newton's method

{

return (guess + number/guess)/2;

}

function addNextApprox()

// Inputs: none

// Output: none

{

document.NewtonForm.guess.value =

nextNewton(parseFloat(document.NewtonForm.number.value),

parseFloat(document.NewtonForm.guess.value));

document.NewtonForm.output.value +=

'\nNext approximation = ' +

document.NewtonForm.guess.value;

}

The web page itself is referred to as "document", so when we see something like "document.NewtonForm.ouput.value" what we are referring to is the value of the "output" element in the "NewtonForm" of the web page. The "output" element is a text area and the "value" of this element is a string that appears in the text area. In the initGuess() function we are setting the value of "document.NewtonForm.guess" to be 1 and the value of the text area called "document.NewtonForm.output" to be "Initial approximation = 1"

Exercise 3: Explain what the functions nextNewton(number, guess) and addNextApprox() are doing, making reference to form elements where needed.Try out the Newton's method demo again, paying particular attention to how the demo is laid out and how it uses form elements.

At this point we are ready to design the implementation of the simple algorithm we discussed earlier for finding the limit of f(x) as x gets "close" to a number c. Recall that we construct a number close to c by setting x=c+h for small values of h. For our demo, the user should input f(x), the number c, and an initial small number h. The demo should then report to the user the values of f(c+h) and f(c-h), for a well-chosen sequence of smaller and smaller h.

Here is a screen shot of the demo shown in class. This is one possible way of organizing the user interface

for our demo.

Exercise 4: We will write the HTML code for the Limits Demo page by looking at a partially constructed template page located here. Look over this page and answer the following:

- What types of form elements are being used in this page? What is a "hidden" form element? What purpose does the hidden element named "currenth" serve?
- Describe the purpose for the two functions listed in the head
section of this page. Determine which form element would call
which of these two JavaScript functions.

Exercise 5: Fill in the places listed as **- Fill in here -** on the template page and test out the page.

The second part of your report should consist of a short user's manual for your demo. This should include background on the demo - what exactly is the demo intended to do and what is the math that you need to understand it. It should also include directions for how to use the demo, including screen shots of the demo in use. For capturing screen images from the computer, you can use the program xv. The lab instructor will do a short demo of how to use this during one of the lab periods.

Make sure that you consider the College's Honor Policy. You should write the following in full and sign it on your report:

On my honor, I pledge that I have not given, received, nor tolerated others' use of unauthorized aid in completing this work.

Back to MCS 170 home page