1 of 33

To do: October 28

  • You will turn in an image of today’s notes on the Hub for homework - take out your IN
  • Log into Code.org Unit 4 Lesson 1

2 of 33

Recall patterns in making event-driven apps

  • Add UI elements to the screen (Design mode)
  • Give the UI elements meaningful IDs (Design mode)
  • Add event handlers to those elements (Code)

3 of 33

Moving forward

  • The next step is to learn how to control the computer’s memory to remember things while the program is running.
  • Most apps keep track of some information that changes and updates as you use the app.

On the whiteboard: what kind of situations will an app need to keep track of information?

4 of 33

Today’s tasks

  • The programming tasks in this lesson help you understand the basics of working with variables and building up a mental model for how programs use and manage memory.

5 of 33

Variables Explore

6 of 33

Warm Up

Do This:

  • Go to Unit 4 Lesson 1, Bubble 1 on Code.org

7 of 33

Warm Up

Samples of apps using variables

8 of 33

Warm Up

Prompt:

These are samples of the kinds of apps you'll be able to build by the end of this unit.

Write down in today's notes in your IN at 1-2 examples where each app is keeping track of a piece of information or using it to make a decision.

  1. Bubble 1: My Pet Rock app
  2. Bubble 2: Poetry app
  3. Bubble 3: Thermostat app

9 of 33

10 of 33

“hi”

“hi there”

“c u l8r”

Strings

Sequence of any characters

Inside double quotes

22

9

548

Numbers

Made of the digits 0...9

No quotes

Do This:

4. Write an example of a number.

5. Write an example of a string.

Value

One piece of information or data

“123”

123

Unit 4 Lesson 1 - Activity

11 of 33

2

3

Operators

Fancy name for + - * /

Expression

Combination of operators and values

Evaluates to single value

+

5

evaluates to

Activity

12 of 33

"Card"

"inals"

Operator + with string(s) means to concatenate

Expression

Combination of string, operator +, and string/number evaluates to single string

+

evaluates to

Activity

"Cardinals"

13 of 33

"Card"

"inals"

Operator + with string(s) means to concatenate

Expression

Combination of string, operator +, and string/number evaluates to single string

+

"Cardinals"

evaluates to

string + number -> string

"Bell"

1

+

Activity

->

12

"dog"

+

->

number + string -> string

6.

7.

14 of 33

"Card"

"inals"

Operator + with string(s) means to concatenate

Expression

Combination of string, operator +, and string/number evaluates to single string

+

"Cardinals"

evaluates to

string + number -> string

"Bell"

1

+

Activity

"Bell1"

->

12

"dog"

+

"12dog"

->

number + string -> string

6.

7.

15 of 33

3

4

evaluates to

+

7

5

2

evaluates to

-

3

“for”

“ever”

evaluates to

+

“forever”

“gr”

8

evaluates to

+

“gr8”

2

“day”

evaluates to

+

“2day”

11

2

evaluates to

*

22

10

2

evaluates to

/

5

If you’re using one or two strings, you can only use the + operator.

The other operators don’t make sense with strings.

Activity

16 of 33

3

4

evaluates to

+

7

5

2

evaluates to

-

3

“for”

“ever”

evaluates to

+

“forever”

“gr”

8

evaluates to

+

“gr8”

2

“day”

evaluates to

+

“2day”

Do This: Evaluate these expressions. Remember that strings use quotes.

4

5

+

10

9

-

“tree”

“house”

+

“you”

“r”

+

3

“D”

+

11

2

evaluates to

*

22

10

2

evaluates to

/

5

Activity

“1”

“2”

+

8.

9.

10.

11.

12

13.

17 of 33

3

4

evaluates to

+

7

5

2

evaluates to

-

3

“for”

“ever”

evaluates to

+

“forever”

“gr”

8

evaluates to

+

“gr8”

2

“day”

evaluates to

+

“2day”

Do This: Evaluate these expressions. Pay attention to what color stickies you create and if you use quotes.

4

5

+

10

9

-

“tree”

“house”

+

“you”

“r”

+

3

“D”

+

11

2

evaluates to

*

22

10

2

evaluates to

/

5

If you’re using one or two strings, you can only use the + operator. The others don’t make sense!

Activity

9

1

"treehouse"

“your”

“3D”

“1”

“2”

“12”

+

8.

9.

10.

11.

12

13.

->

->

->

->

->

->

18 of 33

word

2

num

“tree”

Variables

  • Can hold at most one value
  • Name uses no quotes, includes no spaces, and must start with a letter

Unit 4 Lesson 1 - Activity

19 of 33

word

2

num

“tree”

Variables

  • Can hold at most one value
  • Name uses no quotes, includes no spaces, and must start with a letter

The left arrow is the “Assignment operator”

“Assign” means to put a value inside the variable.

Do This:

14. Draw a model of both of these variables below.

Unit 4 Lesson 1 - Activity

20 of 33

word

2

num

“tree”

Variables

  • Can hold at most one value
  • Name uses no quotes, includes no spaces, and must start with a letter

The left arrow is the “Assignment operator”

“Assign” means to put a value inside the variable.

num <- 2

word <- "tree"

Unit 4 Lesson 1 - Activity

21 of 33

word

2

num

“tree”

  • Variables can only hold one value. If there’s already a value in there, it gets replaced by a new value if it is reassigned.

15. What’s the result?

num <- 2

num <- num + 3

word <- "tree"

word <- word + "house"

Unit 4 Lesson 1 - Activity

22 of 33

word

5

num

“treehouse”

  • Variables can only hold one value. If there’s already a value in there, it gets replaced by a new value if it is reassigned.

num <- num + 3

num + 3 evaluates to 2 + 3 so

num <- 5

word <- word + "house"

word + "house" evaluates to "tree" + "house" so

word <- "treehouse"

Unit 4 Lesson 1 - Activity

23 of 33

Let’s start writing programs �that control our variables.

Unit 4 Lesson 1 - Activity

24 of 33

num

var

Creates a new variable

00 var num

Command to create variable

Variable’s name

Line number

Unit 4 Lesson 1 - Activity

25 of 33

“Assignment operator”

“Assign”: put a value inside the variable.

Variables can only hold one value. If there’s already a value in there, it gets "thrown away."

“num gets 3” and “num gets 5”

00 var num�

01 num ← 3

02 num ← 5

num

num

num

3

5

3

Do This: Run this program

Unit 4 Lesson 1 - Activity

26 of 33

In pseudocode (used on the AP Exam), the assignment operator is written as:

In JavaScript, the assignment operator �is written as

=

Unit 4 Lesson 1 - Activity

27 of 33

So the command

num ← num + 1

Can be written as

num = num + 1

To assign a variable means:

To put a value inside a variable �

Unit 4 Lesson 1 - Activity

28 of 33

Assign a Variable with Expression

Evaluate the expression first to get one value.

Assign the value as normal

00 var num

01 num ← 1 + 2

02 num ← 3 + 4

num

num

num

3

7

3

Evaluate expression first

Unit 4 Lesson 1 - Activity

29 of 33

Exercise 1

Run this program. What is stored in the variables num and str at the end of the program?

00 var num

01 var str

02 str ← "to" + "day"

03 num ← 4 - 1

04 str ← str + str

05 num ← 4 * num

Unit 4 Lesson 1 - Activity

30 of 33

00 var num1

01 num1 ← 1

02 var num2

03 num2 ← num1 + 1�04 num1 ← 5

Exercise 2: What is stored in num1 and num2 at the end of the program?

Note: Variables aren’t “connected”.

Unit 4 Lesson 1 - Activity

31 of 33

00 var num

01 var str

02 num ← 5

03 str ← "Friday" + "!"

04 num ← num + 1

05 str ← "It’s " + str

06 num ← num * 2

07 num ← num + 1

08 num ← num * 2

Unit 4 Lesson 1 - Activity

Exercise 3: Run this program. What is stored in variables num and str at the end of the program?

32 of 33

pow

pow

pow

Key Takeaways

  1. Numbers and strings are two different data types
  2. Expressions evaluate to a single new value
  3. A variable is a named place in memory.
  4. Variables are “assigned” a new value using either

= or ←

  • Evaluate first, then assign

“hi”

22

10

2

evaluates to

/

5

00 var pow

01 pow ← 1 + 2

02 pow ← 3 + 4

3

7

3

Unit 4 Lesson 1 - Activity

33 of 33

Homework

  • Submit Today’s 10/28 Meeting Notes #1-15 and 3 Exercises in the Hub
  • Write 5 Unit 4 Key words and submit image/pdf in Hub
    • string, concatenate, expression, variable, assignment operator