Essential YUI
•Télécharger en tant que PPTX, PDF•
0 j'aime•533 vues
Brief introduction to Yahoo's YUI library. Given as a presentation to college students who were new to JavaScript. Discusses DOM manipulation,
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (17)
Similaire à Essential YUI
Similaire à Essential YUI (20)
Dernier
Dernier (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