Functions and Parameters

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.

Retrieve employee information Retrieve payroll data for employee Calculate gross pay Compute Net Pay Calculate federal income tax Calculate FICA tax Calculate state tax Deposit Funds Calculate net pay Prepare Pay Statement Transfer net pay to employee account Transfer taxes to tax liability accounts Employees Remaining? Generate pay statement Structure Get Employee Data

Retrieve employee information Retrieve payroll data for employee Calculate gross pay Compute Net Pay Calculate federal income tax Calculate FICA tax Calculate state tax Deposit Funds Calculate net pay Prepare Pay Statement Transfer net pay to employee account Transfer taxes to tax liability accounts Employees Remaining? Generate pay statement Modules Get Employee Data

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 declaration name parameter list function popupMessage() { alert('Hello\nHow are you today?') } start of function code end of function code

Parameters

Oh no! JavaScript is fun! Function with Parameter parameter function popupMessage(message) { alert(message) } use of parameter in function function call using a parameter popupMessage('Oh no!') show = 'JavaScript is fun!' popupMessage('show') popupMessage(show)

Multiple Parameters parameters function popupMessage(line1, line2) { alert(line1 + '\n' + line2) } function call with multiple parameters popupMessage('Oh no!', 'Mr. Bill') show1 = 'JavaScript is fun!' show2 = 'HTML is easy' popupMessage(show1, show2)

Image Rollovers

Implementation Overview • Precaching. • Multiple images. • OnMouseOver event. • OnMouseOut event.

index id by id using method images collection images collection Referencing Elements <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>

target’s id property or method based on target’s type (e.g., img) getElementById document.getElementById(id).target 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.

alert(‘ok so far’) alert(‘ok so far’) alert(‘ok so far’) alert(‘ok so far’) alert(screenHeight) <script type="text/javascript"> var screenHeight = 0 var screenWidth = 0 var usableHeight = 0 var usableWidth = 0 var verticalWaste = 0 var horizontalWaste = 0 screenHeight = screen.availHeight screenWidth = screen.availWidth usableHeight = document.body.clientHeight usableWidth = documnet.body.clientWidth verticalWaste = screenHeight - usableHeight horizontalWaste = screenWidth – usableWidth alert('Vertical Waste: ' + verticalWaste + '\n' + 'Horizontal Waste: ' + horizontalWaste) </script>

Functions and Parameters