JS Lessons

Teachers

Role	Name
🧭 Scrum Master	Devin Bir
🧪 Tester	Malachi Mendoza
🏁 Tester/Finisher	Santiago Alverado

Download homework:

Just a prerequisite thing, download the homework ipynb and put it in your portfolio repo so you can work along with the lesson.

The download link will send you to a github page with the ipynb, click the download button in the top right corner of the text box to download the ipynb.

Download Homework

Introduction to Mathematical Expresions

📌 What are Mathematical Expressions in Programming? In programming, a mathematical expression is a block of code that calculates a value using numbers, variables, and operators.

For Example:

5 + 3 * 2;

Key Takeaway: As you can see, mathematical expressions in JS are practically identical to mathematical expressions found in typical math.

Key Mathematical Operators

Operator	Symbol	Example	Result	Example use case
Addition	`+`	`2 + 3`	`5`	`console.log(2 + 3);`
Subtraction	`-`	`5 - 2`	`3`	`console.log(5 - 2);`
Multiplication	`*`	`4 * 3`	`12`	`console.log(4 * 3);`
Division	`/`	`10 / 2`	`5`	`console.log(10 / 2);`
Modulo	`%`	`7 % 3`	`1`	`console.log(7 % 3);`
Exponentiation	`**`	`2 ** 3`	`8`	`console.log(2 ** 3);`

You can also use inequality operators in if statements (>, <, ==, <=, =>)

Variables in Expressions

You can use variables to store values and build expressions:

For example:

let x = 10;
let y = 3;
let total = x + y * 2; // total = 10 + (3 × 2) = 16

Order of Operations

Just like in typical math, JavaScript follows PEMDAS:

Parentheses
Exponents
Multiplication/Division (left to right)
Addition/Subtraction (left to right)

For example:

let result = (4 + 2) * 3; // (4+2) * 3 = 6 * 3 = 18

Popcorn hack 1

Try to complete popcorn hack 1 on the homework ipynb: Homework Page

Modulo

Modulo is more of an unknown topic when it comes to math expressions. To put it simply, modulo is dividing 2 numbers, but it outputs the remainder. For example:

let x = 23;
let y = 15;
let total = x % y;
console.log(total);

This will output 8 in the console. This is because 15 can go into 23 once, and the remainder will be 8. If you would like to try this, you can paste this exact code into your browser console with Ctrl+Shift+I (windows) or Cmd+Option+I (MacOS), and it will output 8.

What happens if x < y or x % x == 0?

If x happens to be less than y in this situation, then it will end up outputting x. This is because, for example, if you have:

5 % 13;
then 5 will go into 13 zero times, and the remainder will be 5. If you have:

5 % 5;
then there will be no remainder because 5 goes into 5 exactly 1 time. This will end up outputting 0.

Fun Fact: Modulo is used in digital clocks! If it is 10pm and you add 5 hours, it will be 3am. In modulo, this looks like
(10 + 5) % 12;
This command outputs 3.

Examples of Mathematical Expressions in Pong

Pong is a game that requires a lot of mathematical operations, here are some of the few:

Ball physics:

if(ballY - ballRadius < 0 || ballY + ballRadius > canvas.height) ballSpeedY *= -1;

if(ballX - ballRadius < 20 + paddleWidth && ballY > leftY && ballY < leftY + paddleHeight){
	ballSpeedX *= -1; ballX = 20 + paddleWidth + ballRadius;
	sndPaddle.play();
}
if(ballX + ballRadius > canvas.width - 20 - paddleWidth && ballY > rightY && ballY < rightY + paddleHeight){
	ballSpeedX *= -1; ballX = canvas.width - 20 - paddleWidth - ballRadius;
	sndPaddle.play();
}

We will break down each part of this code:

ballY - ballRadius < 0;

This line checks if the ball is at the top of the screen (0 is the top because javascript follows a y-down system)

ballSpeedY *= -1;

If the ball is on the border of the screen, then the ball’s direction will be reversed.

Popcorn hack 2

Try to complete popcorn hack 2 on the homework ipynb: Homework Page

Example Calculator

How does the calculator work?

<script>
  function press(val) {
    document.getElementById("display").value += val;
  }

  function clearDisplay() {
    document.getElementById("display").value = '';
  }

  function calculate() {
    try {
      const result = eval(document.getElementById("display").value);
      document.getElementById("display").value = result;
    } catch {
      document.getElementById("display").value = 'Error';
    }
  }
</script>

This is the script part of the calculator, which does the actual calculating. The first function, press, is in relation to the previous buttons such as <button onclick="press('6')">6</button>, where pressing the button runs the function press(). The function itself makes the “display” of the calculator add whatever button you pressed to it, making it display the actual number or operator.

When you press the C, or clear button, it runs the clearDisplay() function.

<button onclick="clearDisplay()">C</button>

The clearDisplay function sets the display of the calculator to nothing, effectively “clearing” the calculator.

The final, and arguably most important function, calculate(), does the calculating part. It takes the display of the calculator, for example “5 + 6” and “eval”, or evaluates the code, which outputs 11. If the equation doesn’t work, it will display “Error”.

🖥️ Interactive JavaScript Console

Use this console as a resource to help you when working on the homework. You can insert both raw numbers and make variables.

Type a command below and click Run to see the result.

Homework

Homework download:

Put this .ipynb file into your portfolio repository, follow the instructions on the .ipynb to finish the homework.

The download link will send you to a github page with the ipynb, click the download button in the top right corner of the text box to download the ipynb.

Make sure to submit your homework deployed link onto the global homework submission google sheet

Homework Page
Download Homework
Submission Google Form for Homework