Develop custom Font
Basic Reads
Online Article about Font Face future
Tuesday, October 30, 2012
Friday, September 14, 2012
jQuery move bottom TR to top after set interval or on button click
Using timeout plugin from : http://benalman.com/projects/jquery-dotimeout-plugin/
HTML :
<button>Rotate</button>
<div id="announc">
<table>
<tbody>
<tr><td>header</td></tr>
<tr><td>Item 1</td></tr>
<tr><td>Item 2</td></tr>
<tr><td>Item 3</td></tr>
<tr><td>Item 4</td></tr>
<tr><td>Item 5</td></tr>
</tbody>
</table>
</div>
<table>
<tbody>
<tr><td>header</td></tr>
<tr><td>Item 1</td></tr>
<tr><td>Item 2</td></tr>
<tr><td>Item 3</td></tr>
<tr><td>Item 4</td></tr>
<tr><td>Item 5</td></tr>
</tbody>
</table>
</div>
Scripting :
$("button").click(function(){
var len = $('#announc tr').length;
var $first = $('#announc tr').eq(1).closest('tr');
var $last = $('#announc tr').eq(len-1).closest('tr');
$last.insertBefore($first);
});
var len = $('#announc tr').length;
var $first = $('#announc tr').eq(1).closest('tr');
var $last = $('#announc tr').eq(len-1).closest('tr');
$last.insertBefore($first);
});
$.doTimeout( 1000, function(){
var len = $('#announc tr').length;
var $first = $('#announc tr').eq(1).closest('tr');
var $last = $('#announc tr').eq(len-1).closest('tr');
$last.insertBefore($first);
return true;
});
var len = $('#announc tr').length;
var $first = $('#announc tr').eq(1).closest('tr');
var $last = $('#announc tr').eq(len-1).closest('tr');
$last.insertBefore($first);
return true;
});
Wednesday, September 5, 2012
Javascript Q&A
Reference : http://ejohn.org/apps/learn/
Page Source View with all the Question’s [content inside every pre tag is a question]
<html>
<head>
<title>Learning Advanced JavaScript</title>
<style>
body { background: #222; color: #FFF; font-family: Helvetica, Arial; font-size: 16px; }
textarea, #pre { font-size: 20px; width: 100%; height: 425px; font-family: Monaco, Courier New; background: #000; color: #FFF; overflow: auto; margin: 0; border: 0; padding: 0 0 0 5px; }
#container, #pre { position: absolute; top: 30px; width: 100%; }
textarea { z-index: 1; }
#pre { z-index: 2; }
#area { position: absolute; top: 30px; left: 1%; width: 98%; }
h3 { font-size: 24px; }
h3.large { position: absolute; top: 45%; left: 0; width: 100%; font-size: 48px; text-align: center; }
div.buttons { position: absolute; top: 0px; right: 5px; }
input.run { font-weight: bold; }
a { color: #EEE; text-decoration: none; border-bottom: 1px solid #EEE; }
.FAIL b, .ERROR b { color: red; /* #990066 */ }
.PASS b { color: #73C836; }
#results { line-height: 1.3em; font-size: 18px; background: #222; z-index: 10; }
</style>
<link rel="stylesheet" href="recipes.css"/>
<script src="jquery.js"></script>
<script src="jquery.chili.js"></script>
<script src="recipes.js"></script>
<script>
jQuery(document).ready(function(){
jQuery("dl").hide();
jQuery("form").submit(function(){
jQuery("#results").empty();
try {
(new Function( jQuery("#code").val() ))();
} catch(e){
error(e.message);
}
for ( var item in window ) {
if ( !stasis[item] ) {
window[item] = undefined;
delete window[item];
}
}
return false;
});
jQuery("#code").keydown(function(e){
if ( this.setSelectionRange ) {
var start = this.selectionStart, val = this.value;
if ( e.keyCode == 13 ) {
var match = val.substring(0, start).match(/(^|\n)([ \t]*)([^\n]*)$/);
if ( match ) {
var spaces = match[2], length = spaces.length + 1;
this.value = val.substring(0, start) + "\n" + spaces + val.substr(this.selectionEnd);
this.setSelectionRange(start + length, start + length);
this.focus();
return false;
}
} else if ( e.keyCode == 8 ) {
if ( val.substring(start - 2, start) == " " ) {
this.value = val.substring(0, start - 2) + val.substr(this.selectionEnd);
this.setSelectionRange(start - 2, start - 2);
this.focus();
return false;
}
} else if ( e.keyCode == 9 ) {
this.value = val.substring(0, start) + " " + val.substr(this.selectionEnd);
this.setSelectionRange(start + 2, start + 2);
this.focus();
return false;
}
}
});
jQuery("#pre").dblclick(function(){
jQuery("#pre").hide();
jQuery("#code").focus();
});
jQuery("#prev").click(function(){
pos--;
loadSample();
});
jQuery("#next").click(function(){
pos++;
loadSample();
});
var stasis = {};
for ( var item in window ) {
stasis[item] = true;
}
var pos;
if ( location.hash ) {
pos = parseInt(location.hash.substr(1)) - 1;
loadSample();
} else {
showTOC();
}
function showTOC(){
jQuery("#pre").empty();
jQuery("h3").removeClass("large").html("Learning Advanced JavaScript");
jQuery("#pre, #code").height(425).show();
jQuery("dd:empty").prev("dt").each(function(i){
var dt = jQuery("dt").index(this);
jQuery("<a href='#" + (dt+1) + "'>" + (i+1) + ") " + this.innerHTML + "\n</a>").click(function(){
pos = dt;
loadSample();
return false;
}).appendTo("#pre");
});
jQuery("div.buttons").hide();
}
function loadSample(){
jQuery("div.buttons").show();
var code = jQuery("#code");
var source = (jQuery("dd").eq(pos).find("pre").html() || "")
.replace(/(^|\n) /g, "$1").replace(/ ($|\n)/g, "$1");
if ( !source ) {
jQuery("h3").addClass("large");
jQuery("#pre, #code, #run, #cite").hide();
} else {
jQuery("h3").removeClass("large");
jQuery("#pre, #code, #cite").show();
if ( source.match(/assert\(|log\(|error\(/) )
jQuery("#run").show();
else
jQuery("#run").hide();
}
jQuery("h3").html( (source ? "#" + (pos + 1) + ": " : "") + jQuery("dt").eq(pos).html() );
code.val( source.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">") );
jQuery("#pre").html( source ).chili();
jQuery("#results").empty();
code.add("#pre").height(275)[0];
if ( code[0].scrollHeight > 275 )
code.add("#pre").height( code[0].scrollHeight + 5 );
var last = jQuery("dt").length - 1;
if ( pos == 0 )
jQuery("#prev").css("visibility", "hidden");
if ( pos > 0 )
jQuery("#prev").css("visibility", "visible");
if ( pos == last )
jQuery("#next").css("visibility", "hidden");
if ( pos < last )
jQuery("#next").css("visibility", "visible");
window.location.hash = pos + 1;
}
setInterval(function(){
if ( location.hash != ("#" + (pos + 1)) ) {
var num = parseInt(location.hash.substr(1)) - 1;
if ( isNaN(num) ) {
if ( jQuery("div.buttons").is(":visible") ) {
showTOC();
}
} else {
pos = num;
loadSample();
}
}
}, 100);
});
</script>
<script>
function assert(pass, msg){
var type = pass ? "PASS" : "FAIL";
jQuery("#results").append("<li class='" + type + "'><b>" + type + "</b> " + msg + "</li>");
}
function error(msg){
jQuery("#results").append("<li class='ERROR'><b>ERROR</b> " + msg + "</li>");
}
function log(){
var msg = "";
for ( var i = 0; i < arguments.length; i++ ) {
msg += " " + arguments[i];
}
jQuery("#results").append("<li class='LOG'><b>LOG</b> " + msg + "</li>");
}
</script>
</head>
<body>
<h3>Learning Advanced JavaScript</h3>
<div id="area">
<pre id="pre" class="javascript"></pre>
<form id="form">
<div class="buttons">
<input type="submit" value="Run" class="run" id="run"/>
<input type="button" id="prev" value="« Prev"/>
<input type="button" id="next" value="Next »"/>
</div>
<div id="container">
<textarea id="code" wrap="off"></textarea>
<ol id="results"></ol>
<p id="cite">Double-click the code to edit the tutorial and try your own code.<br/>This tutorial contains code and discussion from the upcoming book <a href="http://jsninja.com/">Secrets of the JavaScript Ninja</a> by <a href="http://ejohn.org/">John Resig</a>.</p>
</div>
</form>
</div>
<dl>
<dt>Our Goal</dt>
<dd></dd>
<dt>Goal: To be able to understand this function:</dt>
<dd><pre>// The .bind method from Prototype.js
Function.prototype.bind = function(){
var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift();
return function(){
return fn.apply(object,
args.concat(Array.prototype.slice.call(arguments)));
};
}; </pre></dd>
<dt>Some helper methods that we have:</dt>
<dd><pre>assert( true, "I'll pass." );
assert( "truey", "So will I." );
assert( false, "I'll fail." );
assert( null, "So will I." );
log( "Just a simple log", "of", "values.", true );
error( "I'm an error!" );</pre></dd>
<dt>Defining Functions</dt>
<dd></dd>
<dt>What ways can we define functions?</dt>
<dd><pre> function isNimble(){ return true; }
var canFly = function(){ return true; };
window.isDeadly = function(){ return true; };
log(isNimble, canFly, isDeadly); </pre></dd>
<dt>Does the order of function definition matter?</dt>
<dd><pre> var canFly = function(){ return true; };
window.isDeadly = function(){ return true; };
assert( isNimble() && canFly() && isDeadly(), "Still works, even though isNimble is moved." );
function isNimble(){ return true; } </pre></dd>
<dt>Where can assignments be accessed?</dt>
<dd><pre> assert( typeof canFly == "undefined", "canFly doesn't get that benefit." );
assert( typeof isDeadly == "undefined", "Nor does isDeadly." );
var canFly = function(){ return true; };
window.isDeadly = function(){ return true; }; </pre></dd>
<dt>Can functions be defined below return statements?</dt>
<dd><pre> function stealthCheck(){
assert( stealth(), "We'll never get below the return, but that's OK!" );
return stealth();
function stealth(){ return true; }
}
stealthCheck(); </pre></dd>
<dt>Named Functions</dt>
<dd></dd>
<dt>We can refer to a function, within itself, by its name.</dt>
<dd><pre> function yell(n){
return n > 0 ? yell(n-1) + "a" : "hiy";
}
assert( yell(4) == "hiyaaaa", "Calling the function by itself comes naturally." ); </pre></dd>
<dt>What is the name of a function?</dt>
<dd><pre> var ninja = function myNinja(){
assert( ninja == myNinja, "This function is named two things - at once!" );
};
ninja();
assert( typeof myNinja == "undefined", "But myNinja isn't defined outside of the function." );
log( ninja );</pre></dd>
<dt>We can even do it if we're an anonymous function that's an object property.</dt>
<dd><pre> var ninja = {
yell: function(n){
return n > 0 ? ninja.yell(n-1) + "a" : "hiy";
}
};
assert( ninja.yell(4) == "hiyaaaa", "A single object isn't too bad, either." ); </pre></dd>
<dt>But what happens when we remove the original object?</dt>
<dd><pre> var ninja = {
yell: function(n){
return n > 0 ? ninja.yell(n-1) + "a" : "hiy";
}
};
assert( ninja.yell(4) == "hiyaaaa", "A single object isn't too bad, either." );
var samurai = { yell: ninja.yell };
var ninja = null;
try {
samurai.yell(4);
} catch(e){
assert( false, "Uh, this isn't good! Where'd ninja.yell go?" );
} </pre></dd>
<dt>Let's give the anonymous function a name!</dt>
<dd><pre> var ninja = {
yell: function yell(n){
return n > 0 ? yell(n-1) + "a" : "hiy";
}
};
assert( ninja.yell(4) == "hiyaaaa", "Works as we would expect it to!" );
var samurai = { yell: ninja.yell };
var ninja = {};
assert( samurai.yell(4) == "hiyaaaa", "The method correctly calls itself." ); </pre></dd>
<dt>What if we don't want to give the function a name?</dt>
<dd><pre> var ninja = {
yell: function(n){
return n > 0 ? arguments.callee(n-1) + "a" : "hiy";
}
};
assert( ninja.yell(4) == "hiyaaaa", "arguments.callee is the function itself." ); </pre></dd>
<dt>Functions as Objects</dt>
<dd></dd>
<dt>How similar are functions and objects?</dt>
<dd><pre> var obj = {};
var fn = function(){};
assert( obj && fn, "Both the object and function exist." ); </pre></dd>
<dt>How similar are functions and objects?</dt>
<dd><pre> var obj = {};
var fn = function(){};
obj.prop = "some value";
fn.prop = "some value";
assert( obj.prop == fn.prop, "Both are objects, both have the property." ); </pre></dd>
<dt>Is it possible to cache the return results from a function?</dt>
<dd><pre> function getElements( name ) {
var results;
if ( getElements.cache[name] ) {
results = getElements.cache[name];
} else {
results = document.getElementsByTagName(name);
getElements.cache[name] = results;
}
return results;
}
getElements.cache = {};
log( "Elements found: ", getElements("pre").length );
log( "Cache found: ", getElements.cache.pre.length ); </pre></dd>
<dt>QUIZ: Can you cache the results of this function?</dt>
<dd><pre> function isPrime( num ) {
var prime = num != 1; // Everything but 1 can be prime
for ( var i = 2; i < num; i++ ) {
if ( num % i == 0 ) {
prime = false;
break;
}
}
return prime;
}
assert( isPrime(5), "Make sure the function works, 5 is prime." );
assert( isPrime.cache[5], "Is the answer cached?" );</pre></dd>
<dt>One possible way to cache the results:</dt>
<dd><pre> function isPrime( num ) {
if ( isPrime.cache[ num ] != null )
return isPrime.cache[ num ];
var prime = num != 1; // Everything but 1 can be prime
for ( var i = 2; i < num; i++ ) {
if ( num % i == 0 ) {
prime = false;
break;
}
}
isPrime.cache[ num ] = prime
return prime;
}
isPrime.cache = {};
assert( isPrime(5), "Make sure the function works, 5 is prime." );
assert( isPrime.cache[5], "Make sure the answer is cached." ); </pre></dd>
<dt>Context</dt>
<dd></dd>
<dt>What happens if a function is an object property?</dt>
<dd><pre> var katana = {
isSharp: true,
use: function(){
this.isSharp = !this.isSharp;
}
};
katana.use();
assert( !katana.isSharp, "Verify the value of isSharp has been changed." );</pre></dd>
<dt>What exactly does context represent?</dt>
<dd><pre> function katana(){
this.isSharp = true;
}
katana();
assert( isSharp === true, "A global object now exists with that name and value." );
var shuriken = {
toss: function(){
this.isSharp = true;
}
};
shuriken.toss();
assert( shuriken.isSharp === true, "When it's an object property, the value is set within the object." ); </pre></dd>
<dt>How can we change the context of a function?</dt>
<dd><pre> var object = {};
function fn(){
return this;
}
assert( fn() == this, "The context is the global object." );
assert( fn.call(object) == object, "The context is changed to a specific object." ); </pre></dd>
<dt>Different ways of changing the context:</dt>
<dd><pre> function add(a, b){
return a + b;
}
assert( add.call(this, 1, 2) == 3, ".call() takes individual arguments" );
assert( add.apply(this, [1, 2]) == 3, ".apply() takes an array of arguments" ); </pre></dd>
<dt>QUIZ: How can we implement looping with a callback?</dt>
<dd><pre> function loop(array, fn){
for ( var i = 0; i < array.length; i++ ) {
// Implement me!
}
}
var num = 0;
loop([0, 1, 2], function(value){
assert(value == num++, "Make sure the contents are as we expect it.");
assert(this instanceof Array, "The context should be the full array.");
}); </pre></dd>
<dt>A possible solution for function looping:</dt>
<dd><pre> function loop(array, fn){
for ( var i = 0; i < array.length; i++ )
fn.call( array, array[i], i );
}
var num = 0;
loop([0, 1, 2], function(value, i){
assert(value == num++, "Make sure the contents are as we expect it.");
assert(this instanceof Array, "The context should be the full array.");
}); </pre></dd>
<dt>Instantiation</dt>
<dd></dd>
<dt>What does the new operator do?</dt>
<dd><pre> function Ninja(){
this.name = "Ninja";
}
var ninjaA = Ninja();
assert( !ninjaA, "Is undefined, not an instance of Ninja." );
var ninjaB = new Ninja();
assert( ninjaB.name == "Ninja", "Property exists on the ninja instance." ); </pre></dd>
<dt>We have a 'this' context that is a Ninja object.</dt>
<dd><pre> function Ninja(){
this.swung = false;
// Should return true
this.swingSword = function(){
this.swung = !this.swung;
return this.swung;
};
}
var ninja = new Ninja();
assert( ninja.swingSword(), "Calling the instance method." );
assert( ninja.swung, "The ninja has swung the sword." );
var ninjaB = new Ninja();
assert( !ninjaB.swung, "Make sure that the ninja has not swung his sword." );</pre></dd>
<dt>QUIZ: Add a method that gives a name to the ninja.</dt>
<dd><pre> function Ninja(name){
// Implement!
}
var ninja = new Ninja("John");
assert( ninja.name == "John", "The name has been set on initialization" );
ninja.changeName("Bob");
assert( ninja.name == "Bob", "The name was successfully changed." );</pre></dd>
<dt>Add a new property and method to the object.</dt>
<dd><pre> function Ninja(name){
this.changeName = function(name){
this.name = name;
};
this.changeName( name );
}
var ninja = new Ninja("John");
assert( ninja.name == "John", "The name has been set on initialization" );
ninja.changeName("Bob");
assert( ninja.name == "Bob", "The name was successfully changed." );</pre></dd>
<dt>What happens when we forget to use the new operator?</dt>
<dd><pre>function User(first, last){
this.name = first + " " + last;
}
var user = User("John", "Resig");
assert( typeof user == "undefined", "Since new wasn't used, the instance is undefined." ); </pre></dd>
<dt>What happens when we forget to use the new operator? (cont.)</dt>
<dd><pre> function User(first, last){
this.name = first + " " + last;
}
window.name = "Resig";
var user = User("John", name);
assert( name == "John Resig", "The name variable is accidentally overridden." ); </pre></dd>
<dt>We need to make sure that the new operator is always used.</dt>
<dd><pre> function User(first, last){
if ( !(this instanceof User) )
return new User(first, last);
this.name = first + " " + last;
}
var name = "Resig";
var user = User("John", name);
assert( user, "This was defined correctly, even if it was by mistake." );
assert( name == "Resig", "The right name was maintained." ); </pre></dd>
<dt>QUIZ: Is there another, more generic, way of doing this?</dt>
<dd><pre> function User(first, last){
if ( !(this instanceof ___) )
return new User(first, last);
this.name = first + " " + last;
}
var name = "Resig";
var user = User("John", name);
assert( user, "This was defined correctly, even if it was by mistake." );
assert( name == "Resig", "The right name was maintained." ); </pre></dd>
<dt>A solution using arguments.callee.</dt>
<dd><pre> function User(first, last){
if ( !(this instanceof arguments.callee) )
return new User(first, last);
this.name = first + " " + last;
}
var name = "Resig";
var user = User("John", name);
assert( user, "This was defined correctly, even if it was by mistake." );
assert( name == "Resig", "The right name was maintained." ); </pre></dd>
<dt>Flexible Arguments</dt>
<dd></dd>
<dt>Using a variable number of arguments to our advantage.</dt>
<dd><pre> function merge(root){
for ( var i = 1; i < arguments.length; i++ )
for ( var key in arguments[i] )
root[key] = arguments[i][key];
return root;
}
var merged = merge({name: "John"}, {city: "Boston"});
assert( merged.name == "John", "The original name is intact." );
assert( merged.city == "Boston", "And the city has been copied over." ); </pre></dd>
<dt>How can we find the Min/Max number in an array?</dt>
<dd><pre> function smallest(array){
return Math.min.apply( Math, array );
}
function largest(array){
return Math.max.apply( Math, array );
}
assert(smallest([0, 1, 2, 3]) == 0, "Locate the smallest value.");
assert(largest([0, 1, 2, 3]) == 3, "Locate the largest value."); </pre></dd>
<dt>Another possible solution:</dt>
<dd><pre> function smallest(){
return Math.min.apply( Math, arguments );
}
function largest(){
return Math.max.apply( Math, arguments );
}
assert(smallest(0, 1, 2, 3) == 0, "Locate the smallest value.");
assert(largest(0, 1, 2, 3) == 3, "Locate the largest value."); </pre></dd>
<dt>Uh oh, what's going wrong here?</dt>
<dd><pre> function highest(){
return arguments.sort(function(a,b){
return b - a;
});
}
assert(highest(1, 1, 2, 3)[0] == 3, "Get the highest value.");
assert(highest(3, 1, 2, 3, 4, 5)[1] == 4, "Verify the results."); </pre></dd>
<dt>QUIZ: We must convert array-like objects into actual arrays. Can any built-in methods help?</dt>
<dd><pre> // Hint: Arrays have .slice and .splice methods which return new arrays.
function highest(){
return makeArray(arguments).slice(1).sort(function(a,b){
return b - a;
});
}
function makeArray(array){
// Implement me!
}
// Expecting: [3,2,1]
assert(highest(1, 1, 2, 3)[0] == 3, "Get the highest value.");
// Expecting: [5,4,3,2,1]
assert(highest(3, 1, 2, 3, 4, 5)[1] == 4, "Verify the results."); </pre></dd>
<dt>We can use built-in methods to our advantage.</dt>
<dd><pre> function highest(){
return makeArray(arguments).sort(function(a,b){
return b - a;
});
}
function makeArray(array){
return Array().slice.call( array );
}
assert(highest(1, 1, 2, 3)[0] == 3, "Get the highest value.");
assert(highest(3, 1, 2, 3, 4, 5)[1] == 4, "Verify the results."); </pre></dd>
<dt>QUIZ: Implement a multiplication function (first argument by largest number).</dt>
<dd><pre> function multiMax(multi){
// Make an array of all but the first argument
var allButFirst = ___;
// Find the largest number in that array of arguments
var largestAllButFirst = ___;
// Return the multiplied result
return multi * largestAllButFirst;
}
assert( multiMax(3, 1, 2, 3) == 9, "3*3=9 (First arg, by largest.)" ); </pre></dd>
<dt>We can use call and apply to build a solution.</dt>
<dd><pre> function multiMax(multi){
// Make an array of all but the first argument
var allButFirst = Array().slice.call( arguments, 1 );
// Find the largest number in that array of arguments
var largestAllButFirst = Math.max.apply( Math, allButFirst );
// Return the multiplied result
return multi * largestAllButFirst;
}
assert( multiMax(3, 1, 2, 3) == 9, "3*3=9 (First arg, by largest.)" ); </pre></dd>
<dt>Closures</dt>
<dd></dd>
<dt>A basic closure.</dt>
<dd><pre> var num = 10;
function addNum(myNum){
return num + myNum;
}
assert( addNum(5) == 15, "Add two numbers together, one from a closure." );</pre></dd>
<dt>But why doesn't this work?</dt>
<dd><pre> var num = 10;
function addNum(myNum){
return num + myNum;
}
num = 15;
assert( addNum(5) == 15, "Add two numbers together, one from a closure." );</pre></dd>
<dt>Closures are frequently used for callbacks.</dt>
<dd><pre> var results = jQuery("#results").html("<li>Loading...</li>");
jQuery.get("test.html", function(html){
results.html( html );
assert( results, "The element to append to, via a closure." );
}); </pre></dd>
<dt>They're also useful for timers.</dt>
<dd><pre> var count = 0;
var timer = setInterval(function(){
if ( count < 5 ) {
log( "Timer call: ", count );
count++;
} else {
assert( count == 5, "Count came via a closure, accessed each step." );
assert( timer, "The timer reference is also via a closure." );
clearInterval( timer );
}
}, 100); </pre></dd>
<dt>and they're also frequently used when attaching event listeners.</dt>
<dd><pre> var count = 1;
var elem = document.createElement("li");
elem.innerHTML = "Click me!";
elem.onclick = function(){
log( "Click #", count++ );
};
document.getElementById("results").appendChild( elem );
assert( elem.parentNode, "Clickable element appended." );</pre></dd>
<dt>Private properties, using closures.</dt>
<dd><pre> function Ninja(){
var slices = 0;
this.getSlices = function(){
return slices;
};
this.slice = function(){
slices++;
};
}
var ninja = new Ninja();
ninja.slice();
assert( ninja.getSlices() == 1, "We're able to access the internal slice data." );
assert( ninja.slices === undefined, "And the private data is inaccessible to us." ); </pre></dd>
<dt>QUIZ: What are the values of the variables?</dt>
<dd><pre>var a = 5;
function runMe(a){
assert( a == ___, "Check the value of a." );
function innerRun(){
assert( b == ___, "Check the value of b." );
assert( c == ___, "Check the value of c." );
}
var b = 7;
innerRun();
var c = 8;
}
runMe(6);
for ( var d = 0; d < 3; d++ ) {
setTimeout(function(){
assert( d == ___, "Check the value of d." );
}, 100);
}</pre></dd>
<dt>The last one is quite tricky, we'll revisit it.</dt>
<dd><pre>var a = 5;
function runMe(a){
assert( a == 6, "Check the value of a." );
function innerRun(){
assert( b == 7, "Check the value of b." );
assert( c == undefined, "Check the value of c." );
}
var b = 7;
innerRun();
var c = 8;
}
runMe(6);
for ( var d = 0; d < 3; d++ ) {
setTimeout(function(){
assert( d == 3, "Check the value of d." );
}, 100);
}</pre></dd>
<dt>Temporary Scope</dt>
<dd></dd>
<dt>Self-executing, temporary, function</dt>
<dd><pre> (function(){
var count = 0;
var timer = setInterval(function(){
if ( count < 5 ) {
log( "Timer call: ", count );
count++;
} else {
assert( count == 5, "Count came via a closure, accessed each step." );
assert( timer, "The timer reference is also via a closure." );
clearInterval( timer );
}
}, 100);
})();
assert( typeof count == "undefined", "count doesn't exist outside the wrapper" );
assert( typeof timer == "undefined", "neither does timer" );</pre></dd>
<dt>Now we can handle closures and looping.</dt>
<dd><pre>for ( var d = 0; d < 3; d++ ) (function(d){
setTimeout(function(){
log( "Value of d: ", d );
assert( d == d, "Check the value of d." );
}, d * 200);
})(d);</pre></dd>
<dt>The anonymous wrapper functions are also useful for wrapping libraries.</dt>
<dd><pre> (function(){
var myLib = window.myLib = function(){
// Initialize
};
// ...
})(); </pre></dd>
<dt>Another way to wrap a library:</dt>
<dd><pre> var myLib = (function(){
function myLib(){
// Initialize
}
// ...
return myLib;
})(); </pre></dd>
<dt>QUIZ: Fix the broken closures in this loop!</dt>
<dd><pre> var count = 0;
for ( var i = 0; i < 4; i++ ) {
setTimeout(function(){
assert( i == count++, "Check the value of i." );
}, i * 200);
}</pre></dd>
<dt>A quick wrapper function will do the trick.</dt>
<dd><pre> var count = 0;
for ( var i = 0; i < 4; i++ ) (function(i){
setTimeout(function(){
assert( i == count++, "Check the value of i." );
}, i * 200);
})(i);</pre></dd>
<dt>Function Prototypes</dt>
<dd></dd>
<dt>Adding a prototyped method to a function.</dt>
<dd><pre> function Ninja(){}
Ninja.prototype.swingSword = function(){
return true;
};
var ninjaA = Ninja();
assert( !ninjaA, "Is undefined, not an instance of Ninja." );
var ninjaB = new Ninja();
assert( ninjaB.swingSword(), "Method exists and is callable." ); </pre></dd>
<dt>Properties added in the constructor (or later) override prototyped properties.</dt>
<dd><pre> function Ninja(){
this.swingSword = function(){
return true;
};
}
// Should return false, but will be overridden
Ninja.prototype.swingSword = function(){
return false;
};
var ninja = new Ninja();
assert( ninja.swingSword(), "Calling the instance method, not the prototype method." );</pre></dd>
<dt>Prototyped properties affect all objects of the same constructor, simultaneously, even if they already exist.</dt>
<dd><pre> function Ninja(){
this.swung = true;
}
var ninjaA = new Ninja();
var ninjaB = new Ninja();
Ninja.prototype.swingSword = function(){
return this.swung;
};
assert( ninjaA.swingSword(), "Method exists, even out of order." );
assert( ninjaB.swingSword(), "and on all instantiated objects." ); </pre></dd>
<dt>QUIZ: Make a chainable Ninja method.</dt>
<dd><pre> function Ninja(){
this.swung = true;
}
var ninjaA = new Ninja();
var ninjaB = new Ninja();
// Add a method to the Ninja prototype which
// returns itself and modifies swung
assert( !ninjaA.swing().swung, "Verify that the swing method exists and returns an instance." );
assert( !ninjaB.swing().swung, "and that it works on all Ninja instances." ); </pre></dd>
<dt>The chainable method must return this.</dt>
<dd><pre> function Ninja(){
this.swung = true;
}
var ninjaA = new Ninja();
var ninjaB = new Ninja();
Ninja.prototype.swing = function(){
this.swung = false;
return this;
};
assert( !ninjaA.swing().swung, "Verify that the swing method exists and returns an instance." );
assert( !ninjaB.swing().swung, "and that it works on all Ninja instances." ); </pre></dd>
<dt>Instance Type</dt>
<dd></dd>
<dt>Examining the basics of an object.</dt>
<dd><pre> function Ninja(){}
var ninja = new Ninja();
assert( typeof ninja == "object", "However the type of the instance is still an object." );
assert( ninja instanceof Ninja, "The object was instantiated properly." );
assert( ninja.constructor == Ninja, "The ninja object was created by the Ninja function." ); </pre></dd>
<dt>We can still use the constructor to build other instances.</dt>
<dd><pre> function Ninja(){}
var ninja = new Ninja();
var ninjaB = new ninja.constructor();
assert( ninjaB instanceof Ninja, "Still a ninja object." ); </pre></dd>
<dt>QUIZ: Make another instance of a Ninja.</dt>
<dd><pre>var ninja = (function(){
function Ninja(){}
return new Ninja();
})();
// Make another instance of Ninja
var ninjaB = ___;
assert( ninja.constructor == ninjaB.constructor, "The ninjas come from the same source." );</pre></dd>
<dt>QUIZ: Use the .constructor property to dig in.</dt>
<dd><pre>var ninja = (function(){
function Ninja(){}
return new Ninja();
})();
// Make another instance of Ninja
var ninjaB = new ninja.constructor();
assert( ninja.constructor == ninjaB.constructor, "The ninjas come from the same source." );</pre></dd>
<dt>Inheritance</dt>
<dd></dd>
<dt>The basics of how prototypal inheritance works.</dt>
<dd><pre> function Person(){}
Person.prototype.dance = function(){};
function Ninja(){}
// Achieve similar, but non-inheritable, results
Ninja.prototype = Person.prototype;
Ninja.prototype = { dance: Person.prototype.dance };
assert( (new Ninja()) instanceof Person, "Will fail with bad prototype chain." );
// Only this maintains the prototype chain
Ninja.prototype = new Person();
var ninja = new Ninja();
assert( ninja instanceof Ninja, "ninja receives functionality from the Ninja prototype" );
assert( ninja instanceof Person, "... and the Person prototype" );
assert( ninja instanceof Object, "... and the Object prototype" ); </pre></dd>
<dt>QUIZ: Let's try our hand at inheritance.</dt>
<dd><pre> function Person(){}
Person.prototype.getName = function(){
return this.name;
};
// Implement a function that inherits from Person
// and sets a name in the constructor
var me = new Me();
assert( me.getName(), "A name was set." );</pre></dd>
<dt>The result is rather straight-forward.</dt>
<dd><pre> function Person(){}
Person.prototype.getName = function(){
return this.name;
};
function Me(){
this.name = "John Resig";
}
Me.prototype = new Person();
var me = new Me();
assert( me.getName(), "A name was set." );</pre></dd>
<dt>Built-in Prototypes</dt>
<dd></dd>
<dt>We can also modify built-in object prototypes.</dt>
<dd><pre> if (!Array.prototype.forEach) {
Array.prototype.forEach = function(fn){
for ( var i = 0; i < this.length; i++ ) {
fn( this[i], i, this );
}
};
}
["a", "b", "c"].forEach(function(value, index, array){
assert( value, "Is in position " + index + " out of " + (array.length - 1) );
}); </pre></dd>
<dt>Beware: Extending prototypes can be dangerous.</dt>
<dd><pre> Object.prototype.keys = function(){
var keys = [];
for ( var i in this )
keys.push( i );
return keys;
};
var obj = { a: 1, b: 2, c: 3 };
assert( obj.keys().length == 3, "We should only have 3 properties." );
delete Object.prototype.keys;</pre></dd>
<dt>Enforcing Function Context</dt>
<dd></dd>
<dt>What happens when we try to bind an object's method to a click handler?</dt>
<dd><pre> var Button = {
click: function(){
this.clicked = true;
}
};
var elem = document.createElement("li");
elem.innerHTML = "Click me!";
elem.onclick = Button.click;
document.getElementById("results").appendChild(elem);
elem.onclick();
assert( elem.clicked, "The clicked property was accidentally set on the element" ); </pre></dd>
<dt>We need to keep its context as the original object.</dt>
<dd><pre> function bind(context, name){
return function(){
return context[name].apply(context, arguments);
};
}
var Button = {
click: function(){
this.clicked = true;
}
};
var elem = document.createElement("li");
elem.innerHTML = "Click me!";
elem.onclick = bind(Button, "click");
document.getElementById("results").appendChild(elem);
elem.onclick();
assert( Button.clicked, "The clicked property was correctly set on the object" ); </pre></dd>
<dt>Add a method to all functions to allow context enforcement.</dt>
<dd><pre> Function.prototype.bind = function(object){
var fn = this;
return function(){
return fn.apply(object, arguments);
};
};
var Button = {
click: function(){
this.clicked = true;
}
};
var elem = document.createElement("li");
elem.innerHTML = "Click me!";
elem.onclick = Button.click.bind(Button);
document.getElementById("results").appendChild(elem);
elem.onclick();
assert( Button.clicked, "The clicked property was correctly set on the object" ); </pre></dd>
<dt>Our final target (the .bind method from Prototype.js).</dt>
<dd><pre> Function.prototype.bind = function(){
var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift();
return function(){
return fn.apply(object,
args.concat(Array.prototype.slice.call(arguments)));
};
};
var Button = {
click: function(value){
this.clicked = value;
}
};
var elem = document.createElement("li");
elem.innerHTML = "Click me!";
elem.onclick = Button.click.bind(Button, false);
document.getElementById("results").appendChild(elem);
elem.onclick();
assert( Button.clicked === false, "The clicked property was correctly set on the object" ); </pre></dd>
<dt>Bonus: Function Length</dt>
<dd></dd>
<dt>How does a function's length property work?</dt>
<dd><pre> function makeNinja(name){}
function makeSamurai(name, rank){}
assert( makeNinja.length == 1, "Only expecting a single argument" );
assert( makeSamurai.length == 2, "Multiple arguments expected" ); </pre></dd>
<dt>We can use it to implement method overloading.</dt>
<dd><pre> function addMethod(object, name, fn){
// Save a reference to the old method
var old = object[ name ];
// Overwrite the method with our new one
object[ name ] = function(){
// Check the number of incoming arguments,
// compared to our overloaded function
if ( fn.length == arguments.length )
// If there was a match, run the function
return fn.apply( this, arguments );
// Otherwise, fallback to the old method
else if ( typeof old === "function" )
return old.apply( this, arguments );
};
} </pre></dd>
<dt>How method overloading might work, using the function length property.</dt>
<dd><pre> function addMethod(object, name, fn){
// Save a reference to the old method
var old = object[ name ];
// Overwrite the method with our new one
object[ name ] = function(){
// Check the number of incoming arguments,
// compared to our overloaded function
if ( fn.length == arguments.length )
// If there was a match, run the function
return fn.apply( this, arguments );
// Otherwise, fallback to the old method
else if ( typeof old === "function" )
return old.apply( this, arguments );
};
}
function Ninjas(){
var ninjas = [ "Dean Edwards", "Sam Stephenson", "Alex Russell" ];
addMethod(this, "find", function(){
return ninjas;
});
addMethod(this, "find", function(name){
var ret = [];
for ( var i = 0; i < ninjas.length; i++ )
if ( ninjas[i].indexOf(name) == 0 )
ret.push( ninjas[i] );
return ret;
});
addMethod(this, "find", function(first, last){
var ret = [];
for ( var i = 0; i < ninjas.length; i++ )
if ( ninjas[i] == (first + " " + last) )
ret.push( ninjas[i] );
return ret;
});
}
var ninjas = new Ninjas();
assert( ninjas.find().length == 3, "Finds all ninjas" );
assert( ninjas.find("Sam").length == 1, "Finds ninjas by first name" );
assert( ninjas.find("Dean", "Edwards").length == 1, "Finds ninjas by first and last name" );
assert( ninjas.find("Alex", "X", "Russell") == null, "Does nothing" ); </pre></dd>
</dl>
</body>
</html>
Tuesday, September 4, 2012
SQL Question
Question 1:
create table trans
(
[TID] INT NOT NULL IDENTITY(1,1),
[NO] varchar(10),
[Time] DATETIME DEFAULT('1900/01/01'),
[TAmt] MONEY
)
INSERT INTO trans([TID],[NO],[Time],[TAmt]) VALUES('0124-98',DEFAULT,1000)
INSERT INTO trans([TID],[NO],[Time],[TAmt]) VALUES('0124-98',GETDATE(),1000)
INSERT INTO trans([TID],[NO],[Time],[TAmt]) VALUES(SCOPE_IDENTITY(),'0124-98',DEFAULT,1000)
INSERT INTO trans([TID],[NO],[Time],[TAmt]) VALUES(SCOPE_IDENTITY(),'0124-98',GETDATE(),1000)
Question 2:
select round(689.89,-1,1)
Question 3:
create function tomoro
returns datetime
as
begin
declare @td datetime
set @td = getdate()
set @td = dateadd(DD, datediff(DD, 0, @td), 0)
return dateadd(DD, 1, @td)
end
Question 4:
SET ARITHABORT OFF
SET ANSI_WARNINGS OFF
select 200/0
Question 5:
create table champs
(
[team] nvarchar(10),
[title] int
)
insert into champs values('a',27)
insert into champs values('b',7)
insert into champs values('c',10)
insert into champs values('aa',5)
insert into champs values('aa5',5)
insert into champs values('aa4',5)
insert into champs values('aa3',5)
insert into champs values('aa2',5)
insert into champs values('bb',3)
insert into champs values('bb4',4)
insert into champs values('cc',3)
select [team], [title], rank() over(order by [title] desc) from champs
select [team], [title], dense_rank() over(order by [title] desc) from champs
Question 6:
select round(123.89,0)
Question 7:
SELECT * FROM sys.dm_db_missing_index_details
select object_id, name, index_id, type_desc from sys.indexes where type_desc = 'SPATIAL'
Tuesday, August 14, 2012
Calender Extender [AjaxToolkit] enable month selection and apply rules b/w tow cal extenders
<asp:Content ID="Content3" ContentPlaceHolderID="ContentContent" runat="server">
<script type="text/javascript">
var cal1;
var cal2;
function pageLoad() {
cal1 = $find("calendar1");
cal2 = $find("calendar2");
//modify cal ext delegate to support month selection and stop further date selection
modifyCalDelegates(cal1);
//modifyCalDelegates(cal2);
}
function modifyCalDelegates(cal) {
//we need to modify the original delegate of the month cell.
cal._cell$delegates = {
mouseover: Function.createDelegate(cal, cal._cell_onmouseover),
mouseout: Function.createDelegate(cal, cal._cell_onmouseout),
click: Function.createDelegate(cal, function(e) {
/// <summary>
/// Handles the click event of a cell
/// </summary>
/// <param name="e" type="Sys.UI.DomEvent">The arguments for the event</param>
e.stopPropagation();
e.preventDefault();
if (!cal._enabled) return;
var target = e.target;
var visibleDate = cal._getEffectiveVisibleDate();
Sys.UI.DomElement.removeCssClass(target.parentNode, "ajax__calendar_hover");
switch (target.mode) {
case "prev":
case "next":
cal._switchMonth(target.date);
break;
case "title":
switch (cal._mode) {
case "days": cal._switchMode("months"); break;
case "months": cal._switchMode("years"); break;
}
break;
case "month":
//if the mode is month, then stop switching to day mode.
if (target.month == visibleDate.getMonth()) {
//this._switchMode("days");
} else {
cal._visibleDate = target.date;
//this._switchMode("days");
}
cal.set_selectedDate(target.date);
cal._switchMonth(target.date);
cal._blur.post(true);
cal.raiseDateSelectionChanged();
break;
case "year":
if (target.date.getFullYear() == visibleDate.getFullYear()) {
cal._switchMode("months");
} else {
cal._visibleDate = target.date;
cal._switchMode("months");
}
break;
// case "day":
// this.set_selectedDate(target.date);
// this._switchMonth(target.date);
// this._blur.post(true);
// this.raiseDateSelectionChanged();
// break;
case "today":
cal.set_selectedDate(target.date);
cal._switchMonth(target.date);
cal._blur.post(true);
cal.raiseDateSelectionChanged();
break;
}
})
}
}
function onCalendarShown(sender, args) {
//set the default mode to month
sender._switchMode("months", true);
changeCellHandlers(cal1);
}
function changeCellHandlers(cal) {
if (cal._monthsBody) {
//remove the old handler of each month body.
for (var i = 0; i < cal._monthsBody.rows.length; i++) {
var row = cal._monthsBody.rows[i];
for (var j = 0; j < row.cells.length; j++) {
$common.removeHandlers(row.cells[j].firstChild, cal._cell$delegates);
}
}
//add the new handler of each month body.
for (var i = 0; i < cal._monthsBody.rows.length; i++) {
var row = cal._monthsBody.rows[i];
for (var j = 0; j < row.cells.length; j++) {
$addHandlers(row.cells[j].firstChild, cal._cell$delegates);
}
}
}
}
function onCalendarHidden(sender, args) {
if (sender.get_selectedDate()) {
if (cal1.get_selectedDate() && cal2.get_selectedDate() && cal1.get_selectedDate() > cal2.get_selectedDate()) {
alert('The "From" Date should smaller than the "To" Date, please reselect!');
sender.show();
return;
}
//get the final date
var finalDate = new Date(sender.get_selectedDate());
var selectedMonth = finalDate.getMonth();
finalDate.setDate(1);
if (sender == cal1) {
// set the calender2's default date 10th day of the next month as per calender1
finalDate.setMonth(selectedMonth + 1);
finalDate.setDate(finalDate.getDate() + 9);
finalDate = new Date(finalDate);
}
//set the date to the TextBox
cal2.get_element().value = finalDate.format(cal2._format);
}
}
</script>
<div>
TP :
<asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" BehaviorID="calendar1" runat="server"
Enabled="True" Format="yyyyMM" TargetControlID="TextBox1" OnClientShown="onCalendarShown"
OnClientHidden="onCalendarHidden">
</ajaxToolkit:CalendarExtender>
SD :
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="CalendarExtender2" BehaviorID="calendar2" runat="server"
Enabled="True" Format="yyyy/MM/dd" TargetControlID="TextBox2" >
</ajaxToolkit:CalendarExtender>
</div>
</asp:Content>
Subscribe to:
Posts (Atom)
