JavaScript: Ajax & DOM Manipulation

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    20 Favorites & 2 Groups

    JavaScript: Ajax & DOM Manipulation - Presentation Transcript

    1. JavaScript Ajax & DOM Manipulation Matthew Batchelder
    2. 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
    3. Before We Start!
      • Important tools to have
        • Use Firefox
          • Firebug
          • JS Debugging FTW
          • Web Developer Toolbar (handy)
        • A sexy text editor (not notepad)
    4. 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
    5. JavaScript Sandbox
      • Scripts run in a “sandbox”
        • Can only perform web-related actions, not File-System actions
        • Constrained by a “Same Origin Policy”
    6. 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>
    7. 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>
    8. 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>
    9. JS: Objects
      • Objects values are accessed using dot (“.”) notation:
      • example
      <html> <head> <title>Examples</title> <script type=&quot;text/javascript&quot;> 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>
    10. 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) { //... }
    11. 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>
    12. Finding DOM Elements
      • document.getElementById()
        • returns a specific element
      • document.getElementByTag()
        • returns an array of elements
    13. 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.
    14. Manipulating the DOM
      • Dynamically creating and adding elements
        • document.createElement
        • appendChild
      • example
    15. innerHTML
      • Why go through the trouble of creating Nodes?
      • More efficient
      • Easier
      • example
    16. 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
    17. Simple Alert Box <html> <head> <title>Example Message Box Page</title> <script type=“text/javascript”> alert(‘I like butter’); </script> </head> <body> … </body> </html>
    18. Confirm Box Bound to an Event <html> <head> <title>Example Message Box Page</title> <script type=&quot;text/javascript&quot;> 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=&quot;sweet-link&quot; href=&quot;http://borkweb.com&quot;>BorkWeb</a> </body> </html> example
    19. Hiding/Displaying Elements
      • Element visibility is a nice use of events and DOM manipulation
      • example
    20. 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
    21. Ajax: XMLHttpRequest
      • Loading content on demand:
      • example
    22. WAIT!!!!!!!!!!!!! Things can actually be a bit easier. How much? Well most of the above.
    23. WTF? jQuery. That’s what we use on campus. Its hawt.
    24. 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
    25. 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.
    26. 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.
    27. Lets do some of the stuff we already did…
      • Adding Text Fields
      • Toggling Element Visibility
      • Ajax Content
    28. jQuery Coolness
      • Browser data
        • $.browser
      • Effects
        • Sliding
        • Fading
        • Animating
      • Chaining
        • $(‘a’).click(function(){alert(‘hello’);return false;}).css(‘font-weight’,’bold’).fadeOut(‘slow’);
    29. jQuery Plugins
      • Pluggable! Additional jQuery functionality added by including jQuery plugins .
    30. jQuery in myPlymouth
      • Go Sidebar
      • Bookmarks
      • Tab Stack
      • Etc…
      • Check out the source .
    31. The End.
      • Resources
      • Slide Examples
      • jQuery
      • Image Sprites (I talked about this briefly)
      • Mega Man !

    borkwebborkweb, 2 years ago

    custom

    17429 views, 20 favs, 11 embeds more stats

    JavaScript workshop for PSU Information Desk employ more

    More Info

    © All Rights Reserved

    Go to text version
    • Total Views 17429
      • 16560 on SlideShare
      • 869 from embeds
    • Comments 0
    • Favorites 20
    • Downloads 761
    Most viewed embeds
    • 465 views on http://informatica-practica.net
    • 335 views on http://borkweb.com
    • 57 views on http://diegusweb.blogspot.com
    • 3 views on http://www.netvibes.com
    • 3 views on http://static.slideshare.net

    more

    All embeds
    • 465 views on http://informatica-practica.net
    • 335 views on http://borkweb.com
    • 57 views on http://diegusweb.blogspot.com
    • 3 views on http://www.netvibes.com
    • 3 views on http://static.slideshare.net
    • 1 views on http://www.informatica-practica.net
    • 1 views on http://w-download.blogspot.com
    • 1 views on http://www.easyrapidshare.com
    • 1 views on http://www.filescon.com
    • 1 views on http://209.85.175.104
    • 1 views on http://localhost

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as innappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel

    Categories

    Groups / Events