Mastering JavaScript Functions for Web Development

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

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

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); }

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

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)

Mastering JavaScript Functions for Web Development