1. Variables, operators, canvas, and multimedia Dr. José M. Reyes Álamo

2. 2 Outline Variables Operators Canvas Boolean Expressions If, if/else Statements

3. Variables

4. 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. 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=0 profit=0 price=0 On Button1.Click cost=7 profit=5 price=cost + profit Label1.text = price

6. 6 Variables on AppInventor Numeric Variables: –http://www.cs.trincoll.edu/~ram/q/110/numeric_variables.htmlhttp://www.cs.trincoll.edu/~ram/q/110/numeric_variables.html Numeric Variables: –http://www.cs.trincoll.edu/~ram/q/110/text_variables.htmlhttp://www.cs.trincoll.edu/~ram/q/110/text_variables.html

7. Operators

8. 8

9. 9 Reference Arithmetic operators and other math blocks –http://experimental.appinventor.mit.edu/learn/reference/blocks/math.htmlhttp://experimental.appinventor.mit.edu/learn/reference/blocks/math.html Logic operators –http://experimental.appinventor.mit.edu/learn/reference/blocks/logic.htmlhttp://experimental.appinventor.mit.edu/learn/reference/blocks/logic.html

10. Canvas

11. 11 Canvas is a pixels grid Reference: http://experimental.appinventor.mit.edu/learn/reference/components/ basic.html#Canvas http://experimental.appinventor.mit.edu/learn/reference/components/ basic.html#Canvas 0 1 2 3 4 0123401234

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

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

14. Boolean Expressions

15. 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. 16 AND operator AND operators (&) = All statements must be TRUE for the operation to be TRUE. STATEMENT 1STATEMENT 2AND Example: Check if the following operation is TRUE or FALSE X>10 & Y 10 & Y<=-4 If X = 11 and Y = 1 11>10 & 1 10 & 1<=- 4 If X=20 and Y -10 20>10 & -10 10 & -10<=-4 TRUE AND FALSE TRUE FALSE TRUE

17. 17 OR operator OR operators (|) = At least one statement must be TRUE for the operation to be TRUE. STATEMENT 1STATEMENT 2OR Example: Check if the following operation is TRUE or FALSE X>10 || Y 10 || Y<=-4 If X = 11 and Y = 1 11>10 || 1 10 || 1<=- 4 If X=2 and Y =2 2 >10 || 2 10 || 2<=- 4 TRUE OR FALSE TRUE FALSE

18. 18 NOT operator NOT operator (!, ~) = Inverts the Boolean value of a variable or expression. STATEMENT 1NOT

19. Logic Control if – if-else statement

20. 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. 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. 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. 23 Algorithm – Pseudo Code // Use if statement to check the default size. defaultSize = 5; smallSize = 3; bigSize = 8; If defaultSize 3 Display in LabelResult = The dot size is set to default; end

24. 24 Some examples

25. 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