EXERCISE 8 - BEGINNING JAVASCRIPT – INTRODUCING FUNCTIONS – USING FORMS FOR DATA 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.
It is more common for web page users to enter data using form textboxes.
In the following example, each textbox is given a name, and the value entered into each textbox is identified by this name.
When the calculate() function is called, the values are identified and stored In appropriate variables using the statements:
number1 = parseInt(document.frmNumbers.firstNumber.value);
number2 = parseInt(document.frmNumbers.secondNumber.value);
Exercise 8a
Using Code View in Dreamweaver or Notepad++, enter the following text:
<html>
<head>
<title>Using Functions – Using Forms for Data Input</title>
<script type = "text/javascript">
<!--
function calculate()
{
var number1;
var number2;
var number3;
number1 = parseInt(document.frmNumbers.firstNumber.value);
number2 = parseInt(document.frmNumbers.secondNumber.value);
number3 = number1 + number2;
document.write("If you add " + number1 + " to " + number2 + " you get: " + number3);
window.alert("If you add " + number1 + " to " + number2 + "\nyou get: " + number3);
}
//-->
</script>
</head>
<body>
<form id = "frmNumbers" name = "frmNumbers">
<p>Enter first number: <input type = "text" id = "firstNumber" name= "firstNumber" /</p>
<p>Enter second number: <input type = "text" id = "secondNumber" name = "secondNumber" /</p>
<input type ="button" value = "Calculate" onclick = "calculate()" />
</form>
</body>
</html>
Save the file as exercise8a.html and view the page in your browser.
The above example performed calculation using whole numbers or integers. Obviously, you can perform similar calculations using floats.
Exercise 8b
Edit your code from exercise8a.html as follows.
<html>
<head>
<title>Using Functions – Using Forms for Data Input</title>
<script type = "text/javascript">
<!--
function calculate()
{
var number1;
var number2;
var number3;
number1 = parseFloat(document.frmNumbers.firstNumber.value);
number2 = parseFloat(document.frmNumbers.secondNumber.value);
number3 = number1 + number2;
document.write("If you add " + number1 + " to " + number2 + " you get: " + number3);
window.alert("If you add " + number1 + " to " + number2 + "\nyou get: " + number3);
}
//-->
</script>
</head>
<body>
<form id = "frmNumbers" name = "frmNumbers">
<p>Enter first number: <input type = "text" id = "firstNumber" name= "firstNumber" /</p>
<p>Enter second number: <input type = "text" id = "secondNumber" name = "secondNumber" /</p>
<input type ="button" value = "Calculate" onclick = "calculate()" />
</form>
</body>
</html>
Save the file as exercise8b.html and view the page in your browser.
You can also use Math.round() to round the result of your calculation to a whole number.
Exercise 8c
Edit your code from exercise8b.html as follows.
<html>
<head>
<title>Using Functions – Using Forms for Data Input</title>
<script type = "text/javascript">
<!--
function calculate()
{
var number1;
var number2;
var number3;
number1 = parseFloat(document.frmNumbers.firstNumber.value);
number2 = parseFloat(document.frmNumbers.secondNumber.value);
number3 = number1 + number2;
number3= Math.round(number3);
document.write("If you add " + number1 + " to " + number2 + " you get: " + number3);
window.alert("If you add " + number1 + " to " + number2 + "\nyou get: " + number3);
}
//-->
</script>
</head>
<body>
<form id = "frmNumbers" name = "frmNumbers">
<p>Enter first number: <input type = "text" id = "firstNumber" name= "firstNumber" /</p>
<p>Enter second number: <input type = "text" id = "secondNumber" name = "secondNumber" /</p>
<input type ="button" value = "Calculate" onclick = "calculate()" />
</form>
</body>
</html>
Save the file as exercise8c.html and view the page in your browser.
Alternatively, you can use Math.round() to round the result of your calculation to two decimal places.
Exercise 8d
Edit your code from exercise8c.html as follows.
<html>
<head>
<title>Using Functions – Using Forms for Data Input</title>
<script type = "text/javascript">
<!--
function calculate()
{
var number1;
var number2;
var number3;
number1 = parseFloat(document.frmNumbers.firstNumber.value);
number2 = parseFloat(document.frmNumbers.secondNumber.value);
number3 = number1 + number2;
number3 = number3 * 100;
number3= Math.round(number3);
number3 = number3/100;
document.write("If you add " + number1 + " to " + number2 + " you get: " + number3);
window.alert("If you add " + number1 + " to " + number2 + "\nyou get: " + number3);
}
//-->
</script>
</head>
<body>
<form id = "frmNumbers" name = "frmNumbers">
<p>Enter first number: <input type = "text" id = "firstNumber" name= "firstNumber" /</p>
<p>Enter second number: <input type = "text" id = "secondNumber" name = "secondNumber" /</p>
<input type ="button" value = "Calculate" onclick = "calculate()" />
</form>
</body>
</html>
Save the file as exercise8d.html and view the page in your browser.
A - Beginning JavaScript - Ex8 - Introducing Functions - Using Forms for Data Input Version 3
Page 7 of 7