|
JavaScript Tutorial: Learn JavaScript with this
Step by Step JavaScript Course
JavaScript Tutorial Part IV
By
William
Bontrager
Scrolling Tape
Calculator
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 sequence, 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 JavaScript 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 "=". If so, 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 NowTotal according
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 right hand 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.
The final act of F(), provided it got this far before it abandoned itself,
is to set the global variable PreviousC to false.
Whew!
The rest of the JavaScript has to do with the images that the calculator's
numeric keypad is composed of.
The first global variable of this section is image_number_of_first_button
If the calculator's keypad images are the first (or only) images on the page,
image_number_of_first_button must be initialized to 1 because the first button
is the first image on the page.
If you have other images on the page that appear in your HTML code before
the calculator, then adjust the number accordingly. Note that if you get
this number wrong it will be apparent when you use the calculator -- an image
under the wrong key swap. In that case, just adjust the
image_number_of_first_button initialization value until the images behave.
The next section determines whether or not the browser is capable of swapping
images. This is necessary to know so that browser can be blocked from running
the swapping JavaScript code. Otherwise, the browser could crash or calculate
really, really slow -- "go get a drink and come back and maybe it will be
done by that time" kind of slow; or maybe even quit altogether and just hang
it up.
So we want only browsers capable of doing so to swap images.
The next section initializes a global variable with the number of calculator
keypad buttons (you won't need to change that unless you change the number
of keypad buttons) and makes room in memory for the files names of each up
and down image on the keypad.
The next section fills those memory spots with the file names. Each up[#]
and down[#] variable name contains the file name of the up and down position
images. up[1] contains the up image and down[1] contains the down image.
And so forth.
If you change the images for your keypad or move them to a different directory,
you may need to also change the file names in this section. Example: up[1]
= "images/my_c.gif"
After that, room is made for them and then the images are loaded into
memory.
The first three functions are called to make room in memory for the graphics
file names, to make room for the graphics themselves, and to load the graphics
into memory.
The last two functions swap the keypad images:
buttonup() swaps the "down" image back to the "up" image. It is called from
buttondown().
When a keypad image is clicked, buttondown() swaps the "up" image for the
"down" image, making it look like the key was pressed. You'll see the
buttondown() function in each keypad image anchor tag of the HTML code, beginning
with onClick=", which calls buttondown() when the image is clicked. Notice
that the HTML code has a value between the parentheses of buttondown(). That
value is a sequential number beginning with 1 and ending with 17, each number
representing one image. buttondown() uses that value to determine which image
to swap.
After swapping images, buttondown() uses the built-in JavaScript function
setTimeout() to start a timer that will call buttonup() after a specified
number of milliseconds have elapsed.
setTimeout() requires two items of information separated with a comma between
the parenthesis: (1) an instruction and (2) how many milliseconds to wait
before complying with the instruction.
buttondown() uses local variable f to create the instruction for setTimeout().
The instruction is the function buttonup() with the current button value
in the parenthesis. Then buttondown() calls setTimeout() with variable f
and the number 200. You may change the number 200 if you want the buttons
to come back up quicker or remain down longer.
Happy Scrolling Tape Calculating!
William Bontrager, Programmer and Publisher "Screaming Hot CGI" programs
"WillMaster Possibilities" ezine
http://willmaster.com
mailto:possibilities@willmaster.com
Copyright 2000 by William and Mari Bontrager
Home
|
|
