JAVASCRIPT FUNCTIONS Java Script functions Collection of statements
- Slides: 46
JAVASCRIPT FUNCTIONS
Java. Script 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 Java. Script 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 Parameters Cubby holes I can just read Function Return 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=“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 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> JAVASCRIPT (FUNCTION. JS) function doit (a, b) { var c = a*b; alert(“product is ”+c); }
Passing Parameters HTML mypet(‘cow’); mypet(‘dog’); JS function mypet(pet) { alert(‘my pet: ‘+pet); }
Multiple Parameters Order matters � Need different names �
Passing Parameters HTML taller(‘Mutt’, ’Jeff’); taller(‘Jeff’, ’Mutt’); JS function taller(big, small) { alert (big+’ is taller than ‘+ small); }
RETURNING A VALUE Let the result be placed anywhere
Parameters Function Return
Returning a value � Use the function as a value �document. get. Element. By. Id(‘here’). inner HTML = function(parm 1, parm 2); �difference � = subtract(minuhend, subtrahend); Contrast with alert(string);
Return value in Java. Script � � � 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
FUNCTION with return HTML <head> <script src=“function. js”></script> </head> <body> <button type=“button” onclick=“alert(doit(3, 5)); ”> </body> JAVASCRIPT (FUNCTION. JS) function doit (a, b) { var c = a*b; return(c); }
SUMMARY
Building our own �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 Inputs: read only
� 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 get. Element. By. Id(‘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 � class. Name = the class used to format the element � inner. HTML = the HTML within the tag and its end
TABLES
A Basic Table <table> <tr> <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 (bordercollapse)
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”