Lecture 18

CX 103: Introduction to Computers

Lecture 18

Announcements

Mathematics/Computer Science Seminar Tomorrow

Jeff Dinitz, UVM

"Scheduling Tournaments and Leagues"

4:30 PM in Warner 202

Informal Labs Tomorrow:

Work on Programming Assignments

Assignment 18

Student Web Pages

JavaScript

So Far:

Program Design Issues

Top Down Design
Stepwise Refinement

Focus on Control Structures

Sequence
Selection if, if..else, switch
Repetition for, while, do/while

This Week

Functions

Arrays

Functions

Outline

Introduction

Program Modules in JavaScript

Programmer-Defined Functions

Function Definitions

Random Number Generation

Simulation

Duration of Identifiers

Scope Rules

Recursion

Introduction: Large Scale vs. Small Scale Programs

Divide and Conquer

Modularity

Construct a large, complex program from small, simple pieces.

Program Modules in JavaScript

Functions

Built-in ("pre-packaged") Functions
User-Defined Functions

Built-in Functions

document.writeln()
alert()
window,prompt()
parseInt()
parseFloat()
Math.round()

A function which belongs to a JavaScript object (e.g. window) is called a method (e.g., window.prompt).

Note: The detailed actual statements that carry out the activity of these functions are hidden from us.

To use these functions, we only need to know how many parameters (or arguments) to pass, how to call them, and then how to save the values they return.

A function is invoked (made to perform its designated tasks) by a function call. The function call specifies the name of the function and the information the function needs to do its job.

Example: FamiliarFunctions.html

UserInput = window.prompt("Enter a Number", "here");

Number = parseInt(UserInput);

document.writeln("The number you gave me was " + Number);

<HTML>

<HEAD>

<TITLE>Familiar Functions</TITLE>

<SCRIPT LANGUAGE = "JavaScript">

var UserInput, Number;

UserInput = window.prompt("Enter a Number", "here");

Number = parseInt(UserInput);

document.writeln("<H1>The number you gave me was " + Number);

</SCRIPT>

<BODY></BODY>

</HTML>

FamiliarFunctions.html

Programmer-Defined Functions

Powerful feature of a Programming Language:

Permits Modularization

Program Development is More Manageable
Software is More Reliable
Avoids Code Repetition

What You Need to Do:

Tell JavaScript the Name of the Function

Stipulate How the Function will be Called

Define What it will Do

Use the function keyword inside SCRIPT tags in the HEAD of an HTML document.

Example: cube.html

<HTML>

<HEAD>

<TITLE>Cubing Function</TITLE>

function cube(y)

{ return y * y * y }

var UserInput, Number;

UserInput = window.prompt("Enter a Number", "here");

Number = parseInt(UserInput);

document.writeln("<H1>The number you gave me was " + Number + "<BR>" ) ;

document.writeln("Its cube is " + cube(Number) );

</SCRIPT>

</HTML>

cube.html

Variables declared inside a function are local; they are known only to the function but not the outside world.

Example: cube2.html. TheCube is known only to the cube function

<HTML>

<HEAD> <TITLE>Second Cubing Function</TITLE>

function cube(y)

{ var TheCube;

TheCube = y * y * y

return TheCube

}

var UserInput, Number;

UserInput = window.prompt("Enter a Number", "here");

Number = parseInt(UserInput);

document.writeln("<H1>The number you gave me was " + Number + "<BR>" ) ;

document.writeln("Its cube is " + cube(Number) + "<BR>");

document.writeln("The value of TheCube is " + TheCube);

</SCRIPT>

</HTML>
cub2.html

Writing a Function Once and Using It Repeatedly

<HTML>

<HEAD>

<TITLE>Cube the first 10 integers </TITLE>

function cube(y)

{ var TheCube;

TheCube = y * y * y

return TheCube

}

var i;

for (i = 1; i <= 10; i = i + 1)

{ document.writeln("<H1> The cube of " + i + " is " + cube(i) + "<BR>"); }

</SCRIPT>

</HTML>

cube3.html

An Alternative Way to Define the Cubing Function

<HTML>

<HEAD>

<TITLE>Cube the first 10 integers another way</TITLE>

function cube(y)

{ var TheCube, i;

TheCube = 1;

for (i=1; i<=3; i = i + 1)

{TheCube = TheCube* y }

return TheCube

}

var i;

for (i = 1; i <= 10; i = i + 1)

{ document.writeln("<H1> The cube of " + i + " is " + cube(i) + "<BR>"); }

</SCRIPT>

</HTML>

cube4.html

A General Nth Power Function

<HTML>

<HEAD>

<TITLE>Find nth power of first 10 integers</TITLE>

function Power(y,N)

{ var ThePower, i;

ThePower = 1;

for (i=1; i<=N; i = i + 1)

{ThePower = ThePower* y }

return ThePower

}

var i, UserInput, Exponent;

UserInput = window.prompt("Enter an exponent", "");

Exponent = parseInt(UserInput);

for (i = 1; i <= 10; i = i + 1)

{ document.writeln("<H1> The " + Exponent + "th power of " + i + " is " +Power(i,Exponent) + "<BR>"); }

window

</SCRIPT>

</HTML>

power.html

More Modularization

<HTML>

<HEAD> <TITLE>Find nth power of first 10 integers</TITLE>

function Power(y,N)

{ var ThePower, i;

ThePower = 1;

for (i=1; i<=N; i = i + 1)

{ThePower = ThePower* y }

return ThePower

}

function ObtainExponent()

{

var UserInput, Power;

UserInput = window.prompt("Enter an exponent", "");

Power= parseInt(UserInput);

return Power;

}

var i;

Exponent = ObtainExponent();

for (i = 1; i <= 10; i = i + 1)

{ document.writeln("<H1> The " + Exponent + "th power of " + i + " is " +Power(i,Exponent) + "<BR>"); }

</SCRIPT>

</BODY>

</HTML>

power2.html

Even More Modularization

<HTML>

<HEAD>

<TITLE>Find nth power of first 10 integers</TITLE>

function Power(y,N)

{ var ThePower, i;

ThePower = 1;

for (i=1; i<=N; i = i + 1)

{ThePower = ThePower* y }

return ThePower

}

function ObtainExponent()

{

var UserInput, Power;

UserInput = window.prompt("Enter an exponent", "");

Power= parseInt(UserInput);

return Power;

}

function Loop(Exponent,k)

{ var i;

for (i = 1; i <= k; i = i + 1)

{ document.writeln("<H1> The " + Exponent + "th power of " + i + " is " +Power(i,Exponent) + "<BR>"); }

Exponent = ObtainExponent();

Loop(Exponent,10);

</SCRIPT>

</HTML>

power3.html

Even Greater Modularization

<HTML>

<HEAD>

<TITLE>Find nth power of first 10 integers</TITLE>

function Power(y,N)

{ var ThePower, i;

ThePower = 1;

for (i=1; i<=N; i = i + 1)

{ThePower = ThePower* y }

return ThePower ;

}

function ObtainExponent()

{

var UserInput, Power;

UserInput = window.prompt("Enter an exponent", "");

Power= parseInt(UserInput);

return Power;

}

function Loop(Exponent,k)

{ var i;

for (i = 1; i <= k; i = i + 1)

{ document.writeln("<H1> The " + Exponent + "th power of " + i + " is " +Power(i,Exponent) + "<BR>"); }

}

function ShowPowers()

{ var Exponent;

Exponent = ObtainExponent();

Loop(Exponent,10);

}

ShowPowers();

</SCRIPT>

</HTML>

power4.html

Random Number Generation

Our text contains a discussion of how to simulate the roll of a pair of dice and then how to simulate the game of "Craps."

The function Math.random() produce a random decimal x in the range 0 <= x < 1

<HTML>

var flip;

for (i = 1; i <= 6; i = i + 1)

{ r = Math.random();

if (r < 0.5) flip = "Head" ; else flip = "Tail";

document.writeln("<H1>" + r + " " + flip + "<BR>") ;

}

</SCRIPT>

</BODY>

</HTML>

coin1.html

Simulating a Season of Baseball

Suppose you believe a certain baseball play has an innate ability to bat .350 in a given baseball season of, say, 600 at bats.

What kinds of fluctuations would you expect over a 10 or 20 year career?

How unusual would a .325 season or a .380 season be?

<HTML>

<HEAD> <TITLE>What kinds of seasons can a ,350 hitter have? </TITLE>

var avg = .350; abMax = 600; numSeasons=10;

var season, atBat, hits, avgS, inStr;

inStr = window.prompt("How Many Seasons?", "");

numSeasons = parseInt(inStr);

document.writeln("<H1>");

for ( season = 1 ; season <= numSeasons; season = season + 1)

{

hits = 0;

for (atBat = 1; atBat <= abMax; atBat = atBat + 1)

{ if ( Math.random() < avg) hits = hits + 1 ; }

avgS = hits/abMax;

avgS = Math.floor(1000*avgS );

document.writeln( avgS + " " );

if ( season % 5 == 0 ) document.writeln("<BR>");

}

</SCRIPT>

</HTML>

baseball.html