Functions and Parameters. Structured Programming

Functions and Parameters

Structured Programming

Modular, Structured Programs

• Program:– Sequences, conditionals, and loops.– Cohesive blocks of code.– Request that blocks of code do work.

Transition to objects.

Task

• Generate payroll for employees.

Steps

• Retrieve employee information.• Retrieve payroll data for employee.• Calculate gross pay.• Calculate federal income tax.• Calculate FICA tax.• Calculate state tax.• Calculate net pay.• Transfer net pay to employee account.• Transfer taxes to tax liability accounts.• Generate pay statement.

StructureGet Employee Data Retrieve employee information

Retrieve payroll data for employee

Calculate gross pay

Calculate federal income taxCalculate FICA taxCalculate state tax

Calculate net pay

Transfer net pay to employee accountTransfer taxes to tax liability accounts

Compute Net Pay

Deposit Funds

Prepare Pay Statement

Employees Remaining? Generate pay statement

ModulesGet Employee Data Retrieve employee information

Retrieve payroll data for employee

Calculate gross pay

Calculate federal income taxCalculate FICA taxCalculate state tax

Calculate net pay

Transfer net pay to employee accountTransfer taxes to tax liability accounts

Generate pay statement

Compute Net Pay

Deposit Funds

Prepare Pay Statement

Employees Remaining?

Benefits

• Easier programming.

• Easier, better testing – modules.

• Easier maintenance.

• Reusable modules.

Basic Functions

Function

• Module of code.

• Each function should:– Perform a well-defined task.– Be self contained.– Receive the minimum data to perform task.

• Return value is optional.

<html><head><script type="text/javascript">

function popupMessage(){

alert('Hello\nHow are you today?')}

</script></head><body><script type="text/javascript">

popupMessage()alert('Hello’)

</script></body></html>

Function Declaration

function popupMessage(){

alert('Hello\nHow are you today?')}

declaration name parameter list

start of function code

end of function code

Parameters

Function with Parameter

function popupMessage(message){

alert(message)}

parameter

use of parameter in function

popupMessage('Oh no!')show = 'JavaScript is fun!'popupMessage('show')popupMessage(show)

function call using a parameter

Oh no!JavaScript is fun!

Multiple Parameters

function popupMessage(line1, line2){

alert(line1 + '\n' + line2)}

popupMessage('Oh no!', 'Mr. Bill')show1 = 'JavaScript is fun!'show2 = 'HTML is easy'popupMessage(show1, show2)

parameters

function call with multiple parameters

Image Rollovers

Implementation Overview

• Precaching.

• Multiple images.

• OnMouseOver event.

• OnMouseOut event.

<body><img id="pic1" src="netpic1.gif" />

<script type="text/javascript">

alert(document.images[0].src)

alert(document.images.pic1.src)

alert(document.getElementById('pic1').src)

</script></body>

index

id

by id using method

images collection

images collection

Referencing Elements

getElementById

document.getElementById(id).target

target’s id

property or method based on target’s type (e.g., img)

Recommended for accessing HTML elements in JavaScript

Debugging

Techniques

• Browser options:– IE: Enable script error notifications.– Mozilla: Use JavaScript console.

• Debug messages:– Display “current position” alerts in code.– Display intermediate computations.

<script type="text/javascript">

var screenHeight = 0var screenWidth = 0var usableHeight = 0var usableWidth = 0var verticalWaste = 0var horizontalWaste = 0

screenHeight = screen.availHeightscreenWidth = screen.availWidthusableHeight = document.body.clientHeightusableWidth = documnet.body.clientWidthverticalWaste = screenHeight - usableHeighthorizontalWaste = screenWidth – usableWidth

alert('Vertical Waste: ' + verticalWaste + '\n' + 'Horizontal Waste: ' + horizontalWaste)

</script>

alert(‘ok so far’)alert(‘ok so far’)alert(‘ok so far’)alert(‘ok so far’)

alert(screenHeight)

Documents

Functions and Parameters. Structured Programming