Download presentation
Presentation is loading. Please wait.
1
JavaScript functions
2
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
3
What we want to do
4
Form with input, button, output
HTML
5
Add Data HTML
6
Push Button HTML
7
Fill in Output HTML
8
Form with input, button, output with a JavaScript function
HTML JavaScript
9
Add data HTML JavaScript
10
Push button and input data sent to javascript
HTML JavaScript
11
Javascript uses the data to create a new result
HTML JavaScript
12
And moves it to the output location
HTML JavaScript
13
Building Up Function Capabilities
Return Parameters Function Cubby holes I can just read Cubby holes I can just read
14
SIMPLEST JAVASCRIPT FUNCTION
Move the onclick work into a function
15
Function
16
Function format function name() { stmt; }
17
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!’; }
18
function name() { stmt; }
Function format function name() { stmt; }
19
JAVASCRIPT FUNCTIONS WITH PARAMETERS
Let the function work on any data
20
Parameters Function
21
function name(parm) { stmt; }
Function format function name(parm) { stmt; }
22
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; }
23
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
24
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
25
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)
26
Passing Parameters HTML JS mypet(‘cow’); mypet(‘dog’);
function mypet(pet) { alert(‘my pet: ‘+pet); }
27
Multiple Parameters Order matters Need different names
28
Passing Parameters HTML JS mypet(‘Mutt’,’Jeff’); mypet(‘Jeff’,’Mutt’);
function taller(big,small) { alert (big+’ is taller than ‘+ small); }
29
RETURNING A VALUE Let the result be placed anywhere
30
Return Parameters Function
31
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’);
32
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
33
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)
34
SUMMARY
35
Building our own Need to define Inputs Outputs What to do
36
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
37
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
38
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
Similar presentations
