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 name() { stmt; } Function format function name() { stmt; }
Moving onclick to a function <form name=“fname”> <button type=“button” onclick=“alert(‘Hi!’ + Math.round(5*Math.random()));”>Click</button> </form> <form name=“fname”> <button type=“button” onclick=“doit();”>Click</button> </form> Function doit() { var num = Math.round(5*Math.random()); alert(‘Hi!’+num); }
JAVASCRIPT FUNCTIONS WITH PARAMETERS Let the function work on any data
Parameters Function
function name(parm) { stmt; } Function format function name(parm) { stmt; }
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 taller(‘Mutt’,’Jeff’); taller(‘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 document.getElementById(‘here’).inner HTML = function(parm1, parm2); difference = subtract(minuhend,subtrahend); Contrast with alert(string);
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
Statements in a function
Function = recipe Steps = assignments Order matters Perform actions one at a time Gets current values from right side of assignment Manipulates as requested Gives that value to the left side of the statement
Referencing information on an HTML page
3 Parts document = on this page getElementById(‘name’) = identifies the subby hole Which part of the cubby hole? value = the value assigned to an input field src = the file that is to be displayed in an img className = the class used to format the element innerHTML = the HTML within the tag and its end
tables
A Basic Table Table (TABLE) <table> Contains TABLE DATA (TD) <tr> <td> </td> </tr> </table> Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything Text Lists Other tables Pictures …
Table borders Every element in the table has a border Adjacent cells can have their own borders (default) or they can share a border (border-collapse)
Formatting elements Often need to repeat format on multiple elements CSS notation th,tr,td { border: none; }
Column Width Tables will adjust columns based on content What if you want them fixed width? Fixed and same td { width: …; } Fixed and different class per td (but have to put it on every td)
Centering Tables They have width. Use margins. Elements in table can have any text align you want Remember display: table;
Merging Cells CAN’T BE DONE IN CSS HTML attributes on td colspan=“n” rowspan=“n”