Due to the positive experience with the “Head first design pattern” book (see my review here), I bought this one by the same authors. Again, it’s fun to read and also quite informative. I read it while commuting between home and office, and it took about two weeks to finish (573 pages).

I have used javascript a little bit in the past just for fun (see the following two side projects), and also a little bit in my current job. But I don’t really understand how it works previously. This book definitely helps to fill some gaps.

Here is a brief summary of what I have learned from it:

  • Document object model (DOM)
    • object that connects HTML and javascript
    • tree like strucutre that represents elements in the HTML markup
    • document.createElement()
    • document.getElementById()
    • document.getElementsByTagName()
    • document.getElementsByClassName()
    • document.querySelector()
    • document.querySelectorAll()
  • event handlers
    • window.onload
    • button.onclick
  • geolocation:
    • navigator.geolocation.getCurrentPosition()
    • navigator.geolocation.watchPosition()
  • web request
    • XMLHttpRequest: same server
      • var request = new XMLHttpRequest();
      • request.onload = function(){ ... };
      • request.open("GET", url);
      • request.send(null);
    • JSONP: access remote server <script src="http://.../...?callback=..."></script>
  • canvas
    • var context = canvas.getContext("2d");
    • context.beginPath();
    • context.arc(x, y, radius, startAngle, endAngle, direction)
    • context.fillStyle = "lightblue";
    • context.fill();
  • video
    • <video controls autoplay src="..." width="480" height="360" poster="..." id="video"></video>
    • <source src="...mp4">
    • scratch buffer with the help of canvas
      • getImageData()
      • putImageData()
  • web storage
    • cookies: 4k, server side
    • localStorage: > 5M, client side, persists
    • sessionStorage: > 5M, client side, doesn’t persist
    • localStorage.getItem()
    • localStorage.setItem()
    • localStorage.removeItem()
    • localStorage.clear()
    • localStorage.key()
  • web worker: multi-threads
    • var worker = new Worker("....js");
    • worker.postMessage("ping");
    • worker.onmessage = function (event) { ... }
    • worker.terminate()
    • worker.onerror = function(error){ ... }
    • importScripts()
  • top appendix topics
    • Modernizr
    • audio
    • JQuery
    • SVG
    • offline web apps
    • web sockets