Variables, operators, canvas, and multimedia

Dr. José M. Reyes Álamo

2

Outline

• Variables

• Operators

• Canvas

• Boolean Expressions

• If, if/else Statements

Variables

4

Properties and variables

• In general the memory is a set of cells or slots, like spread sheet, where we store data.

• Properties and variables are named memory slots– What is the difference?

• We use variables and properties to store information used within our app.

5

An example

• Variable definition

• Name the variable

• Assign initial value

• Using the variable within an event handler

• Set a value

• Get the value

cost=0profit=0price=0

On Button1.Clickcost=7profit=5price=cost + profitLabel1.text = price

6

Variables on AppInventor

• Numeric Variables:– http://www.cs.trincoll.edu/~ram/q/110/numeric_variables.html

• Numeric Variables:– http://www.cs.trincoll.edu/~ram/q/110/text_variables.html

Operators

8

9

Reference

• Arithmetic operators and other math blocks– http://experimental.appinventor.mit.edu/learn/reference/blocks/math.html

• Logic operators– http://experimental.appinventor.mit.edu/learn/reference/blocks/logic.html

Canvas

11

Canvas is a pixels grid

• Reference: http://experimental.appinventor.mit.edu/learn/reference/components/basic.html#Canvas

0 1 2 3 4

0

1

2

3

4

12

Comment your source code or blocks so you can easily remember and others can understand them.

Comments

13

Learn to trace blocks manually so that you understand how they work.

Comments

Boolean Expressions

15

An App is a Set of Event-Handlers

• Mobile and web apps have graphical user interfaces (GUIs) with which the user interacts. Such apps are better described as a set of event-handlers, with multiple recipes that are only performed in response to some event.

16

AND operator

• AND operators (&) = All statements must be TRUE for the operation to be TRUE.

STATEMENT 1 STATEMENT 2AND

TRUE

AND

AND FALSE

TRUE TRUE

FALSEFALSE

TRUETRUE

17

OR operator• OR operators (|) = At least one statement must be TRUE for the

operation to be TRUE.

STATEMENT 1 STATEMENT 2OR

TRUE

OR

OR FALSE

FALSE FALSE

TRUETRUE

FALSEFALSE

18

NOT operator• NOT operator (!, ~) = Inverts the Boolean value of a variable or

expression.

STATEMENT 1NOT

Logic Control

if – if-else statement

20

An App Consists of Event-Handlers That Can Ask Questions and Branch

• Many responses to events are not sequential, but contain branches and loops.

• The app is allowed to ask questions and determine its course based on the answers. We say that such apps have conditional branches:

Conditions are questions such as “has the score reached 100?” or “did the text I just receive is from Joe?”

Depending on the condition evaluation (true or false) either B1 or B2 are going to be executed, but not both.

21

If and ifelse statement

Test statement

If test statement is TRUE, then do the following…

If test statement is TRUE, then do the following..

If test statement is FALSE, then do the following…

If test statement is FALSE, skip the if statement

22

Conditions are Boolean

Conditions are Boolean, meaning they return true or false. They test the value of properties and variables using the following logical operators:                              

                                               These operators can be found in the Math and Logic drawers.

23

Algorithm – Pseudo CodeAlgorithm – Pseudo Code

// Use if statement to check the default size.defaultSize = 5;smallSize = 3;bigSize = 8;If defaultSize<8 && defaultSize>3

Display in LabelResult = The dot size is set to default;end

24

Some examples

25

OpenLab and Blackboard

• Check OpenLab for any new lab.

• Check Blackboard for any new quiz.

• Project:

– Brainstorm an idea

– Get professor's approval

– Post your idea in your portfolio

– Must work in teams of 2 or 3

– It must be an app and the topic is open: a game, a tool, an enhanced version of a previous app