Javascript

Using the javascript in browser addressbar

Using the javascript in browser addressbar

1. suppose you have a javascript variable called currentStat in your page and want to know its recent value
you can just type javascript::alert(currentStat); in addressbar of the current page and enter

Javascript Libraries

The collection of javascript code helps to develope the application easy.There are many javascript libraries available. Popular libraries like jQuery, Prototype, Dojo.. are provides functionalities like Ajax calls, event handling, effects. These javascript libraries combine with css makes page effects.

How to assign css styles for form elements or remove from the css?

The elements have style sheet and you want to remove that how to do that?

To assign or remove the styles for the elements, you can use jQuery css. The property and value is passed to css function as comma seperated.

How to remove the event attached with the element using unbind ?

Do you binded the event with elements and after performing some operation, you don't want that event handler execute. How to do that?

jQuery has unbind to remove the event linked with particular element.

jQuery How to check element exists or not?

While working in forms or pages, sometimes we need to check the element exists or not. So that we can further get the value or assign or process it.

How to check that element exists or not using jQuery?

Here is the way. For example you want check an element with id blog_id exists or not.

if(jQuery('#blog_id').length > 0) { alert ("elemenet exists");}

jQuery('#blog_id') always return object, it wont help to check the element exists or not.

so always use if(jQuery('#id').length>0) to check the existence of the element.

Javascript Unit Test Using FireUnit

Unit testing is low level testing against the small piece of code or for unit of codes like functions or subroutines. Unit test scripts helps to make sure the code works as expected.

Once we write unit test scripts for code, we can create suite to call all this and run. We can run this test suite after making changes, if any test fails then its sure that our change impacts somewhere else. so it helps to fix that also, kind of integrated test.

Normally we write test script in the same language on which the application developed. There are lot of tools for unit tests for various languages. Nowdays dev guys looking for unit tests for javascripts also.

Unit test scripts add-ons coming up with javascript libraries, for example jQuery have QUnit and script.aculo.us have unittest.js. Firebox also have extension for javascript testing called fireUnit. In this article, we just look on FireUnit and how to write test script for FireUnit.

FireUnit:

FireUnit adds test tab to the firebug, so its easy to view the test results in the same page of the browser. This supports only firefox, it won't work in other browsers. If you don't having firebug and you are javascript developer then you should have this awesome feature. Just read this article Popular Web Development-Javascript debugging tools to get more details and install it.

Coming back to fireUnit, once firebug is in place, download the FireUnit from firebox website and install it. It just add Test tab in firebug windows. so it is easy to test and see the results.

How to write test script for FireUnit?

For example, you have javascript like below

validation.js

function simpleCheck(inpStr1,inpStr2)
{
if(inpStr1.length>inpStr2.length) {
return inpStr1+"have more characters than "+inpStr2;
}
if(inpStr1.length return inpStr1+" have less characters than "+inpStr2;
}
if(inpStr1.length>inpStr2.length) {
return "Both equal";
}
}

test script for FireUnit

Now write test for this validation.js using FireUnit

fireUnit_testvalidation.js

function test_SimpleCheck() {
var actual = simpleCheck("test","test2");
var expected = "test have less characters than test2";
//to compare the result
fireunit.compare(expected,actual," second string greater then first string");

actual = simpleCheck("test3","test2");
expected = "test3 and test2 have equal length";
//test assert
fireunit.ok(expected=actual," Both have equal length");

//to show the results of all test to test tab
fireunit.testDone();
}

Html to test

fireUnit_testvalidation.html

include the javascripts validation.js and its test script fireUnit_testvalidation.js in html. Call the test script funtion to run the test.


<html>
<head><title>Testing validation.js</title>
<script src="validation.js"></script>
<script src="fireUnit_testvalidation.js"></script>
<script>
test_SimpleCheck();
</script>
</head>
<body>
</body>
</html>

Output of test result would be shown like below

To conclude, the FireUnit is still in intial stage. Its good that the results are displaying in the Test tab of the firebug. Disappointment is that it can't be used in other browsers. We could expect more added features in future.

Syndicate content