 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

HTML

JAVASCRIPT

HTMLJAVASCRIPT

HTMLJAVASCRIPT

HTMLJAVASCRIPT

HTMLJAVASCRIPT

Parameters Return Function Building Up Function Capabilities

Move the onclick work into a function

Function

function name() { stmt; }

Let the function work on any data

Parameters Function

function name(parm) { stmt; }

 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

 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

HTML JAVASCRIPT (FUNCTION.JS) function doit (a,b) { var c = a*b); alert(“product is ”+c); }

HTMLJS mypet(‘cow’); mypet(‘dog’); function mypet(pet) { alert(‘my pet: ‘+pet); }

 Order matters  Need different names

HTMLJS mypet(‘Mutt’,’Jeff’); mypet(‘Jeff’,’Mutt’); function taller(big,small) { alert (big+’ is taller than ‘+ small); }

Let the result be placed anywhere

Parameters Return Function

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

HTML JAVASCRIPT (FUNCTION.JS) function doit (a,b) { var c = a*b); return(c); }

 Need to define  Inputs  Outputs  What to do

 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

 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)

 Series of statements: the recipe  Assignment statements  Function calls  Can use  Literals (5, “ “)  parameters  Specially defined locations ( variables )

 Like CSS, can be inline or a separate file  Like CSS, an external file is considered better practice  Like CSS, link to it from the head section

Myscript.js JavaScript option in komodo note that it’s an empty file but it can help you do NOT include the script tag

HTML JAVASCRIPT (FUNCTION.JS) function doit () { alert(“Hi!”); }