Essential YUI
•Download as PPTX, PDF•
0 likes•533 views
Brief introduction to Yahoo's YUI library. Given as a presentation to college students who were new to JavaScript. Discusses DOM manipulation,
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (17)
Similar to Essential YUI
Similar to Essential YUI (20)
Recently uploaded
Recently uploaded (20)
Essential YUI
- 1. Essential YUI { An introduction to Yahoo!’s JavaScript library Derrick McMillen, March 2012
- 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. The Yahoo! User Interface library is a tool to help you avoid these pitfalls!
- 4. The YUI Seed <html> <body> <!-- your page content --> <!-- YUI seed--> <script src=‚…"></script> <script src=‚…"> // your JavaScript </script> </body> </html>
- 5. Quiz // finds the greatest common divisor function 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. The YUI Loader YUI().use(‘node’, function(Y) { Y.log(‚Hello world!‛); });
- 7. DOM nodes var d = document; var body = d.getElementsByTagName(‘body’)[0], p = d.createElement(‘p’), txt = d.createTextNode(‘Hello world!’); body.appendChild(p.appendChild(txt));
- 8. DOM nodes YUI().use(‘node’, function(Y) { var body = Y.one(‘body’); body.append(Y.Node.create( ‘<p>Hello world!</p>’); });
- 9. DOM Events YUI().use(‘event’, function(Y) { var button = Y.one(‘#button’); Y.on(‘click’, function(e) { alert(‘hello’); }); });
- 10. DOM Events YUI().use(‘event’, function(Y) { var mask = Y.one(‘#mask’); Y.on(‘click’, function(e) { e.preventDefault(); mask.show(); }, ‘a#button’); });
- 11. Ajax YUI().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’); });
- 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. 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(); // undefined fido instanceof Dog //true fido instanceof Mammal // true fido instanceof Animal //true
- 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__
- 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. 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. YUI Widgets from Yahoo!’s CDN
- 21. You may retrieve any modules available on the Yahoo! CDN using the YUI loader. YUI().use(‘datatable’, …); YUI().use(‘panel’, …);
- 22. Check it out! yuilibrary.com Hundreds of fantastic video presentations! yuilibrary.com/theater