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.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related searches
- flu vs cold symptoms handout for patients
- adenovirus handout for parents
- vocal function exercises handout pdf
- current events handout middle school
- heart healthy diet handout pdf
- nutrition heart health handout pdf
- patient handout heart healthy diet
- medication education group handout psych
- medical terminology handout for students
- gratitude handout pdf
- dash diet patient handout pdf
- handout list of transition words