2024- 2023
- 2022
- 2021
- 2020
- 2019
- 2018
- 2017
- 2016
- 2015
- 2014
- 2013
2012
Range Finder- Jacob's Ladder
- Space Simulation
- Volcano Diorama
- Surname Extinction
- Dvorak
- Tonsillitis
- Self-driving Engineer
- SVG Open 2012
- DOM Tutorial
- OV-105
- Workshops
- 15 Years
- Underwater Claw
- Moore's Bet 2
- Python in Python
- CS Larva
- Blockly
- Transit of Venus
- Maker Faire 2012
- Rolling Along
- Literal Quotes
- Glencoe
- Graphical Languages
- 2011
- 2010
- 2009
- 2008
- 2007
- 2006
- 2005
- 2004
- 2003
- 2002
DOM Tutorial
15 October 2012
Part of my work at Google involves teaching JavaScript classes to engineers who don't have much experience with front-end programming. JavaScript is a severely messed-up language. I liken it to a cat. You can bend it into all kinds of unnatural shapes, drop it from up high, and it will land on its feet. However, occasionally the claws will deploy without warning, and you get all bloodied. But at the end of the day, it's still a cute language.
JavaScript's interface with the browser's DOM turned into a pretty dry set of lecture slides that were difficult to absorb. To make the class more interesting, I created a couple of interactive DOM tutorials that walks one through how to access and manipulate the DOM.
Since this is an introductory course, I'm just teaching the official DOM interface. The official data structure of the DOM is a tree, with the <HTML> tag at the top, and all other content as nested child branches. But reality is different when dealing with Microsoft Internet Explorer. In my first weeks at Google I managed to crash thousands of MSIE users because I wrote a tree walker that got stuck in an infinite loop. When a page has overlapping tags (e.g. <x>a<y>b</x>c</y>) most browsers will untangle the mess and produce the legal version of what was intended (e.g. <x>a<y>b</y></x><y>c</y>). MSIE will (in some circumstances) do exactly what the tags say, resulting in a graph rather than a tree. I've seen nodes in MSIE which are their own parents. I've seen nodes in MSIE whose parent is a random tag half way across the page, which in turn does not think that the node is one if its children.
I don't have the heart to show my students what MSIE does with the DOM. They'll figure it out eventually.
