Quiz

1. I'm confused about how to find the form using a selector

   We find the form using the CSS language.

   We could give the form an ID and use `#form_id` as the selector.

   We could give it a CSS class and use `.form_class` as the selector.

   What CoffeeRun does is give it a data- attribute and uses `[data-coffee-order="form"]` as the selector.

   Let's look at CoffeeRun again.

2. how is callback function defined? I didn't see any code on defining the callback function. Thanks!

   It's done here. The callback function is the anonymous function that is the argument to addSubmitHandler

   
   var FORM_SELECTOR = '[data-coffee-order="form"]';
       form1 = new FormHandler(FORM_SELECTOR);
       form1.addSubmitHandler(function (data) {
           truck1.createOrder(data);
           list1.addRow(data);
       });
   
   

   It's important to remember that a callback function won't be *named* callback. It might not have a name at all. Remember that it the Plotting assignment, you defined a dozen callback functions (arguments to .map). You find them by looking at the caller and any functions that are passed as arguments.

3. can you explain how callback functions work? are you supposed to run "callback()" or can it be any function?

   A callback function is a function that the caller supplies that is intended to be invoked by the callee at the appropriate time. Here's one of the simplest examples I can think of.

   
       // this is the callee
       function foo(x, callback) {
           let result = 3*x*x + 2*x + 1;
           callback(result);        // invoke the callback function
       }
       
       // callers:
       foo(1, (result) => alert(result)); 
       foo(2, (result) => console.log(result));
       foo(3, () => {});
       foo(4, (result) => $('#all_results').append(result))
   
   

4. I am still confused about what a callback function does.

   In general? That's like asking what a function does. It depends on what we want it to do.

   The point of a callback function is that we define what it should do at the appropriate time and with the appropriate data, and then give it to someone else who knows those things (time and data)

5. I‘m still confused about callback(). Can we go over it again in class?

   For sure. The callback function allows us to insert our custom code into an existing situation. We've used them with:

   • the .map and .forEach methods
   • the .click method
   • keyboard event handlers
   • submit handlers

   Every one of our event handlers is a kind of callback.

   "callback" is the more general term, since the argument to .map and .forEach aren't event handlers, but they are callbacks.

6. Could you give a demonstration of submitting a form, doing something with that input on the server-side, then changing something about the webpage as a result? I think I understand those three individual components, but I'm having trouble with how data is passed back and forth.

   Doing something on the server side is CS 304; I'm happy to demo, but only if there's time and general interest. Otherwise, let's do that in OH.

   Later in CS 204, we'll do stuff with a server using Ajax, but just storing data, not really processing it.

   The CS 304 Ajax homework