HANDOUT TITLE:



EXERCISE 10 - BEGINNING JAVASCRIPT – TEMPERATURE (CELSIUS TO FAHRENHEIT) CONVERTOR – USING A FORM TEXTBOX FOR USER INPUT

The following tasks should be completed using Code View in Dreamweaver or Notepad++. Create a folder named Beginning JavaScript on your working area (if the folder does not already exist), and save each file to this folder with a suitable name.

Do not forget to add the extension .html or (.htm) otherwise you will not be able to view the output in a browser.

The formula for converting degrees Celsius (degCel) to degrees Fahrenheit (degFahren) is:

degFahren = 9/5 * degCel + 32

You need to allow users to enter values with decimal places (floats).

Exercise 10a

Using Code View in Dreamweaver or Notepad++, enter the following text:

Conversion of Degrees Celsius to Fahrenheit - Input by Textbox

Degrees Celsius to Degrees Fahrenheit Convertor

Enter the degrees Celsius: 

Save the file as exercise10a.html and view the page in your browser.

The statement

degCel = parseFloat(document.frmConvert.deg_Cel.value);

gets the value from the textbox which is identified by the name deg_Cel which is in the form identified with the name frmConvert, and stores that value (after converting it into a float datatype) in the variable identified as degCel'

There is a second more flexible and sophisticated method of getting the value from a page element which uses the method getElementById():

degCel = parseFloat(document.getElementById("deg_Cel").value);

Exercise 10b

Edit your code from exercise10a.html as follows.

Conversion of Degrees Celsius to Fahrenheit - Input by Textbox

Degrees Celsius to Degrees Fahrenheit Convertor

Enter the degrees Celsius: 

Save the file as exercise10b.html and view the page in your browser.

We would like to provide the user with a hint about what information they need to enter into our form textbox.

There are simple methods to do this. We can use the onmouseover or onfocus events for the text box to display a message either in a dialog box or the browser's status bar. Remember, however, that pop-up boxes can be very irritating for the user.

Exercise 10c

Edit your code from exercise10b.html as follows.

Conversion of Degrees Celsius to Fahrenheit - Input by Textbox

Degrees Celsius to Degrees Fahrenheit Convertor

Enter the degrees Celsius: 

Save the file as exercise10c.html and view the page in your browser. Test the script in more than one browser – if you can.

Replace the line:

with

Save and test your code in your browser(s).

Replace the line now with the line:

< input type = "text" name="deg_Cel" id="deg_Cel" onmouseover = "window.alert('Enter degrees celsius')" />

Save and test your code in your browser(s). What is the problem with the last option?

Change the line back to:

It is also good practice to validate the data entry before form submission. One of the most useful features provided by JavaScript is form data validation.

In the following example, the script checks to see whether any data has been entered into the textbox. The function validate() is run when the user clicks on the Convert button.

Exercise 10d

Edit your code from exercise10c.html as follows.

Conversion of Degrees Celsius to Fahrenheit - Input by Textbox

Degrees Celsius to Degrees Fahrenheit Convertor

Enter the degrees Celsius: 

Save the file as exercise10d.html and view the page in your browser. Test the script in more than one browser – if you can.

Exercise 10e

Using Code View in Dreamweaver or Notepad++, enter the following text:

Temperature Convertor (Celsius to Fahrenheit or Fahrenheit to Celsius

Temperature Convertor (Celsius to Fahrenheit or Fahrenheit to Celsius)

Enter the degrees (Celsius or Fahrenheit): 

Conversion result: 

Save the file as exercise10e.html and view the page in your browser. Test the script in more than one browser – if you can.

You should now, attempt to change the layout of your page content as follows:

Save the file as exercise10e-ver2.html and view the page in your browser.

Exercise 10f

Edit your code from exercise10d.html as follows.

Temperature Convertor (Celsius to Fahrenheit or Fahrenheit to Celsius

Temperature Convertor (Celsius to Fahrenheit or Fahrenheit to Celsius)

Enter the degrees (Celsius or Fahrenheit): 

Conversion result: 

Celsius to Fahrenheit

Fahrenheit to Celsius

Save the file as exercise10f.html and view the page in your browser. Test the script in more than one browser – if you can.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download