10 Fresh JavaScript Tools That Will Improve Your Workflow

FireUnit

Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery

library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging

and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post

detailing the usage of FireUnit.

http://ejohn.org/blog/fireunit/

Sugar Test

SugarTest makes it easy to write elegant and understandable JavaScript tests. Its API is inspired by both RSpec, Shoulda and

jQuery. It works as a DSL running on top of JsUnitTest.

http://sugartest.scriptia.net/

JS.Class: Ruby-style JavaScript

JS.Class is a library designed to facilitate object-oriented development in JavaScript. It implements Ruby’s core object,

module and class system and some of its metaprogramming facilities, giving you a powerful base to build well-structured OO

programs.

http://jsclass.jcoglan.com/

JSON Formatter and Validator

The JSON Formatter was created to help with debugging. As data expressed as JSON is often written without line breaks to save

space, it became extremely difficult to actually read it. This tool hopes to solve the problem by formatting the JSON into

data that is easily readable by human beings.

http://jsonformatter.curiousconcept.com/

Faux Console: Simulating a Firebug, Safari or Opera debugging in IE

Browsers like Safari, Opera and Firefox use the Firebug extension that offers a developer a comfortable way to output

debugging information using the console.log() command. Microsoft Internet Explorer does not support this though – Faux

Console is a small JavaScript that you can embed in the document to have a basic debugging console in IE.

http://icant.co.uk/sandbox/fauxconsole/

JS Bin

JS Bin is a web application for testing and debugging JavaScript and CSS collaboratively. You input your source code and save

it to a publicly-accessible URL which you can then share to your fellow developers or in social networking outlets like

Twitter or Facebook groups. Be sure to check out the video introduction to see JS Bin in action.

http://jsbin.com/

PHP.JS

PHP.JS is an open source project in which we try to port PHP functions to JavaScript. By including the PHP.JS library in your

own projects, you can use your favorite PHP functions client-side.

http://phpjs.org/

Page Speed

Page Speed, released by Google, is a Firefox/Firebug extension very similar to YSlow that evaluates your web pages for

performance. Read more about Page Speed best practices to see what aspects of a web page are being evaluated. YSlow and Page

Speed are based off Steve Souder’s work (who worked for Yahoo! and now works for Google).

http://code.google.com/speed/page-speed/

prettyPrint

prettyPrint is an in-browser JavaScript utility for dumping variable information, inspired by ColdFusion’s built-in cfdump

utility function. Using prettyPrint on JS objects, variables, and arrays will give you a large array of information about

them, which you can then use for debugging purposes or simply for gathering data about them for documentation.

http://james.padolsey.com/javascript/prettyprint-for-javascript/

Spket IDE

Spket is an excellent toolkit for JavaScript and XML development. It has a robust and intuitive GUI, and integrates with

popular and powerful JavaScript/Ajax libraries such as Y!UI and jQuery. Its JavaScript Formatter feature gives you

unparalleled control and standardization for you or your team’s JavaScript code formatting standards.

http://www.spket.com/

JS function for random no between two nos

function getRanondom(from,to)
{
if(from >to)
{
alert("Error:: From Should Greater Then To")
return false;
}
while(true)
{
var no=Math.random()*to;
if(no>from && no<to)
{
return no;
break;
}else{ continue; }
}
}
How To Use
var no =getRanondom(20,28);

JS Array External Functions

Add This Functions in Your Script File
if( typeof Array.prototype.copy==='undefined' )
{
var a = [], i = this.length;
while( i-- ) {
a[i] = typeof this[i].copy!=='undefined' ? this[i].copy() : this[i];
}
return a;
};
if( typeof Array.prototype.remove==='undefined' ) {
Array.prototype.remove = function(obj) {
var a = [];
for (var i=0; i
{ if (this[i] != obj)
{ a.push(this[i]); }
} return a;}
}
How To Use
var ary=[1,2,3,4];
var copyary=ary.copy();
alert(copyary);
ary.remove(3);
alert(copyary); alert(ary);

JS util functions

function isArray(ob) {
// return ob.constructor == Array;
var ret = false;
try {
ret = ob.length !== undefined;
}
catch(e) {
ret = false;
}
return ret;
}
function isObject(ob) {
return typeof ob == "object";
}
function isFunction(ob) {
return typeof ob == "function";
}
function isString(ob) {
return typeof ob == "string";
}
function isNumber(ob) {
return typeof ob == "number";
}

JS Function To Get Clone Of Object

Way to Clone A Object In JavaScript

var ObjectHandler = {
//public method
getCloneOfObject: function(oldObject) {
var tempClone = {};
if (typeof(oldObject) == "object")
{
for (prop in oldObject)
{
// for array use private method getCloneOfArray
if ((typeof(oldObject[prop]) == "object") &&(oldObject[prop]).__isArray)
tempClone[prop] = this.getCloneOfArray(oldObject[prop]);
// for object make recursive call to getCloneOfObject
else if (typeof(oldObject[prop]) == "object")
tempClone[prop] = this.getCloneOfObject(oldObject[prop]);
// normal (non-object type) members
else
tempClone[prop] = oldObject[prop];
}
return tempClone;
}
},
//private method (to copy array of objects) - getCloneOfObject will use this internally
getCloneOfArray: function(oldArray) {
var tempClone = [];
for (var arrIndex = 0; arrIndex <= oldArray.length; arrIndex++){
if (typeof(oldArray[arrIndex]) == "object")
tempClone.push(this.getCloneOfObject(oldArray[arrIndex]));
else tempClone.push(oldArray[arrIndex]); return tempClone;
}
}
};

How To Use

var eventDetail = { description:"",summary:"",startTime:new Date(),endTime:new Date(),location:""};

Check What will Happen If you use normal way:

var copyOfeventDetail=eventDetail;
copyOfeventDetail.description="New Description";
alert("Copy description"+copyOfeventDetail.description+"Original Description" +eventDetail.description);

Check What will Happen If you use cloning way:
var cloneOfeventDetail =ObjectHandler.getCloneOfObject(eventDetail);
cloneOfeventDetail .description="New Description";
alert("Clone description"+cloneOfeventDetail .description+"Original Description" +eventDetail.description);

JS Function to find exact position on a Element

function findPositionWithScrolling( oElement ) {
function getNextAncestor( oElement ) {
var actualStyle;
if( window.getComputedStyle ) {
actualStyle = getComputedStyle(oElement,null).position;
} else if( oElement.currentStyle ) {
actualStyle = oElement.currentStyle.position;
} else {
//fallback for browsers with low support - only reliable for inline styles
actualStyle = oElement.style.position;
}
if( actualStyle == 'absolute' actualStyle == 'fixed' ) {
//the offsetParent of a fixed position element is null so it will stop
return oElement.offsetParent;
}
return oElement.parentNode;
}
if( typeof( oElement.offsetParent ) != 'undefined' ) {
var originalElement = oElement;
for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent ) {
posX += oElement.offsetLeft;
posY += oElement.offsetTop;
}
if( !originalElement.parentNode !originalElement.style typeof( originalElement.scrollTop ) == 'undefined' ) {
//older browsers cannot check element scrolling
return [ posX, posY ];
}
oElement = getNextAncestor(originalElement);
while( oElement && oElement != document.body && oElement != document.documentElement ) {
posX -= oElement.scrollLeft;
posY -= oElement.scrollTop;
oElement = getNextAncestor(oElement);
}
return [ posX, posY ];
} else {
return [ oElement.x, oElement.y ];
}
}
How To Use
<html>
<head>
<script>
var divObj=document.getElemeById('mydiv');
alert(findPositionWithScrolling(divOb'));
</script>
</head>
<body>
<div style="padding:20px;width:100px;height:100px">
<div style="padding:20px;width:5;height:5">

<div id="mydiv" style="padding:20px;width:20;height:2" >
</div>
</div>
</body>
</html>