2 of 10

The “Notional Machine” (aka what the computer does)

A conceptual model, framework, or schema for computing

The computer does things one at time in sequence and it does them order
In app programming, we have events and event handlers
Computers hold states and programs modify the state.
Programs can choose to go down different paths depending on state: aka conditionals

4 of 10

2. Events and Event Handlers

Events are generated when something happens
Event handlers which receive events and then run their sequential code
Event handlers are set up when program launches and then persist in the background

Questions:

What happens if an event occurs and there is no handler for it?
What happens if there is an event handler but nothing to generate an event for it?

5 of 10

Activity: Sequence and Events

Sketch an App or wireframe a quiz app with (Draw the elements)

Three questions
Three answers for each question
Choosing any answer moves to another screen with three answers
Repeat for this for two more screens

Build the app

Stuck? Click here.

Still stuck? Click here.

There are two ways to place elements: Design and Code mode.

Design allows you to place buttons on the screen: usually used for setting up interfaces

Coding the button uses set position properties for the element: usually used for designing games

Be sure that you choose useful names for you elements. This will pay off later on.

ONCE you have NAMED an element, that name will be “taken” even if the element is deleted.

Cutting and pasting design elements is a useful technique for user interface design:

Keyboard copy and paste commands work

Design mode has a duplicate button.

If you want to duplicate a screen be sure you have NOT selected a button or other elements.

Otherwise select the element you wish to duplicate and press duplicate button

Copy-Paste Code:

To Copy and Paste your code, use Control-C and Control-V (Command- for Mac):

In Block View: start outside of a block, click, then drag until you see your block(s) highlight.
It's easier in Text View; highlight just like with regular text.
If your program is running, it's hard to highlight stuff, so hit Reset first.

6 of 10

Debugging

Easiest and also very general/powerful way to debug is to insert print statements at various points in the program

This lets you know that the computer’s execution has reached this point

Activity: insert output statements in your program to print a message when a button is pressed or a screen is changed (console.log)

7 of 10

3. State

Computers hold state and programs modify the state.

What is state?

It’s the configuration of things in the computer

Examples of state:

Position and size of an image (“properties”)
Name of the image filename in a UI Image
Object Value of the text in a text field
Which screen is showing (All these things are elements)
Variables

8 of 10

Variables

Especially designed for holding information
Can be numbers or text (or more complicated things - e.g. lists)

For our quiz app, we’ll use a variable to hold the number of correct answers

Activity: Extend your quiz app to keep track of number of correct answers.

Add a line of code to the button that has the right answer which adds one to the score variable (“increments”) before moving to the next screen.
Show debug statements print out state - e.g. the value of our variable

Stuck? Click here!

9 of 10

4. Conditionals

Programs can go down different paths depending on state: aka conditionals

Example: interpreting your score with conditionals

Activity:

Make your final screen shows your result with conditionals, displaying a message like:

Perfect score!

Very close!

Please study more!

Stuck? Click here!

10 of 10

A model or conceptual framework (the notional machine) that you can use to understand the computer

Sequence

Events (and event handlers)

State

Conditionals (making decisions based on state)

A useful tool: print statements; console.log

Once you feel comfortable, you can share this concept with your students. When debugging, keep this framework in mind.

1 of 10