Mastering JavaScript Functions for Web Development
E N D
Presentation Transcript
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
Add Data HTML
Push Button HTML
Fill in Output HTML
JavaScript Form with input, button, outputwith 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
Building Up Function Capabilities Return Function Parameters Cubby holes I can just read Cubby holes I can just read
SIMPLEST JAVASCRIPT FUNCTION Move the onclick work into a 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 format function name() { stmt; stmt; }
JAVASCRIPT FUNCTIONS WITH PARAMETERS Let the function work on any data
Function Parameters
Function format function name(parm) { stmt; 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() { varnum = 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
JAVASCRIPT (function.js) 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); }
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 Function Parameters
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 return (value); • 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
JAVASCRIPT (function.js) 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); }
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
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)
WHAT TO DO • Series of statements: the recipe • Assignment statements • Function calls • Can use • Literals (5, “ “) • parameters • Specially defined locations (variables)
