Teaching guide: Intro to JS - Logic and if statements

Google Classroom

This is a teaching guide for the Intro to JS lesson on Logic and if statements.

What the student will learn

How to use if/else statements in their programs to execute different lines of code based on whether certain conditions are true.
How to use logical operators to evaluate to true/false values - &&, ||, ===, !==, <, >, <=, >=.
How to store booleans in variables, to hold true/false values.
How to use the global ProcessingJS boolean variable mouseIsPressed to check if the user is pressing the mouse, to help make interactive aspects like buttons.

The student will be able to write code like:

Where students struggle

For many students, this may be their first introduction to logic - reasoning about whether statements are true or false, and making complex expressions using AND and OR to result in truthiness and falsiness. If students are struggling with logic, encourage them to think carefully through each conditional expression, like by writing it down on a sheet of paper and annotating each part of the expression with true or false.
Students often take time to figure out how to put together multiple if/else statements in the most logical way - they might forget to use else when they want exclusivity, or they may sequence their if/else conditions in a flow that doesn’t result in what they want. Once again, encourage them to slow down and reason about how they want their program to work. Also, prompt them to think through all the possible values that could flow through the logic. Oftentimes, programmers (new and old!) forget to think about the "edge cases" in their logic.
Students may struggle with all the new syntax, like incorrectly putting semi-colons after the if statement and mistyping the operators incorrectly (e.g. & instead of &&
- & may work, but it’s actually a different, more advanced operator).

Additional materials: Unplugged activities

An "unplugged" activity is one that you can do with students without needing to use a computer at all. They can help convey concepts in a more visceral way, and they can also be a backup activity for when computers fail.

Code.org offers a Coding with Cards activity (see overview video and lesson plan).

Additional materials: Discussion questions

These are questions that you can ask students individually after they've done the lesson, or lead a group discussion around, if everyone's gotten to the same point.

Where do you use logic in every day life? What variables would you use to program that logic? (Examples for prompts: deciding what to wear outside, deciding what form of transport to use, deciding what to eat)

Additional materials: Trivia questions

These can be fun to do as a class after everyone’s gotten through the lesson. They can also lead to discussion about which questions are the hardest. Play them on Quizizz.

Want to join the conversation?

Sort by:

Larry Serflaten
Posted 6 years ago. Direct link to Larry Serflaten's post “Unfortunately this is an ...”
Unfortunately this is an example of teaching bad coding practices. This could have been an excellent time to introduce the mouse functions instead of using the draw function to get mouse input. For example:

strokeWeight(9); mouseMoved = function(){ background(255); noStroke(); if (mouseX > 200) { fill(248, 128, 0); }else{ fill(255, 255, 0); } ellipse(mouseX, mouseY, 100, 100); fill(0); ellipse(mouseX-15, mouseY-15, 15, 20); ellipse(mouseX+15, mouseY-15, 15, 20); stroke(0); noFill(); if (mouseX > 200) { arc(mouseX, mouseY+30, 40, 30, 180, 360); }else{ arc(mouseX, mouseY+10, 50, 20, 0, 180); } };

The reason using the draw function is not the proper method is that the draw function gets called continuously for the life of the program. It is doing work that is not necessary. The program only needs to respond when the user is actively interacting with the program as exemplified above.
Button navigates to signup pageButton navigates to signup page
(5 votes)
Answer
kishoregunadala
Posted a year ago. Direct link to kishoregunadala's post “5675345.56546/345”
5675345.56546/345
Button navigates to signup pageButton navigates to signup page
(2 votes)
Answer