Working with JavaScript Objects and Events:

1
Tutorial 09

• Working with JavaScript Objects and Events
• BMI problem

2
Contents

• Body Mass Index (BMI) Problem
• Solution
• Exercise

3
Body Mass Index (BMI) Problem

• Body Mass Index (BMI) is a number calculated from
  persons weight and height. BMI is a reliable
  indicator of body fatness for people.
• You want to create a program, so that it can
  determine the weight status of a person base on
  his/her height (m) and weight (kg). The formula
  is
• BMI categories

4

• The interface of web page can be designed as
  below
• Users need to input the height and weight, and
  then click on the Submit button, the weight
  status will display below.

5
Solution

• Designing the interface
• Coding
• Testing

6
1. Designing the interface

• 1.1 Inserting a new form
• 1.2 Inserting the table
• 1.3 Inserting the Height field
• 1.4 Inserting the Weight field
• 1.5 Inserting the Submit button
• 1.6 Inserting the Result field

7
1.1 Inserting a new form

• Insert a form named myform with the get
  method.

8
1.2 Inserting the table

• This table will have 2 columns later.

9
1.3 Inserting the Height field

• Insert a text box named height with size 30,
  id height.

10
1.4 Inserting the Weight field

• Insert a text box named weight with size 30,
  id weight.

11
1.5 Inserting the Submit button

• Insert a button named btbmi, value Submit,
  type button

12
1.6 Inserting the Result field

• Insert a ltspangt tag, the weight status result
  will be displayed in this span tag.

13
2. Coding

• 2.1 Writing the BMI function
• 2.2 Writing the weight_status function
• 2.3 Working with the onClick event of the
  Submit button

14
2.1 Writing the BMI function
15
2.2 Writing the weight_status function

• 2.2.1 Inserting the weight_status function
• 2.2.2 The Under Weight case
• 2.2.3 The Normal case
• 2.2.4 The Over Weight case
• 2.2.5 The Obese case

16
2.2.1 Inserting the weight_status function
17
2.2.2 The Under Weight case

• Use the method document.getElementById().innerH
  TML to assign the result value for the span tag.

18
2.2.3 The Normal case
19
2.2.4 The Over Weight case
20
2.2.5 The Obese case
21
2.3 Working with the onClick event of the
Submit button

• Use the button event onClick to process the
  result, the method document.getElementById().val
  ue to get the argument. The weight_status
  function will get 2 arguments height and weight.

22
3. Testing
23
Exercise

• Write a program to determine the ideal weight of
  a person base on his/her height. The formula
  which determines the ideal weight is

24

• The web page interface can be designed as below

25
References

• New Perspectives on Creating Web Pages with HTML
  and XML (Patrick Carey Mary Kemper) - Course
  Technology Publisher
• Creating Cool Web Sites with HTML, XHTML and CSS
  - Taylor, Dave, Wiley

26
(No Transcript)