JavaScript Frameworks

1
JavaScript Frameworks jQuery
The tenth week of CA273 Advanced Web Design
2
JavaScript Frameworks jQuery
An overview of the class

• JavaScript Frameworks
• How to add jQuery
• Things to do with jQuery
• jQuery UI?

3
JavaScript Libraries
One pro and one con
Makes life easier
Does stuff way over our heads
4
JavaScript Libraries
5 Biggies
5
JavaScript Libraries
5 4 ways to have more class
Prototype
Event.observe(window, 'load', onLoad) function
onLoad() ('li').each(function(element)
element.addClassName('active')
)
6
JavaScript Libraries
5 4 ways to have more class
Dojo
dojo.addOnLoad(function()
dojo.query(li).addClass ('active') )
7
JavaScript Libraries
5 4 ways to have more class
Mootools
window.addEvent(domready, function()
(li).addClass ('active') )
8
JavaScript Libraries
5 4 ways to have more class
jQuery
(document).ready(function()
(li).addClass ('active') )
9
So Why jQuery?
Yeah John
10
jQuery
Some basics to know

• Linking to jQuery
• On load
• Selecting elements (exercise)
• Running events (exercises)

11
jQuery
Calling the mothership

• Hosting on your own server
• Googles API
• - direct link
• - google.load()
• Examples of each

ltscript src"http//www.google.com/jsapi"gtlt/script
gt ltscriptgtgoogle.load("jquery", "1")lt/scriptgt
Google AJAX Libraries API
12
jQuery
Wait for it

• Link to jQuery source file
• Link to your own queries (myqueries.js)
• Run once DOM has loaded

(document).ready(function() //Your code
goes here )
13
jQuery
Go fish for some markup

• element (p").addClass(copy")
• ID (header").addClass(extended")
• class (.external").addClass(highlight")
• multiple (ol, ul").addClass(toggle")
• even, odd (treven").addClass(highlighted)
  
• contains (licontains(To Do)").addClass(to
  do")
• attributevalue (ahrefhttp//dabrook.org'
  ).addClass(local")

jQuery documentation for selectors
14
jQuery
Exercise Use jQuery selectors

• 1. Use http//html-ipsum.com
• 2. Apply a few classes to the markup
• 3. Setup jQuery and an external.js file
• 4. Add classes to various elements using the
  jQuery selectors

15
jQuery Toggle Example
The logic

• Task Toggle content when click on a link
• Hide the content
• Know when link is clicked
• Show content
• Know when link is clicked again
• Either show or hide the content

16
jQuery Toggle Example
The code
Task Toggle content when click on a link
(document).ready(function()
(li).addClass (hidden')
(a.toggle).click(function()
(li).toggleClass(hidden') return
false ) )
17
jQuery
Exercise Toggle content via a link

• 1. Use your file from the selector exercise
• 2. Decide what you want to toggle and how
• 3. Use jQuery to add the toggle behavior to the
  site
• 4. Think about ways we could improve the toggle

18
jQuery Toggle Example
Making it better

• Task Toggle content when click on a link
• Change what the link says
• Add animation to slide
• Use cookies to remember settings

19
Making it better
(document).ready(function()
(li).addClass (hidden')
(a.toggle).click(function()
(li).slideToggle(slow') if
((this).html() Hide Content')
(this).html(Show Content')
else
(this).html(Hide Content')
return false ) )
20
Wrap Up
Write less, do more, understand hopefully

• Still have to know JS
• jQuery is easy
• Be tasteful
• Behavior is thethird layer