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.
<script type=“text/javascript”> 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 } </script>

JS: Objects
Everything in JS is an Object
Those literals can be written:
<script type=“text/javascript”> 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(); myArray[0] = 1; myArray[1] = 2; myArray[2] = 3; var myCarObject = new Object(); myCarObject.color = ‘red’; myCarObject.tires = 4; myCarObject.windows = 6; </script>

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 !

http://informatica-practica.net	1234
http://borkweb.com	653
http://www.slideshare.net	123
http://diegusweb.blogspot.com	85
http://coderwall.com	23
http://w-download.blogspot.com	20
http://twjavascript.blogspot.com	9
http://static.slideshare.net	3
http://www.diegusweb.blogspot.com	3
http://www.netvibes.com	3
http://w-download.blogspot.com.br	2
http://localhost	1
http://www.w-download.blogspot.com	1
http://www.easyrapidshare.com	1
http://translate.googleusercontent.com	1
http://www.filescon.com	1
http://copyscape.com	1
http://209.85.175.104	1
http://www.informatica-practica.net	1

JavaScript: Ajax & DOM Manipulation

by borkweb on Nov 11, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

19 Embeds 2,166

Statistics

JavaScript: Ajax & DOM Manipulation — Presentation Transcript