I've found this to be very true. Almost 10 years back I started playing around with html and then CSS. The natural final progression led me to Javascript. I clearly remember going through Thau's Javascript tutorials over at WebMonkey trying to actually figure out what I was hacking. Those were exciting times at the height of the "Browser War" with the DOM coming into its own: MS introducing document.all and Netscape's document.layers. After IE won, nothing much happened for the next 5 years. And Javascript, already considered a toy language back then was more or less ignored.
With the emergence of Ajax all that changed. People actually started taking a serious look at JS. Rahul found a series of videos - The Javascript Programming Language - by the above mentioned Douglas Crockford over at YUI threatre. They are by far the best material on revealing the real javascript and what a wonderful dynamic language it is. It is simple, yet, deceptively powerful. I took notes and here are some language highlights:
Overview
- A real language - small, so easily approachable.
- Dynamic - "load and go"... i.e. interpreted + loosely typed.
- Objects are containers... i.e. HashMaps.
- Prototypical inheritance - No classes. Inherit directly from objects.
- Lambda support - Closures. "First lambda language to go mainstream".
Types
- Numbers - 64-bit floats. NaN is result of erroneous operations.
- Strings - 16-bit chars. Immutable. == compares string values.
- null - nothing.
- undefined - default variable value. Missing object members.
- Booleans - falsy: false, null, undefined, empty string, 0, NaN. truthy:!(falsy)
- Objects - everything else. Including functions.
- Loosely typed != Untyped. Checks at runtime. Any type can be stored in any variable including functions.
Ops
- == and != do type coersion. Use === and !== instead.
- && and || return values.
- foreach (i in object) iterates over ALL properties. Use hasOwnProperty check.
- Scope - blocks {} don't have scope. Only functions have scope. Variables inside function are not visible outside.
Objects
- Inherit from other objects.
- Are an unordered Map.
- Object literals: {} (Basis of JSON: simple data exchange format)
- New empty object: new Object() == {} == object(Object.prototype)
- New members are added by simple assignment. No need for a new class.
- "Linkage" to "parent" object - Simple inheritance.
- When setting values, only affects current object. When getting values, access goes "up", if not found in current object.
- Pass by ref.
- === is comparison on reference.
- Remove member: delete object[name]
Arrays
- Inherit from Object.
- Indexes are strings (numbers are converted).
- Array literals: [] (== new Array())
- delete array[index] leaves a "hole" (value is undefined). Use Array.prototype.splice instead.
Functions
- Are objects.
- Inherit from Object and can store name/value pairs!
- JS function == other language lambda.
- function foo() {} is equivalent to var foo = function() {}
- Can have inner functions with access to parent function scope even after parent function is invoked: Closures.
Misc
- Can augment built-in types by modifying prototypes.
- Avoid type wrappers (added to be similar to Java).
- Browser 'window' is global object. Container for all global vars and built-in objects.
- Every object is a separate namespace.
- Browser apps are all single threaded.
DOM
- id - uniquely identifies element.
- Avoid document.all. Use document.getElementById(id), document.getElementsByName(name),
.getElementsByTagName(tagName) . - Document Tree Structure: document is root. document.documentElement is HTML tag. document.body is BODY tag.
- Node: child, sibling, parent pointers. childNodes list.
- Style: node.className/node.style.styleName
- Events: Browser - event driven, single threaded, async programming model. Events targeted at particular nodes. Events cause invocation of event handlers. (Remove event handlers from nodes before deleting). node["on" + type] = function to add event handler. Event handlers send optional event object. Events bubble up from "specific" to "general".
- Dialogs: alert, confirm, prompt all block async model. Avoid them in ajaxy apps.
Detailed slides:
The Javascript Programming Langauge
Advanced Javascript
DOM
