12 – Object Oriented Programming
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) Smallest 15
Session Aims & Objectives To introduce the fundamental ideas of object orientation Objectives, by end of this week’s sessions, you should be able to: create a class definition, which includes properties, and methods create an object instance, for the class use the object instance, by assigning values to its properties, and calling its methods
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 Explicit Dim x Dim y Dim xInc Dim yInc Sub window_onLoad() window.setinterval "Main", 20 xInc = 5 yInc = 3 End Sub Sub Main() x = imgBall.style.pixelLeft + xInc If x <= 0 Or x >= document.body.clientWidth - imgBall.width Then xInc = -xInc Else imgBall.style.pixelLeft = x End If y = imgBall.style.pixelTop + yInc If y <= 0 Or y >= document.body.clientHeight - imgBall.height Then yInc = -yInc imgBall.style.pixelTop = y </script>
Structured Paradigm Program made up of data structures, and routines (procedures and 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
Example: Ball Bounce v2 Sprite.vbs BallBounce.htm Option Explicit Dim x Dim y Dim xInc Dim yInc Sub Init(tmpXInc, tmpYInc) xInc = tmpXInc yInc = tmpYInc End Sub Sub Move(img) x = img.style.pixelLeft + xInc If x <= 0 Or x >= document.body.clientWidth - img.width Then xInc = -xInc Else img.style.pixelLeft = x End If y = img.style.pixelTop + yInc If y <= 0 Or y >= document.body.clientHeight - img.height Then yInc = -yInc img.style.pixelTop = y BallBounce.htm <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 </script>
Object-Oriented Paradigm program made up of number of objects that communicate with each other by passing messages Each object contains attributes/properties that represent its state, and operations/methods that represent its behaviour Objects often mirror the real world Customers Students Patients
Classes and Instances Object Classes Object Instances general descriptions of types of objects, e.g. student, product, customer, lecturer, and room. Object Instances specific items of a given class, e.g. each of you could be an instance of the student class Room 214 could be an instance of the room class I could be an instance of the lecturer class Bolt could be an instance of the part class
Object Concepts - Implementation Properties – implemented as data structures (variables, and arrays) Methods – implemented as either a procedure (to perform some processing), or a function (to return a value) Object oriented paradigm builds on (rather than replaces) the structured paradigm
Example: Animals Class: Animal Properties: Name, Species, Gender Instances: myPet, yourPet
Question: Objects Consider the following code: Class FetalBloodSample Dim Time Dim Acidity Dim Reactivity End Class Dim fbs1 Set fbs1 = New FetalBloodSample Name all: classes properties instances FetalBloodSample Time, Acidity, Reactivity fbs1
Example: Ball Bounce v3 Sprite.vbs BallBounce.htm Class Definition Option Explicit Class Sprite Dim x Dim y Dim xInc Dim yInc End Class Sub Init(spr, tmpXInc, tmpYInc) spr.xInc = tmpXInc spr.yInc = tmpYInc End Sub Sub Move(spr, img) spr.x = img.style.pixelLeft + spr.xInc If spr.x <= 0 Or spr.x >= document.body.clientWidth - img.width Then spr.xInc = -spr.xInc Else img.style.pixelLeft = spr.x End If spr.y = img.style.pixelTop + spr.yInc If spr.y <= 0 Or spr.y >= document.body.clientHeight - img.height Then spr.yInc = -spr.yInc img.style.pixelTop = spr.y Class Definition BallBounce.htm <html> … </html> <script language="vbscript" src="Sprite.vbs"></script> <script language="vbscript"> Option Explicit Dim ball Sub window_onLoad() window.setinterval "Main", 20 Set ball = New Sprite Init ball, 5, 3 End Sub Sub Main() Move ball, imgBall </script>
Example: Students Method: Clear
Example: Ball Bounce v4 Sprite.vbs BallBounce.htm Option Explicit Class Sprite Dim x Dim y Dim xInc Dim yInc Sub Init(tmpXInc, tmpYInc) xInc = tmpXInc yInc = tmpYInc End Sub Sub Move(img) x = img.style.pixelLeft + xInc If x <= 0 Or x >= document.body.clientWidth - img.width Then xInc = -xInc Else img.style.pixelLeft = x End If y = img.style.pixelTop + yInc If y <= 0 Or y >= document.body.clientHeight - img.height Then yInc = -yInc img.style.pixelTop = y End Class BallBounce.htm <html> … </html> <script language="vbscript" src="Sprite.vbs"></script> <script language="vbscript"> Option Explicit Dim ball Sub window_onLoad() window.setinterval "Main", 20 Set ball = New Sprite ball.Init 5, 3 End Sub Sub Main() ball.Move imgBall </script> procedures now methods inside the class
Example: Ball Bounce v5 Multiple instances:
Example: Ball Bounce v5 Now have easy way of: <html> <head><title>Ball Bounce</title></head> <body style="margin: 0;"> <img id="imgBall" src="Ball.gif" style="position: absolute;" /> <img id="imgFace" src="BallChar2.GIF" style="position: absolute;" /> </body> </html> <script language="vbscript" src="Sprite.vbs"></script> <script language="vbscript"> Option Explicit Dim ball Dim face Sub window_onLoad() window.setinterval "Main", 20 Set ball = New Sprite ball.Init 5, 3 Set face = New Sprite face.Init 1, 12 End Sub Sub Main() ball.Move imgBall face.Move imgFace </script> Now have easy way of: creating & using multiple sprites each with own identity (separate characteristics) only a few (4) lines of code
Questions: OOP Name a House number, road, district ChangeDist h class Class House Dim number Dim road Dim district Sub ChangeDist(newDist) district = newDist End Sub End Class Dim h Set h = New House Name a class property method instance House number, road, district ChangeDist h
OOP: Errors Object doesn't support this property or method: Class Animal Dim name Dim species End Class Dim a Set a = New Animal a.name = "Skippy" a.specys = "Kangaroo"
Private make properties and methods invisible outside class: Class Counter Private value Sub Reset() value = 0 End Sub Sub Increase() value = value + 1 Function GetValue() GetValue = value End Function End Class Dim c Set c = New Counter c.Reset c.Increase parRes.innerText = c.GetValue() c.value = -6
Benefits of OOP in code Procedures and Functions are part of object encapsulation Related Data and Operations together Private keyword – restrict access to data Clearer code Reduces chance of accidental interference Less prone to error
Example: Balloon Shoot Question: what objects? what properties? what classes? what methods
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 a hit method to the sprite class, which detects the collision with another sprite. Task 3: Modify your page to count the number of hits between the two sprites. Task 4: Modify your page to make sprites bounce off each other. Task 5: Add another sprite.
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)