Scribd
Upload
88 views

Javascript, Jquery and Jquery Ui: Presentation By: Tom Friedhof

This document summarizes a presentation about JavaScript, jQuery, and jQuery UI. It introduces JavaScript and how it can be used to add behaviors and interactivity to HTML through the Document Object Model (DOM). It then discusses how jQuery and jQuery UI simplify this by providing methods to easily manipulate the DOM without needing to learn it. Finally, it provides an example of using jQuery UI's tabs method to turn an HTML document with an unordered list into tabbed content with only one line of code.

Uploaded by

thenambika
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
88 views

Javascript, Jquery and Jquery Ui: Presentation By: Tom Friedhof

This document summarizes a presentation about JavaScript, jQuery, and jQuery UI. It introduces JavaScript and how it can be used to add behaviors and interactivity to HTML through the Document Object Model (DOM). It then discusses how jQuery and jQuery UI simplify this by providing methods to easily manipulate the DOM without needing to learn it. Finally, it provides an example of using jQuery UI's tabs method to turn an HTML document with an unordered list into tabbed content with only one line of code.

Uploaded by

thenambika
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 52

Javascript, jQuery

and jQuery UI
presentation by: Tom Friedhof

Stuff Ill cover today.


JavaScript.
The DOM (Document Object Model).
Adding Behaviors to HTML.
You dont 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
meta

title
div

ul

li

li

li

div

div

div

The real DOM


.getElementById(tabs)

Document
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

Element

Element

Element

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

Thats the Basics.

Awesome!
We know the DOM
Now What?

You dont need to


learn the DOM
JavaScript Libraries can
work with the DOM better
than you!.

JavaScript Libraries
encapsulate browser
inconsistencies.

jQuery

Write 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... Lets build tabs

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

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()
showTab()
getFirstChildWithTagName()
sets up the tabs

displays a clicked tab's content and highlights the tab.

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.

Demo
index_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 wont work in IE

Finds a different node in IE

I just want tabs.

Not a Computer
Science Degree

The Easy Way.

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

Demo
index_easy.html

Demo
Drupal.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-lowdownjquery-drupal-part-two
http://www.chapterthree.com/blog/josh_koenig/
handling_aysnchronous_data_drupal_session_materials
https://developer.mozilla.org/en/JavaScript

Questions?

You might also like