Skip to content

It ends…

Well, after a little over 8 months I’ve finished the book. Technically there’s still a ~300 page index, but I don’t think there’d be much value in leisurely reading that. Now that the experiment is over, I have mixed feelings about writing up reviews/notes on each chapter. For the first 10 chapters I thought it was a great exercise, but as I progressed further, it became somewhat of a pain go back and write up notes on the chapter – though I still felt there was value in doing it.

Blogging about chapters got me thinking about the information more, which is certainly valuable. This wont be one of those books where in 6 months time I go “What did I just read?”, so maybe I will try this again. Anyway, if you by chance come across this blog looking for information on “JavaScript: The Definitive Guide”, I can say it’s worth picking up and has a lot of great information.

Chapter 22: HTML5 APIs

This entry is simply notes for “Chapter 22: Chapter 22: HTML5 APIs” from “JavaScript: The Definitive Guide”

Without a doubt, this was probably my favorite chapter. It covers a slew of new HTML5 technologies that didn’t really fit anywhere else in the book. I’d read about many of them before, but it was nice to get a more in-depth discussion, and it wasn’t until now that I realized how cool Web Workers and IndexedDB really are. Now I just need to think up a project where I can use them.

  • Geolocation API – Allows you to get information about where a user is. Users must give your site permission to use this API. The API is available through navigator.geolocation.
  • History Management – The new pushState/popState/replaceState methods of the history API allow you to create single page web apps without breaking the web. This is how single page web apps should update their URLs. URLs can currently be updated by updating a URL’s hash, but this isn’t friendly to search bots, and the hash is never sent back to the server, so it can create other headaches.
  • Cross-Origin Messaging – The postMessage function allows you to send messages to other windows. You can control which windows can see the message by adjusting the origin parameter. You can also listen to messages from other windows by listening for the “message” event.
  • Web Workers – Allow for threads in JavaScript. A worker exists in its own execution environment and can communicate with the main JavaScript execution environment via message messaging. Workers cannot modify the DOM. Workers can load scripts via the importScripts function. Debugging workers can be a pain as they cannot directly print to the console.
  • Typed Arrays – Created to allow JavaScript programs to more quickly work with binary data.
  • Blobs – Stands for “Binary Large OBject”. You can only preform a limited number of operations on Blobs, so you’ll need to use a more refined Interface if you want to preform special operations.
  • Blob URLs – Allow you to create links to blobs so that they can be referenced by the src property of HTML elements. Blob URLs follow the SOP and have the origin of the script that created them. They are not permanent and disappear when the user navigates away from the document that created them.
  • Filesystem API – Allows web pages to create a local filesystem where they can create files and directories. Experimental at the moment. I’m not sure why someone would use this over IndexedDB or other types of local storage though.
  • Web SQL Database – This would have allowed developers to create client-side relational databases which they could query using SQL. Sadly work on this stopped in 2010 and it will most likely not become a W3C recommendation.
  • IndexedDB – An object database, scoped to a document’s origin. Operations happen in the context of transactions. Indexes can be created for certain fields which make querying the database faster.
  • Websockets – Allows JavaScript programs to create bi-directional socket-type connections to servers.

Chapter 21: Scripted Media and Graphics

This entry is simply notes for “Chapter 21: Scripted Media and Graphics” from “JavaScript: The Definitive Guide”

This chapter aimed to show how to script images, audio, and video using JavaScript. It starts off with a neat technique for scripting image roll overs and then goes into how to manipulate the new Audio and Video HTML elements. The bulk of the chapter, however, is dedicated to image manipulation with SVG graphics and the canvas element (though mainly the canvas element).

SVG is an XML grammar for creating graphics. Unlike raster formats which are matrices of pixels, SVG is a resolution independent vector format where you specify the steps to create an image. It’s interesting because you can embed an SVG element on your page, and then manipulate its contents using the DOM API. It’s recommended that you dynamically create an SVG element using the document.createElementNS method. This method is used so the SVG element will work in browsers that don’t support the HTML5 API. However, SVG is not supported in IE8 and lower, so even with this method your audience is pretty limited.

Whole books have been written on the canvas element, so summing it up with a hand full of notes would be pretty hard. I was already pretty familiar with the element, but the chapter gave it a good treatment. Canvas appears to be what you want to use when creating graphics. SVG is more appropriate if you don’t want to manage redrawing and have sub-elements you want to manipulate with the DOM API.

One interesting side note is that the chapter does not cover the new Web Audio API or the previous audio API that FireFox was working on. I suppose these are too new to really be covered in a book yet (in fact, the FireFox one seems to now be deprecated).

Chapter 20: Client-Side Storage

This entry is simply notes for “Chapter 20: Client-Side Storage” from “JavaScript: The Definitive Guide”

This chapter discusses 4 client-side storage techniques. They are:

  • localStorage and sessionStorage – Two new client-side objects for storing a reasonable amount of data (5MB-10MB depending on the browser). sessionStorage is scoped to the window and origin, and is cleared when the window closes. localStorage is scoped to the origin and is permanent.
  • Cookies – Cookies have been around forever. They’re intended for storing small amounts of data and they’re aren’t terribly secure. Additionally, the API for working with them sucks.
  • IE userData Persistence – A strange localStorage-type object that been available since IE5. It’s only worth knowing about if you’re going to create an IE polyfill for IE versions before IE8.
  • Application Storage and Offline Webapps – Very cool, a way for creating offline web applications.

Chapter 19: The jQuery Library

This entry is a review of “Chapter 19: The jQuery Library” from “JavaScript: The Definitive Guide”

This was a great chapter and provided an excellent overview/introduction to jQuery. I’ve used jQuery quiet a bit in the past, but I’d never really taken the time to drive in and read about all the major areas. This chapter discusses animation, ajax, event handing, plugins, the global utility functions, the major jQuery methods, DOM manipulation, and the basics of the querying. It’s almost like it’s own little sub-book within the book. The only part of the chapter that wasn’t very clear was the section on jQuery queues, but that was just a minor piece.

In a book that’s focused mostly on the JavaScript core and client-side browser APIs, it’s interesting that jQuery gets it’s own chapter and that the other major JavaScript libraries are left out. I’m assuming this is because jQuery powers so much of the web, and anyone doing JavaScript should probably be taking advantage of a JS library (so at least one should be covered). It might have been nice to give the basics of the other major libraries, but then again that may not have been practical, and it’s probably better to cover one library well, than just give glimpses into a hand full. Anyway, overall an good read and a great overview of jQuery.

Chapter 18: Scripted HTTP

This entry is a review of “Chapter 18: Scripted HTTP” from “JavaScript: The Definitive Guide”

This chapter discusses how scripted HTTP can be preformed in JavaScript. Below are my notes.

  • Comet – Refers to a web architecture where the server asynchronously pushes updates to the client (Ajax is the reverse of this – the client asynchronously sends data to the server).
  • The XMLHttpResponse object allows for these methods: GET, POST, DELETE, HEAD, OPTIONS, and PUT.
  • XMLHttpRequest object automatically handles cookies, connection lifetime (though you can abort), *charset*, encoding negotiations, and the “Content-Length”, “Date”, “Referer”, and “User-Agent” headers.
  • The XMLHttpRequest API is designed as if each method was writing to a network stream. Thus, you cannot set request headers before you call open. (the order of operations matter)
  • The status code, response headers and response text are available upon a completed response from the XMLHttpRequest object.
  • overrideMimeType – Method of XMLHttpRequest object that allows you to override the mime type returned by the server.
  • XHR2 – New XMLHttpRequest specification that provides numerous improvements (CORS, file uploads, etc etc).
  • Forms with key/value pairs and files, must be submitted using the “multipart/form-data” mime type. This kind of object can be constructed using a FormData object.
  • For XHR2, you can monitor the progress of downloads/uploads with the progress API.
  • JSONP allows for cross-origin communication, but has security risks.
  • EventSource – This object can be used to implement Comet. In recent months its taken a backseat to WebSockets (which allow two-way communication and have their own protocol). However, Server Side Events happen over HTTP, are one way, and can generate custom events, so they have their place.

Chapter 17: Handling Events

This entry is a review of “Chapter 17: Handling Events” from “JavaScript: The Definitive Guide”

This chapter discusses how web page events are handled with JavaScript. Below are my notes.

  • focusin and focusout have been standardized as bubbling alternatives to the focus and blur events.
  • mouseenter and mouseleave have been standardized as non-bubbling alternatives to the mouseover and mouseout events.
  • The keypress event has been deprecated (what???) in favor of a textinput event.
  • Lots of new HTML5 APIs introduced (drag and drop API, video, sound, mobile events, etc etc).
  • Event Handler Attributes are events set in the HTML (ex: onclick=”alert(‘hi’);”).
  • When you specify an Event Handler Attribute in your HTML, its converted to a function that looks like this: (it will also be defined in non-strict mode)
    function(event) {
      with(document) {
        with(this.form || {}) {
          with(this) {
            /* your code here */
          }
        }
      }
    }
    
  • addEventListener – Functions are invoked for an event in the order they were registered. Calling addEventListener twice on the same object with the same parameters does nothing (a function will not be added twice nor will the function call order be changed).
  • attachEvent is different than addEventListener in the following ways: 1) It only supports event bubbling. 2) The event name is expected to be prefixed with “on”. 3) The same event handler function can be registered multiple times for an event on an object. 4) The “this” keyword inside of handlers will be the window object instead of the element the event was invoked on.
  • In IE8 and before, event handlers registered by setting a property (ex: elm.onclick = …) are not passed an event object. Instead, the event object is made available through window.event. attachEvent handlers, are passed an event object. To mitigate this mess, you can say “elm = evt || window.event” (if evt is passed to the function) in your event handlers.
  • Event handlers registered as properties (elm.onclick = …) can return false to prevent the default action.
  • To cancel the default action of event added via addEventListener, invoke the preventDefault() method of the event object. For handlers register with attachEvent, set the returnValue property of the event object to false (ex: evt.preventDefault(); evt.returnValue = false;)
  • To stop the propagation of an event, invoke the stopPropagation method of the event object. For IE, set the cancelBubble property of the event object to true.
  • onbeforeunload – Return a string from this event and a yes/no prompt will pop up for the user when they try to leave the page.
  • stopImmediatePropagation – “If several listeners are attached to the same element for the same event type, they are called in order in which they have been added. If during one such call, event.stopImmediatePropagation() is called, no remaining listeners will be called.”
  • All modern browsers support mousewheel properties, but they’re not insync, so code must be written to make things work in a cross browser fashion.