JavaScript: Ajax & DOM Manipulation

JavaScript Ajax & DOM Manipulation Matthew Batchelder

Agenda

JavaScript: What it is and isn't

JavaScript: Uses

What is the DOM?

What is AJAX?

jQuery FTW!

Manipulating page elements (the DOM) in sweet ways

Simplified AJAX

Other Coolness

Pluggability

jQuery in myPlymouth

Before We Start!

Important tools to have

Use Firefox

Firebug

JS Debugging FTW

Web Developer Toolbar (handy)

A sexy text editor (not notepad)

JS: What it is and isn’t

NOT Java despite its name

ECMAScript

More than form validation

Client-Side Scripting Language

Dynamic

Weakly Typed

Object-Oriented (Prototype-Based)

DOM Event Tool

JavaScript Sandbox

Scripts run in a “sandbox”

Can only perform web-related actions, not File-System actions

Constrained by a “Same Origin Policy”

JS: Usage

Drop this puppy in your page:

<html> <head> <title>Example JS Page</title> <script type=“text/javascript”> // javascript code goes here </script> </head> <body> … </body> </html>

JS: Literals

The following are literals…each variable is literally the data assigned.

JS: Objects

Everything in JS is an Object

Those literals can be written:

JS: Objects

Objects values are accessed using dot (“.”) notation:

example

<html> <head> <title>Examples</title> <script type="text/javascript"> var bork = 'Bork!'; var w00t = { hello: 'Greetings', yo: function(){ alert(bork + ' ' + this.hello); } }; var zomg = { nested: { iMeanReallyNested: { seriously: { out: function(){ alert('whee!'); } } } } }; w00t.yo(); zomg.nested.iMeanReallyNested.seriously.out(); </script> </head> <body> ... </body> </html>

JS: Control Structures if (bork) { //... } else { //... } while (bork) { //... } for (var i = 0; i< 10; i++) { //... } for (var element in array_of_elements) { //... } do { //... } while (bork); switch (bork) { case 1: // if bork == 1... case 'whee': // if bork == 'whee'... case false: // if bork == false... default : // otherwise ... } try { //... } catch (err) { //... }

What is the DOM?

DOM == Document Object Model

The DOM is hierarchical

<html> <head> <title>Example JS Page</title> </head> <body> <form id=“some_form”> <input type=“text” name=“bork”/> <input type=“submit” value=“Go”/> </form> </body> </html>

Finding DOM Elements

document.getElementById()

returns a specific element

document.getElementByTag()

returns an array of elements

DOM Element Attributes

nodeName

nodeValue

nodeType

parentNode

childNodes

firstChild

lastChild

previousSibling

nextSibling

attributes

ownerDocument

1 = an HTML element

2 = an element attribute

3 = text

8 = an HTML comment

9 = a document

10 = a document type definition

DOM Attributes Node Types Here’s a good article that uses these.

Manipulating the DOM

Dynamically creating and adding elements

document.createElement

appendChild

example

innerHTML

Why go through the trouble of creating Nodes?

More efficient

Easier

example

Events

Click

Dblclick

Mousedown

Mouseup

Mouseover

Mousemove

Mouseout

Keypress

Keydown

Keyup

Select

Change

Submit

Reset

Focus

Blur

Load

Unload

Abort

Error

Resize

Scroll

Mouse Keyboard Frame/Object Form

Simple Alert Box <html> <head> <title>Example Message Box Page</title> <script type=“text/javascript”> alert(‘I like butter’); </script> </head> <body> … </body> </html>

Confirm Box Bound to an Event <html> <head> <title>Example Message Box Page</title> <script type="text/javascript"> function doLoad() { document.getElementById('sweet-link').addEventListener(‘click’, confirmClick, false); }//end doLoad function confirmClick() { return confirm(‘Are you sure you wish to go to that link?’); }//end confirmClick window.addEventListener(‘load’, doLoad, false); </script> </head> <body> <a id="sweet-link" href="http://borkweb.com">BorkWeb</a> </body> </html> example

Hiding/Displaying Elements

Element visibility is a nice use of events and DOM manipulation

example

AJAX

AJAX (Asychronous Javascript and XML)

Gives you the ability to load content dynamically!

Loading content on demand

Possible usability Issues

Possible performance issues and benefits

Limitation: the sandbox prevents Cross-Site Ajax

Ajax: XMLHttpRequest

Loading content on demand:

example

WAIT!!!!!!!!!!!!! Things can actually be a bit easier. How much? Well most of the above.

WTF? jQuery. That’s what we use on campus. Its hawt.

What is jQuery?

jQuery is a sweet JavaScript Library

Its Mantra: Find stuff and do stuff with it

Focuses on simplicity

Get it here

Check out the docs

Finding Elements

Say goodbye to document.getElementById() and document.getElementByTag()

Say hello to: $()

Uses CSS Selectors to find elements and returns them as an array of elements.

Finding Elements With $ $(‘a’) $(‘.class’) $(‘#id’) $(‘.content div’) $(‘input[name=bork]’) $(‘input:first’) Here’s an example . Check out the selector syntax for more info.

Lets do some of the stuff we already did…

Adding Text Fields

Toggling Element Visibility

Ajax Content

jQuery Coolness

Browser data

$.browser

Effects

Sliding

Fading

Animating

Chaining

$(‘a’).click(function(){alert(‘hello’);return false;}).css(‘font-weight’,’bold’).fadeOut(‘slow’);

jQuery Plugins

Pluggable! Additional jQuery functionality added by including jQuery plugins .

jQuery in myPlymouth

Go Sidebar

Bookmarks

Tab Stack

Etc…

Check out the source .

The End.

Resources

Slide Examples

jQuery

Image Sprites (I talked about this briefly)

Mega Man !

JavaScript: Ajax & DOM Manipulation

0 comments

Notes on slide 1

22 Favorites & 2 Groups