Javascript: Ajax & DOM Manipulation v1.2

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
Values (the stuff on the right of the equal sign) are literals.
<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
All literals are object literals .
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 problems and benefits
Limitation : No AJAX calls beyond the sandbox.
Note: The way around this is with XSS (Cross Site Scripting)…which can be dangerous if done poorly.

Ajax: XMLHttpRequest
Loading content on demand:
<script type="text/javascript"> function ajax(url, vars, callbackFunction){ var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP.3.0"); request.open("GET", url, true); request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); request.onreadystatechange = function(){ if (request.readyState == 4 && request.status == 200){ if (request.responseText){ callbackFunction(request.responseText); } } }; request.send(vars); }//end ajax function out(text){ document.getElementById('content').innerHTML = text; }//end out function ajaxCall(){ ajax('http://borkweb.com/examples/js_workshop/dynamic_content1.html','',out);return false; }//end ajaxCall function doLoad(){ document.getElementById('sweet-link').addEventListener('click', ajaxCall, false); }//doLoad window.addEventListener('load', doLoad, false); </script>
example

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

jQuery. That’s what we use on campus. It is awesome.

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 .

Resources: Slide Examples , jQuery , Image Sprites , Mega Man !

http://borkweb.com	5149
http://coderwall.com	26
http://www.slideshare.net	9
http://static.slideshare.net	2
http://translate.googleusercontent.com	2
http://webcache.googleusercontent.com	1
http://admin.totalmarketing.com	1
http://cache.baidu.com	1

Javascript: Ajax & DOM Manipulation v1.2

by borkweb

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 5,191

Statistics

Javascript: Ajax & DOM Manipulation v1.2 Presentation Transcript