Upload
patrick-leach
View
28
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Introduction to Programming (in JavaScript). David Stotts Computer Science Department UNC Chapel Hill. The Big Six (5) Procedure Abstraction. 0. data ( types, simple information ) 1. data storage ( variables, assignment ) 2. data retrieval ( expressions, evaluation ) - PowerPoint PPT Presentation
Citation preview
David StottsComputer Science Department
UNC Chapel Hill
Introduction to Programming
(in JavaScript)
0. data (types, simple information)
1. data storage (variables, assignment)
2. data retrieval (expressions, evaluation)
3. repetition (loops)
4. decision making (conditionals)
5. procedure abstraction (functions)
6. data abstraction (arrays)
7. objects: all-the-above, wrapped up
The Big Six
(5) Procedure Abstraction
Named Functions
Sometimes we have a block of statement we need to execute at several different places in our program
We would like to avoid duplicating the code block… no cut and paste
Principle: write the code lines once, refer to it as many times as you need
Procedure Abstraction
We have already seen this at work, and used it
◦ Math.floor(speed);◦ Math.sqrt(num);◦ prompt( “what is the number?” ) ;◦ alert( “well done !! ” );
Someone else wrote the JavaScript code that computes square roots
They wrapped it up in a way that lets you make it execute and work for you when you need it
Procedure Abstraction
One common use for functions is the traditional mathematical entity
y = f(x)
“black box” view, function turns input values into output values
The inside of the box is the code you write for the function, the function body
Pure Functions, Math Functions
argument
Return value
(domain element)
(range element)
You can “wrap up” your own code: you write functions, they are like named mini programs
It helps to organize your code into smaller chunks rather than one long huge pile of statements
You give a collection of statements a name, and then cause those statements to execute by referring to the name
JavaScript Functions
calling a function is making the function code execute to produce its results
You write the function body code onceYou call it as many times as you need to get results
We say a function returns the result it computes
A function call is an expressionIt evaluates to the result the function returns
A call can appear anywhere an expression can… assignment, arithmetic, alert, conditions
Function Call: Execution
Arguments are like “program” input for a functionReturn value is like output
var num, x = 47.3; num = sqrt ( x );
Call: Arguments, Return
Arguments: pass values into a function for use during execution
Return value: function passes
out a value when it ends
a function call, an expression,return value isassigned to num
Functions are usually called using both arguments and return values… however, they are optional
Sometimes we have occasion to write/call a function that has no arguments
Sometimes we have occasion to write/call a function that has no return value
Sometimes we call a function that returns a value but we choose to ignore it, not use it
Arguments, Return
function myProg ( ) { var x = 5; var xcube; xcube = helper(x); alert(“the result is “ + xcube );}
function helper ( num ) { var result = num ^ 3; return result;}
Function Call vs. Function Definition
Function definition
Function definition
Function call
Makes this execute
function myProg ( ) { var x = 5; var xcube; xcube = helper(x); alert(“the result is “ + xcube );}
myProg();
Function Call vs. Function Definition
Function definition
Function call
Makes this execute
Think of your program as a collection of function definitions one lonely call to make a function begin
running
We will write that “first function” as
function myMain ( ) { . . . }
This is just my style for this class, so all our programs have some consistency and similarity
There are many ways to structure JavaScript programs
Program Structure
Program Text Structure
function myMain ( ) { calls helper( ) calls validate( )}
function validate ( ) {
. . .
}
function helper ( ) {
calls isInt( )
}
function isInt ( ) {
. . .
}
myMain( ); the lonely first function call
This call to the “first function” gets the whole snowball rolling downhill
“Runtime” Structure
function myMain ( ) { calls helper( ) calls validate( )}
function isInt ( ) {
. . .
}
myMain( );
function helper ( ) {
calls isInt( )
}function validate ( ) {
. . .
}
function myProg ( ) { var x = 5; var xcube; xcube = helper(x); alert(“the result is “ + xcube );}
function helper ( num ) { var result = num ^ 3; return result;}
Parameter Passing
For this call, we are computing 5 ^ 3since 5 is passed is as the value for “num”
125 is sent back as the return value, put into “xcube”
function myProg ( ) { var x = 9; var xcube; xcube = helper(x); alert(“the result is “ + xcube );}
function helper ( num ) { var result = num ^ 3; return result;}
Different Parameters, Different Results
For this call, we are computing 9 ^ 3since 9 is passed is as the value for “num”
729 is sent back as the return value, put into “xcube”
Code examples
Show no parameters
◦ input prompting
Show return values
◦ User input data validation
Show parameters passed in
Show scope rules
Procedure Abstraction
Scope of a name : the part of the program where that name can be seen and used (assigned to, read from, called)
JavaScript has
global scope and local scope
We will use global scope carefully for now
ScopeNow you see it, now you don’t
Local Scope is basically all the names created inside a function
Arguments are variables local to a function
var declarations inside the function are local to that function
Functions can be declared inside a function… they are local
Local Scope
Anything declared local to a function
can be seen and used by code inside that function body
cannot be seen or used by any code outside that function
Local Scope
var gx = 12;var count = 0;
function myMain( ) { . . .}function helper ( num ) { . . .}
Example
We say that the “top level functions” are declared at the global level
Turns out we can declare variables at the global level too
Global variables can be seen in all functions
return num * gx ;
function myMain( ) { var y = 5; var result; result = helper ( y ) ;}
function helper ( num ) { var x = 7; alert( y ); // illegal // y in myMain is not visible return num*x;}
Example
Why can the name “helper” be seen and used (called) inside “myMain” ?
A mystery…
Function “helper” is not declared inside myMain…
For now, don’t use global variables
I want you to get used to passing arguments to functions, and to do it well
Using global variables can create conflicts when developing code modules as a team
We will be using the global scope level for top level function names
Global Scope
var aNumber = 100;
tweak( );
function tweak( ) {
// This prints "undefined", because aNumber is
// also defined locally below.
alert(aNumber);
if (false) {
var aNumber = 123;
} }
Weird Function Scope Stuff
So don’t so this… it causes confusion
Declare variables up top
var aNumber = 100;
tweak( );
function tweak( ) {
// This prints "undefined", because aNumber is
// also defined locally below.
var aNumber;
alert(aNumber);
if (false) {
aNumber = 123;
} }
Same as …
In this form, you can see why it prints undefined
Declare your variables !
AT THE TOP OF FUNCTIONS!
RULE: Declare your variables !
no, srsly … declare your variablesat the top of functions