Functions
executes code chunks when called
http://www.w3schools.com/js/js_functions.asp
Thursday, October 1, 2009
Slide 2
Slide 2 text
surprise!
you already have been using them
since your first line of code
document.write, alert, prompt, confirm, parseInt, etc.
Thursday, October 1, 2009
Slide 3
Slide 3 text
defining a function
function foo() {
// some code
}
Thursday, October 1, 2009
Slide 4
Slide 4 text
defining a function
function foo() {
// some code
}
function keyword
Thursday, October 1, 2009
Slide 5
Slide 5 text
defining a function
function foo() {
// some code
}
function keyword function name
Thursday, October 1, 2009
Slide 6
Slide 6 text
defining a function
function foo() {
// some code
}
function keyword function name parenthesis
Thursday, October 1, 2009
Slide 7
Slide 7 text
defining a function
function foo() {
// some code
}
function keyword function name parenthesis
start of function
Thursday, October 1, 2009
Slide 8
Slide 8 text
defining a function
function foo() {
// some code
}
function keyword function name parenthesis
start of function
end of function
Thursday, October 1, 2009
Slide 9
Slide 9 text
braces always mean
start and stop
(if, else if, else, for, for...in, while, functions, objects
Thursday, October 1, 2009
Slide 10
Slide 10 text
calling a function
// define function foo
// for later use
function foo() {
// some code
}
// call the function and
// run the code inside it
foo();
Thursday, October 1, 2009
Slide 11
Slide 11 text
functions are called using
parenthesis and the function name
( )
Thursday, October 1, 2009
Slide 12
Slide 12 text
calling a function
// define function foo
// for later use
function foo() {
// some code
}
// does not execute function
foo;
// executes function
foo();
Thursday, October 1, 2009
Slide 13
Slide 13 text
var number_1 = 5;
var number_2 = 10;
var sum = number_1 + number_2;
function foo() {
alert('This will never alert.');
}
alert(sum);
// only sum will be alerted
// the string inside foo function does
// not because foo was never called
the code inside functions only
executes when the function is called
Thursday, October 1, 2009
Slide 14
Slide 14 text
functions can return values
// define the function
function name() {
return 'John Nunemaker';
}
// call the function
var name = name();
// name variable is now 'John Nunemaker'
Thursday, October 1, 2009
Slide 15
Slide 15 text
the instant a return statement is found,
the function returns and stops execution
Thursday, October 1, 2009
Slide 16
Slide 16 text
function demoReturn() {
return;
// this will never be called
alert('hi');
}
// will not alert ‘hi’
demoReturn();
return doesn’t have to
return a value
Thursday, October 1, 2009
Slide 17
Slide 17 text
functions can have
a parameter
// define the function
function name(name) {
return 'The name was: ' + name;
}
// call the function
var message = name('Ron Burgandy');
// message variable is now 'The name was: Ron Burgandy'
// call the function again with different name
message = name('Veronica Corningstone');
// message variable is now 'The name was: Veronica Corningstone'
Thursday, October 1, 2009
Slide 18
Slide 18 text
functions can have
a parameter
// define the function
function name(name) {
return 'The name was: ' + name;
}
// call the function
var message = name('Ron Burgandy');
// message variable is now 'The name was: Ron Burgandy'
// call the function again with different name
message = name('Veronica Corningstone');
// message variable is now 'The name was: Veronica Corningstone'
name is a parameter
Thursday, October 1, 2009
Slide 19
Slide 19 text
functions can have
a parameter
// define the function
function name(name) {
return 'The name was: ' + name;
}
// call the function
var message = name('Ron Burgandy');
// message variable is now 'The name was: Ron Burgandy'
// call the function again with different name
message = name('Veronica Corningstone');
// message variable is now 'The name was: Veronica Corningstone'
name is a parameter
‘Ron Burgandy’ is an argument
‘Veronica Corningstone’ is an argument
Thursday, October 1, 2009
Slide 20
Slide 20 text
functions can have
multiple parameters
// define the function
function fullName(first_name, last_name) {
return first_name + ' ' + last_name;
}
var wes = fullName('Wes', 'Mantooth');
// wes variable is now 'Wes Mantooth'
var brian = fullName('Brian', 'Fantana');
// brian variable is now 'Brian Fantana'
Thursday, October 1, 2009
Slide 21
Slide 21 text
philosophical tidbit
parameter - name of value to be used in function
argument - value passed in when function called
Thursday, October 1, 2009
Slide 22
Slide 22 text
camelCaseFunctionNames
Thursday, October 1, 2009
Slide 23
Slide 23 text
naming conventions
// variables use underscores
var full_name = 'John Nunemaker';
// functions use camel case with lower first
function fullName() {
return 'John Nunemaker';
}
Thursday, October 1, 2009
Slide 24
Slide 24 text
function can be made
up of any code
function demoWithLoop(loops) {
for (var i=0; i < loops; i++) {
alert("Why'd you have to wait...");
}
}
// two alerts
demoWithLoop(2);
Thursday, October 1, 2009
Slide 25
Slide 25 text
functions, ifs, loops
function demoWithLoop(loops) {
if (loops > 10) {
alert('DO NOT WANT!');
} else {
for (var i=0; i < loops; i++) {
alert("Why'd you have to wait...");
}
}
}
// alert DO NOT WANT!
demoWithLoop(11);
// 4 alerts of Why'd you have to wait...
demoWithLoop(4);
Thursday, October 1, 2009
Slide 26
Slide 26 text
functions, ifs, loops, return
function demoWithLoop(loops) {
if (loops > 10) {
alert('DO NOT WANT!');
return;
}
for (var i=0; i < loops; i++) {
alert("Why'd you have to wait...");
}
}
// alert DO NOT WANT!
demoWithLoop(11);
// 4 alerts of Why'd you have to wait...
demoWithLoop(4);
Thursday, October 1, 2009
Slide 27
Slide 27 text
assignment06
http://teaching.johnnunemaker.com/capp-30550/sessions/functions/
Thursday, October 1, 2009