javascript ajax & dom manipulation
DESCRIPTION
Matthew Batchelder. JavaScript Ajax & DOM Manipulation. 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. - PowerPoint PPT PresentationTRANSCRIPT
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 haveUse 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
DynamicWeakly TypedObject-Oriented (Prototype-Based)
DOM Event Tool
JavaScript Sandbox
Scripts run in a “sandbox”Can only perform web-related actions, not
File-System actionsConstrained 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 ObjectAll 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 elementsdocument.createElementappendChild
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 demandPossible usability IssuesPossible 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 LibraryIts Mantra: Find stuff and do stuff with itFocuses 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
SlidingFadingAnimating
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!