JavaScript Ajax

1
JavaScriptAjax DOM Manipulation

• Matthew Batchelder

2
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

3
Before We Start!

• Important tools to have
• Use Firefox
• Firebug
• JS Debugging FTW
• Web Developer Toolbar (handy)
• A sexy text editor (not notepad)

4
JS What it is and isnt

• NOT Java despite its name
• ECMAScript
• More than form validation
• Client-Side Scripting Language
• Dynamic
• Weakly Typed
• Object-Oriented (Prototype-Based)
• DOM Event Tool

5
JavaScript Sandbox

• Scripts run in a sandbox
• Can only perform web-related actions, not
  File-System actions
• Constrained by a Same Origin Policy

6
JS Usage

• Drop this puppy in your page

lthtmlgt ltheadgt lttitlegtExample JS Pagelt/titlegt
ltscript typetext/javascriptgt // javascript
code goes here lt/scriptgt lt/headgt ltbodygt lt/body
gt lt/htmlgt
7
JS Literals

• The following are literalseach variable is
  literally the data assigned.

ltscript typetext/javascriptgt var myNumber
123 var myString Bork! var myBoolean
true var myFunction function() return
hello var myRegExp /bork/gi var
myArray 1, 2, 3 var myCarObject
color red, tires 4, windows 6
lt/scriptgt
8
JS Objects

• Everything in JS is an Object
• Those literals can be written

ltscript typetext/javascriptgt var myNumber
new Number(123) var myString new
String(Bork!) var myBoolean new
Boolean(true) var myFunction new
Function(, return hello) var myRegExp
new RegExp(bork) var myArray new Array()
myArray0 1 myArray1 2 myArray2
3 var myCarObject new Object()
myCarObject.color red myCarObject.tires
4 myCarObject.windows 6 lt/scriptgt
9
JS Objects
lthtmlgt ltheadgt lttitlegtExampleslt/titlegt ltscript
type"text/javascript"gt 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()
lt/scriptgt lt/headgt ltbodygt ... lt/bodygt lt/htmlgt

• Objects values are accessed using dot (.)
  notation
• example

10
JS Control Structures
if(bork) //... else //... while(bork)
//... for(var i 0 ilt 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)
//...
11
What is the DOM?

• DOM Document Object Model
• The DOM is hierarchical

lthtmlgt ltheadgt lttitlegtExample JS
Pagelt/titlegt lt/headgt ltbodygt ltform
idsome_formgt ltinput typetext
namebork/gt ltinput typesubmit
valueGo/gt lt/formgt lt/bodygt lt/htmlgt
12
Finding DOM Elements

• document.getElementById()
• returns a specific element
• document.getElementByTag()
• returns an array of elements

13
DOM Element Attributes
DOM Attributes
Node Types

• 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

14
Manipulating the DOM

• Dynamically creating and adding elements
• document.createElement
• appendChild
• example

15
innerHTML

• Why go through the trouble of creating Nodes?
• More efficient
• Easier
• example

16
Events
Mouse
Frame/Object
Form

• Click
• Dblclick
• Mousedown
• Mouseup
• Mouseover
• Mousemove
• Mouseout

• Select
• Change
• Submit
• Reset
• Focus
• Blur

• Load
• Unload
• Abort
• Error
• Resize
• Scroll

Keyboard

• Keypress
• Keydown
• Keyup

17
Simple Alert Box
lthtmlgt ltheadgt lttitlegtExample Message Box
Pagelt/titlegt ltscript typetext/javascriptgt
alert(I like butter) lt/scriptgt lt/headgt ltbody
gt lt/bodygt lt/htmlgt
18
Confirm Box Bound to an Event
lthtmlgt ltheadgt lttitlegtExample Message Box
Pagelt/titlegt ltscript type"text/javascript"gt
function doLoad() document.getElement
ById('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)
lt/scriptgt lt/headgt ltbodygt lta id"sweet-link"
href"http//borkweb.com"gtBorkWeblt/agt lt/bodygt lt/ht
mlgt
example
19
Hiding/Displaying Elements

• Element visibility is a nice use of events and
  DOM manipulation
• example

20
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

21
Ajax XMLHttpRequest

• Loading content on demand
• example

22
WAIT!!!!!!!!!!!!!

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

23
WTF?

• jQuery. Thats what we use on campus. Its hawt.

24
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

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

26
Finding Elements With
(a) (.class) (id) (.content
div) (inputnamebork) (inputfirst)
Heres an example. Check out the selector syntax
for more info.
27
Lets do some of the stuff we already did

• Adding Text Fields
• Toggling Element Visibility
• Ajax Content

28
jQuery Coolness

• Browser data
• .browser
• Effects
• Sliding
• Fading
• Animating
• Chaining
• (a).click(function()alert(hello)return
  false).css(font-weight,bold).fadeOut(slow)
  

29
jQuery Plugins

• Pluggable! Additional jQuery functionality added
  by including jQuery plugins.

30
jQuery in myPlymouth

• Go Sidebar
• Bookmarks
• Tab Stack
• Etc
• Check out the source.

31
The End.