diff --git a/labs/09 JSON and AJAX/worksheet.md b/labs/09 JSON and AJAX/worksheet.md index 17c39a3..731834b 100644 --- a/labs/09 JSON and AJAX/worksheet.md +++ b/labs/09 JSON and AJAX/worksheet.md @@ -66,7 +66,7 @@ The code you will look at below invokes handlers that check for methods and prop b. Depending on the method availability, the onload handler invokes a click handler on the div and passes it a callback function called handleClick 3. Note that the callback handleClick looks for a property called target on the event it is passed a. Depending on the property availability, the callback correctly identifies the target element in the DOM - + ## Test your understanding 1. Add a new div containing some text @@ -189,7 +189,7 @@ if (output.textContent !== undefined) { - an immediately invoked function returns a (closure) function which adds handlers to events and which stores these associations in an object containing event handler arrays - in addition, the dispatchEvent() is a closure over the eventRegistry object and is therefore able to be called against this registry whenever a listened-to event happens, even when the event happens on an element that was not defined in the DOM when the event handler was added! - this is the power of closures - + - Adjust dom_scripting.html to include the dom_utils_global.js file (as well as the original dom_utils.js) - Now refactor the JS code in the HTML file to use window.$live to register the events and handlers previously dealt with by the U object. - Try adding a DOM element dynamically to the page, which has a “live” listener already defined earlier in your code. It should react to the listened- to event even though it was not present when you added the $live event association. @@ -209,7 +209,7 @@ simple: - gets the result of getJsonSync on a particular URL – adds an attribute heading of the story data to the page – then cycles through a list defined in another data attribute to perform the same operations as above: get the result of a URL, and add one of its attributes to the page. - + Again, most of the work is in the utility file! - Look at the ajax_utils.js file. @@ -229,7 +229,10 @@ setting in some function blocks that we can call quickly from elsewhere. ### Test your understanding - Parse the content of the chapter objects returned by the getJsonSync as they come in from the server: - – If the html attribute contains the word “dictum” then make a AJAX call to a dictionary API that returns JSON, such as one of the API endpoints listed on the Wordnik API documentation - – Parse the JSON response for a definition of the word and dynamically add a DOM element to the HTML page containing the term “dictum” along with the returned definition. + + - If the html attribute contains the word “dictum” then make a AJAX call to a dictionary API that returns JSON, such as one of the API endpoints listed on the Wordnik API documentation + + - Parse the JSON response for a definition of the word and dynamically add a DOM element to the HTML page containing the term “dictum” along with the returned definition. + - Now make your AJAX call and JSON response parsing dynamic, by allowing the user to double-click any word on the screen: double clicking it should provide a new entry in the “word dictionary list” somewhere on the page, containing the definition or “not found”. You may find this StackOverflow question on handling double-clicks on words useful. 9