Today's meeting
(April 21st, 2012) was about Invoking Functions. The following are a summary of the notes I
used for the classroom.
The Objectives of
the SIG were the following.
- What is a Function and Why do we use them.
- How to Declare a Function.
- How to Invoke them.
- Function Parameters
- Using the Return Statements
- Variable Scope, Global Variables vs Local Variables
- Functions within Functions
A Function is a
little scripts with in the larger script.
It preforms a single tasks or a series of tasks. Functions help organize the various parts of
a script into the different tasks that must be accomplished. In a sense were talking about making it
modular so that I don't have to correct or adjust the whole script only a
portion of the java script. We can also
take advantage of the reusable nature of functions to be more efficient.
When declaring the
function we use the following syntax:
function
function_name (parameters) {
Function
code goes here, all statement end with a ";"
}
I used the following
example . Which, when invoked, calls up
an alert when the Html document is loaded.
function
welcome_alert () {
window.alert
("Welcome! This Site is update
daily!");
}
Note that the
"{" Opens the function code and the "}" closes the
function. Typically there are three
acceptable ways to place the brackets when defining the code. The current example also shows what is called
the Opening Line Method of coding a function.
There is the Lines
up Method (using our example).
function
welcome_alert ()
{
window.alert
("Welcome! This Site is update
daily!");
}
And the Same or
Single line method (using our example).
function
welcome_alert () {window.alert ("Welcome!
This Site is update daily!");}
When naming
functions the same basic rules apply that we use to name variables. Those being; Case sensitivity, Allowed
characters, Reserved words (not allowed), and making the names memorable and
meaningful. For more on these basic naming rules see the post
After declaring the
function we are able to invoke it. To do
so we add the function statement to our script.
welcome_alert();
Note that like any
good JavaScript Statement we end the statement with a ";"
(semi-colon).
Between the () are
the Parameters we define for the function.
The Parameters are used to import one or more values for somewhere
outside the function into the function.
As and example, here
is a portion of the JavaScript called up in our Html document
(Our variables
declared)
/* Variable legend
stat# = are various
stats
rs_ = regular season
c_ = carreer
ba = batting average
hr = home runs
rbi = runs batted in
obp = on base
percentage
*/
var
stat1="Batting Average";
var
stat2="Homeruns";
var stat3="Runs
batted in";
var stat4="On
Base Percentage";
var rs_ba=.253;
var c_ba=.275;
var rs_hr=33;
var c_hr=286;
var rs_rbi=116;
var c_rbi=864;
var rs_obp=.346;
var c_obp=.368;
(Our declared
function called playerstats1)
function
playerstats1 (stat_type, stat1, stat2){
document.write(stat_type+":
"+stat1+" vs "+stat2+"</br>");
}
The function's
purpose is to display three pieces of information together on the html document in invoked.
If we invoke the
function in the following manner
playerstats1(stat1,rs_ba,c_ba);
The function finds
the values for the stat1, rs_ba, and c_ba variable and pass them through to the
function code. The following output is
the result.
Batting Average:
0.253 vs 0.275
We can invoke the
function, and call different variables each time
playerstats1(stat2,rs_hr,c_hr);
playerstats1(stat3,rs_rbi,c_rbi);
playerstats1(stat4,rs_obp,c_obp);
Each time the
variable value is pass through to the function when invoked for the following
output.
Homeruns: 33 vs 286
Runs batted in: 116
vs 864
On Base Percentage:
0.346 vs 0.368
We can also change
the function to use the return statement to achieve the same output.
function
playerstats2 (stat_type, stat1, stat2){
var
print_out1=stat_type+": "+stat1+" vs
"+stat2+"</br>";
return print_out1;
}
This function
declares a variable inside it called print_out1 and is concatenate of three
other variables defined outside the function.
In the last example
we invoked the function in the JavaScript.
In this example the
document.write statement actually invokes the playerstats2 function.
document.write(playerstats2(stat1,rs_ba,c_ba));
document.write(playerstats2(stat2,rs_hr,c_hr));
document.write(playerstats2(stat3,rs_rbi,c_rbi));
document.write(playerstats2(stat4,rs_obp,c_obp));
The output on the
Html document is the same, just invoked in a different manner.
Batting Average:
0.253 vs 0.275
Homeruns: 33 vs 286
Runs batted in: 116
vs 864
On Base Percentage:
0.346 vs 0.368
However without the
return statement the concatenated information will not return.
This example also is
a good example of Global variables vs Local variables. The variables defined outside of the function
are known as Global variables. Those
variables defined inside the function are local variables.
Functions can be
declared and invoked within a function.
Consider the following example.
//Variable
declaration
//Global Variables
var
stat1="ERA";
var
stat2="Games Start";
var
stat3="Games Finished";
var stat4="Shut
outs";
var c_era=3.05;
var s_era=5.40;
var c_gs=36
var s_gs=5
var c_gf=0
var s_gf=0
var c_so=0
var s_so=0
//declaring function
playerstats
//function within a
function
//local variables
function
roy_halladay1(){
var
pitchername="Roy Halladay";
function
playerstats1 (stat_type, stat1, stat2){
document.write(pitchername+"'s
"+stat_type+": "+"Carreer = "+stat1+" vs Season=
"+stat2+"</br>");
}
playerstats1(stat1,c_era,s_era);
playerstats1(stat2,c_gs,s_gs);
playerstats1(stat3,c_gf,s_gf);
playerstats1(stat4,c_so,s_so);
}
When the
roy_halladay1 function is invoked it
declares and then invokes a function called playerstats1, passing through
several global variables to create the following output.
Roy Halladay's ERA:
Carreer = 3.05 vs Season= 5.4
Roy Halladay's Games
Start: Carreer = 36 vs Season= 5
Roy Halladay's Games
Finished: Carreer = 0 vs Season= 0
Roy Halladay's Shut
outs: Carreer = 0 vs Season= 0
No comments:
Post a Comment