Lesson 1: Buttons and Events – 12/18 Unit 5 - Building Apps

CODING TIME AGAIN – HOORAY!

VOCABULARY ALERT: User Interface (UI) - The "User Interface" or UI of an app refers to how a person (user) interacts with the computer or app. UI Elements or objects, like buttons, images, text boxes, pull down menus, screens and so on. UI Events or controls, like click, scroll, move mouse, type keyboard key, etc. 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 your app respond to events by triggering functions. Event listener - a command in App Lab) 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.

More Vocabulary: Syntax Errors are the kinds of problems that show errors in the console. In the grand scheme of things syntax errors are easy problems to solve because the computer is telling you it can't understand something, you just have to find out what it is. Logic Errors can be much harder to solve because the computer doesn't report anything wrong at all. The program just doesn't do what you think it should or want it to. Tracking down these kinds of errors is much harder, and requires some practice to get used to it. We suggest some techniques in the levels that follow. Users trigger events - Events occur when users click a button, tap the screen, move the mouse, type a key on the keyboard, etc. Events trigger code - When an event occurs or "fires" it can be used to trigger a particular JavaScript function.

You will be using a new feature of App Lab: Design Mode You will be using a new feature of App Lab: Design Mode. Design Mode allows you to easily design the User Interface (UI) of your apps using a drag-and-drop editor. You will also learn how to add event handlers - code that listens for and responds to user-events. 

You will also recognize debugging and responding to error messages as an important step in developing a program. Debug simple issues related to event-driven programming

What events do familiar apps use to be interactive? DO THIS: 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.

Likely events will include things like: clicking a button swiping a screen dragging your finger tilting a phone pressing a key, etc.

Modern apps are interactive because they can respond to this and other forms of user input (i.e., human-generated events).

Apps have elements on the screen that you can interact with (i. e Apps have elements on the screen that you can interact with (i.e. cause user-generated events) Apps respond to these events in various ways. You want to be on the lookout for types of events we can program with like: mouse click or movement, typing keys on the keyboard, etc. in combination with types of screen elements you can perform those actions on like: buttons, menus, text fields, images, etc.

Go into Code Studio no handouts today – everything is in the Code Studio

TO DO: Read Student Overview Watch the video: Intro to Design Mode in App Lab Work your way through all the levels Say good-bye to the turtle, because we are moving on! Show me the Chaser Game for credit Be clean and green and complete the whole lesson NO HOMEWORK TODAY!!!