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 name() { stmt; }
Function format function name() { stmt; }
17
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); }
18
JAVASCRIPT FUNCTIONS WITH PARAMETERS
Let the function work on any data
19
Parameters Function
20
function name(parm) { stmt; }
Function format function name(parm) { stmt; }
21
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
22
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
23
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)
24
Passing Parameters HTML JS mypet(‘cow’); mypet(‘dog’);
function mypet(pet) { alert(‘my pet: ‘+pet); }
25
Multiple Parameters Order matters Need different names
26
Passing Parameters HTML JS taller(‘Mutt’,’Jeff’);
taller(‘Jeff’,’Mutt’); function taller(big,small) { alert (big+’ is taller than ‘+ small); }
27
RETURNING A VALUE Let the result be placed anywhere
28
Return Parameters Function
29
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);
30
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
31
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)
32
SUMMARY
33
Building our own Need to define Inputs Outputs What to do
34
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
35
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
36
Statements in a function
37
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
38
Referencing information on an HTML page
39
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
40
tables
41
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 …
42
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)
43
Formatting elements Often need to repeat format on multiple elements
CSS notation th,tr,td { border: none; }
44
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)
45
Centering Tables They have width. Use margins.
Elements in table can have any text align you want Remember display: table;
46
Merging Cells CAN’T BE DONE IN CSS HTML attributes on td colspan=“n”
rowspan=“n”
Similar presentations
