calAvg(exam, proj, hmwk)
advertisement
JavaScript Function Example
Please use speaker notes for
additional information.
avgfunca.html
Note the difference in
execution in Netscape
6.2 and Explorer. The
H1 at the beginning of
the BODY appears
prior to the prompts in
Explorer.
avgfunca.html
<HTML><HEAD>
<TITLE>Function to calculate average</TITLE>
<SCRIPT language = "JavaScript">
function calAvg(exam, proj, hmwk)
{
theAvg = (exam + proj + hmwk)/3;
document.write("The average is " + theAvg);
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Calculate Average</H1>
<SCRIPT language="JavaScript">
var exam = parseInt(prompt("Key in the grade for exams"));
var proj = parseInt(prompt("Key in the grade for projects"));
var hmwk = parseInt(prompt("Key in the grade for homework"));
calAvg(exam, proj, hmwk);
</SCRIPT>
</BODY>
</HTML>
The function is called and the data that was passed in is sent
to the function. The data that is sent is defined in the SCRIPT
outside the function and is therefore global. The data is
received using the same names. The function calculates the
average in theAvg and shows the answer.
avgfuncaa.html
<HTML><HEAD>
<TITLE>Function to calculate average</TITLE>
<SCRIPT language = "JavaScript">
function calAvg(exam, proj, hmwk)
{
theAvg = (exam + proj + hmwk)/3;
document.write("The average is " + theAvg);
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Calculate Average</H1>
<SCRIPT language="JavaScript">
var exam = parseInt(prompt("Key in the grade for exams", "0"));
var proj = parseInt(prompt("Key in the grade for projects", "0"));
var hmwk = parseInt(prompt("Key in the grade for homework", "0"));
calAvg(exam, proj, hmwk);
</SCRIPT>
</BODY>
</HTML>
avgfuncb.html
avgfuncb.html
<HTML><HEAD>
<TITLE>Function to calculate average</TITLE>
<SCRIPT language = "JavaScript">
function calAvg(exam, proj, hmwk)
{
theAvg = (exam + proj + hmwk)/3;
document.write("The average is " + theAvg);
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Calculate Average</H1>
<SCRIPT language="JavaScript">
var exam = parseInt(prompt("Key in the grade for exams"));
var proj = parseInt(prompt("Key in the grade for projects"));
var hmwk = parseInt(prompt("Key in the grade for homework"));
calAvg(exam, proj, hmwk);
document.write("<BR><BR>The average is " + theAvg);
</SCRIPT>
<BR>
You should note that when I define theAvg using var this does not work because theAvg in
the body does not see it. That is because variables
defined within a function are local. If you define them outside the function they
are global. Omitting the word var gets around this but is not considered a great coding
technique.
</BODY>
</HTML>
avgfuncc.html
avgfuncc.html
<HTML><HEAD>
<TITLE>Function to calculate average</TITLE>
<SCRIPT language = "JavaScript">
function calAvg(exam, proj, hmwk)
{
var theAvg = (exam + proj + hmwk)/3;
document.write("The average is " + theAvg);
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Calculate Average</H1>
<SCRIPT language="JavaScript">
var exam = parseInt(prompt("Key in the grade for exams"));
var proj = parseInt(prompt("Key in the grade for projects"));
var hmwk = parseInt(prompt("Key in the grade for homework"));
calAvg(exam, proj, hmwk);
document.write("<BR><BR>The average is " + theAvg);
</SCRIPT>
<BR>
You should note that when I define theAvg using var in the function, I cannot see
the document write of the answer from the script in the Body. That is because variables
defined within a function are local. If you define them outside the function they
are global. Omitting the word var gets around this but is not considered a great coding
technique.
</BODY>
</HTML>
avgfuncd.html
avgfuncd.html
<HTML><HEAD>
<TITLE>Function to calculate average</TITLE>
<SCRIPT language = "JavaScript">
function calAvg(exam, proj, hmwk)
{
var theAns = (exam + proj + hmwk)/3;
document.write("The average is " + theAns);
theAvg = theAns;
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Calculate Average</H1>
<SCRIPT language="JavaScript">
var theAvg = 0;
var exam = parseInt(prompt("Key in the grade for exams"));
var proj = parseInt(prompt("Key in the grade for projects"));
var hmwk = parseInt(prompt("Key in the grade for homework"));
calAvg(exam, proj, hmwk);
document.write("<BR><BR>The average is " + theAvg);
</SCRIPT>
<BR>
In this example I defined theAvg outside the function which made it global. I defined
theAns inside the function and then assigned the results to theAvg as I left the function.
Since it is global I can then see it.
</BODY>
</HTML>
avgfunce.html
avgfunce.html
<HTML><HEAD>
<TITLE>Function to calculate average</TITLE>
<SCRIPT language = "JavaScript">
function calAvg()
{
var theAns = (exam + proj + hmwk)/3;
document.write("The average is " + theAns);
theAvg = theAns;
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Calculate Average</H1>
<SCRIPT language="JavaScript">
var theAvg = 0;
var exam = parseInt(prompt("Key in the grade for exams"));
var proj = parseInt(prompt("Key in the grade for projects"));
var hmwk = parseInt(prompt("Key in the grade for homework"));
calAvg();
document.write("<BR><BR>The average is " + theAvg);
</SCRIPT>
<BR>
In this example I defined theAvg outside the function which made it global. I defined
theAns inside the function and then assigned the results to theAvg as I left the function.
Since it is global I can then see it.<BR>
Note that when I define the variables as I did, outside the function, I do not need to
pass. Preferred methodology is to pass. In fact, usually you use separate names to
maintain the integrity of the data.
</BODY>
</HTML>
avgfuncf.html
<HTML><HEAD>
avgfuncf.html
<TITLE>Function to calculate average</TITLE>
<SCRIPT language = "JavaScript">
function calAvg(calExam, calProj, calHmwk)
{
var theAns = (calExam + calProj + calHmwk)/3;
document.write("Inside the function");
document.write("<BR>The average is " + theAns);
document.write("<BR>" + calExam + " " + calProj + " " + calHmwk);
theAvg = theAns;
document.write("<BR>Last line in the function<BR>");
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Calculate Average</H1>
<SCRIPT language="JavaScript">
var theAvg = 0;
var exam = parseInt(prompt("Key in the grade for exams"));
var proj = parseInt(prompt("Key in the grade for projects"));
var hmwk = parseInt(prompt("Key in the grade for homework"));
calAvg(exam, proj, hmwk);
document.write("<BR><BR>The average is " + theAvg);
document.write("<BR>" + exam + " " + proj + " " + hmwk);
document.write("<BR> Note the variables used in the function are not available<BR>")
document.write(calExam + " " + calProj + " " + calHmwk);
</SCRIPT>
<BR>
In this example I defined theAvg outside the function which made it global. I defined
theAns inside the function and then assigned the results to theAvg as I left the function.
Since it is global I can then see it.<BR>
Here I am using separate names for the data inside the function and outside the function
to maintain the integrity of the data.
</BODY>
</HTML>
avgfuncg.html
<HTML><HEAD><TITLE>Function to calculate average</TITLE>
avgfuncg.html
<SCRIPT language = "JavaScript">
function calAvg(calExam, calProj, calHmwk)
{
calExam = parseInt(calExam * 1.1);
calProj = parseInt(calProj * 1.1);
calHmwk = parseInt(calHmwk * 1.1);
var theAns = parseInt((calExam + calProj + calHmwk)/3);
document.write("Inside the function");
document.write("<BR>The average is " + theAns);
document.write("<BR>" + calExam + " " + calProj + " " + calHmwk);
theAvg = theAns;
document.write("<BR>Last line in the function<BR>");
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Calculate Average</H1>
<SCRIPT language="JavaScript">
var theAvg = 0;
var exam = parseInt(prompt("Key in the grade for exams"));
var proj = parseInt(prompt("Key in the grade for projects"));
var hmwk = parseInt(prompt("Key in the grade for homework"));
calAvg(exam, proj, hmwk);
document.write("<BR><BR>The average is " + theAvg);
document.write("<BR>" + exam + " " + proj + " " + hmwk);
document.write("<BR> Note the variables used in the function are not available<BR>")
document.write(calExam + " " + calProj + " " + calHmwk);
</SCRIPT><BR>
In this example I defined theAvg outside the function which made it global. I defined
theAns inside the function and then assigned the results to theAvg as I left the function.
Since it is global I can then see it.<BR>
Here I am using separate names for the data inside the function and outside the function
to maintain the integrity of the data. I am also changing the value of the data after
it has been passed.
</BODY></HTML>
avgfunch.html
<HTML><HEAD>
<TITLE>Function to calculate average</TITLE>
<SCRIPT language = "JavaScript">
function calAvg(calExam, calProj, calHmwk)
{
calExam = parseInt(calExam * 1.1);
calProj = parseInt(calProj * 1.1);
calHmwk = parseInt(calHmwk * 1.1);
var theAns = parseInt((calExam + calProj + calHmwk)/3);
document.write("Inside the function");
document.write("<BR>The average is " + theAns);
document.write("<BR>" + calExam + " " + calProj + " " + calHmwk);
document.write("<BR>Last line in the function<BR>");
return theAns;
}
</SCRIPT>
avgfunch.html
</HEAD>
<BODY>
<H1>Calculate Average</H1>
<SCRIPT language="JavaScript">
var exam = parseInt(prompt("Key in the grade for exams"));
var proj = parseInt(prompt("Key in the grade for projects"));
var hmwk = parseInt(prompt("Key in the grade for homework"));
theAns = calAvg(exam, proj, hmwk);
document.write("<BR><BR>The average is " + theAns);
document.write("<BR>" + exam + " " + proj + " " + hmwk);
document.write("<BR> Note the variables used in the function are not available<BR>")
document.write(calExam + " " + calProj + " " + calHmwk);
</SCRIPT>
<BR>
In this example I am calculating theAns and then returning it.
Note I could have defined a var called theAvg here in the BODY script and then
assigned theAns to theAvg and displayed theAvg.
</BODY>
</HTML>
avgfunci.html
<HTML><HEAD>
<TITLE>Function to calculate average</TITLE>
<SCRIPT language = "JavaScript">
function calAvg(calExam, calProj, calHmwk)
{
calExam = parseInt(calExam * 1.1);
calProj = parseInt(calProj * 1.1);
calHmwk = parseInt(calHmwk * 1.1);
var theAns = parseInt((calExam + calProj + calHmwk)/3);
document.write("Inside the function");
document.write("<BR>The average is " + theAns);
document.write("<BR>" + calExam + " " + calProj + " " + calHmwk);
document.write("<BR>Last line in the function<BR>");
return theAns;
}
</SCRIPT>
avgfunci.html
</HEAD>
<BODY>
<H1>Calculate Average</H1>
<SCRIPT language="JavaScript">
var exam = parseInt(prompt("Key in the grade for exams"));
var proj = parseInt(prompt("Key in the grade for projects"));
var hmwk = parseInt(prompt("Key in the grade for homework"));
document.write("<BR><BR>The average is " + calAvg(exam, proj, hmwk));
document.write("<BR>" + exam + " " + proj + " " + hmwk);
document.write("<BR> Note the variables used in the function are not available<BR>")
document.write(calExam + " " + calProj + " " + calHmwk);
</SCRIPT>
<BR>
In this example I am calculating theAns and then returning it. Note that I call the
function within the write.
</BODY>
</HTML>
