JavaScript functions
JavaScript functions Collection of statements that can be invoked as a unit Can take parameters Can be used multiple times Can call without knowing what they do or how
What we want to do
Form with input, button, output HTML
Add Data HTML
Push Button HTML
Fill in Output HTML
Form with input, button, output with a JavaScript function HTML JavaScript
Add data HTML JavaScript
Push button and input data sent to javascript HTML JavaScript
Javascript uses the data to create a new result HTML JavaScript
And moves it to the output location HTML JavaScript
Building Up Function Capabilities Return Parameters Function Cubby holes I can just read Cubby holes I can just read
SIMPLEST JAVASCRIPT FUNCTION Move the onclick work into a function
Function
Function format function name() { stmt; }
Moving onclick to a function <form name=“fname”> <button type=“button” onclick=“fname.output.value=‘Hi!’;”> Click </button> <input type=“text” name=“output”> </form> <form name=“fname”> <button type=“button” onclick=“doit();”> Click </button> <input type=“text” name=“output”> </form> Function doit() { fname.output.value=‘Hi!’; }
function name() { stmt; } Function format function name() { stmt; }
JAVASCRIPT FUNCTIONS WITH PARAMETERS Let the function work on any data
Parameters Function
function name(parm) { stmt; } Function format function name(parm) { stmt; }
Moving onclick to a function <form name=“fname”> <button type=“button” onclick=“fname.output.value=‘Hi!’+ Math.round(5*Math.random());”> Click </button> <input text=“type” name=“output”> </form> <form name=“fname”> <button type=“button” onclick=“doit();”> Click </button> <input text=“type” name=“output”> </form> Function doit() { var num = Math.round(5*Math.random()); fname.output.value=‘Hi!’+num; }
Parameter Name is a placeholder Can be used anywhere in a function Can be used as many times as you want Can not change it MUST supply value when call Can be different every time
parameters Just a special type of variable Something that you hand to the function Q: Many users: how do you name? A: Give it its OWN names to use locally Q: How do you match up? A: By POSITION
FUNCTION with parameters HTML <head> <script src=“function.js”></script> </head> <body> <button type=“button” onclick=“doit(3,5);”> </body> function doit (a,b) { var c = a*b); alert(“product is ”+c); } JAVASCRIPT (function.js)
Passing Parameters HTML JS mypet(‘cow’); mypet(‘dog’); function mypet(pet) { alert(‘my pet: ‘+pet); }
Multiple Parameters Order matters Need different names
Passing Parameters HTML JS mypet(‘Mutt’,’Jeff’); mypet(‘Jeff’,’Mutt’); function taller(big,small) { alert (big+’ is taller than ‘+ small); }
RETURNING A VALUE Let the result be placed anywhere
Return Parameters Function
Returning a value Use the function as a value form.field.value = function(parm1, parm2); difference = subtract(minuhend,subtrahend); Contrast with alert(string); append(form.field.value,’end’);
Return value in JavaScript Want to get information BACK to HTML With a return, the function has a VALUE Can be used anywhere you can use a constant or variable Alert Assignment statement
FUNCTION with return HTML <head> <script src=“function.js”></script> </head> <body> <button type=“button” onclick=“alert(doit(3,5));”> </body> function doit (a,b) { var c = a*b); return(c); } JAVASCRIPT (function.js)
SUMMARY
Building our own Need to define Inputs Outputs What to do
Inputs: read only These are the parameters Order matters Need a way to reference them Position 1, position 2, … Cubby holes Better to use meaningful names Each name is just a pointer to the cubby hole Inputs: read only
output: write once Use a RETURN statement A write-once cubby hole Only way to access is the RETURN statement Once you set it, the function is ended Can have a simple value or more (e.g., concatenating strings) output: write once
WHAT TO DO Series of statements: the recipe Can use Assignment statements Function calls Can use Literals (5, “ “) parameters Specially defined locations (variables) WHAT TO DO