Advertisement
rudifa

Demo underscore.js v.03

Apr 4th, 2012
499
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.24 KB | None | 0 0
  1. <html>
  2. <head>
  3.  
  4. <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.7/underscore-min.js"></script>
  5.  
  6. <script type="text/javascript">
  7.  
  8. function stringdump(ob) {
  9.     var output = '';
  10.     for (property in ob) {
  11.         output += property + ': ' + ob[property]+'; ';
  12.     }
  13.     return (output);
  14. }
  15.  
  16. </script>
  17.  
  18. <script type="text/javascript">
  19.  
  20. // A minimal demo of underscore.js by @rudifa
  21. // Version 0.3
  22. // Wraps code examples from http://net.tutsplus.com/tutorials/javascript-ajax/getting-cozy-with-underscore-js/
  23. // in js functions and a html page
  24.  
  25. function demo_hello() {
  26.     return ("Hello Underscore!");
  27. };
  28.  
  29. function demo_js_loop() {
  30.     var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42],
  31.     topScores = [], scoreLimit = 90;
  32.     // plain js
  33.     for (i=0; i<=scores.length; i++) {
  34.        if (scores[i]>scoreLimit) {
  35.             topScores.push(scores[i]);
  36.         }
  37.     }
  38.     return (topScores);
  39. };
  40.  
  41. function demo_select() {
  42.     var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42],
  43.     scoreLimit = 90;
  44.     return (_.select(scores, function(score){ return score > scoreLimit; }));
  45. };
  46.  
  47. function demo_pluck() {
  48.     var tuts = [{name : 'NetTuts', niche : 'Web Development'}, {name : 'WPTuts', niche : 'WordPress'}, {name : 'PSDTuts', niche : 'PhotoShop'}, {name : 'AeTuts', niche : 'After Effects'}];
  49.     return(_.pluck(tuts, 'niche'));
  50. };
  51.  
  52. function demo_pluck_map() {
  53.     var Tuts = [{name : 'NetTuts', niche : 'Web Development'}, {name : 'WPTuts', niche : 'WordPress'}, {name : 'PSDTuts', niche : 'PhotoShop'}, {name : 'AeTuts', niche : 'After Effects'}];
  54.     return (_(Tuts).pluck('name').map(function (value){return value + '+'}));
  55. };
  56.  
  57. function demo_all() {
  58.     var scores = [95, 82, 98, 78, 65];
  59.     return (_(scores).all(function (value){return value>50;}));
  60. };
  61.  
  62. function demo_uniq() {
  63.     var notUniq = [1,5,4,4,5,2,1,1,3,2,2,3,4,1];
  64.     return (_.uniq(notUniq));
  65. };
  66.  
  67. function demo_range() {
  68.     var tens = _.range(0, 100, 10);
  69.     return (tens);
  70. };
  71.  
  72. function demo_intersection() {
  73.     var tens = _.range(0, 100, 10),
  74.         eights = _.range(0, 100, 8),
  75.         fives = _.range(0, 100, 5);
  76.  
  77.     var common = _.intersection(tens, eights, fives );
  78.     return (common);
  79. };
  80.  
  81. function demo_keys_values() {
  82.     var tuts = { NetTuts : 'Web Development',  WPTuts : 'WordPress',  PSDTuts : 'PhotoShop', AeTuts : 'After Effects'};
  83.     var keys = _.keys(tuts), values = _.values(tuts);
  84.     return ("keys=" + keys + "; values=" + values);
  85. };
  86.  
  87. function demo_defaults() {
  88.     var tuts = { NetTuts : 'Web Development' };
  89.     var deft = { NetTuts : 'Web Development', niche: 'Education' };
  90.     _.defaults(tuts, deft);
  91.     return (stringdump(tuts));
  92. };
  93.  
  94. function demo_bind() {
  95.     var o = { greeting: "Howdy" },
  96.         f = function(name) { return this.greeting +" "+ name; };
  97.     var greet = _.bind(f, o);
  98.     return (greet("Jess"));
  99. }
  100.  
  101. function demo_template() {
  102.     var data = {site: 'NetTuts'}, template = 'Welcome! You are at <%= site %>';
  103.     var expandedTemplate = _.template(template, data);
  104.     return (expandedTemplate);
  105. }
  106.  
  107. </script>
  108.  
  109. <script type="text/javascript">
  110.  
  111. function demo(text, demo_func) {
  112.     document.write("<em>" + text + ":</em>" + demo_func() + "<br>");
  113.     console.log(text + ":" + demo_func());
  114. }
  115.  
  116. function display() {
  117.    
  118.     demo("hello", demo_hello);
  119.    
  120.     demo("js_loop", demo_js_loop);
  121.    
  122.     demo("select", demo_select);
  123.            
  124.     demo("pluck", demo_pluck);
  125.    
  126.     demo("pluck_map", demo_pluck_map);
  127.    
  128.     demo("all", demo_all);
  129.    
  130.     demo("uniq", demo_uniq);
  131.    
  132.     demo("range", demo_range);
  133.    
  134.     demo("intersection", demo_intersection);
  135.    
  136.     demo("keys_values", demo_keys_values);
  137.    
  138.     demo("defaults", demo_defaults);
  139.    
  140.     demo("bind", demo_bind);
  141.  
  142.     demo("template", demo_template);
  143.    
  144.     document.close();
  145.  
  146. }
  147. </script>
  148.  
  149. </head>
  150.  
  151. <body>
  152.  
  153. <div id="welcome"></div>
  154. <h3>underscore.js demo</h3>
  155. <p>
  156. based on js code examples from <a href="http://net.tutsplus.com/tutorials/javascript-ajax/getting-cozy-with-underscore-js/">Getting Cozy With Underscore.js</a>
  157. <p>
  158. <form>
  159. <input type="button" value="Test me!" onclick="display()" />
  160. </form>
  161.  
  162. </body>
  163. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement