Introduction to Object Oriented Programming Scratch the Cat

Introduction to Object. Oriented Programming Scratch the Cat

Object Oriented Programming �Writing computer programs �Based on Objects Instead of Actions �Based on Data Instead of Logic

Traditional Programming �Input Data �Process the Data using Logic �Output the Data �Example: Add 2 Numbers �Input Data � Get Number 1 � Get Number 2 �Process the Data � Add Number 1 + Number 2 �Output the Data � The Answer is: _______

Object Oriented Programming �Focus is on the Object we want to Manipulate/Change �Person �Animal – (Scratch the Cat) �Building �Buttons / Icons �Identify What Objects You Need �How do the Objects Relate to Each Other

Objects �All Objects have 3 Parts �Properties � What the Object looks like �Methods � Things the Objects can do �Events � What activities (by the user or by the computer) that the object responds to

Our Programming Example �Dog vs. Cat �The cat and dog will walk up to one another and say hi (bark and meow) �Object Oriented Programming �What objects will we need? (Objects and Properties) �What do the objects need to do? (Methods) �When do they need to do these things? (Events)

Let’s Get Programming �Start Scratch the Cat �Double Click on the Scratch Icon

Scratch Interface Properties Methods and Events Display Code Objects

Objects �What Objects do You Need? �Cat �Dog �Cat – Already Exists (Scratch) �Set Properties for Scratch

Properties – Edit Cat Properties 2) Click Costumes 3) Edit Costume 1 1) Click on Scratch

S m a l l e r Bigger Tools Colors R o t a t e F l i p

Edit Cat Properties �Change the Animal �Erase the Current Cat 1) Click Eraser 2) Use Mouse to Erase Scratch

Edit Cat Properties 1) Import 2) Click Animal Folder 3) OK

Pick New Animal Scroll 1) Pick a Cat 2) OK

Edit Properties �Change the Size �Make Smaller �? ? ?

Add Sound Properties Sounds

Add Sound 1) Import �Scratch already has One Sound �MEOW �Add Another Sound �Import �Animal Cat OK 2) Animal 3) Cat

Add A nd 2 Object - DOG �Add New Sprite (Object) Add New Sprite

Add a nd 2 Object - Dog Look Familiar – What Should We Do? ?

Edit the Object Properties �Resize – Make Smaller �Rotate if Needed So Dog will Face the Cat

Add Sound �New Objects will not have any existing sounds �Add a Sound �Import �Animal Dog 1 OK 1) Import 2) Animal 3) Dog 1

Add Events �Events are the Actions Each Object will Respond to �Can be Computer Generated or User Generated �Cannot Respond to EVERY action � 1 st Event in this Program �Starting the Program � When the User Clicks the Green Flag

Events 2) Make sure Scripts is Clicked �Responses to Actions �Can be Computer Generated or User Generated �We need to tell the Objects (Cat and Dog) what Actions to Respond to � They cannot respond to everything � 1 st Event – Starting the Program �When the Green Flag is Clicked Move Objects around using Mouse to look like this. 1) Make sure CAT is Clicked

Event – When Flag Clicked �Flag Event is in the Control Section �Using Mouse – Drag to the Script area 1) Control 2) Drag Flag to Scripts Area

Methods – When Flag Clicked �What do we want the Cat to do when the Flag is Clicked �Say Meow �Make a Meowing Sound �These are Methods � Add Method to Code Window (Attach to Event)

Method – Say Meow �Find Method �LOOKS section �Drag “Say HELLO for 2 Secs” to Scripts area �We don’t want Cat to Say “Hello” �Boxes in Methods are things we can change 1) LOOKS 2) Drag “Say “Hello” to Code

Method – Say Meow �Click on “Hello” box �Type “MEOW” �Click on “ 2” box �Type “ 1” �Test – Click the Green Flag (Code a Little – Test a LOT)

Add Next Method – Play Sound �Add Sound �SOUND Section �Drag “Play Sound Cat” to Scripts Area �Change “Cat” to “Meow” �Test 1) Sound 2) Drag to Event

Variables �A variable is a placeholder for a number that we don’t know what it is yet, or a number that can change �It has a name �We assign it a value when we are ready �We can change the value when we need to �Let’s include a variable to count how many times the cat meows

Make a Variable - Counter �Click the “VARIABLE” section �Click on the “Make a Variable” option �Give the Variable a Name: COUNTER �Make sure “For all Sprites” is clicked �OK 1) Variables 2) Make a Variable 3) Give a Name

Variable Shows Up Variable Choices

Give Variable a Value �We need to set a Value for our Counter Variable �When all variables are created in Scratch they are given a value of Zero �We need to set it to zero so that it resets every time we start over and hit the green flag

Give Variable a Value �Drag “Set Counter to 0” method over to the Scripts Area �Put just under Drag to Code List

Update Value �We want to change the value of the counter every time the cat meows �What options do we have to do that? ?

Update Value �Drag “Change Counter by 1” method over to the Scripts Area �Underneath other instructions

Repeating Actions �How many times to we want the cat to meow? � 5 times? � 10 times? �As long as we run the program? � We do not want to have to add more instructions for each time �Programmers use something called a LOOP to repeat �Let’s have our cat meow 15 times

Adding a Loop �Click on “CONTROL” section �Find the Loop instructions �Drag the instructions to Scripts Area �Need to put above the cat meowing to repeat this action 2) Put Here 1) Repeat

Adding a Loop �Change the “ 10” value to “ 15” to loop 15 times �Test It �Watch Counter Change to 15 �We could use the “Forever” loop to loop as long as the program is running

Events - Let the Dog Respond �The dog has to know that the cat has meowed �Cat has to cause a computer generated event �Dog can respond by barking �Broadcast an Event �And wait for a response

Create an Event �Drag “Broadcast” to the Scripts Area �Click on the Down Arrow �“NEW” �Name the Event “Cat. Meow” 1) Drag Broadcast and Wait 2) Arrow - NEW

Have Dog Respond �Click on the Dog Sprite �No Scripts yet for the Dog Object

Have Dog Respond �Dog must “listen” for the Cat. Meow event �Drag “When I receive Cat. Meow” to the Scripts Area �When the Cat Meow and the event “fires” the Dog will hear it �What should the dog do? ? ? �Bark

Dog Bark �“LOOKS” Section �Drag “Say Hello for 2 Secs” to Scripts Area �Change “Hello” to “Woof” �Change 2 secs to 1 sec �Test It 1) Drag to Scripts Area 2) Change to Woof and 1 Sec

Dog Bark �“SOUND” Section �Drag “Play Sound” to Scripts Area �Click on Down Arrow �Select “Dog 1” sound �Test It 1) Play Sound 2) Dog 1 Sound

Dog Chases Cat �Dog moves toward the Cat �Move 20 steps �Cat moves away from the Cat �Move 10 steps �Add Code for Each Object to Move

Dog Chases Cat �Make sure the Dog Object is Selected �“MOTION” Section �“Move 10 Steps” �Change to 20 Steps 1) Dog 2) Move 10 Steps 3) Change to 20

Cat Runs from Dog �Click Cat Object �Motion �“Move 10 Steps” �Put Under “Broadcast” �Test It 1) Pick Cat 2) Move 10 Steps 3) Put into Scripts

Clear Method �Return the Objects to their Starting Place to Run Again �Clear Method �Responds to an Event �Move Dog to Location (-125, -30) �Move Cat to Starting Location (135, -15) �Uses Pixel numbers – (0, 0) is the middle of the screen

Clear Method 2) CONTROL 1) Cat 3) When I Receive Event

Create the Event �Drag to the Scripts Area �NOT part of other instructions �Click on the “Cat. Meow” Box �Click “NEW” to create a new Event �Name Event “CLEAR”

Move the Cat �Locations use an X and Y values for Height and Width �“MOTION” Section �Set X to 0 �Set Y to 0 1) Set X to 0 2) Set Y to 0 �Change X to 135 �Change Y to -15 3) Change Values

Broadcast the Clear Event �Make the Clear Event Happen �Beginning of Program 1) CONTROL 2) Broadcast “Cat. Meow”

Broadcast the Clear Event �CONTROL Section � �Drag to Top – Right below �Click on “Cat. Meow” �Change to “Clear” Event 1) Below Flag Click

Move the Dog �Uses the Same Event �Still Need to “listen” for it (Already being Broadcast) 2) CONTROL 3) When I Receive “Cat. Meow” 1) Click Dog Object

Move the Dog �CONTOL Section �Drag to the Scripts Area �Not part of other instructions �Click on the “Cat. Meow” Box �Click “Clear” event

Move the Dog �“MOTION” Section �Set X to 0 �Set Y to 0 �Change X to -125 �Change Y to -30 1) Set X to 0 2) Set Y to 0 3) Change Values