High Desert Drupal Talk

1. Javascript, jQuery
and jQuery UI
presentation by: Tom Friedhof

2. Stuff I’ll cover today.
• JavaScript.
• The DOM (Document Object Model).
• Adding Behaviors to HTML.
• You don’t need to learn the DOM
• jQuery
• jQuery UI Tabs
• jQuery the Drupal Way

3. What is JavaScript?

4. What is JavaScript?
• Client Side Scripting Language
• JavaScript is not Java
• Used to provide instant feedback
• Better Usability
• Richer Web Applications
• Works the DOM (i.e. HTML, XML, etc...)

5. What is the DOM?
The Document Object Model (DOM) is an
API for HTML and XML documents. It
provides a structural representation of
the document, enabling you to modify its
content and visual presentation. Essentially,
it connects web pages to scripts or
programming languages.
https://developer.mozilla.org/en/DOM

6. HTML and the DOM.
html
head
body
meta title
div
ul div div div
li li li p p p
a a a

7. The real DOM
Document .getElementById(‘tabs’)
html
Element
head
id=”tabs”
Element
body
Element Element
meta title
Element .innerHTML
div
Element Element Element Element
ul div div div
Element Element Element Element Element Element
li li li p p p
Element Element Element
a a a

9. One other thing to mention

10. The DOM is NOT JavaScript
Blue is for JavaScript, Red is for DOM
var anchorTags =
document.getElementsByTagName(“a”)
for (var i = 0;i <anchorTags.length; i++)
{
alert(“Href of this a element is: “ +
anchorTags[i].href);
}
https://developer.mozilla.org/en/The_DOM_and_JavaScript

11. Adding Behaviors to HTML
EVENTS

12. onLoad

13. onClick

14. onMouseOver

15. etc...
http://www.w3schools.com/jsref/jsref_events.asp

16. That’s the Basics.

17. Awesome!
We know the DOM
Now What?

18. You don’t need to
learn the DOM
JavaScript Libraries can
work with the DOM better
than you!.

19. JavaScript Libraries
encapsulate browser
inconsistencies.

20. jQuery
Write Less. Do More

21. jQuery Basics
$( [find something] ).doSomething();
CSS Selector jQuery Method

22. Hide Children of Element

23. Get Elements by Class
Good Luck doing this with just the DOM and JavaScript

25. jQuery.com

26. visualjquery.com

27. OK... Let’s build tabs

28. An Example
http://www.elated.com/articles/javascript-tabs/

29. Objective.
• Turn an HTML Document with an
Unordered List into tabbed content.
• Format the HTML using CSS.
• Add Behavior so that you can change
tabs onClick of the tab name.

30. The HTML (again)

32. The CSS
A topic for another day

34. Four JavaScript Functions
• init() .
sets up the tabs
• showTab() displays a clicked tab's content and highlights the tab.
• getFirstChildWithTagName() is a helper
function that retrieves the first child of a given element that has a given tag
name.
• getHash() is another short helper function that takes a URL and
returns the part of the URL that appears after the hash (#) symbol.

35. Demo
index_hard.html

36. You need to know a lot.
• CSS
• Document Object Model (DOM)
• JavaScript
• Language Constructs
• Verify that the JavaScript works in other
browsers.

37. This won’t work in IE
Finds a different node in IE

38. I just want tabs.
Not a Computer
Science Degree

39. The Easy Way.

40. jQuery
and
jQuery UI

41. Review jQuery Basics
$( [find something] ).doSomething();
$(“#tabs”).tabs();
CSS Selector jQuery UI Method

42. A Few jQuery UI Methods
.draggable()
.droppable()
.selectable()
.accordion()
.slider()
etc...

43. Include the Library
and a one liner to implement

44. The DOM has to be ready
$(document).ready(function() {
// Code Goes Here
});

45. The DOM has to be ready
$(document).ready(function() {
$(“#tabs”).tabs();
});

46. The Drupal Way
Drupal.behaviors.loadTabs = function(context) {
// Code Goes Here
};

47. The Drupal Way
Drupal.behaviors.loadTabs = function(context) {
$(“#tabs”).tabs();
};

48. Why use Drupal.behaviors?
• Ability to override JS
• Behaviors are re-attachable
• Attach Behaviors to a specific context
• HTML loaded via AHAH
Drupal.attachBehaviors(elem);

49. Demo
index_easy.html

50. Demo
Drupal.behaviors

51. Resources
http://jquery.com and http://jqueryui.com
http://www.elated.com/articles/javascript-tabs/
http://api.drupal.org/api/file/developer/topics/javascript_startup_guide.html/6
http://raincitystudios.com/blogs-and-pods/katherine-bailey/the-lowdown-
jquery-drupal-part-two
http://www.chapterthree.com/blog/josh_koenig/
handling_aysnchronous_data_drupal_session_materials
https://developer.mozilla.org/en/JavaScript

52. Questions?