Essential YUI

970 views

Published on

Brief introduction to Yahoo's YUI library. Given as a presentation to college students who were new to JavaScript.

Discusses DOM manipulation,

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
970
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Essential YUI

  1. 1. Essential YUI { An introduction to Yahoo!’s JavaScript library Derrick McMillen, March 2012
  2. 2. Why do we need libraries?• The DOM is difficult to use, verbose, and inconsistent (see DOM levels).• We must always respect the global namespace !• Building advanced web applications requires abstraction.• Leveraging other developer’s code makes our lives easier.
  3. 3. The Yahoo! User Interfacelibrary is a tool to help youavoid these pitfalls!
  4. 4. The YUI Seed<html><body> <!-- your page content --> <!-- YUI seed--> <script src=‚…"></script> <script src=‚…"> // your JavaScript </script></body></html>
  5. 5. Quiz// finds the greatest common divisorfunction gcd(a, b) { if(b === 0) return a; else { x = a % b; return gcd(b, x); }}x = 5;y = gcd(12, 4) + x; // what is y?
  6. 6. The YUI LoaderYUI().use(‘node’, function(Y) { Y.log(‚Hello world!‛);});
  7. 7. DOM nodesvar d = document;var body = d.getElementsByTagName(‘body’)[0],p = d.createElement(‘p’),txt = d.createTextNode(‘Hello world!’);body.appendChild(p.appendChild(txt));
  8. 8. DOM nodesYUI().use(‘node’, function(Y) { var body = Y.one(‘body’); body.append(Y.Node.create( ‘<p>Hello world!</p>’);});
  9. 9. DOM EventsYUI().use(‘event’, function(Y) { var button = Y.one(‘#button’); Y.on(‘click’, function(e) { alert(‘hello’); });});
  10. 10. DOM EventsYUI().use(‘event’, function(Y) { var mask = Y.one(‘#mask’); Y.on(‘click’, function(e) { e.preventDefault(); mask.show(); }, ‘a#button’);});
  11. 11. AjaxYUI().use(‘io’, function(Y) { var handler = function(id, o, args) { Y.one(‘body’).append(o.responseText); }); Y.on(‘io:complete’, handler); Y.io(‘/users/profile?user_name=derrick’);});
  12. 12. Objected OrientedJavaScript without YUI
  13. 13. Pseudo-classicalInheritance
  14. 14. var Animal = function(n) { var noise = n; this.makeNoise = function() { alert(noise); }};var Dog = function () { this.bark = function() { this.makeNoise(); }};Dog.prototype = new Animal(‘woof!’);
  15. 15. var Mammal = function() { this.baby = function() { return new Mammal(); }};Mammal.prototype = new Animal(); // uh oh…Dog.prototype = new Mammal(‘woof!’);fido = new Dog();fido.bark(); // undefinedfido instanceof Dog //truefido instanceof Mammal // truefido instanceof Animal //true
  16. 16. The Prototype Chain Animal What happened when fido.bark() ? noise makeNoise __proto__ We were unable to { } provide the instance of Animal the correct Mammal argument when instanciated. baby __proto__ The noise private field was never set. Dog (fido) bark __proto__
  17. 17. Objected OrientedJavaScript with YUI
  18. 18. YUI OO Utilities• Native JavaScript OO • Y.extend (pseudo-classical) • Y.Object (prototypal)• Synthetic OO • Y.augment (multiple inheritance) • Y.Plugin (expressive, flexible) • Y.Base (feature rich out-of-the-box)
  19. 19. var Animal = function(n) { var noise = n; this.makeNoise = function() { alert(noise); }};var Dog = function () { Dog.superclass.constructor.apply(this, arguments); this.bark = function() { this.makeNoise(); }};Y.extend(Dog, Animal);
  20. 20. YUI Widgets fromYahoo!’s CDN
  21. 21. You may retrieve any modules availableon the Yahoo! CDN using the YUI loader.YUI().use(‘datatable’, …);YUI().use(‘panel’, …);
  22. 22. Check it out! yuilibrary.comHundreds of fantastic video presentations!yuilibrary.com/theater

×