Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
87 views

Javascript: Ajax & Dom Manipulation

This document provides an overview of JavaScript, the DOM, AJAX, and jQuery. It discusses what JavaScript is and isn't, its uses, and how it runs in a sandbox. It explains what the DOM is and how it provides a hierarchical representation of HTML elements. It describes what AJAX is and how it allows dynamic loading of content. Finally, it introduces jQuery, a JavaScript library that simplifies DOM manipulation, event handling, AJAX interactions, and other JavaScript tasks.

Uploaded by

satyanarayana
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT or read online on Scribd
87 views

Javascript: Ajax & Dom Manipulation

This document provides an overview of JavaScript, the DOM, AJAX, and jQuery. It discusses what JavaScript is and isn't, its uses, and how it runs in a sandbox. It explains what the DOM is and how it provides a hierarchical representation of HTML elements. It describes what AJAX is and how it allows dynamic loading of content. Finally, it introduces jQuery, a JavaScript library that simplifies DOM manipulation, event handling, AJAX interactions, and other JavaScript tasks.

Uploaded by

satyanarayana
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT or read online on Scribd
You are on page 1/ 31

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
<html>
<head>

Objects 
<title>Examples</title>
 <script type="text/javascript">
var bork = 'Bork!';

values are  var w00t = {


hello: 'Greetings',

accessed 
yo: function(){
alert(bork + ' ' + this.hello);
}
};

using dot (“.”)  var zomg = {


nested: {

notation:
iMeanReallyNested: {
seriously: {
out: function(){
alert('whee!');
}
}
}

example
}
};
 w00t.yo();

zomg.nested.iMeanReallyNested.seriously.out();
</script>
</head>
<body>
...
  </body> 
</html>
JS: Control Structures
if(bork) { switch(bork) {
//... case 1:
} else { // if bork == 1...
//... case 'whee':
} // if bork == 'whee'...
case false:
while(bork) { // if bork == false...
//... default:
} // otherwise ...
}
for(var i = 0; i< 10; i++) {
//... try {
} //...
} catch(err) {
for(var element in array_of_elements) { //...
//... }
}

do {
//...
} while(bork);

   
What is the DOM?
 DOM == Document Object Model
<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>

 The DOM is hierarchical
   
Finding DOM Elements
 document.getElementById()
 returns a specific element

 document.getElementByTag()
 returns an array of elements

   
DOM Element Attributes
DOM Attributes Node Types
 nodeName  1 = an HTML element
 nodeValue  2 = an element attribute
 nodeType
 3 = text
 8 = an HTML comment
 parentNode
 9 = a document
 childNodes  10 = a document type 
 firstChild definition
 lastChild
 previousSibling
 nextSibling
 attributes
 ownerDocument
   
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
Mouse Frame/Object Form
 Click  Load  Select
 Dblclick  Unload   Change
 Mousedown  Abort
 Submit
 Mouseup  Error
 Reset
Resize
 Focus
 Mouseover 

Scroll
 Blur
Mousemove
 

 Mouseout
Keyboard
 Keypress
 Keydown
 Keyup

   
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.

   

You might also like