Functions - Introduction to Java Script - Lecture Slides, Slides of Javascript programming

Download Functions - Introduction to Java Script - Lecture Slides and more Slides Javascript programming in PDF only on Docsity!

JavaScript: Functions

Outline

10.1 Introduction

10.2 Program Modules in JavaScript

10.3 Programmer-Defined Functions

10.4 Function Definitions

10.5 Random-Number Generation

10.6 Example: Game of Chance

10.7 Another Example: Random Image Generator

10.8 Scope Rules

10.9 JavaScript Global Functions

10.10 Recursion

10.11 Recursion vs. Iteration

10.12 Web Resources

Objectives

• In this tutorial, you will learn:
  • To understand how to construct programs modularly from

small pieces called functions.

• To be able to create new functions.
• To understand the mechanisms used to pass information

between functions.

• To introduce simulation techniques that use random-number

generation.

• To understand how the visibility of identifiers is limited to

specific regions of programs.

10.1 Introduction

• Software design
  • Break software up into modules
    • Easier to maintain and debug
  • Divide and conquer

10.2 Program Modules in JavaScript

• Modules in JavaScript
  • Functions
  • Methods
    • Belong to an object
  • JavaScript includes many useful pre-defined methods
    • Combine with programmer-defined methods to make a

program

10.2 Program Modules in JavaScript

• Functions
  • Started by function call
  • Receive necessary information via arguments (parameters)
  • Boss-Worker relationship
    • Calling function
    • Called function
    • Return value when finished
    • Can have many tiers

10.2 Program Modules in JavaScript

boss

worker1 worker2 worker

worker4 worker

Fig. 10.1 Hierarchical boss-function/worker-function relationship.

10.2 Program Modules in JavaScript

• Function calls
  • Name
  • Left parenthesis
  • Arguments separated by commas
    • Constants, variables or expressions
  • Right parenthesis
  • Examples:

total += parseFloat( inputValue );

total += parseFloat( s1 + s2 );

10.3 Programmer-Defined Functions

• Defining functions
  • All variables declared in function are called local
    • Do not exist outside current function
  • Parameters
    • Also local variables
  • Promotes reusability
    • Keep short
    • Name clearly

10.4 Function Definitions

• Format of a function definition

function function-name ( parameter-list )

{

declarations and statements

}

• Function name any valid identifier
• Parameter list names of variables that will receive arguments
  • Must have same number as function call
  • May be empty
• Declarations and statements
  • Function body (“block” of code)

10.4 Function Definitions

• Returning control
  • return statement
  • Can return either nothing, or a value

return expression ;

• No return statement same as return;
• Not returning a value when expected is an error

10.4 Function Definitions

• Writing a function to square two numbers
  • for loop from 1 to 10
  • Pass each number as argument to square
  • return value of argument multiplied by itself
  • Display result

1 2 4 5 6 7 8 9 10 11 12 32 33 34

SquareInt.html (2 of 2)

Variable y gets the value of variable x.

The return statement passes the value of y * y back to the calling function.

10.4 Function Definitions

Fig. 10.2 Using programmer-defined function square.

10.4 Function Definitions

• Finding the maximum of 3 numbers
  • Prompt for 3 inputs
  • Convert to numbers
  • Pass to maximum
  • Math.max

1 2 4 5 6 7 8 9 10 11 12 39 40 41 42

Click Refresh (or Reload) to run the script again

43 44

Maximum.html (2 of 2)

Call function maximum and pass it the value of variables value1, value2 and value3.

Variables x, y and z get the value of variables value1, value2 and value3, respectively.

Method max returns the larger of the two integers passed to it.

10.4 Function Definitions

Fig. 10.3 Programmer-defined maximum function (1 of 2).

10.4 Function Definitions

Fig. 10.3 Programmer-defined maximum function (2 of 2).

10.5 Random-Number Generation

• Random-number generation introduces element of

chance

• Math.random

var randomValue = Math.random();

• Floating point value between 0 and 1
• Adjust range by scaling and shifting
• Math.floor
  • Always round down

Math.floor( 1 + Math.random() * 6 )

1 2 4 5 6 7 8 9 10 11 12 34 35 36 37

Click Refresh (or Reload) to run the script again

38 39

RandomInt.html (2 of 2) The for loop creates 20 table cells (4 rows x 5 columns).

Each cell is populated with a random number generated by method random.

Method floor rounds the number generated by method random down.

10.5 Random-Number Generation

Fig. 10.4 Random integers, shifting and scaling.

1 2 4 5 6 7 8 9 10 11 12