introduction to programming in javascript
Download
Skip this Video
Download Presentation
Introduction to Programming (in JavaScript)

Loading in 2 Seconds...

play fullscreen
1 / 26

Introduction to Programming (in JavaScript) - PowerPoint PPT Presentation


  • 87 Views
  • Uploaded on

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 )

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Introduction to Programming (in JavaScript)' - patrick-leach


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
introduction to programming in javascript

Introduction to Programming(in JavaScript)

David Stotts

Computer Science Department

UNC Chapel Hill

the big six 5 procedure abstraction
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
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 abstraction1
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
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
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
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
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
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 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 definition1
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
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
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
“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
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
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 abstraction2
Procedure Abstraction

Code examples

Show no parameters

  • input prompting

Show return values

  • User input data validation

Show parameters passed in

Show scope rules

scope now you see it now you don t
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
  • 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 scope1
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
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

example1
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
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
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
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
RULE: Declare your variables !
  • Declare your variables !
  • AT THE TOP OF FUNCTIONS!

no, srsly …

declare your variables

at the top of functions

ad