1 / 16

JavaScript Advanced Functions and DOM Manipulation with jQuery

Dive deeper into JavaScript functions and variable scope, explore closures, understand the DOM, and learn the power of jQuery for efficient web content interaction.

athorton
Download Presentation

JavaScript Advanced Functions and DOM Manipulation with jQuery

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript: JS301 • Week 2: Advanced Functions, the DOM & jQuery

  2. More on Functions • Functions can be assigned to variables! • http://jsfiddle.net/zymsys/REu39/

  3. More on Functions • Functions don’t need names! • http://jsfiddle.net/zymsys/B2Yn4/

  4. Variable Scope • Up until now our variables have all been global, that that’s BAD!http://jsfiddle.net/zymsys/UnZe8/ • We can solve this by giving our variables local scope:http://jsfiddle.net/zymsys/d2NWX/

  5. Variable Scope • Variables which aren’t defined with ‘var’ are automatically global, which is BAD. • So ALWAYS declare your variables with ‘var’. • Wrapping code in a function is another way to avoid placing anything in the global scope.

  6. Closures • Variables in JavaScript are visible within the closure they are defined in. • Closures are usually functions • http://jsfiddle.net/zymsys/Lu8Kz/

  7. Parameters are References • When you pass a parameter to a function you pass a reference to it, not a copy of it. • http://jsfiddle.net/zymsys/tL9GX/

  8. The Document Object Model (DOM) • The DOM is an object oriented interface which allows JavaScript to interact with web content. • http://jsfiddle.net/zymsys/xef4K/ • http://jsfiddle.net/zymsys/MDTb8/

  9. Working with the DOM is Difficult • In the last example we saw how difficult it can be to do something as simple as tweak an element’s style • There’s a lot of that to deal with, and the cross-browser issues that follow • This is why libraries like jQuery are so popular

  10. jQuery • Here’s the same example with jQuery: • http://jsfiddle.net/zymsys/JmdMM/

  11. Popular Libraries • http://jquery.com/ • http://developer.yahoo.com/yui/ • http://dojotoolkit.org/ • http://mootools.net/ These are just a few of the more popular libraries:

  12. jQuery FTW! • jQuery is very popular: • Easy to find solutions with Google • Lots of plugins and examples • Lots of other libraries already depend on jQuery • jQuery is expressive and relatively easy

  13. jQuery Events • Here’s an update to our jQuery example: • http://jsfiddle.net/zymsys/JmdMM/3/ • No impact on our global namespace!

  14. jQuery Animation • jQuery makes animation easy, just don’t get carried away! • http://jsfiddle.net/zymsys/FaB2f/

  15. jQuery UI • User interface widgets and visual effects • Plenty of demos on the jQuery UI site:http://jqueryui.com/demos/

  16. Next Week • Practical JavaScript • Form Validation • AJAX • Rich User Interfaces • Requests?

More Related