Javascript Tutorial by Thomas Fuchs

Hey guys - Portland's great, wish you were here.

Here's my notes from the first half of the tutorial. There's pretty crude, hopefully my style will improve as I go along.

You'll want to get example files here as they're the most instructive!

need to use 1.5.1 (prototype) and 1.7.1 (scriptaculous) versions of prototype and scriptaculous together

dealing with compressed file:
http://www.stevekallestad.com/blog/scriptaculous_17_compressed.html

enable gzip on server to compress javascript, etc. files
really helps speed up page serving

Prototype Stuff

Enumerables - Prototype's core
(lifted from Ruby)

see enumerables.html for examples

new in 1.5.1 $("form").request(); simple way to request ajax forms

Other new stuff:

Browser Sniffing (javascript engine sniffing really, not browser version sniffing)
usage format: Prototype.Browser.IE

$ and $$ (DOM manipulation methods)
$$('p.hint').invoke('hide');
(see selectors.html)

New in DOM Traversal:

Don't need id attr on elements
just reference wrapping element and go on
$('blah').down(); goes down to the first child
$('blah').down(2); goes down to the 2nd child

.descendantOf (ignores text nodes)

Element Methods:

$('a_div').update('blah').show().setStyle({opacity...)
.serialize()
$('person-example').serialize(); get key value pairs
" .serialize(true); get hash of values?
.addMethods(element) {block}

use with format attribute (takes regular expression) is checked with onsubmit check for valid,

(see validations.html)

.all (takes block)

much speedier - check it out here

CSS 3 Selectors supported (most)

.include
.startsWith
.toPaddedString
.childElements
.firstDescendant
throw $continue - use return instead (do we use this?)

fixed some Safari issues (it doesn't have a good regexp engine)

JSON Love (what's JSON?, seems like we should look into it!) = .toJSON();, .evalJSON();, .evalJSON(true);

(don't use offical JSON library (breaks), use development library)

(see proto151.html for examples)

yaml compatible

Future Features

focus areas: DOM, Events, Forms, Position

.readAttribute
.writeAttribute

DOM element builder

.insert(html/object, position) - position defaults to bottom

.setValue(); - on input/select, etc. elements

curry()

wrap()

defer() - special case of delay, has 1 ms delay, executes immediately after the block finishes

delay() (input # seconds) it's a more natural setTimeout

(see future.html for examples)