Unit 4quote Maker change versus input

CS Principles Unit and Lesson Discussion
1

Hello. More “new to Javascript” questions (we used Python last year). I love the concept of the Quote Maker app because it’s so interactive, however, it seems like the coding would be a challenge to do from scratch, without looking at a template. For example, have we seen explicit examples of Event Types change versus input before this assignment? Some of the onEvents are “change” and some are “input”. Noe sure how one discerns the difference (and it also seems that it can be browser dependent). How do other teachers approach this when looking at very discrete and possible technical differences, when the focus of the lesson is supposed to be algorithms and why and when to use a function?

2

Hello,

This is an interesting question. There is never a day in the course when we explicitly teach the different Event Types, so I think it depends on what/how the teacher has taught the previous lessons/levels. A few places your students may have seen it:

  • Unit 3: As students were building apps they worked with event handlers and design elements. I had a few students who used “change” in U3 because they wanted to go to a different page based on the value in a dropdown. (This did require them to also use getText() )
  • Unit 4 EIPM Sequence 2: When students were working on Lemon Squeeze they were introduced to things other than “click”. (When you mouseover the lemon/lime the event runs.)

I usually let students try to figure it out, and at some point call the group together to chat about that particular feature of the exemplar and see if anyone has a solution to share with the class. Often times students have figured it out by using the documentation for the onEvent block and they can share it with peers. If not, I use it as an example to show them how to find the documentation and look through the possible event types to decide what would make the most sense for this app.

Also - There is a subtle difference between “change” and “input”. Both rely on the value in the element being updated. In “input” the event runs as soon as that update begins. In “change” it waits for the user to hit ‘enter’.

1 Like