3.2 Pre-Lesson Planning
Background Knowledge - Variables & IF Statements
In this lesson we'll be introducing the concept of variables and the use of IF statements. This is perhaps too ambitious for a younger group but for an older or more experienced group these two concepts pair nicely within the p5.js framework. Of course, this could be spread out over two or more sessions if needed to give students time to process these concepts. Please note that this background information represents suggested teacher knowledge and is not intended to be taught in its entirety to students.
Variables
Variables are place-holders that can store many different types of data, most commonly integers, decimals, characters, text, or Boolean values such as TRUE or FALSE. Some languages are strongly typed which means, among other things, that variables must be created as a specific type. For example, in Java an 'int' variable can only store integers (e.g. 0, 1, 5, -2, etc); trying to store a different data type, such as '1.2' or 'bubbles', into an 'int' will crash the program.
Variables are place-holders that can store many different types of data, most commonly integers, decimals, characters, text, or Boolean values such as TRUE or FALSE. Some languages are strongly typed which means, among other things, that variables must be created as a specific type. For example, in Java an 'int' variable can only store integers (e.g. 0, 1, 5, -2, etc); trying to store a different data type, such as '1.2' or 'bubbles', into an 'int' will crash the program.
Thankfully, Javascript is loosely typed which means that variables are 'all-purpose' containers. That means a variable in Javascript can start by storing an integer and could later store a decimal or a Boolean value without crashing the program. This is advantageous because it is more flexible and makes coding easier for new students. As programs get more complex this can be a real problem as a whole host of errors can arise from mixing up or converting data types. However, for now we'll consider this feature of Javascript to be an advantage.
|
When we create variables we can either create an 'empty' variable or we can initialize it with a value. In the example shown to the right, the variable 'x' is created empty and the variable 'y' is initialized with the integer value '2'. It is strongly advised that you initialize variables, even with a 'dummy' value, because calling up an 'empty' variable later in the program can cause it to crash.
There are some naming conventions around variables that teachers should be aware of. Certain words are 'reserved' as they have specific meanings within the Javascript languages. For example, you cannot use 'private' as a variable name. |
You'll notice that in the example above the variables were created outside both the setup() and draw() functions. This was intentional. Variables created outside functions are called global variables and can be used by any function in the program. Variables created inside a function, such as the draw() function, are called local variables and can only be used by that draw() function. The decision about whether or not to make a variable global or local is beyond the scope of Codegogy so for now we'll just use global variables.
Students should never be using nonsense variable names. For example, creating variables like 'thingy' and 'thingy2' is possible but leads to major headaches later on when students have to debug errors in their program. Single words are prefered, such as 'speed', 'length', or 'location'. When using two or more words, follow the camel-case convention for variables: the first word is lowercase and all following words begin with an uppercase with no spaces (e.g. blueSize, secondTrial, doorHeight).
IF Statements
Conditional statements are extremely useful 'logic' tests that we can set up to help our program make decisions. In this lesson we will work with one specific type of conditional statement called an IF statement.
Conditional statements are extremely useful 'logic' tests that we can set up to help our program make decisions. In this lesson we will work with one specific type of conditional statement called an IF statement.
These statements translate nicely to everyday language: If ________ then _________. There are some syntax rules around how we actually create these '_________' sections but it essentially works just like English. "IF you are going to the coffee shop THEN please get me a latte with an extra shot of espresso". Assuming the first condition is TRUE (you are going to the coffee shop) then the second statement will happen (I can hope for a latte with an extra shot of espresso). Of course, if the person I am speaking to is NOT going to the coffee shop (i.e. the first condition is FALSE) then I should not expect a latte with an extra shot of espresso (i.e. second statement is ignored).
|
Let's take a look at this example. Here we have a variable 'x' initialized on Line 5 at the integer value 300. If you look carefully you'll see that the 'x' variable is inserted into the ellipse() function function on Line 10 which means that the circle will be placed 300 pixels from the right side of the canvas (because 'x' is set to 300).
Something interesting happens on Line 12. We actually change the original value of 'x' to be 'x + 5', in this case 300 + 5 = 305. So the next time the draw() function runs the value of x will be 305. And 310 the time after that. And 315 the time after that. So the value of 'x' just keeps growing and this 'moves' the circle to the right because 'x' is inside the ellipse() function. You've probably already guessed the issue that arises: eventually the value of 'x' gets so big that the circle moves off the screen. How can we reset it once it goes to far? This is where our IF statement comes into play on Lines 14-16. We'll instruct the computer that IF the value of 'x' gets too big THEN reset 'x' back to 300, it's original value. |
As shown above, IF statements work by checking a conditional statement inside the round () brackets; if that statement is TRUE then the program executes whatever commands are inside the curly {} braces. If the statement inside the round () brackets is FALSE then the program skips over the instructions inside curly {} braces.
Here is a quick list of different types of conditions you can 'check' for inside the round () brackets:
For more on conditional statements in Javascript feel free to explore this resource from W3 Schools.
Here is a quick list of different types of conditions you can 'check' for inside the round () brackets:
- (x > 500) means 'Is x greater than 500?'
- (x < 500) means 'Is x less than 500?'
- (x == 500) means 'Is x equal to 500?'
- (x >= 500) means 'Is x equal to or greater to 500?'
- (x <= 500) means 'Is x equal to or less than 500?'
For more on conditional statements in Javascript feel free to explore this resource from W3 Schools.
Lesson Outline
Here is a rough outline of my plan for this one hour lesson.
|
Animation Challenge - Circle Bouncing in Box
|