Skip to content

A3 - Conditional Logic

In this assignment, we'll look at the if statement in JavaScript. Here is a review of some terminology:

  • Boolean Expression - A mathematical expression that evaluates to either true or false; for example 4 > 3 evaluates to true
  • Relational Operator - Operators used within Boolean expression. In JavaScript, these operators are the same as in Python:
    • == (equal to)
    • != (not equal to)
    • < (less than)
    • > (greater than)
    • <= (less than or equal to)
    • >= (greater than or equal to)
  • Condition - In an if statement, it's the Boolean expression that determines whether the code inside the body of the if statement should run.

Here is the template for an if statement in JavaScript: 

if (booleanExpression) {
    // do something here only if the booleanExpression evaluates to true
}
Example: 
if (mouseX > 300) {
    fill(255, 0, 200)
}
Compare this to the equivalent in Python: 
if mouseX > 300:
    fill(255, 0, 200)

Notice a couple differences:

  • In JavaScript, the condition must be in parentheses.
  • The body of the if statement needs to be surrounded by curly braces, similar to how JavaScript functions are structured.

Info

In general, JavaScript uses { } to denote code blocks, whereas Python just uses indentation. JavaScript will actually work just fine without proper indentation, but of course you still should indent for clarity.

In some cases (such as in the if statement), the curly braces are actually optional if the code block is only a single statement. However, it never hurts to add them regardless.

Using and/or Operators

Just like in Python, we can create more complex logic with the addition of and/or operators. In JavaScript:

  • && is the operator for and
  • || is the operatore for or

Here is an example of their use:

if (age >= 13 && age <= 19) {
    // we have a teenager
}

if (temperature < 0 || temperature > 100) {
    // we can't have liquid water
}

Using else and else/if Clauses

In JavaScript:

  • we use else in the same way as we do in Python
  • we use else if where we would use elif in Python

Full Example - Bouncing Ball

The following code will create a bouncing ball:

let x = 0
let speed = 3

function setup() {
    createCanvas(500, 400)
}

function draw() {
    grid()

    // Bounce the ball off the righthand wall
    if (x > width) {
        speed = -3
    }

    // Select the ball's colour based on its x-coordinate
    if (x < width/3) { // less than 1/3 across
        fill(200, 0, 0)
    }
    else if (x >= width/3 && x < 2*width/3) { // between 1/3 and 2/3 across
        fill(0, 200, 0)
    }
    else { // more than 2/3 across
        fill(0, 0, 200)
    }

    // Draw the circle
    circle(x, 200, 40)

    // Update its position
    x += speed
}

The key thing to understand here is that speed will be 3 when the ball is moving right, and -3 when the ball is moving left. This causes the statement x += speed to update the value of x as desired.

Your Task

Learning Goals

  • Use if statements, including examples that include else and else if
  • Use the && and || operators

Suggested Task

Run the update script to download the assignment template, which will contain the bouncing ball code from above.

Try to extend this somehow. You could try some (or all) of these ideas:

  • Bounce it off the left wall as well
  • Create an up/down bounce (either with the existing circle, or with a second shape)
  • Change the ball's size on each bounce, or as it enters different regions of the screen
  • Make it go faster after each hit

Integrate all the learning goals if possible (if you can't integrate both && and ||, it's okay to just use one of these).