15 – Structured Programming

Mark Dixon 1

15 – Structured Programming

Mark Dixon 2

Admin: Test 2• In class test

– 4 Feb 2013– 28 Jan 2013: revision (technique) session

• 50 mins

• short answer (1 - 15 lines)

• 25% of module mark

Mark Dixon 3

Questions: Functions• Consider the following code: Function Smallest(num1, num2) If num1 < num2 Then Smallest = num1 Else Smallest = num2 End If End Function

• name a function.• what is left in small after the following is

executed?Dim small small = Smallest(23, 15) 15

Smallest

Mark Dixon 4

Session Aims & Objectives• Aims

– To highlight the fundamental ideas of the structured programming paradigm

• Objectives,by end of this week’s sessions, you should be able to:

– create an abstract data type, which includes• data, and• routines

– use this to reduce code length

Mark Dixon 5

Example: Ball Bounce v1<html> <head><title>Ball Bounce</title></head> <body style="margin: 0;"> <img id="imgBall" src="Ball.gif" style="position: absolute;" /> </body></html>

<script language="vbscript">Option ExplicitDim xDim yDim xIncDim yInc

Sub window_onLoad() window.setinterval "Main()", 20 xInc = 5 yInc = 3 End Sub

Sub Main() x = imgBall.style.posLeft + xInc If x <= 0 Or x >= document.body.clientWidth - imgBall.width Then xInc = -xInc Else imgBall.style.posLeft = x End If y = imgBall.style.posTop + yInc If y <= 0 Or y >= document.body.clientHeight - imgBall.height Then yInc = -yInc Else imgBall.style.posTop = y End If End Sub</script>

Mark Dixon 6

Structured Paradigm• Program made up of

– data structures (variables & arrays), and – routines (procedures & functions)

that process the data within those structures.

• Each routine should perform a single, clearly identifiable operation.

• Each routine should be self-contained

• Abstract data type = structure + procedures

Mark Dixon 7

Self-Contained Routines• Self-contained:

– no references to external items (objects & variables)

Function a1(h, f) a1 = (h + f) * f End Function

Sub a2() imgBall.Style.posLeft = 0 End Sub

yes

no

Mark Dixon 8

Question: Self-contained• Which of the following routines are self-contained?

Dim s

Function goo(h, f) goo = (h + f) * s End Function

Function poo(j, k, vi) If j > 45 Then poo = k + vi Else poo = k - vi End If End Function

no

yes

Mark Dixon 9

Routines: Self-Contained• Good design principle:

– routines (functions and procedures)should be self-contained(easier to re-use in other programs)

Dim u As Long u = Twice(4)

Function Twice(a As Long) Return a * 2End Function

Dim u As LongDim a As Long a = 4 u = Twice()

Function Twice() Return a * 2End Function

Mark Dixon 10

Question: Self-Contained Routines

• Are the following routines self contained?Dim num1

Dim num2

Dim diff

Sub Compare()

diff = num1 - num2

End Sub

Function Half(num As Double) As Double

Return num / 2

End Function

Mark Dixon 11

Example: Ball Bounce v1<html> <head><title>Ball Bounce</title></head> <body style="margin: 0;"> <img id="imgBall" src="Ball.gif" style="position: absolute;" /> </body></html>

<script language="vbscript">Option ExplicitDim xDim yDim xIncDim yInc

Sub window_onLoad() window.setinterval "Main()", 20 xInc = 5 yInc = 3 End Sub

Sub Main() x = imgBall.style.posLeft + xInc If x <= 0 Or x >= document.body.clientWidth - imgBall.width Then xInc = -xInc Else imgBall.style.posLeft = x End If y = imgBall.style.posTop + yInc If y <= 0 Or y >= document.body.clientHeight - imgBall.height Then yInc = -yInc Else imgBall.style.posTop = y End If End Sub</script>

Mark Dixon 12

Example: Ball Bounce v2Option ExplicitDim xDim yDim xIncDim yInc

Sub Init(tmpXInc, tmpYInc) xInc = tmpXInc yInc = tmpYIncEnd Sub

Sub Move(img) x = img.style.posLeft + xInc If x <= 0 Or x >= document.body.clientWidth - img.width Then xInc = -xInc Else img.style.posLeft = x End If y = img.style.posTop + yInc If y <= 0 Or y >= document.body.clientHeight - img.height Then yInc = -yInc Else img.style.posTop = y End IfEnd Sub

<html> <head><title>Ball Bounce</title></head> <body style="margin: 0;"> <img id="imgBall" src="Ball.gif" style="position: absolute;" /> </body></html>

<script language="vbscript" src="Sprite.vbs"></script><script language="vbscript">Option Explicit

Sub window_onLoad() window.setinterval "Main()", 20 Init 5, 3 End Sub

Sub Main() Move imgBall End Sub</script>

BallBounce.htm

Sprite.vbs

Mark Dixon 13

Example: Balloon Shoot• Question:

– what objects?

– what variables?

– what procedures / functions?

Mark Dixon 14

Tutorial Exercise: Ball Bounce• Learning Objective: To create and use your own class.

• Task 1: Get the Ball Bounce examples (1, 2, and 5) from the lecture working.

• Task 2: Add another sprite.Hint: Use Arrays.

• Task 3: Add another 5 sprites.• Task 4: Add a hit method to the sprite class, which detects

the collision with another sprite.• Task 5: Modify your page to count the number of hits

between the two sprites.• Task 6: Modify your page to make sprites bounce off each

other.

Mark Dixon 15

Tutorial Exercise: Balloon Shoot• Learning Objective: To create and use your own classes.

• Task 1: Create the Balloon Shoot example (from the lecture) using object oriented concepts (classes, properties, methods, and instances)hint: use some of the code from your Interceptor example (from last week)

Documents

15 – Structured Programming