Table of Contents
1 JavaScript Assignment Operators
2 Code Workplace
3 Questions
4 Answers
JavaScript Assignment Operators brief overview
The Assignment operator is equal (=) which assigns the value of right-hand operand to its left-hand operand. That is if a = b assigns the value of b to a.
+= Addition Assignment: This operator adds the value to the right operand to a variable and assigns the result to the variable.
-= Subtraction assignment: Subtracts the value on the right from the variable value on the left, and returns the new variable value.
*= Multiplication assignment: Multiplies the variable value on the left by the value on the right, and returns the new variable value.
/= Division Assignment: This operator divides a variable by the value of the right operand and assigns the result to the variable.
%= Remainder/Modulus Assignment: This operator divides a variable by the value of the right operand and assigns the remainder to the variable.
image credit: http://www.corelangs.com/js/basics/operators.html
Let's carry out an exercise to manipulate some numbers and operators to change the size of a box. The box is drawn using a browser API called the Canvas API. There is no need to worry about how this works — just concentrate on the math for now. The width and height of the box (in pixels) are defined by the variables x and y, which are initially both given a value of 50.
The following questions are obtained from the MDN JavaScript Documentation which you can find here.
Code Workplace
Practice working on the coding questions using this workspace. Then check the answers if you need help💯
JSitor: https://jsitor.com/mxtwfi8OL5
You only edit these two lines for this exercise:
Questions
Question 1
Change the line that calculates x so the box is still 50px wide, but the 50 is calculated using the numbers 43 and 7 and an arithmetic operator.
view the possible solution here
Question 2
Change the line that calculates y so the box is 75px high, but the 75 is calculated using the numbers 25 and 3 and an arithmetic operator.
view the possible solution here
Question 3
Change the line that calculates x so the box is 250px wide, but the 250 is calculated using two numbers and the remainder (modulo) operator.
view the possible solution here
Question 4
Change the line that calculates y so the box is 150px high, but the 150 is calculated using three numbers and the subtraction and division operators.
view the possible solution here
Question 5
Change the line that calculates x so the box is 200px wide, but the 200 is calculated using the number 4 and an assignment operator.
view the possible solution here
Question 6
Change the line that calculates y so the box is 200px high, but the 200 is calculated using the numbers 50 and 3, the multiplication operator, and the addition assignment operator.
view the possible solution here
Answers
Answer 1
Possible solution:
x = (43 + 7);
y = 50;
simple right? The total, of course, will add up to 50 so the square will not change in size:
back to question 1
Answer 2
Possible solution:
x = 50;
y = (25 + 3);
Just like the previous question this merely involves a simple subtraction operation to get the desired result:
back to question 2
Answer 3
Possible solution:
x = 750 % 500;
y = 50;
And voila! By dividing 750 by 500 we get a remainder of 250 exactly what we wanted.
back to question 3
Answer 4
Possible solution:
x = 50;
y = 500 / 2 - 100;
Not much explanation needed here. Our three numbers are 500, 100 and 2. When we divide 500 by 2 we get 250 which we then subtract 100 from to get 150:
back to question 4
Answer 5
Possible solution:
x *= 4;
y = 50;
As we already know, the *= operator multiplies the variable value on the left by the value on the right, and returns the new variable value. Since x has been assigned 50 it will multiply it by 4 to get 200:
back to question 5
Answer 6
Possible solution:
x = 50;
y *= 50 + 3;
Here we have merely used the *= operator then added our two numbers 50 + 3 to get our solution:
back to question 6
You can practice making more complex scenarios with assignment operators. To read more on JavaScript assignment operators, take a look at this article on javaScript.info
If you found this article useful or if you spotted an error drop me a line in the comments I'd love to hear from you😁
Top comments (0)