JavaScript Ajax DOM Manipulation - PowerPoint by dyt11772

VIEWS: 49 PAGES: 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>
                        <title>Examples</title>

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


    values are            var w00t = {
                             hello: 'Greetings',
                             yo: function(){
                               alert(bork + ' ' + this.hello);
    accessed              };
                             }



    using dot (“.”)       var zomg = {
                             nested: {
                               iMeanReallyNested: {

    notation:                    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.

								
To top