U5Ch1L1_Introduction To Event Driven Programming
Purpose: Students will explore Event Driven Programming.
Vocabulary:
- Event - An action that causes something to happen.
- Event-driven program - a program designed to run blocks of code or functions in response to specified events (e.g. a mouse click)
- Event handling - an overarching term for the coding tasks involved in making a program respond to events by triggering functions.
- Event listener - a command that can be set up to trigger a function when a particular type of event occurs on a particular UI element.
- Callback function - a function specified as part of an event listener; it is written by the programmer but called by the system as the result of an event trigger.
- User Interface (UI)- The visual elements of an program through which a user controls or communications the application.
- UI Elements - on-screen objects, like buttons, images, text boxes, pull down menus, screens and so on.
Activity – Draw Screen of Mobile Device
- Take out a piece of paper or journal
- Draw a rectangle representing the screen of a mobile device
- Take one minute to sketch out what a screen in your favorite app looks like
- Now make a quick list of everything on that screen that you can interact with as a user.
- Finally, write down one action-and-reaction of the app: one thing you do, and how the app responds.
State: Whether we’re clicking a button or pressing a key, the computer is sensing events that we generate in order to determine how the application should run. Today, we’re going to start exploring how event-driven programming makes this possible.
Video: Introduction to Design View: Click Here!
Code Studio – Working with Events. Gradesheet
- Puzzle #4: Create “Click Me” red button.
- Puzzle #6: Make Turtle move forward when button is clicked. (Then explore other Events.)
- Puzzle #7: Create “Turn Left” green button. Make the Turtle move/create 3 steps.
- Puzzle #10: Write descriptive and meaningful IDs for your buttons. Also change the Event Handler Code.
- Create a “TraceRightStaircase,” and write correct IDs.
- Puzzle #13 & #14: Run the program. Read the Error Message. Repair.
- Puzzle #15: Make a Prediction – Observe – Reflect.
- Puzzle #16: Debugging Logical Errors
- Error: The IDs don’t match titles.
- Puzzle #18: Set Position & Screen Dimensions.
(Move button to middle of screen when clicked.)
- 0,0 is the top left corner.
- Specify a location by how many pixels from the left and down from the top of the screen it is.
- The screen is 320 by 450 pixels.
You can hover over the screen to see the x,y coordinate of any point.
- Puzzle #19: Set Position & Random Number (slide Random number blocks for ‘x’ and ‘y’).
- Puzzle #20: Create A Game: “Try To Catch The Button.”
- Add Image – Catch the Image (no longer catch the button).