CS101 - Introduction to Computing - Lecture Handout 29

User Rating:  / 0
PoorBest 

Related Content: CS101 - VU Lectures, Handouts, PPT Slides, Assignments, Quizzes, Papers & Books of Introduction to Computing

Functions & Variable Scope

(Web Development Lecture 10)

During the last lecture we had a discussion on Arrays
We found out why we need arrays
We became able to use arrays in conjunction with the ‘for’ loop for solving simple problems

Array

An indexed list of elements
A variable is a container that holds a value
Similarly, an Array can be considered a container as well, but this one is more interesting as it can hold multiple values

 Array

Arrays in JavaScript

In JavaScript, arrays are implemented in the form of the ‘Array’ object
The key property of the ‘Array’ object is ‘length’, i.e the number of elements in an array
Two of the key ‘Array’ methods are:

  • reverse( )
  • sort( )

lements of an array can be of any type; you can even have an array containing other arrays

Today’s Goal:

Functions & Variable Scope

To be able to understand the concept of functions and their use for solving simple problems
To become familiar with some of JavaScript’s built-in functions
To become familiar with the concept of local and global variables

Function

A group of statements that is put together (or defined) once and then can be used (by reference) repeatedly on a Web page
Also known as subprogram, procedure, subroutine
words = new Array ( 10 ) ;
for ( k = 0 ; k < words.length ; k = k + 1 ) {
words[ k ] = window.prompt( "Enter word # " + k, "" ) ;From the last lecture
}
document.write( "UNSORTED WORDS:" + "<BR>" ) ;
for ( k = 0 ; k < words.length ; k = k + 1 ) {
document.write( words[ k ] + "<BR>" ) ;
}
words.sort( ) ;
document.write( "SORTED WORDS:" + "<BR>" ) ;
for ( k = 0 ; k < words.length ; k = k + 1 ) {
document.write( words[ k ] + "<BR>" ) ;
}

words = new Array ( 10 ) ;

for ( k = 0 ; k < words.length ; k = k + 1 ) {
words[ k ] = window.prompt( "Enter word # " + k, "" ) ;
}
document.write( "UNSORTED WORDS:" + "<BR>" ) ;
for ( k = 0 ; k < words.length ; k = k + 1 ) {
document.write( words[ k ] + "<BR>" ) ;
}
words.sort( ) ;
document.write( "SORTED WORDS:" + "<BR>" ) ;
for ( k = 0 ; k < words.length ; k = k + 1 ) {
document.write( words[ k ] + "<BR>" ) ;
}
function writeList( heading, words ) { ß----------------------------Function definition
document.write( heading + "<BR>" ) ;
for ( k = 0 ; k < words.length ; k = k + 1 ) {
document.write( words[ k ] + "<BR>" ) ;
}
}
words = new Array ( 10 ) ;redouble the advantage
for ( k = 0 ; k < words.length ; k = k + 1 ) {
words[ k ] = window.prompt( "Enter word # " + k, "" ) ;
}
writeList( “Unsorted Words:”, words ) ; ß----------------------Function call
words.sort( ) ;
writeList( “Sorted List:”, words ) ; < --------------------------------Function call

Advantages of Functions

Number of lines of code is reduced
Code becomes easier to read & understand
Code becomes easier to maintain as changes need to be made only at a single location
instead multiple locations
function writeList( heading, words ) {
document.write( heading + "<BR>" ) ;
for ( k = 0 ; k < words.length ; k = k + 1 ) {
document.write( words[ k ] + "<BR>" ) ;
}
}
words = new Array ( 10 ) ;
for ( k = 0 ; k < words.length ; k = k + 1 ) {
words[ k ] = window.prompt( "Enter word # " + k, "" ) ;
}
writeList( “Unsorted Words:”, words ) ;
words.sort( ) ;
writeList( “Sorted List:”, words ) ;

Advantages of Functions

Function Identifiers

The naming rules for function identifiers are the same as were discussed for variable and array identifiers

Arguments of a Function

A comma-separated list of data
Arguments define the interface between the function and the rest of the Web page
Arguments values are passed to the function by value (some popular languages pass arguments ‘by reference’ as well)
To ensure that a function is defined before it is called up, define all functions in the HEAD portion of Web pages

Arguments of a Function

Arguments of a Function 1

Another Example

Another Example

What Would this Statement Do?

factorial( factorial ( 3 ) ) ;
This is termed as the
recursive
use of a function

Methods

Methods are functions
They are unusual in the sense that they are stored as properties of objects
Object: A named collection of properties (data, state) & methods (instructions, behavior)

Methods

Event Handlers

Special-purpose functions that come predefined with JavaScript
They are unusual in the sense that they are many times called in the HTML part of a Web page and not the <SCRIPT> … </SCRIPT> part
More on event handlers in a future lecture

Predefined, Top-Level or Built-In Functions

Event handlers are not the only functions that come predefined with JavaScript. There are many others.
Practically, there is no difference between predefined functions and those that are defined by the programmer (termed as user-defined or custom functions)
There are many of them, but here we discuss only two: parseInt( ), parseFloat( )

meaning of ‘Parse

parseInt( )

Syntax: parseInt ( string )
string1 = “3.14159” ;
document.write( parseInt( string1 ) ) ;
document.write( “<BR>” ) ;
string2 = “$100.00” ;
document.write( parseInt( string2 ) ) ;
document.write( “<BR>” ) ;

string3 = “ 23 ” ;
document.write( parseInt( string3 ) ) ;3 NaN 23

  1. Parses the string argument; returns an integer
  2. If it encounters a non-numeral - anything other than (+,-) or (0-9) - it ignores it and all succeeding characters, and returns the integer value parsed up to that point
  3. If the first character cannot be converted to a number, parseInt returns NaN
  4. parseInt truncates numbers to integer values
  5. Leading and trailing spaces are ignored

parseFloat( )

Syntax: parseFloat ( string )
string1 = “3.14159” ;
document.write( parseFloat( string1 ) ) ;
document.write( “<BR>” ) ;
string2 = “$100.00” ;
document.write( parseFloat( string2 ) ) ;
document.write( “<BR>” ) ;
string3 = “ 23E-15 ” ;
document.write( parseFloat( string3 ) ) ;

  • Parses the string argument; returns a FP number
  • If it encounters a character other than

A sign (+,-)
A numeral (0-9)
A decimal point
An exponent
it returns the value up to that point, ignoring that and all succeeding characters

  • If the first character cannot be converted to a number, parseFloat returns NaN
  • Leading and trailing spaces are ignored

Scope of Variable

Defining the space in which a variable is effective is known as defining the scope of a variable. A variable can be either local or global in scope

Local and Global Variables

Local or Function-level Variable
Effective only in the function in which they are declared
Global Variables
Visible everywhere on the Web page

Example

function factorial( n ) {
product = 1 ;
for ( k = 1 ; k <= n ; k = k + 1 ) {
product = product * k
}
return product ;
}
n = window.prompt( "Enter a number ", "" ) ;
document.write( “k = ”, k ) ;
document.write( “<BR>” ) ;
document.write(n, "! = ", factorial( n ) ) ;

Local and Global Variables

function factorial( n ) {
product = 1 ;
for ( k = 1 ; k <= n ; k = k + 1 ) {
product = product * k
}
return product ;
}
n = window.prompt( "Enter a number ", "" ) ;
document.write( “k = ”, k ) ;
document.write( “<BR>” ) ;
document.write(n, "! = ", factorial( n ) ) ;

function factorial( n ) {
product = 1 ;
for ( k = 1 ; k <= n ; k = k + 1 ) {
product = product * k
}
return product ;
}
n = window.prompt( "Enter a number ", "" ) ;
document.write(n, "! = ", factorial( n ) ) ;
document.write( “<BR>” ) ;
document.write( “k = ”, k ) ;
function factorial( n ) {
var k ;
product = 1 ;
for ( k = 1 ; k <= n ; k = k + 1 ) {
product = product * k
}
return product ;
}
n = window.prompt( "Enter a number ", "" ) ;
document.write(n, "! = ", factorial( n ) ) ;
document.write( “<BR>” ) ;
document.write( “k = ”, k ) ;

Local and Global Variables 1

‘k’ is a Local Variable

‘k’ is not declared or used in the main code
Instead, it is declared within the function ‘factorial’ only
‘k’ i local to the ‘factorial’ function, and does not hold any meaning outside that function

function factorial( n ) {
var k, product ;
product = 1 ;
for ( k = 1 ; k <= n ; k = k + 1 ) {
product = product * kproduct
}
return product ;
}

n = window.prompt( "Enter a number ", "" ) ;
document.write(n, "! = ", factorial( n ) ) ;
document.write( “<BR>” ) ;
document.write( product ) ;statement

Local Variables

Declaring variables (using the var keyword) within a function, makes them local•They are available only within the function and hold no meaning outside of it

Global Variables

All other variables used in a Web page (or window) are global
They can be manipulated from the main code as well as from any of the functions
They include:

  • All variables declared in the main code
  • All variables used but not declared in the main code
  • All variables used but not declared in any of the functions defined on the Web page (or window)

function writeList( heading, words ) {
document.write( heading + "<BR>" ) ;
for ( k = 0 ; k < words.length ; k = k + 1 ) {
document.write( words[ k ] + "<BR>" ) ;functionality
}
}

words = new Array ( 10 ) ;
for ( k = 0 ; k < words.length ; k = k + 1 ) {
words[ k ] = window.prompt( "Enter word # " + k, "" ) ;
}
writeList( “Unsorted Words:”, words ) ;
words.sort( ) ;
writeList( “Sorted List:”, words ) ;
words.reverse( ) ;
writeList( “Reverse-Sorted List:”, words ) ;

Local –vs- Global

Global variables can make the logic of a Web page difficult to understand
Global variables also make the reuse and maintenance of your code much more difficult

HEURISTIC

During Today’s Lecture …

We looked at functions and their use for solving simple problems
We became familiar with a couple of JavaScript’s built-in functions
We became familiar with the concept of local and global variables

Next Web Dev Lecture:

Event Handling

We’ll learn to appreciate the concept of event driven programming
We will produce solutions for simple problems using various event handlers