WebJukti

How to set up Apache on Windows

ujjaini — Fri, 26 Aug 2011 20:00:08 +0000

1. Download Apache

Go to this site-http://httpd.apache.org/download.cgi

Select either

Win32 Binary without crypto (no mod_ssl) (MSI Installer): httpd-2.2.19-win32-x86-no_ssl.msi [PGP] [MD5] [SHA1]
Win32 Binary including OpenSSL 0.9.8r (MSI Installer): httpd-2.2.19-win32-x86-openssl-0.9.8r.msi [PGP] [MD5] [SHA1]

and download it

2. Install Apache from the installer
By default, Apache is installed here – C:\Program Files\Apache Software Foundation\Apache2.2

3. Test it

Open a browser, and type – http://localhost

It should show the line – ‘It Works’

You are currently seeing contents of this file-

C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\index.html

C:\Program Files\Apache Software Foundation\Apache2.2\htdocs is the document root directory for Apache

How to set up a different root directory for Apache

1. Create a new directory.

I have created a new folder under c drive called wwwroot

C:\wwwroot

Create an index.html file under wwwroot. This is the contents of the index.html file

[sourcode]

Apache Root

TESTING APACHE NEW ROOT

[/sourcecode]

2. Change document root in httpd

Go here – C:\Program Files\Apache Software Foundation\Apache2.2\conf

and open this file – httpd

Change the following items there-

replace this line

DocumentRoot “C:/Program Files/Apache Software Foundation/Apache2.2/htdocs”

with this-
DocumentRoot “C:/wwwroot”

Also replace this line

with this -

3. Restart Apache

Go to Start -> Programs -> Apache HTTP Server 2.2 -> Control Apache Server -> Restart

4. Test it

Open a browser and type – http://localhost

It will show the new index.html page

TROUBLESHOOTING

************************

Forbidden
You don’t have permission to access on this server.

Make sure that both these lines point to the same document root

DocumentRoot “C:/wwwroot”

—————————————————————————————————

Apache fails to start

Make sure, both these lines are uncommented

DocumentRoot “C:/wwwroot”

JSONP with example

ujjaini — Tue, 14 Jun 2011 21:10:29 +0000

What happens if we try to make an AJAX call to a different domain ?

This would fail because of the Same Origin Policy for file.
You would get an HTTP status value of 407 Authentication required
One of the workarounds for doing this is to use JSONP.

An example of how JSONP can be used

var url = 'http://github.com/api/v2/json/user/show/yui?callback=handleresponse';			
var script = document.createElement('script');
script.setAttribute('src', url);			
document.getElementsByTagName('head')[0].appendChild(script);

function handleresponse(data){	
   var user = data.user;			
   console.log(user.blog);
   console.log(user.company);
   console.log(user.followers_count);
   console.log(user.id);
}

In the above code

We are trying to access the external url – http://github.com/api/v2/json/user/show/yui?callback=handlejsonp
A callback method (handlejsonp ) is appended to the url
We create a script dynamically in the HTML page so that its source points to the url
When that script is executed, we get callback data. This data can be displayed or manipulated according to the requirement of the application

How to perform JSONP functionality using Jquery

jQuery.getJSON("http://github.com/api/v2/json/user/show/yui?callback=?", 
	function (data) {	   
	   var user = data.user;			
	   console.log(user.blog);
	   console.log(user.company);
	   console.log(user.followers_count);
	   console.log(user.id);
	});

Note : Here we put ? as the callback function name instead of a real function name. This is because jQuery replaces the ? with a generated function name (like jsonp123456789)

How to perform JSONP functionality using YUI 3

function handleJSONP(response) {    
   var user = response.user;			
   console.log(user.blog);
   console.log(user.company);
   console.log(user.followers_count);
   console.log(user.id);
 }
 
 YUI().use('jsonp', 'node', function(Y) {
 	var url = 'http://github.com/api/v2/json/user/show/yui?callback=';		
    url = url + "{callback}"; 
    Y.jsonp(url, handleJSONP);
});

Note – Here the callback function is represented as
{callback}

How to take screenshots, edit, copy or upload images in FireFox

ujjaini — Fri, 27 May 2011 22:12:00 +0000

There is a great FireFox add-on LightShot. (https://addons.mozilla.org/en-US/firefox/addon/lightshot/) for the above mentioned functions.

After installation, it would appear like the above image on the navigation toolbar in FireFox

I found the following pros and cons of the add-on

Pros

- super fast
- intuitive
- works very well for copying to clip board, print, selecting an area on the screen and save
- works on FireFox versions 2 ~4

Cons

- will not work on MAC or Linux

Call function in Javascript used for Object Oriented Composition

ujjaini — Wed, 25 May 2011 18:24:49 +0000

The call function in JavaScript can be used in , among other ways, to implement 2 important principles of Object Orientation

- Inheritance
- Composition

In my previous article, (Call function in JavaScript), I explained, how call can be used to achieve inheritance. Here, I wanted to show how call may be used for Composition.

What is Composition ?
Object composition is a way to combine simple objects or data types into more complex ones. Composed objects are often referred to as having a “has a” relationship.
(http://en.wikipedia.org/wiki/Object_composition)

Example of Composition

function engine(name){
   this.start = function(){
     alert('The ' + name + ' engine is starting');
   }
}

function car(name){
    engine.call(this, name);
}

var newcar = new car('volvo');
newcar.start(); // shows 'The volvo engine is starting

- There are 2 objects car and engine. A car is composed of, among other things, an engine. When the engine starts, the car starts too.
- In the above code, from inside the constructor of car, we call the constructor of engine. If we create a new instance of car, it has a start, method which is the same method defined in engine class.

Call function in Javascript

ujjaini — Wed, 18 May 2011 17:58:18 +0000

The call function is used in Object Oriented Javascript to enable a class to use properties and methods of another class.

function Person(){
    this.name = 'anika';
  }
function Author(){
   Person.call(this);
}

var aut = new Author();
alert(aut.name); // shows the value 'anika'

In the above code-
- there is a base class Person, which has a property name with a value ‘Anika’.
- another class Author, is defined. Inside the constructor of this class, we call the constructor for Person.
- The this in ‘Person.call(this)‘ refers to an instance of Person class. So the property ‘name’ is assigned the value of ‘anika’.

The same rule applies to functions defined in the class

function Person(){
   this.speak = function(){
     alert('person is speaking');
   }
}

function Author(){
   Person.call(this);
}

var aa = new Author();
aa.speak(); // alert box shows 'person is speaking'

Now, let us define a property- ‘name’ in ‘Author’ class.We assign a new value to it. We will observe how call function behaves in this case -

function Person(){
    this.name = 'anika';
  }
function Author(){
   this.name = 'tanika';
   Person.call(this);
}

var aut = new Author();
alert(aut.name); // shows the value 'anika'

In the above code, inside the ‘Author’ class constructor,
- we assign ‘tanika’ to ‘name’ property
- but when we invoke ‘call’, that value gets overridden by the value inside ‘Person’ class constructor

Let’s see what happens if inside the ‘Author’ class constructor, we invoke ‘call’ first and then assign a new value to ‘name’ property.

function Person(){
    this.name = 'anika';
  }
function Author(){  
   Person.call(this);
    this.name = 'tanika';
}

var aut = new Author();
alert(aut.name); // shows the value 'tanika'

In the above code,
- first ‘call’ method is invoked and the ‘name’ property is set to ‘anika’
- but the same property is reset in the next line (this.name = ‘tanika’)

In all the above cases, we are setting the value of only ONE property ‘name’. But javascript would behave the same way, if we try to set the values of more than one property.

function Person(){
  this.name = 'anika';
  this.age = 4;
}

function Author(){   
   Person.call(this);
}

var aa = new Author();
alert(aa.name); // shows 'anika'
alert(aa.age); // shows '4'

Lets see how ‘call’ behaves if we pass arguments in the constructor of a class-

function Person(name, age){
    this.name = name || 'anika';  // in case of empty string default value is 'anika'
    this.age = age || 4;  // in case of empty string, default value is 4
}

function Author(name, age, book){
   this.book = book;
   Person.call(this, name, age);
}

var aa = new Author('', '', 'javascript book');
alert(aa.name); // shows default value 'anika'
alert(aa.age); // shows default value '4'
alert(aa.book); // shows value 'javascript book'

We can override the values of the base class using ‘call’ method-

function Person(name, age){
    this.name = name || 'anika';
    this.age = age || 4;
}

function Author(name, age, book){
   this.book = book;
   Person.call(this, name, age);
}

var aa = new Author('', 8, 'javascript book');
alert(aa.name); // shows default value 'anika'
alert(aa.age); // shows overridden new value '8'
alert(aa.book); // shows new value 'javascript book'

In all the above examples, ‘call’ function is used for a very important feature of Object Orientation – Inheritance. But ‘call’ may also be used for another feature – Composition. I will explain Composition using call, in the next article.

Passing parameters to anonymous functions in Javascript

ujjaini — Tue, 14 Dec 2010 23:29:46 +0000

An anonymous function in javascript executes immediately eg.

(function(){
	alert('This will execute immediately');
})();

If we want to use global objects, we can call them directly from inside our function

var global1 = 'GLOBAL 1';
var global2 = 'GLOBAL 2';
(function(){
	alert(global1);
	alert(global2);
})();

In a large project, there will be innumerable global objects – some created by other developers, some from third party libraries. To make our code more understandable and maintainable, we can pass these global objects as parameters of the anonymous function.

var global1 = 'GLOBAL 1';
var global2 = 'GLOBAL 2';

(function(para1, para2){
	alert(para1);
	alert(para2);
})(global1, global2);

In the above code, it becomes clear that we are using only 2 global objects – ‘global1′ and ‘global2′.

A good practical example would be when we are using 2 libraries, eg. Jquery and Yahoo. There might be functions with similar names in these two. To avoid confusion, we can write the code below -

(function($, Yahoo){
	// call a function from jquery library
	$.function1();
	// call a function from yahoo library
	Yahoo.function2();
})(Jquery, YAHOO);

Vertical scrollbar in HTML tables

ujjaini — Mon, 13 Dec 2010 05:57:48 +0000

There are many examples on the web which show us how to add a vertical scrollbar to an HTML table. However, these don’t look same in Firefox and IE. In Firefox, the scrollbar is always on the inside of the table. In IE, the scrollbar lies on the outside of the table. I wanted to see how to add a vertical scrollbar which would be on the inside of the table for both browsers. There are 2 reasons for this-
- uniformity among browsers
- in IE, the scrollbar on the outside of the table doesn’t look good.

The sample table is

here

HTML file


			


					CLICK BUTTONS TO SEE TABLES

			
			

				

					

						



Symbol
Trade Type
Price Paid
Date

Javascript file

 $(document).ready(function () {
	var $contentTableBody = $('table.content_table').find('tbody'), $placeholderTextDiv = $('div.placeholder_txt'),
	    $gridWrapper = $('div.grid_wrapper');
	$('input.showScrollTable').click(function(){
		$gridWrapper.show();
		$placeholderTextDiv.hide();
		$contentTableBody.empty();
		// add 18 records to table
		var $allrows = $("
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
");
		$contentTableBody.append($allrows);
		$('.header_table_wrapper').removeClass('header_table_wrapper_noscroll');
		$('.header_table').removeClass('header_table_noscroll');
		$('.content_table').removeClass('content_table_noscroll');
		$('.content_div').removeClass('content_div_noscroll');
		for (var i=len; i--;){
	        var $cell = $(allrows[i]).find('td');
			if (!($cell.hasClass('content_cell_1'))){
				$cell.addClass('content_cell_1');
			}
			if (!($cell.hasClass('content_cell_2'))){
				$cell.addClass('content_cell_2');
			}
			if (!($cell.hasClass('content_cell_3'))){
				$cell.addClass('content_cell_3');
			}
			if (!($cell.hasClass('content_cell_4'))){
				$cell.addClass('content_cell_4');
			}
        }
     });

	$('input.showNoScrollTable').click(function(){
		$gridWrapper.show();
		$placeholderTextDiv.hide();
		$contentTableBody.empty();
		var $allrows = $("
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
 
  SPY
 
  Buy
 
  12
 
  12/09/2010
");
		$contentTableBody.append($allrows);
		$('.header_table_wrapper').addClass('header_table_wrapper_noscroll');
		$('.header_table').addClass('header_table_noscroll');
		$('.content_table').addClass('content_table_noscroll');
		$('.content_div').addClass('content_div_noscroll');

		// set widths of all cells to auto, remove width
		for (var i=len; i--;){
	        var $cell = $(allrows[i]).find('td');
			if ($cell.hasClass('content_cell_1')){
				$cell.removeClass('content_cell_1');
			}
			if ($cell.hasClass('content_cell_2')){
				$cell.removeClass('content_cell_2');
			}
			if ($cell.hasClass('content_cell_3')){
				$cell.removeClass('content_cell_3');
			}
			if ($cell.hasClass('content_cell_4')){
				$cell.removeClass('content_cell_4');
			}
        }

	})
});

CSS file

body{
	font-size:11px;
}

table{
	text-align:left;
	margin:0;
	table-layout:fixed;
	border-collapse:collapse;
	border-spacing:0;
}

div.placeholder_txt{
	width:300px;
	height:300px;
	float:left;
}

.clr{
	clear:both;
}
div.main{
	margin:0 auto;
	width:500px;
}

div.text_wrapper{
	margin:100px 0 0 80px;
	font-size:14px;
	color:red;
}
/* WIDTH OF THE WRAPPER IS 300 px */
.grid_wrapper{
	width:300px;
	left:0;
	padding:0;
	position:relative;
	top:0;
}

/* WIDTH OF HEADER DIV IS SAME AS THAT OF THE WRAPPER */
.header_div{
	background:url("ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6;
	border:1px solid #D3D3D3;
	color:#555555;
	font-weight:normal;
	width:300px;
	border-left:0 none !important;
	border-right:0 none !important;
	border-top:0 none !important;
	margin:0;
	overflow-x:hidden;
	overflow-y:auto;
	padding:0;
	position:relative;
}

.header_table_wrapper{
	float:left;
	padding-right:20px;
}

table.header_table{
	width:282px;
}

table.header_table thead tr th{
	border-right:1px solid #D3D3D3;
	overflow:hidden;
	text-align:center;
	white-space:nowrap;
	height:22px;
	padding:0 2px;
	font-weight:normal;
}

.content_div{
	height:250px;
	width:300px;
	margin:0;
	overflow-y:auto;
	overflow-x:hidden;
	padding:0;
	position:relative;
	border-bottom:1px solid #AAAAAA;
}

.relative_div{
	position:relative;
}

.content_table_row{
	border:1px solid #AAAAAA !important;
    color:#222222;
}

tr.content_table_row td{
	border-right-color:inherit;
	border-right-style:solid;
	border-right-width:1px;
	text-align:center;
	border-bottom-color:inherit;
	border-bottom-style:solid;
	border-bottom-width:1px;
	font-weight:normal;
	height:22px;
	overflow:hidden;
	padding:0 2px;
	white-space:pre;
	*border-left:1px solid #AAAAAA !important;
}

td.content_cell_1, td.content_cell_2, td.content_cell_3{
	width:65px;
}

td.content_cell_4{
	width:67px;
}

div.button_wrapper{
	margin-top:10px;
}

/* SPECIAL STYLES FOR NO SCROLL SCENARIO */

.header_table_wrapper_noscroll{
	padding-right:0 !important;
}

.header_table_noscroll{
	width:300px !important;
}

table.content_table_noscroll{
	width:300px !important;
}

.content_div_noscroll{
	border-bottom:none;
}

Linked Lists using Javascript

ujjaini — Wed, 01 Dec 2010 00:06:51 +0000

Basic Linked list

I have written code for a single linked list.


/**
 * Linked List class
 *  set headItem to null
 */

function LinkedList(){
	this.headItem= null;
}

/**
 * Class for each item of linked list
 * @param {Object} val
 */
function Item(val){
	this.val = val;
	this.next = null;
}

LinkedList.prototype = {

	/**
	 * add an item at the head
	 * @param {Object} item
	 */
	insertAtHead:function(item){
		if (this.headItem == null) {
			this.headItem = item;
			this.headItem.next = null;
		}else{
			var temp = this.headItem;
			this.headItem = item;
			this.headItem.next = temp;
		}
	},

	/**
	 * add an item at the tail
	 * @param {Object} item
	 */
	insertAtTail:function(item){
		if (this.headItem == null){
			this.headItem = item;
			this.headItem.next = null;
		}else{
			var iter = this.headItem;
			while(iter.next != null){
				iter = iter.next;
			}
			iter.next = item;
			item.next = null;
		}
	},

	/**
	 * get number of elements in linked list
	 */
	getLength:function(){
		var iter = this.headItem, i= 0;
		while(iter.next != null){
			iter = iter.next;
			i++;
		}
		return i+1;
	},

	/**
	 * display all elements of linked list
	 */
	showAllElements:function(){
		var arr = [], iter = this.headItem, len = 0;
		while(iter.next != null){
			arr.push(iter.val);
			iter = iter.next;
			len++;
		}
		arr.push(iter.val);
		for(var i=0;i<=len;i++){
			console.log(arr[i]);
		}
	},

	/**
	 * returns last element of linked list
	 */
	findLastElement:function(){
		var i=0, iter = this.headItem;
		while(iter.next != null){
			iter = iter.next;
		}
		return iter;
	},

	/**
	 * remove an item from the head
	 */
	removeFromHead:function(){
		if (this.getLength() == 0)
		   throw new Error('You cannot remove elements from empty list');
		var temp = this.headItem;
		this.headItem = this.headItem.next;
		temp.next = null;
		return temp;
	},

	/**
	 * remove an item from the end
	 */
	removeFromTail:function(){
		if (this.getLength() == 0)
		   throw new Error('You cannot remove elements from empty list');
		var temp, iter = this.headItem;
		while(iter.next != null){
			temp = iter;
			iter = iter.next;
		}
		var last = temp.next;
		temp.next = null;
		return last;
	},

	/**
	 * insert an item n elements from head
	 * @param {Object} n
	 * @param {Object} item
	 */
	insertItemNthPositionFromHead:function(n, item){
		var i = 0, iter = this.headItem, temp;
		while(iter.next != null){
			if (i == n){
				temp = iter.next;
				iter.next = item;
				item.next = temp;
			}
			iter = iter.next;
			i++;
		}

	},

	/**
	 * find nth element from the end of the list
	 * there are 2 pointers, p and q
	 * when p is equal to n, start increasing q
	 * when p is null, q will point to the nth element from the end
	 * @param {Object} n
	 */
	findNthElementFromEnd:function(n){
		var iter = this.headItem, p=0, q = this.headItem;
		while(iter.next != null){
			if (p == n){
				q = q.next;

			}
			iter = iter.next;
			p++;
			if (q != this.headItem){
				q = q.next;
			}
		}
		return q;
	},

	/**
	 * reverses a linked list
	 * returns the first element of the reversed list
	 */
	reverseLinkedList:function(){
		var previous = null, next;
		while(this.headItem != null){
			next = this.headItem.next;
			this.headItem.next = previous;

			previous = this.headItem;
			this.headItem = next;
		}
		return previous;

	},

	/**
	 * show all elements of a reverse linked list
	 */
	showReverseLinkedList:function(){
		var firstItem = this.reverseLinkedList(), i = 1;
		console.log('The value of the first element in reversed list is ' + firstItem.val);
		while(firstItem.next != null){
		    i++;
			firstItem = firstItem.next;
			console.log('The value of the ' + i + ' th element in the reversed list is ' + firstItem.val);
		}
	}
}

To test the above, I have written this -