JavaScript: Ajax & DOM Manipulation
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

JavaScript: Ajax & DOM Manipulation

  • 44,306 views
Uploaded on

JavaScript workshop for PSU Information Desk employees. Discusses JavaScript, Ajax, DOM Manipulation, jQuery, etc.

JavaScript workshop for PSU Information Desk employees. Discusses JavaScript, Ajax, DOM Manipulation, jQuery, etc.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • nice
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
44,306
On Slideshare
41,573
From Embeds
2,733
Number of Embeds
24

Actions

Shares
Downloads
1,219
Comments
1
Likes
25

Embeds 2,733

http://informatica-practica.net 1,540
http://borkweb.com 851
http://www.slideshare.net 123
http://diegusweb.blogspot.com 88
http://w-download.blogspot.com 30
http://coderwall.com 25
http://twjavascript.blogspot.tw 24
http://w-download.blogspot.com.br 16
http://twjavascript.blogspot.com 13
http://www.netvibes.com 3
http://static.slideshare.net 3
http://www.diegusweb.blogspot.com 3
http://diegusweb.blogspot.com.ar 2
http://twjavascript.blogspot.hk 2
http://www.informatica-practica.net 1
http://www.google.co.uk 1
http://209.85.175.104 1
http://copyscape.com 1
http://translate.googleusercontent.com 1
http://www.filescon.com 1
http://www.easyrapidshare.com 1
http://www.w-download.blogspot.com 1
http://localhost 1
http://w-download.blogspot.sg 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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 !