MCS 170 Project 4: Calculus Limits

MCS-170 Project 4: Creating a Calculus Limits Demo

Project Task

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.

In Lab

Using the parseFunction.js JavaScript Library

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

In the body of the web page, we see familiar commands to prompt for values and write out other values. However, the line

fx = evaluate(f, x);

is using a special function that is in the library parseFunction.js.

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.

Using Forms and Input/Output HTML Elelments

In class we have discussed some of the ways we can use HTML elements, such as buttons, in a web page. Such input/output elements are always defined using the form HTML tag. A form is a grouping of event-driven elements delimited by the tags <form name ="FORM_NAME"> and </form>. Forms are often used to collect user input and that is how we will employ them for our limit demo.

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.

Extra Credit (10 points)

Design and implement a web page demo for approximating the derivative of a function at a point. You will need to do some research to learn what a derivative is, and how to approximate it. You can feel free to model your page after the limit demo page.

Project Report:

Your report should have two parts. In the first part, concentrate on answering the exercise questions for this project. You do not need an introduction and conclusion for this first part of your report. The code for Exercise 2 and Exercise 5 should be included in your report in the sections where your discuss these two exercises.

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