![Page 1: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/1.jpg)
Painless JavaScriptAn Introduction to jQuery
Andrew Berryhttp://www.abdevelopment.ca/
![Page 2: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/2.jpg)
What is JavaScript?
• JavaScript is a programming language
• JavaScript is ECMAScript, not Java (huh?)
• JavaScript is a virtual machine
• JavaScript is used as the glue to turn web sites into web applications
2
![Page 3: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/3.jpg)
Where is JavaScript Used?
• 74.58% of all websites
• Virtually every site with advertising
• Any Google application, Digg, CBC...
• In Drupal!
• Popular Science (www.popsci.com)
3http://dev.opera.com/articles/view/mama-scripting-quantities-and-sizes/
![Page 4: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/4.jpg)
Why use JavaScript?
• Streamline the user interface
• Reduce bandwidth with AJAX or AHAH (good in theory for mobile devices)
• Do things impossible without (drag and drop, lightboxes, etc)
• Avoid Flash
4
![Page 5: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/5.jpg)
JavaScript and the DOM
• For web developers, JavaScript is the language we share with the Document Object Model
• Other languages could be used as well (Python, VBScript, etc) but only JavaScript has widespread penetration
• Just like a proper XHTML document, the DOM is (almost) tree
5
![Page 6: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/6.jpg)
Why you’ve probably avoided JavaScript
http://icanhascheezburger.com/2008/12/05/funny-pictures-eeeewwwwww-dog-germs/
![Page 7: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/7.jpg)
jQuery!
• jQuery is a small and extensible library to simplify writing JavaScript
• jQuery is included with Drupal 5 and above
• Instead of having to talk to the DOM directly, you can use your knowledge to XHTML and CSS to act as a common language
7
![Page 8: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/8.jpg)
$
![Page 9: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/9.jpg)
$(document).ready(function() { // Your awesome code goes here.});
![Page 10: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/10.jpg)
Finding Something
• $(‘p’);
• $(‘#sidebar-right’);
• $(‘.node’);
• $(‘#sidebar-left li’, ‘#sidebar-right li’);
10
![Page 11: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/11.jpg)
Doing Something
• $(‘...’).hide();
• $(‘...’).slideToggle();
• $(‘...’).show().addClass(‘new’);
11
![Page 12: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/12.jpg)
Putting it together
$(document).ready(function() { $(‘body’).hide();});
12
![Page 13: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/13.jpg)
Getting Started
• A browser
• A JavaScript console and debugger
• FireBug for Firefox, Safari 4 Public Beta, or IE 8
• Lots of RAM
• A web page - any web page with jQuery included
13
![Page 14: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/14.jpg)
Quick Demo(Don’t forget about the browser cache)
![Page 15: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/15.jpg)
Browser-specific jQuery
![Page 16: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/16.jpg)
if ($.browser.msie) { $(document).ready(function() { var widths = new Array(); $("#navbar #primary .links li a").each(function(i) { widths[i] = this.innerHTML.length * parseInt(document.body.currentStyle.fontSize) / 100 * 9; if (widths[i] < 90) widths[i] = 90; }); $("#navbar #primary .links li").each(function(i) { this.style.width = widths[i]; }); });}
![Page 17: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/17.jpg)
Modifying FormsWatch out for #type => ‘submit’ #value’s
![Page 18: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/18.jpg)
FormAPI Notes
• #ahah is great, ahah_helper is better
• Form validation
• Form caching
• The build, render, modify loop
18
![Page 19: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/19.jpg)
Drupal-specific Notes
• Drupal.behaviors instead of $(document).ready() in Drupal 6
• drupal_add_js(‘settings’, ...);
• JS caching, aggregation, and update.php
19
![Page 20: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/20.jpg)
Security
• If your JavaScript only ever modifies “front-end” aspects, security issues are minimal
• Remember that users can disable or run their own JavaScript
• Never only do JS validation; do it on the server as well
20
![Page 21: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/21.jpg)
XSS / CSRF
• Use check_plain() or input formats; fuzz with the <strong> or alert(); test
• Try to avoid using menu callbacks to directly modify data if possible
• drupal_get_token()
21
![Page 22: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/22.jpg)
jQuery Update
![Page 23: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/23.jpg)
jQuery UI
![Page 24: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/24.jpg)
Plugin Managers
• http://drupal.org/project/jq
• http://drupal.org/node/315100 (Core issue)
24
![Page 25: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/25.jpg)
Next Steps
• http://docs.jquery.com/
• http://jqueryui.com/
• http://groups.drupal.org/javascript
• http://api.drupal.org/api/file/developer/topics/javascript_startup_guide.html/6
25
![Page 26: Painless JavaScript to jQuery.pdf · jQuery! • jQuery is a small and extensible library to simplify writing JavaScript • jQuery is included with Drupal 5 and above • Instead](https://reader034.vdocuments.site/reader034/viewer/2022042910/5f40072dbb6d810de313bd37/html5/thumbnails/26.jpg)
Questions and Discussion