jQuery and Other JavaScript Frameworks for Designers

Future of Web Design NYC08

Who Am I?
Karl Swedberg

Who Am I?
Karl Swedberg Email: karl@learningjquery.com

Who Am I?
Karl Swedberg Email: karl@learningjquery.com Twitter: @kswedberg

Who Am I?
Karl Swedberg Email: karl@learningjquery.com Twitter: @kswedberg Web Developer, Fusionary Media

Who Am I?
Karl Swedberg Email: karl@learningjquery.com Twitter: @kswedberg Web Developer, Fusionary Media Evangelist for jQuery JavaScript Library

Who Am I?
Karl Swedberg Email: karl@learningjquery.com Twitter: @kswedberg Web Developer, Fusionary Media Evangelist for jQuery JavaScript Library Author of two books
2

Who Am I?
Karl Swedberg Email: karl@learningjquery.com Twitter: @kswedberg Web Developer, Fusionary Media Evangelist for jQuery JavaScript Library Author of two books Husband and father and curious fellow
2

Who Are You?

JavaScript Experience? JavaScript Library Experience? HTML / CSS Experience?

JavaScript
The Background

Inline Scripts
The <font> of JavaScript

Inline Scripts
The <font> of JavaScript
<a href="#whatisit" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Whatis','','whatis -active.png',1)"><img name="Whatis" src="buttons/whatis-unactive.png"></a>

Embedded Scripts
Like structuring a page with a bunch of <span style="display: block">

Embedded Scripts
Like structuring a page with a bunch of <span style="display: block">
<ul> <script>if(DetermineFocus('contactus.htm')) {document.write('<li class="selected">')} else {document.write('<li>')}</script> <a href="contactus.htm">Contact Us</a></li> <script>if(DetermineFocus('sitemap.htm')) {document.write('<li class="selected">')} else {document.write('<li>')}</script> <a href="sitemap.htm">Site Map</a></li> </ul>

DOM Scripting
Based on web standards Tests features, not browsers Unobtrusive

Web Standards
Content index.html Presentation style.css

Unobtrusive JavaScript
Content index.html Presentation style.css Behavior custom.js

DOM Scripting
var x,y; if (self.innerHeight) { // all except Explorer x = self.innerWidth; y = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode x = document.documentElement.clientWidth; y = document.documentElement.clientHeight; } else if (document.body) { // other Explorers x = document.body.clientWidth; y = document.body.clientHeight; }

10

DOM Scripting Books

Jeremy Keith
domscripting.com

Peter-Paul Koch
quirksmode.org

Jonathan Snook
snook.ca

11

JavaScript Library
Content index.html Presentation style.css Behavior jslibrary.js

custom.js

12

JavaScript Library*
var x = $(window).width(); var y = $(window).height();

* jQuery

13

JavaScript Libraries
The Primer

14

Find Something
"Select" elements in the DOM

15

$
16

$( )
17

$ Is an Alias

18

$ Is an Alias
Mootools
$( ID )

18

$ Is an Alias
Mootools Prototype
$( ID ) $( ID )

18

$ Is an Alias
Mootools $( ID ) Prototype $( ID ) jQuery $( kitchen sink )

18

$ Is an Alias
Mootools $( ID ) Prototype $( ID ) jQuery $( CSS Selector )

18

$$ Is an Alias

19

$$ Is an Alias
Mootools
$$( CSS Selector )

19

$$ Is an Alias
Mootools Prototype
$$( CSS Selector ) $$( CSS Selector )

19

$ and $$ Are Functions

and so are these

20

$ and $$ Are Functions

and so are these

Dojo

dojo.query( CSS Selector )

20

$ and $$ Are Functions

and so are these

Dojo YUI

dojo.query( CSS Selector ) YAHOO.util.Dom.getElementsBy( )

20

CSS Selectors
http://www.w3.org/TR/css3-selectors/

element {} #id {}

div: <div> #myid: <h2 id="myid"> .myclass: <p class="myclass"> p, a: <p></p><a></a> p span: <p><span><span> p > span: <p><span><span> li:nth-child(2): <ul><li><li>

.class {}

selector1, selector2 {}

ancestor descendant {} parent > child {} :nth-child() {}

21

CSS Selectors
Using jQuery
http://docs.jquery.com/Selectors

$('element') $('#id') $('.class')

div: <div> #myid: <h2 id="myid"> .myclass: <p class="myclass"> p, a: <p></p><a></a> p span: <p><span><span> p > span: <p><span><span> li:nth-child(2): <ul><li><li>

$('selector1, selector2') $('ancestor descendant') $('parent > child') $(':nth-child()')

22

CSS Selectors +
Using jQuery

23

CSS Selectors +
Using jQuery
and more $('prev + selector') $('prevAll ~ selector') $(':not(selector)') $('[attr]') $('[attr^=val]') etc.

23

CSS Selectors +
Using jQuery
and more and forms... $('prev + selector') $('prevAll ~ selector') $(':not(selector)') $('[attr]') $('[attr^=val]') etc. $(':input') $(':button') $(':radio') $(':checked') $(':disabled') etc.

23

CSS Selectors +
Using jQuery
and more and forms... and custom... $('prev + selector') $('prevAll ~ selector') $(':not(selector)') $('[attr]') $('[attr^=val]') etc. $(':input') $(':button') $(':radio') $(':checked') $(':disabled') etc. $(':has(descend)') $(':contains(string)') $(':gt(n)') $(':visible') $(':animated') etc.

23

Do Something

24

Do Something

25

Do Something
1. Let elements "listen" for something to happen

25

Do Something
1. Let elements "listen" for something to happen

DOM is ready

25

Do Something
1. Let elements "listen" for something to happen

DOM is ready Window is fully loaded

25

Do Something
1. Let elements "listen" for something to happen

DOM is ready Window is fully loaded user does something

25

Do Something
1. Let elements "listen" for something to happen

DOM is ready Window is fully loaded user does something another "listener" acts
25

Do Something
1. Let elements "listen" for something to happen

DOM is ready Window is fully loaded user does something another "listener" acts a certain amount of time elapses
25

Do Something

26

Do Something
2. and then do something

26

Do Something
2. and then do something a. Manipulate elements
create, insert, move, remove

26

Do Something
2. and then do something a. Manipulate elements
create, insert, move, remove

or their attributes height, width, src, href, etc.

custom

26

Do Something
2. and then do something a. Manipulate elements
create, insert, move, remove

or their attributes height, width, src, href, etc.

custom

or their contents html, text

26

Do Something
2. and then do something b. Animate elements

27

Do Something
2. and then do something b. Animate elements

slide

27

Do Something
2. and then do something b. Animate elements

slide fade

27

Do Something
2. and then do something b. Animate elements

slide fade move

27

Do Something
2. and then do something b. Animate elements

slide fade move custom

27

Do Something
2. and then do something

28

Do Something
2. and then do something c. Communicate with the server
( Ajax, Ahah )

28

Do Something
2. and then do something c. Communicate with the server
( Ajax, Ahah )

send data

28

Do Something
2. and then do something c. Communicate with the server
( Ajax, Ahah )

send data receive data

28

And More

29

And More
Each library has utilities, functions, and
methods beyond the scope of "nd something, do something"

30

And More
Each library has utilities, functions, and
methods beyond the scope of "nd something, do something" programmers happy.

These utilities, functions, and methods make

30

And More
Each library has utilities, functions, and
methods beyond the scope of "nd something, do something" programmers happy.

These utilities, functions, and methods make Most designers don't care.
30

And More
Each library has its own set of "design"
patterns (they're really programming patterns).

31

And More
Each library has its own set of "design" They can spark religious wars among
programmers. patterns (they're really programming patterns).

31

And More
Each library has its own set of "design" They can spark religious wars among
programmers. patterns (they're really programming patterns).

Most designers don't care (as long as they can

get their job done).

31

And More
Each library has its own set of "design" They can spark religious wars among
programmers. patterns (they're really programming patterns).

Most designers don't care (as long as they can

get their job done).

Library developers themselves don't care

either (the more, the merrier; healthy
competition; share alike; beautiful diversity).
31

JavaScript Libraries
The Workshop

32

We'll be using jQuery

It is not necessarily "better" than the
others, but

33

We'll be using jQuery

It is not necessarily "better" than the
others, but

It is what I know best (I've written books).

33

We'll be using jQuery

It is not necessarily "better" than the
others, but

It is what I know best (I've written books). It is my personal preference (okay, I admit
it, I'm a fanboy).

33

We'll be using jQuery

It is not necessarily "better" than the
others, but

It is what I know best (I've written books). It is my personal preference (okay, I admit
it, I'm a fanboy).

You can get up to speed quickly (some of

my best friends are designers who use jQuery).
33

Get the Libary

http://jquery.com

34

Get the Library

http://code.google.com/apis/ajaxlibs/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.js" type="text/javascript"></script>

35

Get the Library

36

Referencing Scripts in the <head>

Typical setup jQuery le goes rst

37

Referencing Scripts in the <head>

Typical setup jQuery le goes rst
<head> <!-- stuff --> <script src="jquery.js" type="text/javascript"></script> <script src="your-custom.js" type="text/javascript"></script> <!-- more stuff --> </head>

37

Document Ready

38

Document Ready
Binds a function to be executed as soon as the DOM has been successfully loaded...

38

Document Ready
Binds a function to be executed as soon as the DOM has been successfully loaded... Before images load

38

Document Ready
Binds a function to be executed as soon as the DOM has been successfully loaded... Before images load A&er stylesheets load (for now)

38

Document Ready
Binds a function to be executed as soon as the DOM has been successfully loaded... Before images load A&er stylesheets load (for now) Usually better than window.onload

38

Document Ready Code

39

Document Ready Code

$(document).ready(function() { // Stuff to do as soon as the DOM is ready; });

39

Document Ready When Not to Use

When images need to be loaded rst
$(window).bind('load', function() { // do something with images });

40

Document Ready When Not to Use

When <script> is inside <body>

41

Document Ready When Not to Use

When <script> is inside <body>
<body> <!-- more stuff --> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> // no document ready here </script> </body>

41

Plugins
plugins.jquery.com

42

Plugins
plugins.jquery.com jQuery plugins provide solutions for sophisticated problems

42

Plugins
plugins.jquery.com jQuery plugins provide solutions for sophisticated problems You'll want to use some of them over and over

42

Plugins
plugins.jquery.com jQuery plugins provide solutions for sophisticated problems You'll want to use some of them over and over Many can be used as a starting point or for inspiration

42

Plugins
plugins.jquery.com jQuery plugins provide solutions for sophisticated problems You'll want to use some of them over and over Many can be used as a starting point or for inspiration Can be difcult to nd quality

42

Plugins
Include JavaScript les as usual (with jquery.js rst)

43

Plugins
Include JavaScript les as usual (with jquery.js rst) Include CSS les when available

43

Plugins
For most plugins, select element(s) and apply the plugin method:

44

Plugins
For most plugins, select element(s) and apply the plugin method:

$(document).ready(function() {

});

44

Plugins
For most plugins, select element(s) and apply the plugin method:

$(document).ready(function() {
$('#slideshow').cycle();

});

44

Plugins
Nearly all plugins provide customized settings Nearly all settings are optional Defaults are dened by the plugin

$(document).ready(function() { $('#slideshow').cycle({ timeout: 8000, pause: true }); });

45

Plugins
Options can be set one per line for readability:

$(document).ready(function() {
$('#slideshow').cycle({ timeout: 8000, pause: true });

});

46

Plugins
UI
ui.jquery.com

47

Plugins
UI
ui.jquery.com

48

Plugins
UI
ui.jquery.com Focus on high quality

48

Plugins
UI
ui.jquery.com Focus on high quality lots of effects

48

Plugins
UI
ui.jquery.com Focus on high quality lots of effects low-level components to build upon

48

Plugins
UI
ui.jquery.com Focus on high quality lots of effects low-level components to build upon high-level widgets for drop-in solutions

48

Plugins
UI
ui.jquery.com Focus on high quality lots of effects low-level components to build upon high-level widgets for drop-in solutions work out-of-the-box

48

Plugins
UI
ui.jquery.com Focus on high quality lots of effects low-level components to build upon high-level widgets for drop-in solutions work out-of-the-box customizable

48

Plugins
UI
ui.jquery.com Focus on high quality lots of effects low-level components to build upon high-level widgets for drop-in solutions work out-of-the-box customizable themeable: (http://ui.jquery.com/themeroller/)

48

Examples
training.learningjquery.com

49

Real Examples

50

Real Example:
Shape Corporation

51

Real Example:
Shape Corporation

Bigger link target Zoom button Check it out

52

Real Example:
Canons Regular

53

Real Example:
Canons Regular

Usable drop-down navigation Input eld "overlabel" External link icon Check it out

54

Real Example:
Baker College

55

Real Example:
Baker College

Flash help "Lightbox" effect Cookies Check it out

56

Real Example:
Battle Creek Community Foundation

57

Real Example:
Battle Creek Community Foundation

Enhanced search eld - plugin External link icon - plugin

58

Create a Plugin

59

Create a Plugin
Fancy First Letter
function fancyletter() { $('#drop-caps p').each(function() { var paragraph = this; var node = paragraph; while (node.childNodes.length) { node = node.firstChild; } var text = node.nodeValue; var firstLetter = text.substr(0,1); if (/[a-zA-Z]/.test(firstLetter) ) { node.nodeValue = text.slice(1); $('<span class="">' + firstLetter + '</span>') .prependTo( paragraph ); } }); } $(document).ready(fancyletter);

60

Create a Plugin
Planning
function fancyletter() { $('#drop-caps p').each(function() { var paragraph = this; var node = paragraph; while (node.childNodes.length) { node = node.firstChild; } var text = node.nodeValue; var firstLetter = text.substr(0,1); if (/[a-zA-Z]/.test(firstLetter) ) { node.nodeValue = text.slice(1); $('<span class="fancyletter">' + firstLetter + '</span>') .prependTo( paragraph ); } }); } $(document).ready(fancyletter);

61

Create a Plugin
Encapsulate
(function($) { // code goes here. })(jQuery);

62

Create a Plugin
Namespace and Abstract
(function($) { $.fn.fancyletter = function() { // code goes here. }; })(jQuery);

63

Create a Plugin
Namespace and Abstract
// now we can do this: $(document).ready(function() { $('p').fancyletter(); });

64

Create a Plugin
Add Default Options
(function($) { $.fn.fancyletter = function() { // code goes here. }; })(jQuery);

65

Create a Plugin
Add Default Options
(function($) { $.fn.fancyletter = function(options) { var defaults = { commonClass: 'fancy-letter', ltrClassPrefix: 'ltr-', characters: '[a-zA-Z]' }; var opts = $.extend(defaults, options); return this.each(function() { // code goes here. }); }; })(jQuery);

66

Create a Plugin
Add Default Options
// now we can do this: $(document).ready(function() { $('p').fancyletter({commonClass: 'some-class'}); });

67

Create a Plugin
Make Options Public
(function($) { $.fn.fancyletter = function(options) { var opts = $.extend({}, $.fn.fancyletter.defaults, options); return this.each(function() { // code goes here. }); }; $.fn.fancyletter.defaults = { commonClass: 'fancy-letter', ltrClassPrefix: 'ltr-', characters: '[a-zA-Z]' }; })(jQuery);

68

Create a Plugin
Make Options Public
// Now we can do this : $(document).ready(function() { $.fancyletter.defaults.commonClass = 'myclass'; $('p:first').fancyletter(); $('p:gt(0)').fancyletter({ commonClass: 'anotherclass' }); });

69

Thank You!
karl@learningjquery.com

70