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
![Page 1: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/1.jpg)
Matthew Batchelder
![Page 2: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/2.jpg)
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
![Page 3: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/3.jpg)
Before We Start!
Important tools to haveUse Firefox
○ Firebug○ JS Debugging FTW○ Web Developer Toolbar (handy)
A sexy text editor (not notepad)
![Page 4: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/4.jpg)
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
![Page 5: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/5.jpg)
JavaScript Sandbox
Scripts run in a “sandbox”Can only perform web-related actions, not
File-System actionsConstrained by a “Same Origin Policy”
![Page 6: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/6.jpg)
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>
![Page 7: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/7.jpg)
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>
![Page 8: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/8.jpg)
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>
![Page 9: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/9.jpg)
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>
![Page 10: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/10.jpg)
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) { //...}
![Page 11: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/11.jpg)
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>
![Page 12: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/12.jpg)
Finding DOM Elements
document.getElementById()returns a specific element
document.getElementByTag()returns an array of elements
![Page 13: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/13.jpg)
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.
![Page 14: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/14.jpg)
Manipulating the DOM
Dynamically creating and adding elementsdocument.createElementappendChild
example
![Page 15: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/15.jpg)
innerHTML
Why go through the trouble of creating Nodes?
More efficient Easier example
![Page 16: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/16.jpg)
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
![Page 17: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/17.jpg)
Simple Alert Box
<html><head> <title>Example Message Box Page</title> <script type=“text/javascript”> alert(‘I like butter’); </script></head><body>…</body></html>
![Page 18: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/18.jpg)
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
![Page 19: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/19.jpg)
Hiding/Displaying Elements Element visibility is a nice use of events
and DOM manipulation
example
![Page 20: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/20.jpg)
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.
![Page 21: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/21.jpg)
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
![Page 22: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/22.jpg)
Things can actually be a bit easier.
How much? Well most of the above.
![Page 23: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/23.jpg)
jQuery. That’s what we use on campus. It is awesome.
![Page 24: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/24.jpg)
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
![Page 25: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/25.jpg)
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.
![Page 26: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/26.jpg)
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.
![Page 27: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/27.jpg)
Lets do some of the stuff we already did… Adding Text Fields Toggling Element Visibility Ajax Content
![Page 28: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/28.jpg)
jQuery Coolness Browser data
$.browser Effects
SlidingFadingAnimating
Chaining $(‘a’).click(function(){alert(‘hello’); return
false;}).css(‘font-weight’,’bold’).fadeOut(‘slow’);
![Page 29: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/29.jpg)
jQuery Plugins
Pluggable! Additional jQuery functionality added by including jQuery plugins.
![Page 30: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/30.jpg)
jQuery in myPlymouth
Go Sidebar Bookmarks Tab Stack Etc…
Check out the source.
![Page 31: JavaScript Ajax & DOM Manipulation](https://reader033.vdocuments.us/reader033/viewer/2022061612/5681595b550346895dc697f4/html5/thumbnails/31.jpg)
Resources: Slide Examples, jQuery, Image Sprites, Mega Man!