U3L6 "On Event"

CS Principles Unit and Lesson Discussion
1

My student (yes, I only have one student in my class) is having trouble with understanding the “on event” commands. As in he’s having trouble deciphering what will come next if “x” happens. Does anyone have a very simple way to explain it?

2

I’m not completely sure if I understand the confusion. Let me try to explain. I would show the student a piece of code running on Code Studio without any onEvent and then show the same code inside an onEvent of a button.

For example, in unit 3 lesson 5 level 2 of Code Studio, this code

console.log("Starting my program!");
setProperty("bigButton", "background-color", "blue");
setProperty("bigButton", "height", 200);
setProperty("bigButton", "text", "Now it's a bigger button!");
console.log("Ending my program!");

prints “Starting my program” on the console, changes the property of the button without any interaction from the user, and then prints the message “Ending my program!” on the console. The program stops executing. Whereas the code in level 3

console.log("Starting my program!");
onEvent("bigButton", "click", function( ) {
  setProperty("bigButton", "background-color", "blue");
  setProperty("bigButton", "height", 200);
  setProperty("bigButton", "text", "Now it's a bigger button!");
  console.log("You clicked the button!");
});
console.log("Ending my program!");

prints “Starting my program!” and then “Ending my program” to the console. Nothing else happens. The code in the onEvent is not executed. The program is waiting (listening) for the user to click on the button. Once the user clicks, the code inside the onEvent block is executed. Then the program waits for another button click. In this case the program is running forever, listening for events to happen.

1 Like