javascript function example please use speaker notes for additional information
TRANSCRIPT
JavaScript Function Example
Please use speaker notes for additional information.
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.htmlavgfunca.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>
avgfunca.htmlavgfunca.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.htmlavgfuncaa.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.htmlavgfuncb.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 variablesdefined within a function are local. If you define them outside the function theyare global. Omitting the word var gets around this but is not considered a great codingtechnique.</BODY></HTML>
avgfuncb.htmlavgfuncb.html
avgfuncc.htmlavgfuncc.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 seethe document write of the answer from the script in the Body. That is because variablesdefined within a function are local. If you define them outside the function theyare global. Omitting the word var gets around this but is not considered a great codingtechnique.</BODY></HTML>
avgfuncc.htmlavgfuncc.html
avgfuncd.htmlavgfuncd.html
avgfuncd.htmlavgfuncd.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 definedtheAns 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.htmlavgfunce.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 definedtheAns 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 topass. Preferred methodology is to pass. In fact, usually you use separate names tomaintain the integrity of the data. </BODY></HTML>
avgfunce.htmlavgfunce.html
avgfuncf.htmlavgfuncf.html
avgfuncf.htmlavgfuncf.html<HTML><HEAD><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 definedtheAns 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 functionto maintain the integrity of the data. </BODY></HTML>
avgfuncg.htmlavgfuncg.html
avgfuncg.htmlavgfuncg.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); 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 definedtheAns 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 functionto maintain the integrity of the data. I am also changing the value of the data afterit has been passed.</BODY></HTML>
avgfunch.htmlavgfunch.html
avgfunch.htmlavgfunch.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>
</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 thenassigned theAns to theAvg and displayed theAvg.</BODY></HTML>
avgfunci.htmlavgfunci.html
avgfunci.htmlavgfunci.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>
</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>