Download - Introduction to Programming (in JavaScript)
![Page 1: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/1.jpg)
David StottsComputer Science Department
UNC Chapel Hill
Introduction to Programming
(in JavaScript)
![Page 2: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/2.jpg)
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
![Page 3: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/5.jpg)
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)
![Page 6: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/9.jpg)
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
![Page 10: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/10.jpg)
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
![Page 11: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/11.jpg)
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
![Page 12: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/12.jpg)
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
![Page 13: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/13.jpg)
Program Text Structure
function myMain ( ) { calls helper( ) calls validate( )}
function validate ( ) {
. . .
}
function helper ( ) {
calls isInt( )
}
function isInt ( ) {
. . .
}
myMain( ); the lonely first function call
![Page 14: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/14.jpg)
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 ( ) {
. . .
}
![Page 15: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/15.jpg)
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”
![Page 16: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/16.jpg)
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”
![Page 17: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/17.jpg)
Code examples
Show no parameters
◦ input prompting
Show return values
◦ User input data validation
Show parameters passed in
Show scope rules
Procedure Abstraction
![Page 18: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/18.jpg)
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
![Page 19: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/19.jpg)
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
![Page 20: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/21.jpg)
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 ;
![Page 22: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/22.jpg)
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…
![Page 23: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/23.jpg)
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
![Page 24: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/24.jpg)
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
![Page 25: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/25.jpg)
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
![Page 26: Introduction to Programming (in JavaScript)](https://reader036.vdocuments.us/reader036/viewer/2022062517/568132d8550346895d999c9a/html5/thumbnails/26.jpg)
Declare your variables !
AT THE TOP OF FUNCTIONS!
RULE: Declare your variables !
no, srsly … declare your variablesat the top of functions