<html>
<head>
<title>JS Bin</title>
<link href="http://code.jquery.com/qunit/qunit-1.18.0.css" rel="stylesheet"/>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script>
<script>
module('$ functional utils');
test('$.extend', function(){
var target = {first: 'Justin'},
object = {last: 'Meyer'};
var result = $.extend(target,object);
equal( result, target, 'target and result are equal');
deepEqual(result, {first: 'Justin', last: 'Meyer'}, 'properties added correctly');
});
test('$.isArray', function(){
equal( $.isArray([]), true, 'An array is an array' );
equal( $.isArray(arguments), false, 'Arguments are not an array' );
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var IframeArray = iframe.contentWindow.Array;
equal( $.isArray( new IframeArray() ), true, 'Arrays from other iframes are Arrays' );
document.body.removeChild(iframe);
});
test('$.each', function(){
expect(9);
var collection = ['a','b'];
var res = $.each(collection, function(index, value){
if(index === 0 ) equal(value, 'a');
else if(index === 1 ) equal(value, 'b');
else ok(false,'called back with a bad index');
});
equal(collection, res);
collection = {foo: 'bar', zed: 'ted'};
res = $.each(collection, function(prop, value){
if(prop === 'foo' ) equal(value, 'bar');
else if(prop === 'zed' ) equal(value, 'ted');
else ok(false,'called back with a bad index');
});
equal(collection, res);
var collection = {0:'a', 1:'b', length: 2};
var res = $.each(collection, function(index, value){
if(index === 0 ) equal(value, 'a');
else if(index === 1 ) equal(value, 'b');
else ok(false,'called back with a bad index');
});
equal(collection, res);
});
test('$.makeArray', function(){
var childNodes = document.body.childNodes;
ok(! $.isArray(childNodes), 'node lists are not arrays' );
var childArray = $.makeArray(childNodes);
ok( $.isArray(childArray), 'made an array' );
equal(childArray.length, childNodes.length, 'lengths are the same');
for(var i =0; i < childArray.length; i++){
equal(childArray[i], childNodes[i], 'array index '+i+' is equal.');
}
});
test('$.proxy', function(){
var dog = {
name: 'fido',
speak: function(words){
return this.name + ' says '+words;
}
};
var speakProxy = $.proxy(dog.speak, dog);
equal( speakProxy('woof!'), 'fido says woof!' );
});
</script>
</body>
</html>
//This week we'll be filling in the following utility methods. The $ function isn't necessary just yet, just a placeholder!
$ = function() {};
$.extend = function(target, object) {};
// Static methods
var isArrayLike = function(obj) {};
$.extend($, {
isArray: function(obj) {},
each: function(collection, cb) {},
makeArray: function(arr) {},
proxy: function(fn, context) {}
});
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |