Exercises

In the previous chapters, the solutions to the exercises could be found in the text of the chapter. This time, some of the exercises require you to do some more reading, or experimentation, outside this book.

  1. BOM: As a BOM exercise, try coding something wrong, obtrusive, user-unfriendly, and all in all, very Web 1.0, the shaking browser window. Try implementing code that opens a 200 x 200 pop up window and then resizes it slowly and gradually to 400 x 400. Next, move the window around as if there's an earthquake. All you'll need is one of the move*() functions, one or more calls to setInterval(), and maybe one to setTimeout()/clearInterval() to stop the whole thing. Or, here's an easier one-print the current date/time in document.title and update it every second, like a clock.
  2. DOM:
    • Implement walkDOM() differently. Also, make it accept a callback function instead of hard coding console.log().
    • Removing content with innerHTML is easy (document.body.innerHTML = ''), but not always best. The problem will be when there are event listeners attached to the removed elements; they won't be removed in IE, causing the browser to leak memory because it stores references to something that doesn't exist. Implement a general-purpose function that deletes DOM nodes, but removes any event listeners first. You can loop through the attributes of a node and check if the value is a function. If it is, it's most likely an attribute like onclick. You need to set it to null before removing the element from the tree.
    • Create a function called include() that includes external scripts on demand. This means you need to create a new <script> tag dynamically, set its src attribute, and append to the document's <head>. Test it by using the following code:
              > include('somescript.js'),
  3. Events:
    • Create an event utility (object) called myevent, which has the following methods working cross-browser:
      • The addListener(element, event_name, callback), where element can also be an array of elements
      • removeListener(element, event_name, callback)
      • getEvent(event) just to check for a window.event for older versions of IE
      • getTarget(event)
      • stopPropagation(event)
      • preventDefault(event)
    • Usage example is as follows:
              function myCallback(e) { 
          e = myevent.getEvent(e); 
          alert(myevent.getTarget(e).href); 
          myevent.stopPropagation(e); 
          myevent.preventDefault(e); 
        } 
        myevent.addListener(document.links, 'click', myCallback);
    • The result of the example code should be that all of the links in the document lead nowhere, but only alert the href attribute.
    • Create an absolutely positioned <div>, say at x = 100px, y = 100px. Write the code to be able to move div around the page using the arrow keys or the J (left), K (right), M (down), and I (up) keys. Reuse your own event utility from 3.1.
  4. XMLHttpRequest:
    • Create your own XHR utility (object) called ajax. For example, take a look at the following code:
              function myCallback(xhr) { 
          alert(xhr.responseText); 
        } 
        ajax.request('somefile.txt', 'get', myCallback); 
        ajax.request('script.php', 'post', myCallback, 
        'first=John&last=Smith'),
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
52.15.63.145