Scribd
Upload
91 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)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT or read online on Scribd
91 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)
We take content rights seriously. If you suspect this is your content, claim it here.
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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy