|
From the Web:
Ashley Cheng's Ideal Weight Calculator
CONTENTS
Hong Kong's Dr. Ashley Cheng has produced a JavaScript page that
contains an example of how JavaScript and forms can be combined
to create special-purpose calculators and mini-spreadsheets. It's
located at this site:
http://www.iohk.com/UserPages/acheng/javascript.html
Cheng's example is a calculator that, given a user's height and
weight, calculates the individual's Body Mass Index and then makes
a comment (usually light-hearted) about the implications of the
calculated index. The comments range from "Umm_You
are obese, want some liposuction?" to "You
are starving. Go find some food!"
The interface is simple: a form with four fields-the user fills
in the height and weight fields and the remaining two fields are
filled in by the script with the user's BMI and the relevant comment.
Two buttons are provided. One calculates the results and displays
them in the appropriate fields, and the other enables the user
to reset the form.
In addition, Dr. Cheng has added basic form checking to the script
so that if either of the user's entry fields is empty, an appropriate
alert is displayed. In addition, the script checks whether the
height and weight values are totally illogical. For instance,
if the weight value is less than zero kilograms or more than 500
kilograms, the program assumes that the user has made a mistake.
| Note |
This script uses kilograms and centimeters for the user's weight and height. One kilogram is roughly equal to 2.2 pounds and 100 centimeters is roughly the same as 3.3 feet.
|
The source code for the program is in Listing W2.1.
Listing W2.1. Source code for Dr. Ashley Cheng's Ideal Weight
Calculator.
<HTML>
<HEAD>
<TITLE>Ashley's JavaScript(tm) Examples</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- hide this script tag's contents from old browsers
function ClearForm(form){
form.weight.value = "";
form.height.value = "";
form.bmi.value = "";
form.my_comment.value = "";
}
function bmi(weight, height) {
bmindx=weight/eval(height*height);
return
bmindx;
}
function checkform(form) {
if (form.weight.value==null||form.weight.value.length==0
||
Âform.height.value==null||form.height.value.length==0){
alert("\nPlease complete the form first");
return
false;
}
else if (parseFloat(form.height.value)
<= 0||
parseFloat(form.height.value)
>=500||
parseFloat(form.weight.value)
<= 0||
parseFloat(form.weight.value)
>=500){
alert("\nReally
know what you're doing? \nPlease enter values
Â
again. \nWeight in kilos and \nheight in cm");
ClearForm(form);
return
false;
}
return true;
}
function computeform(form) {
if (checkform(form)) {
yourbmi=Math.round(bmi(form.weight.value,
form.height.value/100));
form.bmi.value=yourbmi;
if (yourbmi >40) {
form.my_comment.value="You
are grossly obese,
consult
your physician!";
}
else if (yourbmi >30 &&
yourbmi <=40) {
form.my_comment.value="Umm...
You are obese, want some liposuction?";
}
else if (yourbmi >27 &&
yourbmi <=30) {
form.my_comment.value="You
are very fat,
do
something before it's too late";
}
else if (yourbmi >22 &&
yourbmi <=27) {
form.my_comment.value="You
are fat, need dieting and exercise";
}
else if (yourbmi >=21
&& yourbmi <=22) {
form.my_comment.value="I
envy you. Keep it up!!";
}
else if (yourbmi >=18
&& yourbmi <21) {
form.my_comment.value="You
are thin, eat more.";
}
else if (yourbmi >=16
&& yourbmi <18) {
form.my_comment.value="You
are starving. Go Find some food!";
}
else if (yourbmi <16)
{
form.my_comment.value="You're
grossly undernourished,
need hospitalization ";
}
}
return;
}
// -- done hiding from old browsers -->
</SCRIPT>
</HEAD>
<BODY BACKGROUND="background.gif">
<CENTER>
<H1>Ashley's JavaScript(tm) Examples:</H1>
<HR SIZE=3>
<UL>
<LI><A HREF="#HK1997">Hong Kong and 1997</A>
<LI><A HREF="#Calc">Want to know whether
your weight is ideal?</A>
</UL>
<A NAME="HK1997">
<HR>
<P>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- hide this script tag's contents from old browsers
document.write('<IMG SRC="hkf.jpg"> <P>');
today = new Date();
document.write("Today is <B>"+today+"</B><P>");
BigDay = new Date("July 1, 1997")
msPerDay = 24 * 60 * 60 * 1000 ;
timeLeft = (BigDay.getTime() - today.getTime());
e_daysLeft = timeLeft / msPerDay;
daysLeft = Math.floor(e_daysLeft);
e_hrsLeft = (e_daysLeft - daysLeft)*24;
hrsLeft = Math.floor(e_hrsLeft);
minsLeft = Math.floor((e_hrsLeft - hrsLeft)*60);
document.write("There are only<BR> <H3>"
+ daysLeft + " days "
+ hrsLeft +" hours and " + minsLeft + "
minutes left
</H3><BR>
before Hong Kong revert from British to Chinese
rule
<BR> on the <B>1st of July 1997!</B><P>");
// -- done hiding from old browsers -->
</SCRIPT>
<FORM>
<input type=button name="Refresh" value="Refresh"
onclick="window.location=
'http://www.iohk.com/UserPages/acheng/javascript.html'">
</FORM>
</A>
<HR>
<A NAME="Calc">
<H2><IMG SRC="scale.jpg" ALIGN=MIDDLE> Do
you have an ideal weight??</H2>
Enter your weight in kilograms and your height in centimeters<BR>
in the form below and press the "Let's see" button<BR>
(Please read disclaimer below before using this form)<BR>
<FORM NAME="BMI" method=POST>
<TABLE border=1>
<TR>
<TD><DIV ALIGN=CENTER>Your Weight (kg)</DIV></TD>
<TD><DIV ALIGN=CENTER>Your Height (cm)</DIV></TD>
<TD><DIV ALIGN=CENTER>Your BMI</DIV></TD>
<TD><DIV ALIGN=CENTER>My Comment</DIV></TD>
</TR>
<TR>
<TD><INPUT TYPE=TEXT NAME=weight SIZE=10
onfocus="this.form.weight.value=''"></TD>
<TD><INPUT TYPE=TEXT NAME=height SIZE=10
onfocus="this.form.height.value=''"></TD>
<TD><INPUT TYPE=TEXT NAME=bmi
SIZE=8 ></TD>
<TD><INPUT TYPE=TEXT NAME=my_comment SIZE=35
></TD>
</TABLE>
<P>
<INPUT TYPE="button" VALUE="Let's see"
onclick="computeform(this.form)">
<INPUT TYPE="reset" VALUE="Reset"
onclick="ClearForm(this.form)">
</FORM>
</A>
<HR>
</CENTER>
<B>Disclaimer</B>: This form is based on the calculation
of
<A HREF="http://www.iohk.com/UserPages/acheng/bmi.html">
<I>"Body
Mass Index"</I></A>
and is only meant to be a demonstration of how Javascript‰
could be used
on a Web Page. Information it contains may not be accurate and
is not designed
or intended to serve as medical advice. You should not act in
accordance to the
"comment" provided in this form and I shall not be liable
for any physical or
psychological damages suffered as a result of using this form
or script.
<HR>
Access: <IMG SRC="http://www.iohk.com/cgi-bin/nph-count?
link=ashleycheng&width=6">
<P>
<IMG SRC="cheng3.gif" ALIGN="LEFT" HSPACE=15><BR>
Author: Ashley Cheng (<A HREF="mailto:[email protected]">
[email protected]</A>)
Jan 1996<BR>
Go back to <A HREF="http://www.iohk.com/UserPages/acheng">
my
Home-Page</A> or see
<A
HREF="http://www.wahyan.edu.hk/ashleyticker.html">
Java(tm)
applets written by me</A>. <P>
</BODY>
</HTML>
The script produces results similar to those in Figures W2.1 and
W2.2.
Figure W2.1 : Calculators and mini-spreadsheets can be created using JavaScript.
Figure W2.2 : Dr. Cheng uses simple error checking to ensure data is valid.
 |
Dr. Cheng's page has two JavaScript applications on it: a countdown to China's take-over of Hong Kong and the weight calculator in which we are interested.
|
Cheng places all the functions for the weight calculator in the
header, but because the countdown application involves dynamic
HTML content based on the date and time, that script is contained
in the body of the HTML document.
The weight calculator is built out of four functions: ClearForm(),
bmi(), checkform(),
and computeform().
Before looking at each function and how it works, we need to understand
the HTML form that provides the interface to the script:
<FORM NAME="BMI" method=POST>
<TABLE border=1>
<TR>
<TD><DIV ALIGN=CENTER>Your Weight (kg)</DIV></TD>
<TD><DIV ALIGN=CENTER>Your Height (cm)</DIV></TD>
<TD><DIV ALIGN=CENTER>Your BMI</DIV></TD>
<TD><DIV ALIGN=CENTER>My Comment</DIV></TD>
</TR>
<TR>
<TD><INPUT TYPE=TEXT NAME=weight SIZE=10
onfocus="this.form.weight.value=''"></TD>
<TD><INPUT TYPE=TEXT NAME=height SIZE=10
onfocus="this.form.height.value=''"></TD>
<TD><INPUT TYPE=TEXT NAME=bmi
SIZE=8 ></TD>
<TD><INPUT TYPE=TEXT NAME=my_comment SIZE=35
></TD>
</TABLE>
<P>
<INPUT TYPE="button" VALUE="Let's see"
onclick="computeform(this.form)">
<INPUT TYPE="reset" VALUE="Reset"
onclick="ClearForm(this.form)">
</FORM>
For appearance, Dr. Cheng has put the four text fields into a
table. He uses the <DIV ALIGN=CENTER>
... </DIV> structure to center text inside the
table cells. <DIV ALIGN=CENTER>
is the HTML 3 method for centering text and is supported by Navigator
2.0 along with Netscape's own methods, such as the CENTER
tag.
The form contains four text fields: weight,
height, bmi,
and my_comment. The two that
the user uses-weight and
height-are cleared when the
user clicks in them simply by setting the value of the field to
an empty string in the onFocus
event handler:
onfocus="this.form.height.value=''"
The Let's See button uses the onClick
event handler to call computeform()
and passes it the form object
as an argument using this.form.
The Reset button calls the ClearForm()
function.
The next four sections elaborate on the ClearForm(),
bmi(), checkform(),
and computeform() functions.
This function simply sets the values of the four fields in the
form to the empty string.
The bmi() function is used
to calculate the Body Mass Index using the formula bmi = weight/(height¥height)
where the weight is in kilograms and the height is in meters (not
centimeters). The function accepts weight
and height as arguments and
then simply calculates the BMI and returns it.
checkform() accepts the form
object as an argument and performs two error checks on the data.
The function is called from the computeform()
function.
First, the function checks whether either the weight
or height field in the form
contains a null value or
an empty string:
if (form.weight.value==null||form.weight.value.length==0
||
form.height.value==null||form.height.value.length==0){
alert("\nPlease
complete the form first");
return
false;
}
If either field is not filled in, then an alert is displayed and
the function returns a false
value.
If both fields are filled in, the function then checks to see
if the values make sense. If they seem out of a reasonable range,
then an alert is displayed, and the function returns a false
value. Notice the use of \n
in the alert message to perform basic formatting of the text:
else if (parseFloat(form.height.value) <= 0||
parseFloat(form.height.value)
>=500||
parseFloat(form.weight.value)
<= 0||
parseFloat(form.weight.value)
>=500){
alert("\nReally
know what you're doing? \nPlease enter values
again.\nWeight
in kilos and \nheight in cm"); ClearForm(form);
return false;
}
If the data is acceptable following both these checks, then the
function simply returns a true
value.
The computeform() function
is where the primary work of the script is done. This function
is called when the user clicks on the Let's See button, and it
accepts the form object as
an argument.
The script starts by calling checkform()
to be sure the data is valid. If the data passes muster in the
checkform() function, the
ComputeForm()function proceeds
to make the necessary calculations:
yourbmi=Math.round(bmi(form.weight.value, form.height.value/100));
form.bmi.value=yourbmi;
The program first calls bmi()
and passes the weight and height entered by the user. The height
is divided by 100 because the bmi()
function expects the height in meters, and there are 100 centimeters
in a meter. Math.round()
is used to round the results to the nearest integer and then the
value is assigned to yourbmi.
Notice that yourbmi is not
defined using the var statement.
As you learned in Chapter 4, "Functions
and Objects-The Building Blocks of Programs," JavaScript
is perfectly happy to define variables when they are first used,
without the var statement.
if (yourbmi >40) {
form.my_comment.value="You
are grossly obese,
consult
your physician!";
}
else if (yourbmi >30 && yourbmi <=40) {
form.my_comment.value="Umm...
You are obese, want some liposuction?";
}
else if (yourbmi >27 &&
yourbmi <=30) {
form.my_comment.value="You
are very fat,
do
something before it's too late";
}
else if (yourbmi >22 &&
yourbmi <=27) {
form.my_comment.value="You
are fat, need dieting and exercise";
}
else if (yourbmi >=21
&& yourbmi <=22) {
form.my_comment.value="I
envy you. Keep it up!!";
}
else if (yourbmi >=18
&& yourbmi <21) {
form.my_comment.value="You
are thin, eat more.";
}
else if (yourbmi >=16
&& yourbmi <18) {
form.my_comment.value="You
are starving. Go Find some food!";
}
else if (yourbmi <16)
{
form.my_comment.value="You're
grossly undernourished,
need
hospitalization ";
}
}
The rest of the function simply consists of a long if
...else if ... else construct that checks the value
of yourbmi against different
ranges and places the appropriate message in the my_comment
field in the form.
   
|
