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
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
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
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.
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 ļ¬rst 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.
36. You need to know a lot.
ā¢ CSS
ā¢ Document Object Model (DOM)
ā¢ JavaScript
ā¢ Language Constructs
ā¢ Verify that the JavaScript works in other
browsers.
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 speciļ¬c context
ā¢ HTML loaded via AHAH
Drupal.attachBehaviors(elem);