JavaScript the Smart Way - Getting Started with jQuery
1. JavaScript the Smart Way
Getting Started with jQuery
Drupal User Group presentation
2. Introduction to jQuery
• JavaScript / jQuery / AJAX - what’s the
difference?
– JavaScript is a scripting language that adds
interactivity to web pages
– jQuery is a JavaScript Framework
– AJAX is a particular type of functionality
• JavaScript is to jQuery as PHP is to
Drupal
4. Introduction to jQuery
• Advantages of jQuery over plain JavaScript
– Simplifies cross-browser issues
– You don’t have to write the same code over and
over again
• Advantages of jQuery over other JS
frameworks
– Very concise code
– Small file size
– completely open source
– Plugin architecture
5. jQuery Basics
• What do I need to get started?
– An understanding of CSS and the DOM
– Basic understanding of JS syntax (ideally!)
– jQuery itself
http://docs.jquery.com/Downloading_jQuery
• $(document).ready(function(){
//let’s get started!
});
10. jQuery in Drupal
• drupal_add_js($data, $type)
– Add a JavaScript file, setting or inline code to the
page, for example:
• drupal_add_js(drupal_get_path(‘module’, ‘mymodule’)
.'/myjs.js');
• drupal_add_js(array(‘myjs’=>$mysettings), ‘setting’);
• Drupal_add_js(‘var myVar = “foo”;’, ‘inline’);
• Where do I put my code?
– themers: put your .js file in your theme directory and call
drupal_add_js(drupal_get_path(‘theme’, ‘mytheme’) .
‘myjs.js’) from a tpl file
– module developers: put your .js file in your module directory
and call drupal_add_js() before you output content
11. Ajaxifying Drupal with jQuery
• Basic essentials:
– jQuery’s .ajax() or .get() method
– drupal/path
– callback function
• drupal_to_js($var)
– Converts a PHP variable into its JavaScript
equivalent.
• Drupal.parseJSON(data)
16. Quick Tabs
Create blocks of tabbed views!
http://drupal.org/project/quicktabs
17. Key Takeaways
• jQuery is a framework for writing JavaScript
• It is extremely concise and therefore easy to
learn
• It has a robust and efficient CSS-based
selector mechanism for precise selection of
DOM elements
• It is modular, so non-standard features are
available as plugins
• AJAX is a piece of cake with jQuery
• Drupal ships with jQuery already built in