Dave McFarland

Introduction:

• Many websites (including macworld)
• Many Books (missing mauals)
• Teaches at PSU

What is Javascript?

Starts with what is Javascript?

Interactivity! Shows great examples: Apple, twistori …

JS is About:

1. selecting page elements
2. manipulating page elements

Uses stripped table as an example.

Shows some code, but quickly jumps to JQuery (the JS library)

He is really hot for JQuery, but does mention the other available libs like scriptaculous, dojo and mootools.

JQuery

Has ready function. Everything goes in here.

$(document).ready(function(){

});

DOM Document Object Model

Comprised of nodes

GetElementById = $(‘#id’); Boom – that is it!

You can use any valid CSS 1,2 or 3 selector to grab elements. JQuery understands them all – even if the web browser doesn’t.

Demo: Striped

$(‘table.striped tr:even’).addClass(‘even’); // Sweet

Note that this is select.modify loop!

Demo: Make all links to external pages pop a new window.

He ends up adding _blank. WTF? He claims that this is OK because a validator won’t notice since this is added after the page load! Um… I think that this is a bad point of view. “_black” is deprecated for a reason. The day Browser X decided not to use it you are going to be forced to update your code.

Built in functionality:

addClass, removeClass, add CSS Property

JS also listens to events:

1. Select
2. Add event listener
3. Add event handler

Common events: Mouse, Click, Window, Key and Form events.

Demo: Show/hide box.

The code is very simple (still a little much to type here). Much better then the longer code that I am writing now.

He shows a great page of examples. The URL in the demonstration is local – hopfully it is published somewhere live.

The last example employed the “anonymous” function. David runs thought the basics of a function definition and call routine. Uses a fictional getStarbucks(); in example. Personally, I prefer the tastier getFairtradeFromLocalVendorWithFreeWifi();

Demo: one page faq (show/hide)

Use “toggle”

Someone in the audience asks about the overhead of altering the page after it is loaded. Notes that the normal way “onLoad” causing blinking… Lucky for us, Jquery “document.ready” doesn’t use onLoad. It does not wait for images, flash and css to load! So the blink becomes much less of a problem.

Demo: Image gallery rollover.

Starts with image preload (wouldn’t be necessary if sliding door technique was used, but…).

He takes a moment to explain variables. Basic stuff, but his animated explanation is at least amusing. “a variable is a box”

Then, onto the rest of the example… and he quickly runs into a regular expression. Shows what it does, but no cute example… so sad.

$this.hover(

function(){ mouseOver stuff },

function(){ mouseOut stuff }

};

“hover” is for mouse events just like “toggle” is for click events.

He then adds lightBox.

Next Demo: Something about checkboxes

Sorry – I was fiddling with the internet connection instead of paying attention.

JQuery does have animate function to fade, and move DOM objects.

The wonderful world of plugings

• google maps
• ajax
• form info
• images and effects

Plugin: Validate

Programed by core member of plugin team. Shows error right under the input – does not wait for submit to be clicked!

Has whole list of validation rules: email, number, credit card. We currently do this, but only have a few set up. Uses class/title to set rule/error – just like we do! It would be easy to switch out our current validation function with this.

sidenote: he recommends view source chart gabriel mcgovern (dot com) › Edit — WordPressextension for FF. It shows current DOM source.

Plugin: Table Sorter

This is another one that we have, but looks really nice. It would also allow us to easily add animated transitions.

Addition: JQuery UI

User interface similar to scriptaculous.

Examples: drag/drop, accordion, tab effects …

I want to see coda slider on the portal!

Thanks

www.javascriptfordesigners.com/webvisions

Questions:

Size of library (compressed)?