<html>
<head>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.7/underscore-min.js"></script>
<script type="text/javascript">
function stringdump(ob) {
var output = '';
for (property in ob) {
output += property + ': ' + ob[property]+'; ';
}
return (output);
}
</script>
<script type="text/javascript">
// A minimal demo of underscore.js by @rudifa
// Version 0.3
// Wraps code examples from http://net.tutsplus.com/tutorials/javascript-ajax/getting-cozy-with-underscore-js/
// in js functions and a html page
function demo_hello() {
return ("Hello Underscore!");
};
function demo_js_loop() {
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42],
topScores = [], scoreLimit = 90;
// plain js
for (i=0; i<=scores.length; i++) {
if (scores[i]>scoreLimit) {
topScores.push(scores[i]);
}
}
return (topScores);
};
function demo_select() {
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42],
scoreLimit = 90;
return (_.select(scores, function(score){ return score > scoreLimit; }));
};
function demo_pluck() {
var tuts = [{name : 'NetTuts', niche : 'Web Development'}, {name : 'WPTuts', niche : 'WordPress'}, {name : 'PSDTuts', niche : 'PhotoShop'}, {name : 'AeTuts', niche : 'After Effects'}];
return(_.pluck(tuts, 'niche'));
};
function demo_pluck_map() {
var Tuts = [{name : 'NetTuts', niche : 'Web Development'}, {name : 'WPTuts', niche : 'WordPress'}, {name : 'PSDTuts', niche : 'PhotoShop'}, {name : 'AeTuts', niche : 'After Effects'}];
return (_(Tuts).pluck('name').map(function (value){return value + '+'}));
};
function demo_all() {
var scores = [95, 82, 98, 78, 65];
return (_(scores).all(function (value){return value>50;}));
};
function demo_uniq() {
var notUniq = [1,5,4,4,5,2,1,1,3,2,2,3,4,1];
return (_.uniq(notUniq));
};
function demo_range() {
var tens = _.range(0, 100, 10);
return (tens);
};
function demo_intersection() {
var tens = _.range(0, 100, 10),
eights = _.range(0, 100, 8),
fives = _.range(0, 100, 5);
var common = _.intersection(tens, eights, fives );
return (common);
};
function demo_keys_values() {
var tuts = { NetTuts : 'Web Development', WPTuts : 'WordPress', PSDTuts : 'PhotoShop', AeTuts : 'After Effects'};
var keys = _.keys(tuts), values = _.values(tuts);
return ("keys=" + keys + "; values=" + values);
};
function demo_defaults() {
var tuts = { NetTuts : 'Web Development' };
var deft = { NetTuts : 'Web Development', niche: 'Education' };
_.defaults(tuts, deft);
return (stringdump(tuts));
};
function demo_bind() {
var o = { greeting: "Howdy" },
f = function(name) { return this.greeting +" "+ name; };
var greet = _.bind(f, o);
return (greet("Jess"));
}
function demo_template() {
var data = {site: 'NetTuts'}, template = 'Welcome! You are at <%= site %>';
var expandedTemplate = _.template(template, data);
return (expandedTemplate);
}
</script>
<script type="text/javascript">
function demo(text, demo_func) {
document.write("<em>" + text + ":</em>" + demo_func() + "<br>");
console.log(text + ":" + demo_func());
}
function display() {
demo("hello", demo_hello);
demo("js_loop", demo_js_loop);
demo("select", demo_select);
demo("pluck", demo_pluck);
demo("pluck_map", demo_pluck_map);
demo("all", demo_all);
demo("uniq", demo_uniq);
demo("range", demo_range);
demo("intersection", demo_intersection);
demo("keys_values", demo_keys_values);
demo("defaults", demo_defaults);
demo("bind", demo_bind);
demo("template", demo_template);
document.close();
}
</script>
</head>
<body>
<div id="welcome"></div>
<h3>underscore.js demo</h3>
<p>
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>
<p>
<form>
<input type="button" value="Test me!" onclick="display()" />
</form>
</body>
</html>