Introduction to Programming (in JavaScript)

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) 3. repetition (loops) 4. decision making (conditionals) 5. procedure abstraction (functions) 6. data abstraction (arrays) 7. objects: all-the-above, wrapped up

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

Pure Functions, Math Functions argument 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 (domain element) Return value (range element)

JavaScript Functions 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

Function Call: Execution calling a function is making the function code execute to produce its results You write the function body code once You 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 expression It evaluates to the result the function returns A call can appear anywhere an expression can… assignment, arithmetic, alert, conditions

Call: Arguments, Return Arguments are like “program” input for a function Return value is like output var num, x = 47.3; num = sqrt ( x ); a function call, an expression, return value is assigned to num Return value: function passes out a value when it ends Arguments: pass values into a function for use during execution

Arguments, Return 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

Function Call vs. Function Definition 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 definition Function call Makes this execute Function definition

Function Call vs. Function Definition function myProg ( ) { var x = 5; var xcube; xcube = helper(x); alert(“the result is “ + xcube ); } myProg(); Function definition Makes this execute Function call

Program Structure 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 Text Structure myMain( ); the lonely first function call • function helper ( ) { • calls isInt( ) • } • function myMain ( ) { • calls helper( ) • calls validate( ) • } • function isInt( ) { • . . . • } • function validate ( ) { • . . . • }

“Runtime” Structure myMain( ); This call to the “first function” gets the whole snowball rolling downhill • function myMain ( ) { • calls helper( ) • calls validate( ) • } • function helper ( ) { • calls isInt( ) • } • function validate ( ) { • . . . • } • function isInt( ) { • . . . • }

Parameter Passing function myProg ( ) { var x = 5; var xcube; xcube = helper(x); alert(“the result is “ + xcube ); } function helper ( num ) { var result = num ^ 3; return result; } For this call, we are computing 5 ^ 3 since 5 is passed is as the value for “num” 125 is sent back as the return value, put into “xcube”

Different Parameters, Different Results function myProg ( ) { var x = 9; var xcube; xcube = helper(x); alert(“the result is “ + xcube ); } function helper ( num ) { var result = num ^ 3; return result; } For this call, we are computing 9 ^ 3 since 9 is passed is as the value for “num” 729 is sent back as the return value, put into “xcube”

Procedure Abstraction Code examples Show no parameters • input prompting Show return values • User input data validation Show parameters passed in Show scope rules

ScopeNow you see it, now you don’t 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

Local Scope • 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

Example var gx = 12; var count = 0; function myMain( ) { . . . } function helper ( num ) { . . . } Turns out we can declare variables at the global level too Global variables can be seen in all functions return num * gx ; We say that the “top level functions” are declared at the global level

Example 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; } A mystery… Why can the name “helper” be seen and used (called) inside “myMain” ? Function “helper” is not declared inside myMain…

Global Scope 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

Weird Function Scope Stuff var aNumber = 100; tweak( ); function tweak( ) { // This prints "undefined", because aNumber is // also defined locally below. alert(aNumber); if (false) { var aNumber = 123; } } So don’t so this… it causes confusion Declare variables up top

Same as … var aNumber = 100; tweak( ); function tweak( ) { // This prints "undefined", because aNumber is // also defined locally below. var aNumber; alert(aNumber); if (false) { aNumber= 123; } } In this form, you can see why it prints undefined

RULE: Declare your variables ! • Declare your variables ! • AT THE TOP OF FUNCTIONS! no, srsly … declare your variables at the top of functions

Introduction to Programming (in JavaScript)