JavaScript Tutorial Part IV Scrolling Tape Calculator	3.0/5.0 (2 votes total) Rate: Select 1 - Terrible 2 - Poor 3 - Average 4 - Good 5 - Outstanding
William Bontrager

William Bontrager

William Bontrager, Programmer and Publisher "Screaming Hot CGI"programs "WillMaster Possibilities" ezine http://willmaster.com/possibilities/ mailto:[email protected]

William Bontrager has written 4 tutorials for JavaScriptSearch.

View all tutorials by William Bontrager...

The JavaScript Scrolling Tape Calculator is operated by clicking the mouse on the buttons. As you click, scrolling text shows calculations you have already done.

If you prefer to only have the calculator for your site instead of also learning how it works, you may get the code at http://willmaster.com/possibilities/demo/calculator.html

That page has a link for downloading a .zip file. When downloaded and uncompressed, you will have a file called readme.txt with instructions for use. It includes instructions for putting the Scrolling Tape Calculator into a popup window.

The current calculator does not operate from the keyboard because there is already a lot of information for this tutorial. A later tutorial may show how to capture keyboard clicks and execute functions depending on what was clicked -- including how to incorporate that into the Scrolling

Tape Calculator

This tutorial covers several things that have not previously been introduced in this JavaScript Tutorial series, including:

~~ Dynamic content for form textarea and text fields.

~~ Some text string formatting.

~~ Global variables to hold previous and cumulative values.

~~ Boolean variables.

~~ Image switching when it is clicked.

~~ Delayed execution of a function.

The calculator's JavaScript variables and functions are placed into the >head<>/head< section of your page. The variables and necessary code are thus guaranteed to be loaded and ready before the calculator is visible for use.

First, download the .zip file form the link at http://willmaster.com/possibilities/demo/calculator.html and uncompress the file. You will have a lot of image files and two HTML files, jscalc.html and jspopcalc.html.

jspopcalc.html is a demonstration of putting the Scrolling Tape Calculator inside a popup window. You may use it, if you want, but it is of no importance to this tutorial.

jscalc.html is the file this tutorial addresses. We'll use its JavaScript and HTML as reference in this article rather than quoting a lot of code. So, go get the .zip file.

Now, we'll go over the HTML that creates the visible calculator:

You'll notice that the calculator buttons are images and that each image is a link to a JavaScript function. We'll cover those functions later.

You'll also notice that each image link has a JavaScript onClick="..." function associated with it. That has to do with switching images. We'll cover that later, too.

What I want you to notice is some of the the form specifics. These will be referred to in the JavaScript code:

~~ Notice that the form tag has a name. It's called "calculator".

~~ Notice that the textarea tag has a name. It's called "tape".

~~ Notice that the textarea tag has a cols="..." attribute. The number in the attribute is 17.

~~ Notice that the textarea tag has a rows="..." attribute. The number in the attribute is 7.

~~ Notice that the input tag has a name. It's called "nowtotal".

~~ Notice that the input tag has a size="..." attribute. The number in the attribute is 19.

Those six specifics will be used in the JavaScript code. They can be changed, if you want, so long as the changes are reflected in the JavaScript code.

The forms's textarea field is where the "scrolling tape" will be displayed. And the form's input text field is where the current key clicks on the number pad are displayed.

After going over some of the JavaScript code, we'll come back to the HTML.

The first thing to do is initialize some variables that will be used throughout the program. Such variables are called "global" variables because they can be accessed anywhere within the program. (Variables that are created and used in functions get destroyed after the function is done. Those are called "local" variables.)

TapeWidth must be initialized with the number in the form textarea tag's cols="..." attribute.

Next, we initialize as many variables as there are rows in the form's textarea. (See the rows="..." attribute.) The variables are called line1, line2, etc. Each of those variables is initialized with a space and a line feed character -- except the last line, which only contains a space. This seeds the "scrolling tape" with blank lines.

Because some browsers won't create a scrollbar if later lines are longer than the textarea width, the while() statement lengthens the first line to force a scrollbar when the page is first loaded.

NowKeysWidth must be initialized with the number in the form input tag's size="..." attribute.

The NowTotal variable is initialized to zero. This global variable will hold the latest result of calculations. It will, at specific points in the program, be reset to zero.

The Current variable is set to a null string (a set of either single or double quotes with nothing between them). This global variable holds the current sequence of numbers clicked on the keypad.

The function keys on the keypad are "+", "-", "*", "/", "=", and "c". They add, subtract, multiply, divide, complete the calculation, and clear the current sequence of numbers that were clicked on the keypad, respectively. If the "c" is clicked a second time, in equence, the global NowTotal is reset to zero and a line of hyphens appears on the scrolling tape.

The global variable PreviousF holds the most recent function key that was clicked. It is initialized with a space. At specific points in the program, is it reset with a space.

However, because the function key "c" does stuff only remotely related to the other function keys, the PreviousF variable does not change when "c" is clicked. For that, the global variable PreviousC is used. PreviousC is used to indicate whether or not the previous key clicked was the "c" key. It is initialized to false.

"true" and "false" (without the quotes) can be assigned to avaScript variables when the variable is to be used only as a true/false flag. Such variables are called "boolean" variables. Once a variable is used as a boolean, do not let it contain anything other than one of those two values.

The first function in the JavaScript code is called PadFront(). It is used to pad the front of strings of characters until they are the designated length.

PadFront() is used to lengthen text lines in the "scrolling tape" area so they align on the right. It is also used to lengthen text for the current number keys clicked area.

The next function is DisplayInNowWindow(), which accepts a string of characters, calls PadFront() to lengthen the text, and displays the result in the form's input text area.

Notice that DisplayInNowWindow() uses both the form's name and the input text field's name to tell the browser which value is changed.

The third function is AddLineToTape(), which accepts a string of characters and a single character. It formats the string to the proper length and appends the single character to the end. (The single character would be a symbol for one of the function keys on the keypad). AddLineToTape() moves all the other rows up one line and then puts the newly formatted string at the bottom.

Notice that AddLineToTape() uses both the form's name and the textarea's name to tell the browser which value is changed.

Now we come to the two functions that the keypad image links call, K() and F().K() is called when a number or the decimal point is clicked. You'll see the link in the HTML code, with the value of the key click within the parenthesis so it is passed to the function.

K() accepts the value and appends it to the form's input text field. This lets the user always be aware of what their current number is.

The six function keys on the keypad call the function F(). You'll see it in the HTML code, calling the function with the value inside the parenthesis.

F() accepts the value and

~~ if it is a "c", it clears the form's input text field.

~~ if it is a sequential "c", it clears the current calculated total and prints a short line of hyphens on the "scrolling tape".

~~ if it is not a "c", it does the calculation as directed by the value.

F() has some subtle code: The value F() is passed is assigned to the local variable s. But s is used in only a few places.

When F() encounters a sequential "c", the global PreviousF is reset to a space. This clears the instruction for when the next non-"c" function key is clicked. Otherwise, the next non-"c" function key click would do the calculations according to an old and possibly invalid instruction.

When a function key is clicked but there is no number in the form's input text field, F() will abandon the function. But before it abandons the function, it checks to see if local variable s is a "=". Ifso, and if the PreviousF variable is not a space, F() puts the current calculated total with an "=" symbol on the end on the "scrolling tape". The tape doesn't scroll because the number displayed will not change (it is the same total as it was before); only the symbol on the right end of the line is different.

As you see, there are several instances when the global value PreviousF might be reset to a space. If so, the variable representing the current completed calculation,

NowTotal, is set to zero.

If F() has not abandoned itself before this point, it adjusts NowTotalaccording to the instruction it received with the previous function key click. This may seem odd, but consider that it receives its calculation instruction before it receives the number it is to do the calculation on.

Example: 22 + 44 - 11

First, it gets the number 22, and puts it on the tape as the current calculated total (the first number in a calculation sequence is treated this way even though nothing has yet been calculated). Next, it gets the calculation instruction "+". Only after that does it get the number to do the calculation on: 44. Then, the F() gets another calculation instruction, "-". After that, it gets the number to do the calculation on: 11

So F() has to remember what the previous instruction was in order to do the current calculation.

If there was no previous instruction or if PreviousF was reset to a space, F() simply copies the numerical value of the form's input text field as the current calculated total.

If PreviousF is not a space, F() puts the current value in the form's input field onto the tape with no function key symbol on the righthand side. If PreviousF is a space, then that means the number is the first of the sequence and would be repeated as the current calculated total is put on the tape.

F() then consults the local variable s. If it is the "=" symbol, NowTotal is zeroed and s resets itself to a space.

After this, the PreviousF variable is assigned the value of s.