presentation by: Tom Friedhof

Javascript, jQuery and jQuery UI

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

What is JavaScript?

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...)

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

HTML and the DOM.

html

head

body

div

ul div div div

pli li li

a

meta title

p p

a a

The real DOMDocument

htmlElement

head

Elementbody

Elementdiv

Elementul

Elementdiv

Elementdiv

Elementdiv

Elementmeta

Elementtitle

Elementa

Elementa

Elementli

Elementli

Elementli

Elementa

Elementp

Elementp

Elementp

.getElementById(‘tabs’)

.innerHTML

id=”tabs”

One other thing to mention

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

Adding Behaviors to HTML

EVENTS

onLoad

onClick

onMouseOver

etc...

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

That’s the Basics.

Awesome!

We know the DOM

Now What?

JavaScript Libraries can work with the DOM better

than you!.

You don’t need to learn the DOM

JavaScript Libraries encapsulate browser

inconsistencies.

jQueryWrite Less. Do More

jQuery Basics

$( [find something] ).doSomething();

CSS Selector jQuery Method

Hide Children of Element

Get Elements by Class

Good Luck doing this with just the DOM and JavaScript

jQuery.com

visualjquery.com

OK... Let’s build tabs

http://www.elated.com/articles/javascript-tabs/

An Example

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.

The HTML (again)

The CSS

A topic for another day

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.

Demoindex_hard.html

You need to know a lot.

• CSS

• Document Object Model (DOM)

• JavaScript

• Language Constructs

• Verify that the JavaScript works in other browsers.

This won’t work in IE

Finds a different node in IE

I just want tabs.

Not a Computer Science Degree

The Easy Way.

jQueryand

jQuery UI

Review jQuery Basics

$( [find something] ).doSomething();

$(“#tabs”).tabs();

CSS Selector jQuery UI Method

A Few jQuery UI Methods

.draggable()

.droppable()

.selectable()

.accordion()

.slider()

etc...

Include the Library

and a one liner to implement

The DOM has to be ready

$(document).ready(function() {

// Code Goes Here

});

The DOM has to be ready

$(document).ready(function() {

$(“#tabs”).tabs();

});

The Drupal Way

Drupal.behaviors.loadTabs = function(context) {

// Code Goes Here

};

The Drupal Way

Drupal.behaviors.loadTabs = function(context) {

$(“#tabs”).tabs();

};

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);

Demoindex_easy.html

DemoDrupal.behaviors

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

Questions?