Lab 10 - JavaScript Functions
This week we are going to look at functions in
JavaScript. A function serves two main
purposes.
• First, it is an organizational technique
that allows the details of a section of code to be set up to allow for easier
reading of the program.
• Second, it allows for different parts of a
program to perform the same calculation with only having to write the code
once.
Below are examples of both of these. The first example is the way we have always
used functions with the events handlers.
We could have written the actual JavaScript code instead of the function
call; however, by using the function call we separate the HTML code from the
JavaScript code to increase readability.
<script language = "JavaScript">
function display
()
{
// code
for the function
}
</script>
...
<input type="button"
value="Click here"
onClick
= "display()">
For the second example, assume the program needs to
evaluate some number of quadratic equations.
Instead of writing the code for this calculation over and over in the
program, we can write the code once in a function and make a call to that
function whenever we need to evaluate a quadratic equation. This example assumes there is a text field
named digits in the form named theForm.
<script language="JavaScript">
// The following function will return the value of
the equation:
// Ax**2
+ Bx + C, where A, B, C and x are given as the parameters
function quad_eval (a, b, c, x)
{
var result
= a * x * x // compute Ax**2
result =
result + b *x // compute Bx and
add to previous result
result =
result + c // add C to previous result
return
result; //
send this value back to the calling code
}
...
// compute 4x**2 + 3x + 7, where x is stored in
the variable new_numb
value1 = quad_eval
(4, 3, 7, new_numb)
...
// compute 1x**2 - 4, where x is stored in the
text field "digits"
value2 = qual_eval
(1, 0, -4, document.theForm.digits.value)
...
</script>
The keyword return
allows the JavaScript function to send a single value back to the function
call. This value can be stored by the
use of an assignment statement, as shown in the example. This assignment is the same as we did for
the prompt() dialog box.
The parameters of a function are used to make the
function more flexible. Remember that
the order of the items used at the function call determines how each item is
named in the function by the parameter.
For example, the first call to quad_eval has the items: 4, 3, 7 and
new_numb. This means that whenever the
code in the function uses the parameter a,
the value of 4 is used. Whenever the
code in the function uses the parameter b,
the value of 3 is used. Whenever the
code in the function uses the parameter c,
the value of 7 is used. Whenever the
code in the function uses the parameter x,
the value of the variable new_numb
is used. However, the second call to
quad_eval has the items: 1, 0, -4 and document.theForm.digits.value. So the values associated with the parameters
a, b, c and x are different.
Lab
Assignment - Due at the end of lab during the 11th week (week of
3/25/2002).
Submit
to the Digital Drop for CS 101 the JavaScript/HTML code that does the
following:
• Create
a JavaScript program that has two text fields and three buttons.
• When
the user clicks the first button, fill in the first text field with a random
integer number from 1 to 10. (The use of
Math.floor() and Math.random() is suggested.)
• When
the user clicks the second button, fill in the second text field with a random
integer number from 1 to 10.
• Write the code that generates the random
number once. This code will need to
be placed in a function that will be called when either button is clicked. When each button is clicked, a different
function can be called, but these different functions need to call the exact
same function.
• When
the user clicks the third button, display an alert box that tells which text
field has the larger number or if the two numbers are equal.