1 / 16

Advanced JavaScript: Functions, the DOM, and jQuery Explained

Dive into advanced JavaScript with a focus on functions, variable scope, and the Document Object Model (DOM). Discover how functions can be assigned to variables and why naming them isn't always necessary. Learn about the importance of local variable scope and closures, as well as how parameters pass references. Explore the challenging interactions with the DOM and see why libraries like jQuery streamline the process. This session highlights the power of jQuery for animations, UI widgets, and managing events. Get ready for practical applications next week!

keilah
Télécharger la présentation

Advanced JavaScript: Functions, the DOM, and jQuery Explained

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