mark dixon 1 15 structured programming. mark dixon 2 admin: test 2 in class test 11 feb 2014 4 feb...
DESCRIPTION
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 SmallestTRANSCRIPT
Mark Dixon 1
15 – Structured Programming
Mark Dixon 2
Admin: Test 2• In class test
– 11 Feb 2014– 4 Feb 2014: revision (technique) session
• 50 mins
• short answer (1 - 15 lines)
• 10% 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) 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 num1Dim num2Dim diff
Sub Compare() diff = num1 - num2End Sub
Function Half(num) Half = num / 2End 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
Making a routine self-contained• identify why it isn't self-contained:
• the call:
Dim m
Sub MoveMiddle() m = document.body.clientWidth / 2 picDog.style.posLeft = mEnd Sub
MoveMiddle()
Mark Dixon 14
Making a routine self-contained• if variables are only used by this routine,
then make them local:
• the call:
Sub MoveMiddle()Dim m m = document.body.clientWidth / 2 picDog.style.posLeft = mEnd Sub
MoveMiddle()
Mark Dixon 15
Making a routine self-contained• if variables / identifiers are used elsewhere,
then use a parameter:
• the call now needs an actual parameter:
Sub MoveMiddle(picAny)Dim m m = document.body.clientWidth / 2 picAny.style.posLeft = mEnd Sub
MoveMiddle(picDog)
Mark Dixon 16
Making a routine self-contained• some items are difficult to fix (e.g.
document – built in object):
• the call:
Sub MoveMiddle(picAny)Dim m m = document.body.clientWidth / 2 picAny.style.posLeft = mEnd Sub
MoveMiddle(picDog)
Either: - use parameter - leave it
Mark Dixon 17
Example: Balloon Shoot• Question:
– what objects?
– what variables?
– what procedures / functions?
Mark Dixon 18
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 19
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)