Your SlideShare is downloading. ×
0
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Javascript jQuery jQuery Ui
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Javascript jQuery jQuery Ui

7,522

Published on

High Desert Drupal Talk

High Desert Drupal Talk

1 Comment
14 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,522
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
422
Comments
1
Likes
14
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 8. One other thing to mention
  • 9. 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
  • 10. Adding Behaviors to HTML EVENTS
  • 11. onLoad
  • 12. onClick
  • 13. onMouseOver
  • 14. etc... http://www.w3schools.com/jsref/jsref_events.asp
  • 15. That’s the Basics.
  • 16. Awesome! We know the DOM Now What?
  • 17. You don’t need to learn the DOM JavaScript Libraries can work with the DOM better than you!.
  • 18. JavaScript Libraries encapsulate browser inconsistencies.
  • 19. jQuery Write Less. Do More
  • 20. jQuery Basics $( [find something] ).doSomething(); CSS Selector jQuery Method
  • 21. Hide Children of Element
  • 22. Get Elements by Class Good Luck doing this with just the DOM and JavaScript
  • 23. jQuery.com
  • 24. visualjquery.com
  • 25. OK... Let’s build tabs
  • 26. An Example http://www.elated.com/articles/javascript-tabs/
  • 27. 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.
  • 28. The HTML (again)
  • 29. The CSS A topic for another day
  • 30. 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.
  • 31. Demo index_hard.html
  • 32. You need to know a lot. • CSS • Document Object Model (DOM) • JavaScript • Language Constructs • Verify that the JavaScript works in other browsers.
  • 33. This won’t work in IE Finds a different node in IE
  • 34. I just want tabs. Not a Computer Science Degree
  • 35. The Easy Way.
  • 36. jQuery and jQuery UI
  • 37. Review jQuery Basics $( [find something] ).doSomething(); $(“#tabs”).tabs(); CSS Selector jQuery UI Method
  • 38. A Few jQuery UI Methods .draggable() .droppable() .selectable() .accordion() .slider() etc...
  • 39. Include the Library and a one liner to implement
  • 40. The DOM has to be ready $(document).ready(function() { // Code Goes Here });
  • 41. The DOM has to be ready $(document).ready(function() { $(“#tabs”).tabs(); });
  • 42. The Drupal Way Drupal.behaviors.loadTabs = function(context) { // Code Goes Here };
  • 43. The Drupal Way Drupal.behaviors.loadTabs = function(context) { $(“#tabs”).tabs(); };
  • 44. 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);
  • 45. Demo index_easy.html
  • 46. Demo Drupal.behaviors
  • 47. 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
  • 48. Questions?

×