Your SlideShare is downloading. ×
0
JavaScript the Smart Way
 Getting Started with jQuery
 Drupal User Group presentation
Introduction to jQuery
• JavaScript / jQuery / AJAX - what’s the
  difference?
  – JavaScript is a scripting language that...
Introduction to jQuery
• What can jQuery do for me?




   “FLASH”Y STUFF



                    AJAX


                  ...
Introduction to jQuery
• Advantages of jQuery over plain JavaScript
  – Simplifies cross-browser issues
  – You don’t have...
jQuery Basics
• What do I need to get started?
  – An understanding of CSS and the DOM
  – Basic understanding of JS synta...
Selectors
• CSS
 $(‘a’), $(‘#container’),
 $(‘div.ajaxContainer’),
 $(‘li:first-child’)
• X-Path:
 $(‘a[title]’), $(‘div[u...
Some Useful Methods

• DOM Traversal
  – .parent(), .siblings(), .next()
• Manipulation
  – .html(), .empty(), .append(con...
Chaining

• $(‘#someElement’)
  .parent().parent()
  .find(‘div.green’)
  .hide().end()
  .siblings().find(‘div.blue’)
  ....
Show/Hide Example
$(document).ready(function() {
  $('a.showhide').click(function()
  {
     $(this).parent().parent()
   ...
jQuery in Drupal
• drupal_add_js($data, $type)
  – Add a JavaScript file, setting or inline code to the
    page, for exam...
Ajaxifying Drupal with jQuery
• Basic essentials:
  – jQuery’s .ajax() or .get() method
  – drupal/path
  – callback funct...
Ajaxifying Drupal with jQuery




                         12
Ajaxifying Drupal with jQuery
‣ $items[] = array('path' => 'ajax/path',
    'type' => MENU_CALLBACK,
    'access' => TRUE,...
Ajaxifying Drupal with jQuery

‣ $(‘a.ajax-button’).click(function() {
    $.get(this.href, function(data){
      var resu...
Resources

• http://jquery.com
• Book: Learning jQuery
          » PACKT Publishing

• Cheat sheets:
          » http://co...
Quick Tabs


       Create blocks of tabbed views!




http://drupal.org/project/quicktabs
Key Takeaways
• jQuery is a framework for writing JavaScript
• It is extremely concise and therefore easy to
  learn
• It ...
Upcoming SlideShare
Loading in...5
×

JavaScript the Smart Way - Getting Started with jQuery

9,556

Published on

An introduction to jQuery aimed at Drupal themers and developers. Briefly covers using ajax in Drupal.

Published in: Business, Technology
2 Comments
7 Likes
Statistics
Notes
  • Thanks...Nice presentation.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • There is an error on this slide: when it says themers should make their call to drupal_add_js() from a tpl file, this is incorrect - it is too late at the tpl stage to add the JavaScript because the scripts variable has already been populated. You should call drupal_add_js() from your template.php file.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
9,556
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
272
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "JavaScript the Smart Way - Getting Started with jQuery"

  1. 1. JavaScript the Smart Way Getting Started with jQuery Drupal User Group presentation
  2. 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
  3. 3. Introduction to jQuery • What can jQuery do for me? “FLASH”Y STUFF AJAX TABS
  4. 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. 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! });
  6. 6. Selectors • CSS $(‘a’), $(‘#container’), $(‘div.ajaxContainer’), $(‘li:first-child’) • X-Path: $(‘a[title]’), $(‘div[ul]’), $(‘a[href^=“mailto:”]’) • Custom: $(‘li:eq(1)’), $(‘tr:not([th]):odd’)
  7. 7. Some Useful Methods • DOM Traversal – .parent(), .siblings(), .next() • Manipulation – .html(), .empty(), .append(content) • Events – .ready(fn), .hover(fn1, fn2), .click(fn) • Effects – .slideToggle(), .show(), .hide()
  8. 8. Chaining • $(‘#someElement’) .parent().parent() .find(‘div.green’) .hide().end() .siblings().find(‘div.blue’) .show().end() .parent().next() .addClass(‘redBorder’);
  9. 9. Show/Hide Example $(document).ready(function() { $('a.showhide').click(function() { $(this).parent().parent() .find('div.view-data-body') .slideToggle(); return false; }); }); see example
  10. 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. 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)
  12. 12. Ajaxifying Drupal with jQuery 12
  13. 13. Ajaxifying Drupal with jQuery ‣ $items[] = array('path' => 'ajax/path', 'type' => MENU_CALLBACK, 'access' => TRUE, 'callback' => 'get_ajax_image'); ‣ function get_ajax_image($nid) { //some code to retrieve the image print drupal_to_js(array( ‘title’ => $image_title, ‘path’ => $image_path )); }
  14. 14. Ajaxifying Drupal with jQuery ‣ $(‘a.ajax-button’).click(function() { $.get(this.href, function(data){ var result = Drupal.parseJSON(data); $('div.title').html(result['title']); $('div.image').html(result['path']); }); return false; });
  15. 15. Resources • http://jquery.com • Book: Learning jQuery » PACKT Publishing • Cheat sheets: » http://colorcharge.com/jquery • Other online resources » http://www.learningjquery.com » http://15daysofjquery.com » http://visualjquery.com
  16. 16. Quick Tabs Create blocks of tabbed views! http://drupal.org/project/quicktabs
  17. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×