Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf ·...
-
Upload
nguyenhanh -
Category
Documents
-
view
226 -
download
0
Transcript of Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf ·...
![Page 1: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/1.jpg)
Combining advanced JavaScript/DOM techniques
and Ajax to build better User Interfaces
Thomas Fuchs
![Page 2: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/2.jpg)
Or:Create Happy Users
Thomas Fuchs
![Page 3: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/3.jpg)
Thomas Fuchs
• wollzelle• Core team member of
Ruby on Rails
• script.aculo.us
• mir.aculo.us
![Page 4: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/4.jpg)
• Branding/Design/Web
• fluxiom Digital Asset Managementhttp://www.fluxiom.com
• http://www.wollzelle.com/
![Page 5: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/5.jpg)
Tools
![Page 6: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/6.jpg)
JavaScript,as seen by the browser
Source: http://www.pollux.franken.de/KNF/
![Page 7: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/7.jpg)
JavaScript Frameworksmake you…
![Page 8: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/8.jpg)
…write less code…
![Page 9: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/9.jpg)
…code more elegantly…
![Page 10: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/10.jpg)
…deal less withbrowser bugs…
![Page 11: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/11.jpg)
…and ultimately stay happy.
![Page 12: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/12.jpg)
Concentrate on your application…
![Page 13: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/13.jpg)
…and not onbrowser bugs.
![Page 14: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/14.jpg)
1.5
![Page 15: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/15.jpg)
Prototype isJavaScript, reloaded
![Page 16: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/16.jpg)
Ajax
![Page 17: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/17.jpg)
Basic Ajax calls(HTML snippets)
![Page 18: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/18.jpg)
Ajax Forms
![Page 19: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/19.jpg)
Ajax behavioursServer-side JavaScript generation:
Prototype automatically evaluates JavaScript when Content-type: text/javascript is set
The hot topic
of 2006!
![Page 20: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/20.jpg)
Hooks for integration with UI enhancements(like activity indicators)
![Page 21: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/21.jpg)
Extensions tobuilt-in object types
![Page 22: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/22.jpg)
![Page 23: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/23.jpg)
Enumerables
![Page 24: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/24.jpg)
![Page 25: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/25.jpg)
$ and $$
![Page 26: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/26.jpg)
![Page 27: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/27.jpg)
Direct Element extensions
![Page 28: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/28.jpg)
vs
Prototype 1.4
Prototype 1.5
![Page 29: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/29.jpg)
.update()
.replace()
.remove()
.visible()
.setStyle()
.addClassName()
(…and lots more)
![Page 30: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/30.jpg)
Events(without cross-browser
pain)
![Page 31: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/31.jpg)
![Page 32: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/32.jpg)
http://www.snook.ca/archives/000531.php
cheat sheet!
![Page 33: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/33.jpg)
Of course,just think of it as magic.
Sam Stephenson,author of Prototype
![Page 34: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/34.jpg)
1.6
![Page 35: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/35.jpg)
Visual effects
![Page 36: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/36.jpg)
Drag and Drop
![Page 37: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/37.jpg)
2 lines of code!
![Page 38: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/38.jpg)
Ready-to-use controls
![Page 39: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/39.jpg)
Real-time search
Autocompleting
Drag and Drop
Inplace editor
Slider
![Page 40: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/40.jpg)
Plus some extrasJavaScript unit testing, DOM Builder
![Page 41: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/41.jpg)
![Page 42: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/42.jpg)
Docs & Help
• Wiki:http://wiki.script.aculo.us/
• Mailing list:http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
• IRC channel:#prototype on freenode.net
![Page 43: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/43.jpg)
Add-ons
![Page 44: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/44.jpg)
event:Selectors
http://encytemedia.com/event-selectors/
![Page 45: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/45.jpg)
Lightbox JS
http://www.huddletogether.com/projects/lightbox2/
![Page 46: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/46.jpg)
Windows
http://blogus.xilinus.com/pages/javawin
![Page 47: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/47.jpg)
Visual effectsSliding panels and homegrown effects
![Page 48: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/48.jpg)
Advancedengine for visual effects
Time-based
Complex effects easily possible
![Page 49: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/49.jpg)
More than just „eye candy“
Visual feedback
Loading times „feel shorter“
Can help move away from proprietary plugins
![Page 50: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/50.jpg)
On board
Often-used effects
„Yellow Fade Technique“
Fade in and out
Sliding panels
Puff, Shake, etc.
![Page 51: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/51.jpg)
![Page 52: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/52.jpg)
![Page 53: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/53.jpg)
![Page 54: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/54.jpg)
http://www.slash7.com/articles/2006/04/22/scriptaculous-cheat-sheet-1
cheat sheet!
![Page 55: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/55.jpg)
Do-it-yourself effects
Very easy to do
Automatically use all the features from the visual
effects engine
![Page 56: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/56.jpg)
Complete tutorial &
demo code:http://www.thinkvitamin.com/features/
ajax/create-your-own-ajax-effects
![Page 57: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/57.jpg)
Activity indicatorsShow what‘s going on
![Page 58: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/58.jpg)
„There‘s something going on, wait a sec“
Revival of theanimated GIF
Both „per use“ and „global“ indicators possible
![Page 59: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/59.jpg)
„Local“ indicator
for a specific request,show/hide indicator image
![Page 60: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/60.jpg)
„Global“ indicator
for a all Ajax requests,appear/fade an indicator image
![Page 61: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/61.jpg)
Need an indicator image?
http://www.ajaxload.info/
![Page 62: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/62.jpg)
Annonyances & Debugging
![Page 63: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/63.jpg)
Lessons learnedfrom a year of Ajax
![Page 64: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/64.jpg)
Not all Browsers are created equal.
![Page 65: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/65.jpg)
CSS
![Page 66: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/66.jpg)
CSS can eliminate or save on server accesses
HTML sizes are reduced
Be creative, CSS is extremely capable
![Page 67: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/67.jpg)
JavaScript performance
![Page 68: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/68.jpg)
DOM-API can be slow
Firefox is the slowest (better in 1.5)
Caching references in JavaScript vars
.innerHTML is your friend
Venkman profiling
![Page 69: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/69.jpg)
Ajax Security
![Page 70: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/70.jpg)
Ajax is as secure as any browser request
So: Don‘t trust it
Always verify user submitted data on the server
![Page 71: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/71.jpg)
Which data format?
![Page 72: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/72.jpg)
Trivial updates: HTML
Complex updates: JavaScript
Use HTTP caching
Don‘t overengineer
be pragmatic!
![Page 73: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/73.jpg)
Some helpful hints
![Page 74: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/74.jpg)
Local calls only
• Ajax can only call originating server
• Also works with file:// URLs
• Use server-side proxying if you want to tie in other services
![Page 75: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/75.jpg)
The Back button
• The browser back button works by returning the user to the last „non-ajax“ loaded page
• Keep that in mind, especially for public sites
• Workarounds available, but aren‘t working with all browsers
![Page 76: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/76.jpg)
display: none
• Don‘t use display:none in external CSS
• Browser can‘t determine the original (built-in) display value of an element (like „block“ for DIVs, and „inline“ for SPANs)
• Use the style attribute instead:<div style=“display:none“>...</div>
![Page 77: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/77.jpg)
Internet Explorerimage cache
• Internet Explorer doesn‘t use its cache when HTML page fragments that are inserted via Ajax are loading images (IMG tag)
• Some proprietary HTTP headers exist to work around this (hey, it‘s Microsoft!):
• http://mir.aculo.us/articles/2005/08/28/internet-explorer-and-ajax-image-caching-woes
![Page 78: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/78.jpg)
The verboten IDsof Internet Explorer
• IE 6 has some bugs regarding naming ID attributes
• Don‘t use: „length“, „item“, „namedItem“, „tags“ or „urns“
• http://meyerweb.com/eric/thoughts/2005/08/29/reserved-id-values/
![Page 79: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/79.jpg)
JavaScript objectsnew Ajax.Updater('test', 'update.php', { onComplete: function() {}, insertion: Insertion.Top,});
This code works in Firefox,but doesn‘t in Safari.
evil commaof browser
death
Always test in all browsers you want to support!
![Page 80: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/80.jpg)
Debugging JavaScript
![Page 81: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/81.jpg)
No rocket surgery here
![Page 82: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/82.jpg)
The first rule of AJAX
debugging:Use Firefox
![Page 83: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/83.jpg)
+Extensions
The second rule of AJAX
debugging:Use Firefox
![Page 84: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/84.jpg)
Firebug
![Page 85: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/85.jpg)
Firebug
Version 0.4 will include a lightweight JavaScript debugger
![Page 86: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/86.jpg)
Web DeveloperExtension
![Page 87: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/87.jpg)
Venkman JavaScript Debugger
also does
profiling!
![Page 88: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/88.jpg)
Tamperdata
![Page 89: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/89.jpg)
The third rule:
Test with all browsers
you want to support
![Page 90: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/90.jpg)
Safari Web Inspector
![Page 91: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/91.jpg)
Microsoft Script Debugger for IE
• http://blogs.msdn.com/ie/archive/2004/10/26/247912.aspx
![Page 92: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/92.jpg)
„It‘s more like Web 3.0“What can you actually do with all this?
![Page 94: Combining advanced JavaScript/DOM techniques and …mir.aculo.us/stuff/orcreatehappyusers.pdf · Combining advanced JavaScript/DOM techniques and Ajax to build better User Interfaces](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b4643ce7f8b9a114c8b7784/html5/thumbnails/94.jpg)
Q & A