Introduction to programming in javascript
This presentation is the property of its rightful owner.
Sponsored Links
1 / 26

Introduction to Programming (in JavaScript) PowerPoint PPT Presentation


  • 66 Views
  • Uploaded on
  • Presentation posted in: General

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 )

Download Presentation

Introduction to Programming (in JavaScript)

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


  • Login