In Blocks, each step of an equation needed it’s own block.
This can make formulas difficult to properly express,
as it can be hard to identify (or change) the order in which they are evaluated.
In JavaScript, the same formulas can be easier to express,
as the syntax (structure) is much closer to what is used when
evaluating math by hand or with a scientific calculator.
Operation
Block
JavaScript
Addition
let x = 6 + 2;
Subtraction
let x = 6 - 2;
Multiplication
let x = 6 * 2;
Division
let x = 6 / 2;
Example #1: Complex Expressions
Review the examples below
Identify what is different between the Blocks and the JavaScript in each pair
Run the examples: identify what the end result will be
(it may be useful to add game.splash to display the value)
Example #1a: Addition and Subtraction
let num: number = 1 + 2 - 3;
let num: number = 1 + 2 - 3;
Example #1b: Addition and Multiplication
let num: number = 5 + 3 * 2;
let num: number = 5 + 3 * 2;
Example #1c: Division and Multiplication
let num: number = 24 / 3 * 4;
let num: number = 24 / 3 * 4;
Student Task #1: Creating Blocks
Create a new project in Arcade. Go to the JavaScript view
Recreate the expression below in JavaScript
To confirm the JavaScript expression is correct, switch to Blocks
and check that the result is the same
Challenge: change the + to a ×, and switch back to JavaScript.
What has changed?
let num: number = 15 + 8 / 3
Concept: Order of Operations
JavaScipt uses a PEMDAS structure to determine the order in which operations are evaluated.
This standards for Parentheses, Exponents,
Multiplication or Division, Addition or Subtraction.
Order
Operation
1st
Parenthesis
2nd
Exponents
3rd
Multiplication
Division
4th
Addition
Subtraction
Operations of the first order will occur before operations of the second order,
operations of the second order will occur before operations of the third order,
and operations of the third order will occur before operations of the 4th order.
Operations that are of the same order (for example, multiplication and division)
will be completed left-to-right.
This means that 24 / 3 * 4 evaluates to 32,
because 24 is divided by 3, then the result is multiplied by 4.
Parentheses have the highest order, which means that they are always evaluated first.
This can be used to control the order in which an expression is evaluated.
For example, 24 / (3 * 4) will evaluate to 2,
because the parentheses require that 3 * 4 is evaluated first,
before the division occurs.
Example #2: Using PEMDAS
Review the examples below
In each example, identify how the value of num
is changed using the order of operations
let num: number = 24 / (3 * 4);
console.log("" + num);
This will print out the number 2 instead.
Student Task #2: Fixing an Expression
Recreate the code below
Run the code and identify what value num stores
Review the description of the goal of the code in the box below: does the code match the goal?
If the code does not match the expected output, modify the order in which it is evaluated
by adding parentheses. Do not add or remove any other operators or numbers
The goal of the code was to complete the steps in the following order:
let num: number = 18 * 6 + 4 / 2 - 1;
game.splash("" + num);
What did we learn?
What is an advantage of writing expressions out in JavaScript as opposed to blocks?
In JavaScript, how can the order in which an expression is evaluated be changed?
Before moving on to the next lesson, it is recommended that you check out the
selected problems for this section to
review the material and practice the concepts introduced in this section.
Case Study
Use Relative Values
The screen.width and screen.height properties
correspond to the width and height of the game screen.
Change how x and y are set so that x
stores screen.width / 2, and y stores
screen.height - 20.